7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Designing

Создаём Красивый 3D Web Дизайн

Scroll to top
Read Time: 3 mins

Russian (Pусский) translation by Ashimova Damira (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). Это очень распространенный и красивый эффект.


Заключение

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.