Страница 1 из 11
Форум » Adobe Photoshop » Уроки для Photoshop » Меню быстрого приготовления - часть 1 (рисуем)
Меню быстрого приготовления - часть 1
Reddy Дата: Воскресенье, 26.09.2010, 18:38 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Шагов: 4
Уровень: Простой
Дополнительные инструменты: Не требуются

Фишка данного меню в том, что основная и выводимая поверх картинки выполнены в одном изображении. Вы спросите - а зачем, если можно просто сделать две картинки? Так, как изображение загружается всё и сразу, то при наведении мышью на менюшку та картинка, что должна выводится поверх, будет появляться моментально - ведь браузер уже загрузил всё изображение целиком, и ему не надо подгружать вторую картинку. С помощью данного способа удобно делать меню, в которых используется много графического и, как следствие, "тяжёлого" материала.

01. Создаём новый документ, причём высоту берём с двухкратным запасом, т.е. если меню будет иметь высоту 25 пикселей, то высота документа должна быть 50. В дангном случае размер составил 500х54 пикселя. С помощью Rounded Rectangle Tool (радиус 4 пикселя) выделяем область, которая должна быть на пиксель меньше общей ширины и половины высоты нашей основы, что для данного примера составляет 498х25.Цвет заливки не важен.



Применим следующие стили (цвет выбираем согласно необходимому результату):

Inner Shadow



Gradient Overlay



Stroke



В результате получаем готовую основу меню:



02. Создаём новый слой. Инструментом Pencil Tool рисуем вертикальные полосы, которые будут играть роль разделителей между пунктами меню.



Выставляем прозрачность слоя равной 40%

03. С помощью Type Tool пишем названия пунктов меню



04. Основная часть меню сделана, теперь переходим к изготовлению второй части, что будет выводится поверх основного изображения при наведении курсором мыши. Для этого в панели слоёв выделяем все слои (включая текстовые), кликаем правой кнопкой мыши и выбираем "Duplicate Layers". Далее, не снимая выделения с получившихся слоёв-копии, двигаем их (при помощи Move Tool) таким образом, чтобы они оказались под "основным" меню.

Теперь остаётся изменить стиль основы второй части таким же образом, что и в первом пункте данного урока - например, заменив цвет фона



Теперь осталось "оживить" наше меню с помощью HTML и CSS, так что добро пожаловать во вторую часть (в процессе)

© www.otherside.ws
спец по кнопачкам
 
Форум » Adobe Photoshop » Уроки для Photoshop » Меню быстрого приготовления - часть 1 (рисуем)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz