() translation by (you can also view the original English article)
Когда мы работаем над проектом веб-дизайна, нам довольно часто нужны иконки для отображения таких команд, как добавление, удаление или редактирование. С учётом тренда Web 2.0, использование значков и 3D стало очень популярным. В этом уроке я покажу вам, как создать очень простой и очень приятный 3D-эффект, который будет использоваться либо в качестве кнопок и иконок либо в качестве элементов, которые нуждаются в некоторой глубине.
Шаг 1
Создайте новый документ, выберите инструмент Эллипс (Ellipse Tool (U). Неважно, какой цвет вы используете, поскольку позже мы заменим его с помощью стилей слоя.
Шаг 2
Дважды щёлкните по слою с нарисованным эллипсом, чтобы открыть окно настроек Стили Слоя (Layer Style). Далее, выберите стиль слоя Наложение градиента (Gradient Overlay). Установите цвета градиента на синий и более светлый оттенок синего. Стиль (style) используйте Радиальный (Radial). Затем добавьте стиль слоя Тиснение (Bevel and Emboss). Установите следующие настройки для данного стиля, которые указаны на скриншоте ниже.
Подсказка: сдвиньте градиент ближе к верхней части круга. Для этого, поскольку окно стилей слоя открыто, убедитесь, что вы находитесь в окне настроек Наложение градиента (Gradient Overlay). Щёлкните по кнопке, а затем удерживая клавишей мышки кнопку, измените угол градиента.
Шаг 3
Продублируйте слой с кругом, слегка уменьшите масштаб дубликата слоя, как показано на скриншоте ниже.
Шаг 4
Дважды щёлкните по дубликату слоя, чтобы открыть окно настроек Стили Слоя (Layer Style). Отключите все предыдущие стили слоя Тиснение (Bevel and Emboss) и Наложение градиента (Gradient Overlay). Далее, добавьте стиль слоя Обводка (Stroke), установите Тип обводки (Fill Type) на Градиент (Gradient). Цвета градиента установите на белый цвет с двух сторон, уменьшите Непрозрачность (opacity) до 0% для начала градиента а также установите 100% на конце градиента.
Шаг 5
Выберите инструмент Горизонтальный текст (Horizontal Type Tool (T), а затем добавьте текст. Убедитесь, чтобы текстовый слой был расположен поверх всех слоёв. Теперь откройте окно стилей слоя, чтобы поменять Цвет наложения (Color Overlay) на белый. Добавьте стиль слоя Внутренняя тень (Inner Shadow). Установите следующие настройки для данного стиля, которые указаны на скриншоте ниже.
Шаг 6
Сгруппируйте все три слои в одну группу, назовите новую группу "Blue Circle".
Шаг 7
Выберите инструмент Многоугольник (Polygon Tool (U), установите следующие настройки, которые указаны на скриншоте ниже, чтобы создать значок Звезды. Продублируйте слой, уменьшите масштаб, как мы делали ранее в Шаге 3.
Вместо применение тех же самых стилей слоя к слою со звёздочкой, просто скопируйте стили слоя с предыдущего значка, который мы создали, а затем вклейте к нашему новому слою. Для этого, щёлкните правой кнопкой мыши по слою с круглой иконкой и в появившемся окне, выберите опцию Скопировать стиль слоя (copy layer style), а затем щёлкните правой кнопкой мыши по слою со звёздочкой и в появившемся окне, выберите опцию Вклеить стиль слоя (paste layer style).
Единственное, что вам нужно изменить – это цвета градиента в настройках стиля слоя Наложение градиента (Gradient Overlay).
Заключение
Это один из самых простых способов создания красивых 3D иконок. Вы можете поменять некоторые настройки, например, цвет обводки градиента и создать различные 3D стили.
