Читать

Урок 30. Рисуем навигационное меню

19.11.2018 / Уроки

Сейчас популярен минимализм и плоский стиль в веб-дизайне, однако есть отдельная сфера (сфера игр), где преобладают насыщенные графикой элементы. Попробуем нарисовать подобное навигационное меню: объёмное, с разными эффектами и текстурой, в общем, основательное.

Начнём с формы. Используя инструмент "Прямоугольник со скруглёнными углами", рисуем вытянутую форму меню.


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


Предположив, что наше меню будет имитировать деревянную доску, добавим пару трещин форме. Для этого выберем инструмент "Перо" и нарисуем трещины, выбрав в панели "Вычесть переднюю фигуру".


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


Выйдя из режима редактирования прямоугольника (Enter, чтобы контур фигуры перестал быть активным), делаем дубликат слоя (Ctrl+J) и опускаем стрелкой фигуру-исходник на несколько пикселей строго вниз.


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


Теперь переходим к верхнему слою. Пора разместить на нём текстуру. Текстура должна быть хорошего качества, а рисунок не слишком крупный, но и не слишком мелкий. В нашем примере мы используем текстуру необработанного дерева. Разместив текстуру над верхним слоем, создаём обтравочную маску (Ctrl+Alt+G).


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


Чтобы текст поверх текстуры лучше читался стоит приглушить дерево. Для этого предлагаю использовать новый слой с заливкой цвета фона. Этот слой также должен обтекать форму меню в виде обтравочной маски, а режим наложения его должен быть изменён на умножение. Прозрачность слоя меняем на 50%.


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


Дублируем 2 слоя (текстуру дерева и слой "умножение"), перемещаем их над нижней фигурой меню (вновь обтравочная маска) и стрелкой опускаем вниз так, чтобы рисунок не совпал с верхней частью меню. А умножение слоя над текстурой изменяем на 80%.


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


Закончим работу с нижней частью, зайдя двойным щелчком по слою-фигуре в стили слоя и добавив 2 эффекта: "Внутреннюю тень" и "Тень".


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


Теперь переходим к верхнему слою-фигуре. Также переходим в стили слоя и добавляем 3 эффекта: "Наложение градиента", "Тень" и "Внутреннюю тень".


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


По задумке мы рисуем меню для игрового сайта, поэтому один из пунктов нужно выделить особенным образом. Для этого создадим новый слой высше остальных и окрасим его в какой-нибудь яркий цвет, например красный, а затем изменим режим наложения слоя на "Перекрытие", прозрачность - на 50%, и конечно, придадим форму фигуры-основания (создадим обтравочную маску Ctrl+Alt+G). Этот же слой нужно будет продублировать и переместить ниже, оставив его настройки без изменений.


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


На границе между цветами рисуем две двухпиксельные полоски (инструментом "линия"). Одна линия должна быть чёрного цвета, другая - белого. Режим наложения обоих слоёв изменяем на "Перекрытие", а прозрачность примерно на 30%.


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


Осталось расставить ссылки. Мы не станем перегружать их эффектами, можно ограничиться небольшой тенью.


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


Ну и, пожалуй, стоит выделить какой-нибудь пункт при наведении. Для примера я использовал форму кнопки и "поигрался" со стилями слоя. Но это уже дело вкуса.


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


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

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




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





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

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

avatar


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


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