Читать

Урок 10. Рисуем навигационный сайдбар

01.12.2014 / Уроки

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

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

Урок 10. Рисуем навигационный сайдбар

Придадим форме лёгкую тень. Дважды кликнув по слою, перейдём в стили слоя и выставим примерно такие значения:

Урок 10. Рисуем навигационный сайдбар

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

Урок 10. Рисуем навигационный сайдбар

Подгоняем размер, создаём обтравочную маску (Ctrl+Alt+G) и затемняем изображение:

Урок 10. Рисуем навигационный сайдбар

Ну и пишем заголовок, придав ему тень, чтобы он читался на любых участках подложки (изображения):

Урок 10. Рисуем навигационный сайдбар

Создаём новый слой (Ctrl+Shift+N). Используя инструмент "Выделение" (М), проводим под изображением однопиксельную полоску от одного края белой подложки до другого:

Урок 10. Рисуем навигационный сайдбар

Заливаем цветом, который будет не сильно выделяться на белом фоне. Снимаем выделение (Ctl+D), затем используя клавишу Shift, двигаем стрелкой получившуюся полосу вниз. Теперь дублируем полосу (Ctrl+J) и также двигаем все последующие дубликаты полоски на равное расстояние:

Урок 10. Рисуем навигационный сайдбар

Напишем разделы портфолио и перед каждым пунктом нарисуем маркер - мелкий кружок, созданный инструментом "Эллипс", размноженный также как и однопиксельные разделители.

Урок 10. Рисуем навигационный сайдбар

Осталось показать как будет выглядеть тот или иной раздел при наведении курсором. Для этого под слоями с текстом и маркерами создаём новый слой, на котором рисуем фигуру "прямоугольник",  занимающую пространство от верхнего разделителя до нижнего. Придаём фигуре цвет чуть светлее разделителя. Готово!

Урок 10. Рисуем навигационный сайдбар


И по обыкновению вы можете скачать psd-исходник запакованный в архив весом 127 Кб
Скачать



Просмотров: 1127 /

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


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

В новом обзоре арта я собрал работы уже получившей славу на проекте deviantart.com - художницы из Сингапура под ником Sandara. Несмотря на то, что во многих работах главными действующими персонажами...


19.05.2015 / Арт

Внимание! Спойлеры!
Совсем недавно на ТВ показали продолжение популярного в недавнем прошлом сериала «Секретные материалы». Поделюсь своими впечатлениями.


28.02.2016 / Отзывы

В начале апреля 2016-го волшебный мир Гарри Поттера официально открылся в Universal Studios Hollywood. В истинном духе Голливуда торжественное открытие стало по-настоящему захватывающим.


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

Ко дню рождения Гарри Поттера (этот персонаж родился 31 июля 1980 г. и в этом году ему "как бы" исполняется 35 лет) хочется вспомнить этот феномен, привлекающий и по сей день своим волшебным миром.


30.07.2015 / Кино