Читать


Главная » 2014 » Декабрь » 1 » Урок 3. Рисуем навигационное меню
01:00
Урок 3. Рисуем навигационное меню
Продолжаем изучать возможности фотошопа и в данном уроке нарисуем меню для сайта. Если вы верстаете проект с нуля или хотите изменить отдельный элемент (в данном случае меню), сначала необходимо нарисовать его. Обычно это делается со взглядом на весь дизайн, чтобы меню не выбивалось из стиля, так как является одним из самых значимых элементов страницы и навигации по сайту в целом. Но сейчас мы нарисуем произвольное меню, а фоном возьмём абстрактный размытый бэкграунд.

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

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

Меню мы сделаем прозрачным! Сразу стоит отметить, что переводить режим наложения слоя с "Нормального" на "Перекрытие" или "Осветление" не имеет смысла, так как при нарезке меню на составляющие графические элементы нужно сливать или отделять нужные слои и тогда все режимы наложения автоматически сменяются на "Нормальный". А значит при создании полупрозрачности нужно изначально работать именно в этом режиме наложения. Не буду вдаваться в подробности, так как мы знаем уже как работать со стилями слоя из предыдущих уроков, а просто приведу использованные мной настройки. Кликаем дважды по слою с нарисованной фигурой и выставляем:

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

Пол дела сделано! Напишем текст, выбрав соответствующий инструмент (Т), выделив имобласть прямоугольника и выбрав центрирование текста. Пишем пункты меню с интервалом между ними в 7 пробелов:

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

Опустим текст, чтобы он был посередине и по вертикали и определим ему необходимый цвет (в данном примере #b2dee3):

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

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

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

Зальём область белым цветом, уберём выделение (Ctrl+D) и выставим прозрачность слою 15%. А сам пункт, под которым мы создали выделение, сделаем белого цвета.

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

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

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

Зальём белым цветом. Дублируем слой (Ctrl+J) и подвинем новый слой на 1 пиксель влево или вправо. Затем инвертируем цвет (полоска станет чёрной), сольём с белой полоской (Ctrl+E) и выставим прозрачность 10%. Осталочь только продублировать этот разделитель и подвинуть в те места, где он необходим, и всё - меню готово!

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

Файл запакован в архив весом 186 KБ
Скачать


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

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


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