Читать

Урок 26. Рисуем шапку с фотографией на фоне

19.11.2017 / Уроки

Предположим, мы задумали сайт с большой красочной фотографией в шапке и не хотим нагромождать её никакими блоками. Использовать можно только шрифты и минимум графики. Нюансов в этом случае немало.

Начнём с меню. Я уже как-то расписывал подробный урок по рисованию навигационного меню, но на этот раз оно будет немного другим, а именно, будет располагаться не на подложке, а на фоне изображения со всеми вытекающими.


Урок по фотошопу. Рисуем шапку с фотографией на фоне


Изображение в шапке несомненно смотрится очень выигрышно, но есть один нюанс: всё, что будет располагаться поверх этого изображения, может потеряться, стать нечитабельным или испортить впечатление, оказавшись в не очень удачном месте. Основным решением этой проблемы является затемнение. Просто создадим новый слой поверх фотографии (Shift+Ctrl+N) и зальём его чёрным цветом. Прозрачность слоя выставим = 40%


Урок по фотошопу. Рисуем шапку с фотографией на фоне


Дублируем слой с затемнением (Ctrl+J) и выберем маску слоя. Нам нужно затемнить только верхнюю часть, поэтому мы удалим лишнюю область градиентом (G).


Урок по фотошопу. Рисуем шапку с фотографией на фоне


В таком виде уже можно добавлять любые надписи. Читабельность будет превосходной.


Урок по фотошопу. Рисуем шапку с фотографией на фоне


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


Урок по фотошопу. Рисуем шапку с фотографией на фоне


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


Урок по фотошопу. Рисуем шапку с фотографией на фоне


Исходник урока, запакован в архив - 1,2 МБ

Скачать архив




Самые первые уроки, расчитанные для начинающих, смотрите здесь.





Просмотров: 747 / Теги: урок, фотошоп, Веб-дизайн

Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ

О сериале «Очень странные дела»

Внимание! Возможны спойлеры!
Продукт компании Netflix «Очень странные дела» разделён на 8 серий, продолжительностью в среднем 50 минут. А это значит, что зрителя ждёт почти 7 часов увлекательного просмотра!


19.10.2016 / Отзывы

Поттермор

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


01.10.2016 / Любопытное

В современном веб-дизайне много минимализма. А в графическом направлении преобладает плоский стиль. Всё реже можно увидеть объёмные кнопки, массивные рамки или переливающиеся иконки.


23.07.2015 / Уроки

Вновь немного вдохновляющего арта с проекта dribbble! Плоский стиль сейчас на пике популярности. Ведь он несёт собой не только простоту и лаконичность, но и дарит необычный взгляд на обычные вещи.


31.05.2016 / Арт



ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ