Иконка в стиле Web 2.0 в Фотошопе

Авторам этого урока является дизайнер известный нам , создатель чудесного сайта abduzeedo.com. C недавнего времени он так же является совладельцем дизайн студии  ZEE. В этом простом и легком уроке он расскажет и покажет как можно в Фотошопе создать иконку в стиле web 2.0

Когда мы работаем над веб дизайном нам подчас необходимы иконки, чтобы показать различные команды сайта — добавить, удалить, редактировать. С трендами Web 2.0 стали модны элементы с эффектом 3D. В этом уроке я покажу вам как создать простой и приятный эффект выпуклости, который можно использовать в подобных Web 2.0 иконках или любых других элементах, требующих глубины.

Создаем объект иконки

Создайте новый документ и выберите инструмент выделения Ellipse Tool (U). Не важно каким цветом вы зальете этот новый слой, так как мы применим к объекту стили слоя Layer Styles.

Присваиваем стили слоя

На панели слоя сделайте двойной клик по слою с окружность. Появится диалоговое окно стилей слоя. Там выберите стиль градиента Gradient Overlay и светлые тона голубого, в качестве его заливки. Для этого стиля воспользуйтесь радиальным градиентом.

Далее добавьте стиль Bevel and Emboss.

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

Трансформируем иконку

Продублируйте слой с окружностью и измените размер. Сделайте его меньше командой Free Transform.

Применяем стили

Двойной клик по этому новому слою чтобы открыть окно стилей слоя. Отключите все старые стили (градиент и выдавливание). Теперь нас интересует стиль окантовки Stroke. В качестве заливки выберите градиент, в качестве цвета, белый с обоих концов, но с одной из сторон уменьшите невидимость до 0%

Подробнее о работе с редактором градиентов можно прочитать в статье Градиенты в Фотошопе.

Пишем надпись на иконке

Выберите инструмент текста Horizontal Type Tool (T) и создайте новый текстовой слой. Убедитесь что данный слой над всеми слоями. Теперь откройте окно стилей слоя и измените вкладку Color Overlay на белый цвет. Также добавьте стиль Inner Shadow и настройки показанные ниже.

Группируем слои

Сгруппируйте все три слоя и назовите группу “Blue Circle”

Вторая иконка звездочки

Выберите инструмент Polygon Tool (U) и измените несколько настроек как показано ниже, чтобы создать звездный значек. Продублируйте слой, трансформируйте его как мы делали ранее.

Вместо добавления всех стилей слоя по новой, скопируйте те, что мы уже создали. Чтобы сделать это, выберите самый первый слой, кликните по нему правой кнопкой мышки и из меню выберите Copy Layer Style. Далее выберите слой на который вы хотите перенести стиль, снова кликните правой кнопкой мышки и из меню выберите Paste Layer Styles. Единственное, что вам придется поменять — цвет градиента.

Заключение

Это один из самых простых способов создания прикольных стильных 3D кнопок. Можете менять настройки, окантовки, цвета градиентов получая разные варианты иконок.