Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Навигационная панель


Шаг 1
Один из лучших способов научиться фотошопу - это воспроизводить готовые работы, которые вам нравятся. Поэтому перед созданием панели взгляните на неё:


Навигационная панель


Шаг 2
Создайте новый документ размером 540x200 пикселей с разрешением 72ppi. Установите цвет заливки #e07814.


Навигационная панель


Шаг 3
Создайте новый слой (Create New Layer) и назовите его “Nav Background”.


Навигационная панель


Шаг 4
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 50 пикселей. Перейдите в меню Окно»Инфо (Window>Info from the Main menu), чтобы видеть размеры, либо введите значения в настройки инструмента сверху (заданный размер). Залейте выделение цветом заливки (Alt+Backspace) и снимите его (Ctrl+D).


Навигационная панель


Шаг 5
Давайте определим область для кнопок. Создайте новый слой (Create New Layer) и назовите его “Button Background”. Установите цвет заливки - #47361f и создайте выделение высотой 38 пикселей, как показано ниже. Залейте выделение цветом заливки (Alt+Backspace).


Навигационная панель


Шаг 6
Добавим градиент на фон кнопок. Создайте новый слой “White Gradient” и установите цвет заливки – белый. Выберите инструмент Градиент (Gradient Tool) и в настройках сверху установите цвет – от заливки к прозрачному.


Навигационная панель


Шаг 7
Прежде чем выполнить заливку, создайте обтравочную маску. Кликните правой кнопкой на слое “White Gradient” и выберите Создать обтравочную маску (Create Clipping Mask). Это нужно для того, чтобы градиентная заливка была применена только для слоя с фоном кнопок.


Навигационная панель


Шаг 8
Сделайте заливку градиентом: начните на верхней границе, протяните её вниз до половины. Удерживайте Shift при этом, чтобы сделать прямую вертикальную заливку.


Навигационная панель


Шаг 9
Эффект от заливки слишком силён, поэтому установите Заливку (Fill) слоя – 20% и Режим наложения – Линейный осветлитель (Blending Mode – Linear Dodge).


Навигационная панель


Шаг 10
Перейдём к созданию двойной границы сверху кнопок. Создайте новый слой (Create New Layer) и назовите его “Double Border”. Установите цвет заливки - #644239 и цвет фона - #866d53.
Выберите инструмент Горизонтальная строка (Single Row Marquee Tool) и кликните один раз на холсте, чтобы создать выделение. Желательно поместить его сразу на верхней границе.


Навигационная панель


Шаг 11
Нажмите Alt+Backspace, чтобы выполнить заливку выделения. Опустите выделение вниз на 1 пиксель и нажмите Ctrl+Backspace, чтобы залить выделение вторым цветом. Потом можете снять выделение (Ctrl+D). Используйте инструмент Перемещение (Move Tool) и стрелки на клавиатуре, чтобы правильно расположить линии:


Навигационная панель


Шаг 12
Теперь для слоя с линиями нужно создать обтравочную маску, чтобы линии были расположены только на области кнопок.


Навигационная панель


Шаг 13
С фоном мы закончили, перейдём к тексту кнопок. Выберите инструмент Горизонтальный текст (Horizontal Type Tool). Шрифт, который нам нужен, называется “Lucida Grande”. Этот шрифт используется в операционной системе “OS X” от Apple и пользователи Windows не имеют его. Но это не проблема. Для начала перейдите в меню Окно»Символ (Window>Character).
Шрифт можно получить из браузера Apple Safari, который выпускается для Windows. В этом браузере используется шрифт “Lucida Grande” и “Lucida Grande Bold”. Для этого загрузите браузер на официальном сайте Apple, установите его. В папке Program Files > Safari > Safari.resources вы можете найти оба шрифта. Либо просто скачайте его тут (после импортирования, возможно, вам нужно будет перезапустить Photoshop).
Выберите в настройках шрифта нужный шрифт и настройте, как показано ниже. Цвет - #bcb19b.


Навигационная панель


Шаг 14
Напишите названия разделов. Расстояние между словами – 9 нажатий на пробел.


Навигационная панель


Шаг 15
Создайте новый слой под слоем с текстом. Для этого выберите текстовый слой и, удерживая Ctrl, нажмите на иконку создания слоя внизу палитры слоёв. Новый слой назовите “Button Current”.

Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже.


Навигационная панель


Шаг 16
Установите цвета по умолчанию (D) и залейте выделение белым цветом (Ctrl+Backspace), потом снимите выделение (Ctrl+D).


Навигационная панель


Шаг 17
Установите цвет заливки - #c8a282. Потом перейдите в меню Стилей слоя “Button Current” (Layer Style - Blending Options) и настройте так:

Наложение градиента (Режим – Нормальный, Стиль – Линейный, Градиент – от заливки к прозрачному):


Навигационная панель


Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет):


Навигационная панель


Шаг 18
Если вам не понравится расположение градиента, вы можете его просто передвинуть.


Навигационная панель


Шаг 19
Выделите текст первой кнопки и измените его цвет на чёрный.


Навигационная панель


Шаг 20
Нужно создать чёрные разделители. Над слоем “Double Border” создайте новый слой “Divider Lines”. Создайте обтравочную маску:


Навигационная панель


Шаг 21
Установите цвета по умолчанию (D) и инструментом Вертикальная строка (Column Marquee Tool) создайте вертикальные выделения, которые нужно залить чёрным цветом.


Навигационная панель


Шаг 22
На сайте defcon-x вы можете найти деревянную текстуру. Откройте её в Photoshop, скопируйте и вставьте в наш документ над слоем “Nav Background”. Используйте обтравочную маску, чтобы текстура была применена только для навигационной панели, либо используйте инструмент Свободное трансформирование (Free Transform), чтобы сжать текстуру.


Навигационная панель


Шаг 23
К слою “Nav Background” примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Линейный затемнитель, Стиль – Линейный


Навигационная панель


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


Навигационная панель



PSD файл можете скачать здесь.



Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: