Страница 1 из 11
Форум » Adobe Photoshop » Уроки для Photoshop » Стеклянная навигация сайта (Techy Navigation Bar)
Стеклянная навигация сайта
Reddy Дата: Понедельник, 12.07.2010, 22:25 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Шагов: 5
Уровень: Средний
Дополнительные инструменты: Не требуются

01. Как обычно, начинаем с создания нового документа, размерами 550 на 100 пикселей и чёрным фоном. Сразу же создаём новый слой, и на нём, с помощью Rounded Rectangle Tool делаем площадку под основание наших кнопок размером 100х75 пикселей. Сразу же применим следующие стили:

Bevel and Emboss

Stroke (градиент #2f2f2f и #ffffff)

В итоге получаем готовую площадку:

02. Создаём новый слой. С помощью Rectangular Marquee Tool (или Pen Tool) выделяем верхнюю часть основания, и заливаем её белым цветом:

03. Зажав Ctrl кликаем левой кнопкой мыши в панели слоёв на превью нашего слоя с основанием, чтобы появилось выделение его границ:

не убирая это выделение, выбираем там же наш последний слой с заливкой, и выбираем Select --> Inverse, и после того, как выделение стало инверсным, жмём клавишу Delete, чтобы заливка оказалась в пределах нашего основания. Добавив Gradient Overlay (цвета градиента: #4f4f4f и cfcfcf)

У нас должно получится полностью готовое основание

04. Теперь, с помощью Type Tool пишем названия для кнопок. (Цвет верхнего ряда - #dfff3f, второй - #ffffff)

Далее, добавим вертикальных разделительных линий. Для этого тем же Type Tool набиваем пять-шесть тире, и используя Edit --> Transform --> Rotate 90 cw, делаем из них вертикальные столбцы.

05. Добавляем квадратики с цифрами - Rectangular Marquee Tool выделяем нужного размера область, и заливаем белым цветом, затем добавляем номера. Всё, менюшка готова :)

Базовый источник

спец по кнопачкам
 
Reddy Дата: Среда, 14.07.2010, 21:19 | Сообщение # 2
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Для тех, кто хочет сделать полноценное меню (чтобы при наведении мышью менялся цвет того или иного элемента меню), стоит проделать следующее:

01. Открываем psd файл с нашим творением. С помощью инструмента Crop Tool (C) обрезаем его до размеров 500х75 пикселей. Сохраняем файлик под названием back.png (можно и gif, не принципиально)

02. теперь будем делать картинку, которая будет вызываться при наведении на один из пунктов меню. Для начала определимся, какой элемент будет меняться при наведении. Я выбрал квадратики с цифрами - заменил их белый фон на зеленовато-жёлтый. Остальные слои просто отключаем, но размер оставляем такой же - 500х75. Сохраняем как hover.png

Теперь переходим непосредственно к созданию кода меню.

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

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