Создаем красивое, легкое вертикальное меню навигации

Быстро и легко!Создаем красивое, легкое вертикальное меню навигацииПриблизительное время выполнения: 5 минут

Инструментом Rounded Rectangle с радиусом угла 20рх, цветом #1d97bc и настройками как на рисунке ниже, нарисуйте скругленный прямоугольник на новом слое. Затем вытащите эти 4 гайда.clean-vertical-menu_1.jpgВыберите инструмент Pen, зажмите CTRL и кликните рядом с границей прямоугольника. Вы увидите “путь” (path). Приблизьте левый угол, зажмите ALT и нажмите на две точки (1,2). Затем отпустите ALT и кликните по точке 3, чтобы ее стереть. Зажмите CTRL, кликните по точке 4 и не отпускайте кнопку мыши! Отпуститу CTRL (все еще держа зажатой кнопку мыши!), нажмите SHIFT и перетащите эту точку к нашим гайдам.clean-vertical-menu_2.jpgПовторите то же самое и с нижним правым углом.clean-vertical-menu_3.gifПримените к слою следующие стилиclean-vertical-menu_4.gifНаверху напишите Menuclean-vertical-menu_5.gifИспользуя Pencil (карандаш), на новом слое нарисуйте черным цветом горизонтальную линию, а под ней такую же белую. Измените непрозрачность этого слоя до 18%, скопируйте его и подвиньте вниз. Повторите так несколько раз.clean-vertical-menu_6.gifМежду двумя такими линиями выделите прямоугольную область и на новом слое залейте ее цветом #75c5de. Так для всех позиций меню.clean-vertical-menu_7.gifНапишите текст.clean-vertical-menu_8.gifТеперь сделаем эффект осветления для одной из позиций (чтобы пользователь понимал, на какой из страниц он находится). Выделите область кнопки, создайте новый слой и поместите его под текстовые. Используйте инструмент Gradient и залейте выделение.clean-vertical-menu_9.gifСоздаем красивое, легкое вертикальное меню навигацииГотово! ;) Источник:

Популярность:7%

Классная кнопка с отливом Классная кнопка с отливом
Узнайте, как сделать эту классную, несложную кнопку!Приблизительное время выполнения: 5 минутЧитать полностью »Популярность:9%

Создаем красивое лого в стиле Веб 2.0 Создаем красивое лого в стиле Веб 2.0
Всего за семь минут Вы сможете сделать первоклассное Web 2.0 лого для своего сайта!Приблизительное время выполнения: 7 минутЧитать полностью »Популярность:18%

Новое лого! Продолжаем тему Веб 2.0 Новое лого! Продолжаем тему Веб 2.0
Создаем в Photoshop отличное, стильное лого в стиле Веб 2.0Приблизительное время выполнения: 8 минутЧитать полностью »Популярность:17%

Стильная голубая кнопка Стильная голубая кнопка
Этот урок расскажет Вам, как сделать небольшую, но стильную голубую кнопку для Вашего сайта.Читать полностью »Популярность:10%

Как сделать стильную форму поиска Как сделать стильную форму поиска
Создаем красивую форму поиска для Вашего сайта!Приблизительное время выполнения: 9 минутЧитать полностью »Популярность:12%