Реклама

Фотошоп для фотографа 2013

Создаем навигационную панель web 2.0 используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Низкая

В данном уроке Фотошопа мы рассмотрим процесс создания навигационной панели web 2.0.


Финальный результат

Создаем навигационную панель web 2.0 используя Фотошоп

Приступаем к уроку Фотошопа


Создайте новый документ 600х150 пикселей с черным фоном (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")) на новом слое (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) нарисуйте черный скругленный прямоугольник и добавьте к нему следующие стили слоя (Blending Options (Параметры наложения)): ↓

Bevel and Emboss (Тиснение и рельеф), Stroke (Обводка).


Создаем навигационную панель web 2.0 используя Фотошоп

Создаем навигационную панель web 2.0 используя Фотошоп

У Вас должно получиться что-то вроде этого: ↓


Создаем навигационную панель web 2.0 используя Фотошоп

Теперь создайте новый слой над уже существующим и инструментом Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") нарисуйте подобный контур: ↓


Создаем навигационную панель web 2.0 используя Фотошоп

Кликните по контуру правой кнопкой и выберите Make a selection (Создать выделение). Заполните его белым цветом.


Создаем навигационную панель web 2.0 используя Фотошоп

Кликните по иконке слоя с прямоугольником с зажатой клавишей CTRL, чтобы выделить его содержимое.


Создаем навигационную панель web 2.0 используя Фотошоп

Далее Select > Inverse (Выделение > Инверсия выделения / Сочетание клавиш "Ctrl+Shift+I") и клавишу DELETE, чтобы обрезать все лишнее: ↓


Понизьте прозрачность данного слоя до 65%. После этого примените стиль слоя → Gradient Overlay (Наложение градиента): ↓


Создаем навигационную панель web 2.0 используя Фотошоп

Должно получиться что-то похожее на это: ↓


Создаем навигационную панель web 2.0 используя Фотошоп

Нанесите текст - Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T"), используя цвета #ffffff и #d9ff3f.


Создаем навигационную панель web 2.0 используя Фотошоп

Теперь создайте текстовый слой, где напечатайте символы “тире” (- - -). Далее Edit > Transform > Rotate 90 CW (Редактирование > Трансформирование > 90 по часовой), чтобы развернуть их в вертикальное положение.


Создаем навигационную панель web 2.0 используя Фотошоп

Теперь нарисуйте небольшие белые квадратики над текстом.


Создаем навигационную панель web 2.0 используя Фотошоп

Добавьте в них цифры.


Создаем навигационную панель web 2.0 используя Фотошоп

Теперь напечатайте символ “¬” (найдите его в таблице символов или скопируйте прямо отсюда) и поместите его справа вверху над текстом.


Вот и все.


Финальный результат

Создаем навигационную панель web 2.0 используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru