[картинка не сохранилась]
Учимся создавать Web 2.0 Навигационное Меню.
Всем привет! Простите что долго не писал уроки, занят был очень сильно.
В этом уроке научимся делать красивое Навигационное меню. Начнем.
1. Создаем новый документ 600 * 140px и при помощи Rounded Rectangle Tool рисуем прямоугольник как на рисунке:
[картинка не сохранилась]
2. Применяем к данному слою следующие настройки: Inner Glow
[картинка не сохранилась]
3. Gradient Overlay: #5e80a3 ,#839db8 и #b8c7d6
[картинка не сохранилась]
4. Stroke: #5e80a3
[картинка не сохранилась]
5. Должно получиться что-то такое:
[картинка не сохранилась]
6. Выбираем инструмент Текст Т, и шрифтом Segoe 14 pt #ffffff напишем наши ссылки (я при выполнении урока использовал шрифт поменьше).
[картинка не сохранилась]
7. Применим к слою с текстом следующие настройки Stroke: #53769a
[картинка не сохранилась]
8. Создаем новый слой и при помощи Rectangle Marquee Tool рисуем прямоугольник шириной 1px и цветом #ffffffs, как показано на рисунке (советую нарисовать только один разделитель, потом будет легче):
[картинка не сохранилась]
9. Теперь при помощи Rectangle Marquee Tool (прямоугольное выделение) создаем выделение как на рисунке (где-то на треть от конца разделителя), после чего идем в Select -> Modify -> Feather (у меня в CS2 Select ->Feather) и выставляем параметр 5px Radius, после чего нажимаем Del чтобы добиться следующего результата:
[картинка не сохранилась]
10. Копиреум слой с разделителем необходимое нам раз (можно воспользоваться кнопкой Alt, выбрать слой, который мы будем копировать, и зажав Alt, перетаскиваем разделитель в нужное нам место, появится новый слой с копией)Теперь меняем layer blend mode на Soft Light и получаем:
[картинка не сохранилась]
11. Далее при помощи Rectangular Marquee Tool на новом слое, который мы создадим под слоем с тестом, рисум прямоугольник любого цвета, как показано на рисунке, имитируя наведение на ссылку, которое потом будем использовать на нашей страничке:
[картинка не сохранилась]
12. Применим к этому слою следующие настройки Gradient Overlay : #567595, #728fae #b3c3d3
[картинка не сохранилась]
13. Получаем:
[картинка не сохранилась]
14. Теперь создадим окно поиска используя Rounded Rectangle Tool с 2px закругления углов и цветом #ffffff
[картинка не сохранилась]
15. Применим к слою следующие настройки: Inner Shadow
[картинка не сохранилась]
16. Gradient Overlay: от #e6e6e6 до #ffffff
[картинка не сохранилась]
17. Stroke: ##5e80a3
[картинка не сохранилась]
18. Получаем:
[картинка не сохранилась]
19. Теперь осталось написать “Search” используя шрифт Segoe 12pt цветом #7b7b7b
[картинка не сохранилась]
20. Теперь осталось добавить иконку поиска (в виде лупы) и наше меню готово! Я думаю это не сложный урок, буду ждать Ваших результатов на форуме. Удачи! :-)
[картинка не сохранилась]
А вот что получилось у меня:
[картинка не сохранилась]
Автор: http://pscloud.com/
Перевод: Joke83
Если кому надо, можно скачать исходник в PSD 62 Кб (который получился у меня).
Оригинал: снимок Wayback Machine от 01.12.2007.