| Reddy |
Дата: Воскресенье, 26.09.2010, 18:38 | Сообщение # 1 |
|
Новичок
Статус: 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 |
|
спец по кнопачкам
|
|
|
|
|
