Рисуем Web 2.0 панель навигации в Photoshop. | Web дизайн | Уроки и статьи

thumb_wg_watercolor_smudges_vol2-8880650 Набор кистей для программы Photoshop, различных вариантов мазков кистью с акварельной краской. Формат файлов: ABR   Размер архива: 9 МБ… 30-minimalitic-metal-photoshop-styles_mini-2086370Лучшие стили эффекты металла. Прекрасно работает для текста и иконок!  3. Asl файлов  3. Psd файлы  Подробная Read Me  Превью… cloudify_action_preview_mini-6273882 Action для программы Фотошоп, легко превратит любой обычный текст облако букв. Размер архива:1.44… thumb_php_login__user_management-6393731 Данный скрипт использующий PHP и MySQL, является готовой системой управления пользователями, вы можете использовать этот скрипт для интеграции в вашу… Этот плагин jQuery, позволяет вам размещать различную информацию в модальном окне, это может быть реклама, приветственные сообщения, видео ролики. Также… thumb_pg_newsletter_pro-6606680 PG Newsletter PRO – это мощная система сервиса E-mail маркетинга, которая позволяет пользователям отправлять HTML и текстовые информационные письма для…

np_545643_mini-9685409

В этом уроке вы увидите как с помощью несколько несложных приёмов нарисовать панель навигации для сайта стиля Web 2.0 в программе Photoshop. И для начала создадим в фотошопе новый проект размером 550 на 150px. цвет фона я выбрал # 686868. Теперь установим направляющие которые очень сильно облегчают работу, в общем без них не как. В нашем случае панель навигации будет 50px. в высоту, и мы сделаем три кнопки размером 166 px. в ширину.

np-00_-8394731

Создадим новый слой с названием «Фон навигации», и на этом слое с помощью инструмента  Прямоугольное выделение сделаем как на изображении ниже и зальём выделенную область  цветом # 2c2c2c.

np-01_-8733990

Теперь снимем выделение (Ctrl+D) и зайдем в стили слоя  «Фон навигации», и зададим легкий градиент как показано ниже на изображении.

np-03_-9819843

Вот получившийся результат лёгкого градиента.

np-05_-4601789

Теперь создадим новый слой, на котором инструментом Прямоугольное выделение разделим нашу панель навигации пополам, выделенную область зальём белым цветом и снимаем выделение .

np-06_-6758302

Уменьшим непрозрачность последнего слоя до 8%

np-07_-9632494

И так теперь нам нужно добавить разделяющие линии кнопок, для этого создадим новый слой и возьмём инструмент Однопиксельное выделение (вертикальная строка) и по вертикальным направляющим делаем выделение, которое заливаем белым цветом.

np-11_-8021926

Конечно теперь нужно удалить ненужные выступающие за пределы панели навигации линии, для их удаления возьмём опять же инструмент Прямоугольное выделение, делаем выделение как на изображении ниже и нажимаем клавишу Delete, тем самым удалим всё что в области.

np-12_-4413550

Тоже сделайте и с нижней частью панели навигации, после чего уменьшим непрозрачность линий да 30%.

np-13_-5616027

Теперь создадим новый слой назовём «Активный», берём инструмент Прямоугольное выделение которым делаем выделение по размеру средней кнопки панели навигации и заливаем любым цветом у меня это синий.

np-14_-7196994

Теперь заходим в стили слоя «Активный» и придаём стили как на изображениях ниже.

np-15_-6331301

np-16_-3148185

np-18_-1901076

Ну вот осталось добавить необходимы текст и панель навигации для сайта в стиле Web 2.0 готова.

np-19_-4004365

Набор векторных рамок без фона с декоративным орнаментом. Формат файлов: TIF – AI  Размер архива: 17 МБ… Набор красивых шаблонов для создания рекламных баннеров на музыкальную тематику. Формат файлов: 4 EPS — AI      Размер архива: 16… graphicriver-netitemextended-set-of-retro-vintage-web-elements1710250_mini-5852667 Хороший набор ретро старинных эмблем для использования в web дизайне. Большой выбор различных вариантов значки, промо наклейки, ленты, ценники, меню,… deti_spyat_mini-5246761 Набор фото клипарта высокого качества, дети спят. Файлы в архиве: 7 JPG изображений, имеющие средний размер 3550 на 2770 px.   Размер архива:… Набор фото клипарта высокого качества, на тему старинных часов, часовых механизмов. Формат файлов: JPG 10 изображений.   Размер архива: 90… Набор из 5 изображений красивых морских ракушек лежащих на песке, с разрешением 8000 на 5400 px. Формат файлов: JPG   Размер архива: 55 МБ…