Дополнения

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

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

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

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

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

Креативный дизайн для блога

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

Шаг 1. Создайте новый документ (CTRL+N) 1280 px x 1500 pxразрешением (Resolution) 72 пикселя и цветовым режимом RGB (Mode RGB Color). Залейте фон (background) тёмно-синим цветом (#041d51). Инструментом «Прямоугольник» (Rectangle Tool) в режиме контуров нарисуйте прямоугольник в верхней части документа, клик ПКМ и выберите «образовать выделенную область» и на новом слое залейте любым цветом, примените стиль слоя «Наложение градиента»\GradientOverlay (линейный, цвета #041d51 #01151d).

Шаг 2. Рисуем шапку. Инструментом «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool) в режиме «выполнить заливку пикселов», радиус скругления 16 рх,  нарисуйте прямоугольник на новом слое, назовите «шапка».

Шаг 3. Дублируйте слой «шапка» (Ctrl+J), инструментом «Перо» (Pen Tool) в режиме контуров отрежьте фигуру, как показано ниже.

Примените стили слоя: Тень\Drop Shadow.

Тиснение\Bevel and Emboss.

Глянец\Satin.

Наложение цвета\ Color overlay .

Шаг 4. Нарисуйте потёки краски (например, нарисуйте пером контур и залейте контур любым цветом) или найдите подходящее изображение и вставьте на новый слой, назовите «краска» .

Шаг 5. Деформируйте слой, как показано ниже при помощи Редактирование\Трансформирование\Деформация (Edit\Transform\Warp).

Объедините слой «краска» с предыдущим «шапка (копия)» (Ctrl+E). Добавим декоративные элементы на этом же слое инструментом «Кисть» (Brush)

Шаг 6. Дублируйте слой, удалите стили слоя, загрузите выделение слоя (Ctrl+клик по миниатюре слоя) и в меню Фильтр\Размытие\Размытие по Гауссу (Filter\ Blur\ Gaussian blur), радиус 10. Кисточкой нарисуйте брызги (поищите в интернете), инструментом «Ластик» (Eraser Tool) с мягкими краями сотрите лишнее и примените стиль слоя «Наложение градиента»\GradientOverlay.

Шаг 7. Добавьте брызги на слое «шапка» и примените стиль слоя «Наложение градиента»\GradientOverlay.

Шаг 8. Загрузите выделение слоя «шапка» (Ctrl+клик по миниатюре слоя), создайте новый слой и нарисуйте брызги и скопируйте стили слоя со слоя «шапка (копия)».

Шаг 9. Инструментом «Текст» (Type Tool) напишите название блога.

Растрируйте текст (клик ПКМ по слою с текстом и выберите «Растрировать текст»),  добавьте слой-маску и, оставаясь на маске, нарисуйте брызги; кликните по миниатюре слоя и добавьте брызги .

Примените стили слоя: Тень\Drop Shadow.

Тиснение\Bevel and Emboss.

Глянец\Satin.

Наложение градиента\Gradient Overlay.

Шаг 10. Создайте новый слой и на палитре слоёв расположите ниже слоя с текстом, нарисуйте новые брызги и примените стили слоя: Внешнее свечение\Outer Glow.

Тиснение\Bevel and Emboss.

Наложениеградиента\Gradient Overlay.

Шаг 11. На новом слое напишите слово «Blog» и примените стили слоя Наложение градиента\Gradient Overlay и Тиснение\Bevel and Emboss.

Шаг 12. Инструментом «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool) нарисуйте прямоугольник для контента  на новом слое, назовите «контент», заполните цветом  #e7e2d5, под шапкой нарисуйте прямоугольное выделение и на новом слое залейте линейным градиентом.

Шаг 13. Нарисуйте кнопку «Search» (на новом слое  «Прямоугольник со скруглёнными углами» (Rounded Rectangle Tool) нарисуйте прямоугольник, клик ПКМ, образуйте выделенную область, залейте любым цветом) и примените стили слоя для кнопки Search Наложение градиента\GradientOverlay.

Тень\Drop Shadow.

Обводка\Stroke.

Шаг 14. Нарисуйте форму для поиска и примените стили слоя
Внутренняя тень\Inner Shadow.

Наложение градиента\GradientOverlay.

Обводка\Stroke.

Шаг 15. Добавляем информацию в правой колонке.

Шаг 16. Добавим брызги в области контента на новом слое.

Примените стили слоя: Тиснение\Bevel and Emboss.

Наложение градиента\GradientOverlay.

Шаг 17. Добавляем названия ссылок.

Шаг 18. Добавляем изображения, к изображениям примените стили слоя Тень\Drop Shadow и Обводка\Stroke (1рх).

Конечный результат

Автор: Alexandra Fomicheva

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

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

Очень клевый урок.Спасибо.

Не понятно мне было только как с размерами...ширины...выстота...шапки....и т.д. Учюсь. Пока что так вот получается.

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

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

Спасибо. Делала с другими кистями. Но результат получился не плохой

Ух, спасибище!Очень классный урок*о*

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

Идея шапки супер! Спасибо :)

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

Классный урок! Очень понравилось делать шапку. Спасибо!!! ;)

не все получается. но буду учиться дальше

Спасибо за урока. Начинающим веб - дизайнерам - самыр раз!

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

Спасибо. Прикольная вышла шапка для сайта. )))

Получилось не с первого раза... Но очень уж хотелось сделать :) Домучила :)

Мой вариант музыкального блога. Спасибо за ценные идеи!

Еще 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