Вертикальное меню

23 ноября 2007 · Photoshop

[картинка не сохранилась]

Создаем вертикальное меню

Продолжаем серию уроков по Web-дизайну.

1. Создаем новый документ нужного Вам размера, после чего воспользовщись инструментом Rounded Rectangle Tool (U), с радиусом 20 px и настройками показанными ниже. С цветьм #1d97bc. Для облегчения работы нарисуем сетку разметки.

[картинка не сохранилась]

2. При помощи карандаша или кисти подредактируем нашу заготовку, чтобы получилось так:

[картинка не сохранилась]

3. Перейдем в настройки слоя Blending Options со следующими настройками:

[картинка не сохранилась]

4. Пишем слово “Меню” со следующими настройками Шрифта (можно выставить свои)

[картинка не сохранилась]

5. При помощи инструмента Pencil Tool (B) нарисуем две линии, черную, а под ней белую толщиной от 1 px до 3 px (в зависимости от размера вашего меню), меняем Layer Opacity на 18%, дублируем слой (Ctrl+J) и перемещаем немного ниже, как на рисунке:

[картинка не сохранилась]

6. Теперь рисуем при помощи Rectangular Marquee Tool (M) прямоугольник между нашими разделителями цветом #75c5de, в результате получаеться:

[картинка не сохранилась]

7. Добавляем надписи при помощи Horizontal Type Tool (T)

[картинка не сохранилась]

8. Продолжаем. На новом слое создадим выделение как показано на рисунке и заливаем его при помощи Gradient Tool (G):

[картинка не сохранилась]

9. Вот наш результат:

[картинка не сохранилась]

Вот что получилось у меня.

[картинка не сохранилась]

Автор: http://pscloud.com/

Перевод: Joke83

Если кому надо, можно скачать исходник в PSD 58 Кб (который получился у меня).

[картинка не сохранилась]