Меню
Учебник
Партнёры

Вход
Уроки фотошоп - 3D эффект меню для сайта
В этом уроке я познакомлю вас с очень простой техникой, использующей градиенты и стили слоев для создания красивых трехмерных эффектов для веб-сайта.

Шаг 1

Создайте новый документ (Ctrl+N) размером 1000х750 пикселей. Сделайте двойной щелчок на фоновом слое и в окне «Стиль слоя» (Layer Style) отметьте «Наложение цвета» (Color Overlay), в качестве цвета выберите темно-коричневый.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 2

Включите линейки в меню Просмотр>Линейки (View>Rulers – Ctrl+R) и добавьте несколько направляющих (нажмите V, затем мышью с зажатой кнопкой перетащите указатель с линейки на рабочее поле). Направляющие расположите так: 2 горизонтальные, первая – на уровне 30 пикселей, вторая – 250 пикселей, и 2 вертикальные, на отметке 100 и 900 пикселей.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 3

С помощью инструмента Прямоугольник (Rectangle Tool - U) нарисуйте прямоугольник (включите режим Слои фигуры / Shape Layers в верхней панели), ориентируясь по направляющим. Новый слой назовите «Шапка».

Уроки фотошоп - 3D эффект меню для сайта


Шаг 4

Установите черный цвет на передний план (нажмите D). Выберите инструмент «Эллипс» (Ellipse Tool - U) и создайте фигуру, которая будет нашей тенью. Нарисуйте овал так, чтобы он немного выходил за верхнюю и нижнюю границы прямоугольника (как на рисунке). Перед рисованием убедитесь, что выбран слой «Шапка», а не его векторная маска (щелкните на основном изображении слоя в окошке со слоями). Новый слой назовите «Тень» и поместите его ниже слоя «Шапка».

После этого конвертируйте его в «Умные фильтры» (Smart Filters) и примените фильтр «Размытие по Гауссу» (Фильтр>Размытие>Размытие по Гауссу / Filter>Blur>Gaussian Blur) (параметр радиус подберите по своему усмотрению, примерный диапазон – от 40 до 70 пикселей). Непрозрачность (Opacity) слоя с тенью установите на 60%.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 5

Выберите слой «Шапка» и сделайте двойной щелчок на нем, чтобы открыть окно «Стиль слоя» (Layer Style) отметьте «Наложение градиента» (Gradient Overlay). Стиль градиента (Style) укажите как радиальный (Radial), затем щелкните на поле «Градиент» и укажите цвета – я использовал оттенки темно-красного. Смотрите, что получилось:

Уроки фотошоп - 3D эффект меню для сайта


Шаг 6

Теперь выберите инструмент «Линия» (Line Tool - U) и возьмите светлый оттенок из центральной части градиента нашей шапки. Проведите горизонтальную линию, а потом поменяйте цвет на черный и проведите еще одну линию на 1 пиксель выше уже нарисованной. Теперь сгруппируйте два новых слоя в группу с именем «Горизонтальный разделитель».

Далее исполните команду Слои>Слой-маска>Показать все (Layer>Layer Mask>Reveal All). Затем с помощью градиента (Gradient Tool - G), тип радиальный (Radial), от черного к белому (Black, White) сделайте заливку на маске группы с разделителем. Начинайте градиент из центра группы.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 7

С помощью инструмента «Горизонтальный текст» (Horizontal Type Tool - T) белым цветом напишите пункты меню. Поместите все слои с надписями в одну группу и назовите ее «Белые ссылки».

Сделайте копию группы и поместите ее под группой «Белые ссылки», цвет текста поменяйте на черный и сдвиньте на один пиксель влево-вверх. Это придаст трехмерный эффект, также как и с линией-разделителем.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 8

Повторите шаг №6, чтобы создать вертикальные разделители для ссылок как показано на рисунке. Нарисуйте инструментом «Линия» (Line Tool - U) красную линию, а потом черную, на 1 пиксель слева от красной. Сгруппируйте эти два слоя, а группу продублируйте несколько раз и разместите линии в нужные места.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 9

Соедините все группы-разделители в одну и назовите ее «Вертикальные разделители». Затем исполните команду Слои>Слой-маска>Показать все (Layer>Layer Mask>Reveal All). С помощью градиента (Gradient Tool - G), тип в этот раз линейный (Linear), от черного к белому (Black, White), сделайте заливку на маске группы.

Уроки фотошоп - 3D эффект меню для сайта


Шаг 10

Откройте файл с узором. Используйте такой, как в этом уроке или любой другой. Идите в меню Редактировать>Определить узор (Edit>Define Pattern) и назовите его «ВебУзор».
Сделайте копию слоя «Шапка» (выберите слой, затем Ctrl+J) и назовите копию «Узор». Перейдите в его «Стили слоя» (Layer Styles), отключите эффект «Наложение градиента» (Gradient Overlay) и включите «Перекрытие узора» (Pattern Overlay), в настройках укажите наш узор «ВебУзор», режим наложения (Blend Mode) установите как «Наложение цвета» (Color Overlay).

После этого примените градиент (черно-белый, радиальный) к маске слоя «Узор».

Уроки фотошоп - 3D эффект меню для сайта


Шаг 11

Теперь можно добавить логотип и ложку.
Впечатайте текст (инструмент Горизонтальный текст / Horizontal Type Tool - T) “PSDTUTS”, “PSD” – жирным шрифтом, “TUTS” – обычным. В настройках стиля (Layer Styles) примените эффекты «Тень», «Наложение градиента» и «Обводка» (Drop Shadow, Gradient Overlay и Stroke) как на рисунке. Это часто используемые текстовые эффекты.

Уроки фотошоп - 3D эффект меню для сайта


Заключение

При работе с веб-изображениями нужно учитывать такие факторы как размер конечных файлов, совместимости Интернет-браузеров и многое другое. Зачастую небольшие детали, такие как легкие градиенты или линии из двух цветов могут создавать красивые эффекты и уникальный стиль, не требуя использования хитроумных приемов и настроек.

Уроки фотошоп - 3D эффект меню для сайта


Переводчик: Фирстов Александр

Все новости и обзоры продукции не безызвестной корпорации Apple вы сможете прочитать на специализированном сайте – Apple

#1 написал: leonid (1 июня 2009 15:09)



Группа: Гости
Регистрация: --
этот сайт уникален!!! второго такого не найти!!
спасибо за то что вы есть, так держать!!!
ICQ: {icq}
#2 написал: Lenni (1 июня 2009 18:29)



Группа: Гости
Регистрация: --
сеперский урок, мне понравилась задумка, как нибуть использую этот эффект на своём сайте
ICQ: {icq}
#3 написал: Konstantin (28 июля 2009 22:44)



Группа: Гости
Регистрация: --
спасибо, очень полезный урок и замечательный сайт
ICQ: {icq}
#4 написал: Жека96 (28 июня 2010 03:37)



Группа: Гости
Регистрация: --
отличный урок, никогда не подумаешь что такие маленькие детали как линия шириной 1 пиксель может так классно повлиять на дизайн!

Хороший сайт, но такое количество п*рнухи если честно бесит.
ICQ: {icq}
#5 написал: ADMIN (28 июня 2010 09:26)



Группа: Администраторы
Регистрация: 9.01.2009
Спасибо!П"нуха и нас бесит не меньше вас, но у нас порой не хватает денег даже на оплату хостинга-по этому приходится ставить столько рекламы!
ICQ: {icq}
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.