Рисуем горизонтальное меню / уроки фотошоп « AllTutorials.RU

Рисуем горизонтальное меню / уроки фотошоп

Только у нас всегда в наличии pocketbook 701. .

В этом уроке фотошоп мы отойдем от темы фотообработки и нарисуем красивую горизонтальную менюшку для сайта.

Шаг 1

Для начала, создайте новый документ 540 на 220 пикселей. Залейте его цветом #0d0d0d.

Шаг 2

Теперь сделаем разметку для нового меню. Создадим новый слой Layer > New > Layer.

Создайте прямоугольное выделение с фиксированным размером 480 на 50 пикселей и радиусом 5 пикселей. Сделайте выделение в центре холста.

Залейте выделение линейным градиентом с цветами от #151515 до #050505. Снимите выделение, нажав Ctrl+D. Поставьте занчение Fill для этого слоя 60% (находится эта настройка под настройкой прозрачности на панели слоев).

Шаг 3

Теперь добавим несколько эффектов.

Идем в меню Layer > Layer Style > Outer Glow.

Layer > Layer Style > Stroke

Теперь ваша картинка должна выглядеть так.

Шаг 4

Теперь будем добавлять кнопки. Создайте новый слой, опять на нем создайте закругленное выделение размером 150 на 40 с тем же радиусом 5 пикселей.

Залейте это выделение линейным градиентом с цветами от #323232 до #161616. Поставьте Fill слоя на 50%.

Шаг 5

Теперь добавим 3 эффекта на эту кнопку, чтобы она выглядела по-интереснее.

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Layer > Layer Styles > Stroke

Вот, как должна выглядеть ваша кнопка.

Шаг 6

Теперь нанесем текстовую надпись на нашу новую кнопку. Выберите инструмент Text, выставите следующие настройки:

Bell Gothic Std, Bold, 20 pt, Crisp, #ffffff

Шаг 7

Нарисуйте еще 2 кнопки таким же образом. Как видите, я решил сделать среднюю кнопку, отличающуюся от других. Это может быть использована для эффекта наведения мыши, например.

Для нанесения градиента на среднюю кнопку я использовал цвета от #14b9ef до #054573.