Читать
Главная » Архив » Урок 10. Рисуем навигационный сайдбар

Урок 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 Кб
Скачать



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

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


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