() translation by (you can also view the original English article)
В этом уроке я покажу вам несколько очень простых техник, используя градиенты и стили слоя, которые мы можем использовать для создания красивого нежного 3D эффекта в web дизайне.
Шаг 1
Создайте новый документ со следующими размерами 1000x750px. Дважды щёлкните по фоновому слою (background), чтобы добавить стиль слоя Наложение цвета (Color Overlay). Выберите тёмно-коричневый оттенок в качестве цвета наложения.
Шаг 2
Активируйте линейки, для этого идём Просмотр – Линейки (View>Rulers), добавьте направляющие линии, как показано на скриншоте ниже. Добавьте 2 горизонтальные направляющие линии, первую на отметке 30px, а вторую на отметке 250px. После этого, добавьте 2 вертикальные линии на отметках 100px и 900px.
Шаг 3
Создайте прямоугольник с помощью инструмента Прямоугольник (Rectangle Tool (U). Используйте направляющие линии в качестве ориентира. Назовите этот слой ‘header’.
Шаг 4
Установите цвет переднего плана на чёрный цвет. Выберите инструмент Эллипс (Ellipse Tool), а затем создайте фигуру, это будет тень. Пусть овал будет немного больше по высоте, чем белый прямоугольник, как показано ниже. Назовите этот слой ‘shadow’, а затем сместите его вниз, расположив ниже слоя ‘header’.
После этого, преобразуйте данный слой в смарт-объект, а затем примените фильтр Размытие по Гауссу (Gaussian Blur). Уменьшите Непрозрачность (opacity) слоя до 60%.
Шаг 5
Находясь на слое слоя ‘header’, дважды щёлкните по нему, чтобы открыть окно Стилей слоя (Layer Style). Примените стиль слоя Наложение градиента (Gradient Overlay). Поменяйте Стиль (style) градиента на Радиальный (radial). Я использовал тёмно-красные оттенки в качестве цветов градиента.
Шаг 6
Далее, выберите инструмент Линия (Line Tool (U), выберите более светлый тон, чем тон градиента слоя ‘header’, а затем создайте линию. После этого, выберите чёрный цвет, а затем создайте ещё одну линию, примерно, на 1 px выше красной линии. Выделите оба слоя с линиями, чтобы сгруппировать их. Назовите эту группу "vDivider".
Идём Слой- Слой-маска – Показать всё (Layer>Layer Mask>Reveal All). Выберите инструмент Градиент (Gradient Tool), установите Радиальный (Radial) градиент, цвета градиента от чёрного к белому. Находясь на маске слоя с группой, потяните градиент из центра группы.
Шаг 7
Создайте меню, используя инструмент Горизонтальный текст (Horizontal Type Tool (T). Цвет шрифта белый. Выделите все слои с ссылками, чтобы сгруппировать их вместе. Назовите эту группу ‘White Links’.
Продублируйте данный слой с группой, расположив дубликат слоя ниже слоя с группой ‘white links’, поменяйте цвет текста на чёрный, а затем сместите группу на 1 px вверх и влево. Это поможет нам создать красивый 3D эффект, точно так же, как мы делали с линиями.
Шаг 8
Повторите Шаг 6, только на этот раз создайте горизонтальные разделители для ссылок. Используйте инструмент Линия (line tool), чтобы нарисовать красную линию и отступив на 1 px влево, нарисуйте чёрную линию. Сгруппируйте их, а затем продублируйте группу 5 раз. Распределите группы, как показано на скриншоте ниже.
Шаг 9
Выделите все группы с линиями, а затем сгруппируйте их в одну группу. Назовите эту группу ‘Dividers’. После этого, примените слой-маску, для этого идём Слой- слой-маска- Показать всё (Layer>Layer Mask>Reveal All). Только на этот раз, используйте Линейный (Linear) градиент.
Шаг 10
Откройте исходный файл с узором или используйте любой другой узор, который вам нравится. Выделите полностью узор, а затем идём Редактирование – Определить узор (Edit>Define Pattern). Назовите этот узор ‘webPattern’.
Продублируйте слой ‘header’, назовите дубликат слоя ‘pattern’. Идём в окно настроек стилей слоя, чтобы отключить стиль слоя Наложение градиента (Gradient Overlay) и добавить стиль слоя Наложение узора (Pattern Overlay).
Перейдите на слой 'webPattern', который мы создали, а затем поменяйте режим наложения для данного слоя на Перекрытие (Overlay). После этого, примените слой-маску к слою с узором, используя Радиальный (Radial) градиент.
Узор
Шаг 11
Теперь мы можем добавить логотип и ложку.
В качестве текста, напечатайте Psdtuts+, используйте жирный шрифт для текста ‘PSD’, а для текста TUTS обычный или light. Идём в окно стилей слоя, чтобы применить следующие стили слоя: Тень (Drop Shadow), Наложение градиента (Gradient Overlay) и Обводка (Stroke). Это очень распространенный и красивый эффект.
Заключение
Когда мы работаем с веб-дизайном, мы должны учитывать размеры файлов, совместимость браузеров и многие другие аспекты. Иногда небольшие детали, такие как нежные градиенты или границы с использованием двух цветов, могут создавать очень приятный визуальный эффект или уникальный стиль, не требующих сложной коррекции.
