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

С дизайнером Fabio вы уже знакомы. Фабио — известный веб дизайнер, основатель студии ZEE и ресурса уроков abduzeedo.com. В этом уроке он продемонстрирует простой и быстрый способ создания иконок-значков в Web 2.0 стиле. Урок крайне простой, рекомендуется исключительно для начинающих. Более продвинутым пользователям можно не читать.  Перевод подготовлен специально для Хронофага. Когда мы работаем с веб проектами, нам под час требуются командные иконки, вроде “добавить”, “удалить”, “редактировать”. Web 2.0 задает определенные тренды. В моду вошли трехмерные значки. В этом уроке мы сделаем один из подобных значков иконок с приятным 3D эффектом. Техники из этого урока можно применить ко всем другим подобным значкам и эмблемам.

Новый слой

Создайте новый документ и выберите инструмент Ellipse Tool (U). Для фигуры выбираем любой цвет. В дальнейшем мы все равно применим к объекту стили слоя.

Стили слоя

Сделайте двойной клик по слою (Как сделать стили в Фотошопе), после чего появится окно стилей слоя. Там выберите стиль слоя градиент Gradient Overlay. Используйте мягкие голубые и светлоголубые цвета для градиента. Подробно о работе с градиентами написано в Как сделать градиент. Используйте радиальный градиент.

Далее примените стиль Bevel and Emboss, со всеми настройками, которые показаны ниже.

Совет: сдвиньте центр радиального градиента выше центра иконки. Сделать это просто. Кликните мышкой по рабочей области, при открытом окне стилей слоя, и выбранном стиле Градиента Gradient Overlay, и двигайте мышку в сторону.

Продублируйте слой с окружностью и измените размер таким образом, что бы окружность стала меньше, как на картинке ниже.

Двойной клик по новому слою и откройте стили слоя. Отключите все предыдущие стили слоя (Bevel and Emboss и Gradient Overlay)

Вместо них включите Stroke. В типе заливки выбирайте градиент. В качестве цвета выберите белый с двух сторон, но с одной из них поставьте невидимость в 0%.

Пишем текст

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

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

Второй элемент

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

Продублируйте слой и поменяйте размер, как мы делали ранее.

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

Единственное, что нам нужно сделать, это поменять цвет градиента.

Заключение

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

P.S. Интернету исполнилось не более чем двадцать лет, а число пользователей интернет в мире постоянно и непрерывно растет. Подробности читайте в статье на huthut.ru