Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

211 383 чел. 401 822 работы 4 107 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Разрабатываем дизайн для шаблона сайта в Фотошоп

В этом уроке вы узнаете, как совсем несложно можно создать дизайн с прозрачными кнопками для шаблона сайта.

Финальный результат:

Начнем наш урок с создания нового документа размером 960 x 900 пикселей. Я установил цвет переднего плана  #141414, затем, взяв инструмент Paint Bucket Tool (Заливка), кликнул один раз по изображению.
Я взял инструмент Brush Tool (Кисть), и, выбрав мягкую круглую кисть, нарисовал на новом слое три большие точки на изображении, используя следующие цвета: #a864a8, #ed1c24, #662d91.

Обратите внимание, что размер кисти нужно взять 600 пикселей.

Затем выберите в меню фильтр Filter > Noise > Add noise (Фильтр-Шум-Добавить шум).

Я использовал следующие параметры:

Ваш шаблон будет выглядеть следующим образом:

Затем выберите Filter > Blur > Motion Blur (Фильтр-Размытие-Размытие в движении).

В окне настроек фильтра устанавливаем угол 90 градусов, смещение 998 пикселей.

Как видите, оказалось совсем несложно создать такой красивый фон для нашего сайта. Вот так должно получиться.

Создайте новый слой (можно нажать для этого CTRL+SHIFT+ALT+N).

Снова возьмите инструмент Brush Tool (Кисть), установите белый цвет переднего плана. Я снова выбрал мягкую круглую кисть большого диаметра.

Затем этой кистью нарисуйте большое пятно на изображении.

Поменяйте режим наложения этого слоя на Overlay (Перекрытие).

Теперь начнем добавлять детали в наш шаблон. Будем создавать панель навигации. Для этого возьмите инструмент Rectangle Tool (Прямоугольник) и нарисуйте фигуру прямоугольника наверху шаблона.

Затем я взял инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) и установил в параметрах радиус 6 пикселей.

Я включил видимость сетки, потому что хочу сделать точное выравнивание элементов в последующих шагах (для этого выберите в меню View > Show > Grid – Просмотр-Показать-Сетку).

При помощи инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами) создайте три прямоугольника, как показано ниже.

Теперь для всех созданных слоев с прямоугольниками добавьте следующие стили слоя (поставьте Fill  (Заливка) 10% и установите указанные параметры на вкладках Bevel and Emboss (Тиснение) и Stroke (Обводка)):

У вас получится такой результат.

(кликните для увеличения)

Я нарисовал еще фигуры прямоугольников также с помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами).

Для этих прямоугольников добавьте такие стили слоя (на вкладках Outer Glow (Внешнее свечение), Color Overlay (Наложение цвета) и Stroke (Обводка)).

Вот такой получится результат.

Теперь добавьте нужный вам текст. Используйте для этого инструмент Horizontal Type Tool (Горизонтальный текст). Я написал произвольный текст в качестве образца.

Затем можно добавить некоторое изображение вверху шаблона. Я использовал готовое 3D изображение голубого цвета. О том, как создать это изображение, вы можете узнать в этом уроке.

Примечание. Перевод данного урока на photoshop-master.ru

По бокам от этого изображения я добавил две стрелки, используйте для этого инструмент Custom Shape Tool (Произвольная фигура).

В результате получился такой шаблон сайта.


(Кликните для увеличения )

Автор: grafpedia

Комментарии 283

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Спасибо Огроменное!!!! Урок классный и очень полезный)

Очень понравилось работать над этим уроком, спасибо!

Уважаемый переводчик, хотелось бы больше уроков от автора grafpedia! Это самые удачные уроки, из всех, которые я выполняла. Спасибо вам огромное! Очень понравился этот урок, жду новых переводов! Желаю вам творческих успехов и вдохновения! Благодарю!

Спасибо! даже не думала, что можно добиться такого красивого фона такими простыми приемами.

Вроде и урок не сложный, увлек, просидел над ним весь вечер.
Спасибо, мне понравился.

Хороший урок. Все просто и понятно!

Спасибо, замечательный и полезный урок!

Спасибо,урок хороший - без заморочек.

Спасибо! Хороший урок

Спасибо большое за урок!

вот что получилось у меня!))) спасибочки за урок пригодиться)))

Максим, а Вы создайте свой урок, я посмотрю насколько Ваш урок будут оценивать. Если слабо даже половину сделать из того, что сделали автор и переводчик, то я смею назвать Вас невоспитанным, глупым мужланом.

А урок хороший! Спасибки!

Спасибо за очень интересный и полезный урок!

А я решила простенько сделать. )))

Еще 30
Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules