Стильные иконки для сайта или мультимедиа презентаций

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

Конечный результат:

Стильные иконки для сайта или мультимедиа презентаций

В начале создайте новый документ с размерами 500х300 пикселей и залейте его белым цветом. Теперь перейдем непосредственно к созданию значка. Создайте новый слой, затем выберите инструмент Ellipse Tool (U) (Эллипс) и создайте форму эллипса. Смотрите изображение ниже.

Стильные иконки для сайта или мультимедиа презентаций

К этому слою примените следующие стили:

Gradient Overlay (Наложение градиента):

Стильные иконки для сайта или мультимедиа презентаций

Stroke (Обводка):

Стильные иконки для сайта или мультимедиа презентаций

Вот, что в результате должно получиться:

Стильные иконки для сайта или мультимедиа презентаций

Используя инструмент Elliptical Marquee (M) (Овальная область), создайте выделение так, как показано на изображении ниже, а затем создайте новый слой и заполните выделение градиентом от темно-синего (#1c2133) к прозрачному.

Стильные иконки для сайта или мультимедиа презентаций

Выделите значок, для этого нажмите Ctrl + клик по миниатюре слоя со значком, а затем инвертируйте выделение с помощью комбинации клавиш Ctrl+Shift+I. Очистите выделенную область, нажав клавишу Delete (Удалить).

Стильные иконки для сайта или мультимедиа презентаций

Снимите выделение Ctrl + D. Инструментом Ellipse Tool (U) (Эллипс) создайте круглую форму и залейте ее цветом #5ebf1a. Будьте внимательнее, вторая фигура должна быть немного меньше, основной.

Стильные иконки для сайта или мультимедиа презентаций

К этому слою примените следующие стили:

Inner Glow (Внутреннее свечение):

Стильные иконки для сайта или мультимедиа презентаций

Stroke (Обводка):

Стильные иконки для сайта или мультимедиа презентаций

Стильные иконки для сайта или мультимедиа презентаций

Растрируйте эту фигуру Layer > Rasterize > Shape (Слой - Растрировать - Фигуру). На панели инструментов выберите Elliptical Marquee (M) (Овальная область) и создайте выделение, аналогичное тому, которое было в начале урока. Выберите инструмент Dodge Tool (O) (Осветлитель) c параметрами: размер кисти: 100 px, диапазон: средние тона, экспозиция: 20% и осветлите нижнюю часть фигуры.

Стильные иконки для сайта или мультимедиа презентаций

Инвертируйте выделение, нажав клавиши Ctrl + Shift + I, и измените параметр Range (Диапазон) инструмента Dodge Tool (O) (Осветлитель) на Highlights (Подсветка).

Стильные иконки для сайта или мультимедиа презентаций

Верните обратно инвертированное выделение и с помощью инструмента Burn Tool (Затемнитель) с параметрами: размер кисти: 100px, диапозон: средние тона, экспозиция: 30%, добавьте контраст для значка.

Стильные иконки для сайта или мультимедиа презентаций

Мы почти у цели! Снимите выделение Ctrl + D. Теперь добавьте на значок орнамент. Для этого выберите инструмент Custom Shape (Произвольная фигура) и используйте одну из стандартных форм набора Фотошоп. Я выбрал эту:

Стильные иконки для сайта или мультимедиа презентаций

Значок будет выглядеть лучше, если применить к слою с орнаментом стиль Drop Shadow (Тень).

Стильные иконки для сайта или мультимедиа презентаций

Результат должен быть таким же, как у меня:

Стильные иконки для сайта или мультимедиа презентаций

Отлично, теперь объедините все слои со значком в один и примените команду Edit > Transform > Distort (Редактирование - Трансформирование - Искажение).

Стильные иконки для сайта или мультимедиа презентаций

Продублируйте этот слой Ctrl + J, а затем передвиньте его немного ниже значка оригинала, как показано на изображении ниже:

Стильные иконки для сайта или мультимедиа презентаций

Для этого слоя примените стиль Color Overlay (Наложение цвета):

Стильные иконки для сайта или мультимедиа презентаций

Заметили разницу?

Стильные иконки для сайта или мультимедиа презентаций

Осталось добавить внизу тень и иконка будет готова. Перейдите на фоновый слой и выше него создайте новый слой. Выберите инструмент Elliptical Marquee (M) (Овальная область) и создайте выделение, как на изображении ниже, залейте его черным цветом.

Стильные иконки для сайта или мультимедиа презентаций

Снимите выделение Select > Deselect (Выделение - Отменить выделение) или Ctrl+D, и примените фильтр Filter > Blur > Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) с такими настройками:

Стильные иконки для сайта или мультимедиа презентаций

Примените другой фильтр Filter > Blur > Motion Blur (Фильтр - Размытие - Размытие в движении).

Стильные иконки для сайта или мультимедиа презентаций

В результате у вас должно получиться так:

Стильные иконки для сайта или мультимедиа презентаций

Отлично, вот мы и закончили! В качестве примера я сделал еще пару иконок. Пробуйте, экспериментируйте, и результат будет лучше, чем когда-либо!

Стильные иконки для сайта или мультимедиа презентаций

Ссылка на источник урока.