Читать


Главная » 2017 » Ноябрь » 19 » Урок 26. Рисуем шапку с фотографией на фоне
19:41
Урок 26. Рисуем шапку с фотографией на фоне

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

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


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


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


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


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


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


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


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


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


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


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


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


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

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




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



Категория: Уроки | Просмотров: 58 | Добавил: M-Wizard | Теги: урок, фотошоп, Веб-дизайн | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


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


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