В этом уроке мы узнаем как нарисовать веб иконки в Фотошопе. Мы сделаем пару вариантов, но остальные иконки представленные внизу вы легко сделате при желании сами.

web 2.0 иконка

ellipse tool

Шаг 1. Создаем новый документ (Ctrl+N), выбираем Инструмент Эллипс Ellipse Tool (U) и, удерживая Shift, рисуем круг.

gradient overlay
bevel and emboss
layer styles

Шаг 2. Двойным щелчком по миниатюре слоя с кругом на Палитре Слоев, открываем окно Стилей Слоя (Layer Styles). Выбираем Стили — Gradient Overlay (Наложение Градиента) и Bevel and Emboss (Тиснение) и задаем параметры

уменьшаем размер

Шаг 3. Копируем слой с кругом (Ctrl+J) и уменьшаем размер копии (Ctrl+T).

stroke
объмный круг

Шаг 4. Двойным кликом на миниатюре нового слоя открываем окно Стилей Слоя, где снимаем все галки и ставим новые, как показано на рисунке.

текст
color overlay
inner shadow
иконка

Шаг 5. Выбираем Инструмент Horizontal Type Tool (Горизонтальный текст (T)) и пишем им прямо над кружком. Далее идем в Стили Слоя — Color Overlay (Наложение цвета) и Inner Shadow (Внутренняя Тень) и устанавливаем значения

Оставьте комментарий

Можно смешной псевдоним 
На сайте не показывается. 
Защита от спамеров 
 
Шаг 6. Группируем эти три слоя (выделяем их, удерживая Shift, на Палитре Слоев и нажимаем Ctrl+G) и назваем группу «Blue Circle».

стили слоя
звездный бейджик

Шаг 7. Выбираем Инструмент Polygon Tool (Многоугольник (U)), задаем большое количество сторон и рисуем звездный бейджик. Повторяем Шаг 3 для этой иконки. Теперь, надо скопировать Стили Слоев у предыдущей иконки, для этого переходим на слой с ней, кликаем правой кнопкой мыши по миниатюре слоя на Палитре Слоев и, в появившемся меню, выбираем пункт Copy Layer Style (скопировать стили слоя), далее идем на нужный слой, также кликаем правой кнопкой мыши и выбираем пункт Paste Layer Styles (Вставить Стили Слоя). Осталось только внести изменения в Стиль — Gradient Overlay (Наложение Градиента).

стильные иконки

Вот и всё. Это очень быстрый и простой способ создания стильных современных иконок.