Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Кто вы?
Всего ответов: 313
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Веб-дизайн - Профессиональная кнопка навигации

Профессиональная кнопка навигации

Профессиональная кнопка навигации

Начните, создав документ 217х145 пикселей с прозрачным фоном.

pro_nav_button_2.jpg

Теперь инструментом Paint Bucket (заливка - G) и серым цветом залейте фон. Вот, что получится (без светло-серой рамки!)

pro_nav_button_3.jpg

Теперь нам надо добавить градиент. Layer > Layer Styles > Gradient Overlay. Чтобы настроить цвета заливки, кликните по цветному прямоугольнику, подписанному как Gradient. Откроется окно, где Вы сможете настроить цвет градиента

pro_nav_button_4.jpg

Чтобы выбрать тип градиента, когда цвет переходит в прозрачный фон, выберите вторую иконку слева. Кликните ОК

Установите параметр Opacity на 44%. Если в цветном прямоугольнике черный цвет находится справа, а прозрачный фон - слева, оставьте галочку Reverse. Если же черный цвет слева, а прозрачный фон - справа, снимите ее.

pro_nav_button_5.jpg

Нажмите ОК

pro_nav_button_6.jpg

Создайте новый слой. Выберите инструмент Rectangle Tool и цвет #d69b17 и нарисуйте прямоугольник сверху так, чтобы он немного выходил по ширине за пределы документа.

pro_nav_button_7.jpg

Теперь добавьте к этому слою Layer > Layer Style > Inner Shadow:

pro_nav_button_8.jpg

Нажмите ОК

pro_nav_button_9.jpg

Выбрав инструмент прямоугольного выделения, выделите половину оранжевого прямоугольника и нажмите CTRL+U, чтобы вызвать окно Hue/Saturation. Установите значения, как на рисунке ниже и нажмите ОК

pro_nav_button_10.jpg

Вот, что должно получиться

pro_nav_button_11.jpg

Мы почти закончили. Осталось только добавить текст и все, что захочется. Я добавил изображение ноутбука, текст и пару линий. Вот, что у меня получилось:

Профессиональная кнопка навигации

Готово! ;)



Похожие материалы:


Просмотров: 1333 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz