Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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


Стильные иконки для Web-сайта


1. Создайте новый документ размером 500х300 пикселей с белым фоном. Потом инструментом Эллипс (Ellipse Tool) создайте фигуру чёрного цвета, как показано ниже:


Стильные иконки для Web-сайта


2. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

Наложение градиента:


Стильные иконки для Web-сайта


Обводка:


Стильные иконки для Web-сайта

Стильные иконки для Web-сайта


3. Теперь инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже, потом создайте новый слой (Create New Layer) и залейте его линейным градиентом. Цвет: от #1c2133 к прозрачному.


Стильные иконки для Web-сайта


4. Сделайте выделение слоя с первым кругом (Ctrl+Click), инвертируйте его (Select – Inverse) и на слое с овалом из третьего шага нажмите Delete, чтобы получить такой результат:


Стильные иконки для Web-сайта


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


Стильные иконки для Web-сайта


6. Перейдите в меню Стилей слоя (Layer Style - Blending Options) для зелёного круга. Настройте так:

Внутреннее свечение:


Стильные иконки для Web-сайта


Обводка:


Стильные иконки для Web-сайта

Стильные иконки для Web-сайта


7. Растеризуйте слой с зелёным кругов (Rasterize – Shape), выберите инструмент Овальная область (Elliptical Marquee Tool) и создайте выделение похожее на то, что мы делали раньше. Выберите инструмент Осветлитель (Dodge Tool) размером 100 пикселей в диапазоне – средние тона, с экспозицией – 20%, и осветлите нижнюю часть круга:


Стильные иконки для Web-сайта


8. Сделайте Инверсию выделения (Select – Inverse), установите диапазон инструмента осветления – света (highlights) и осветлите верхнюю часть круга.


Стильные иконки для Web-сайта


9. Снова инвертируйте выделение, выберите инструмент Затемнитель (Burn Tool) размером 100 пикселей в диапазоне – средние тона, с экспозицией – 30%. Добавьте контрастности в нижней части круга:


Стильные иконки для Web-сайта


10. Снимите выделение (Ctrl+D), выберите инструмент Произвольная фигура (Custom Shape Tool) и создайте фигуру, показанную ниже:


Стильные иконки для Web-сайта


11. Примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Умножение:


Стильные иконки для Web-сайта

Стильные иконки для Web-сайта


12. Объедините все слои с иконкой в один и в режиме Искажения (Transform – Distort) измените её:


Стильные иконки для Web-сайта


13. Сделайте копию слоя с иконкой и поместите оригинал немного ниже, как показано ниже.


Стильные иконки для Web-сайта


14. К нижнему оригинальному слою примените стиль Наложение цвета (Layer Style - Color Overlay):


Стильные иконки для Web-сайта

Стильные иконки для Web-сайта


15. Теперь добавим тень в основании иконки. Создайте новый слой (Create New Layer) над фоновым слоем и инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже. Потом залейте его чёрным цветом.


Стильные иконки для Web-сайта


16. Снимите выделение (Ctrl+D) и примените фильтр Размытие по гауссу (Gaussian Blur Filter):


Стильные иконки для Web-сайта


17. Потом примените фильтр Размытие в движении (Motion Blur Filter):


Стильные иконки для Web-сайта


Вы получите такой результат:


Стильные иконки для Web-сайта


На этом мы закончим урок. Вы можете экспериментировать с цветами и создавать иконки разных цветов и размеров.


Стильные иконки для Web-сайта



Перевод: Глеб Хегай

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

написал : Ruslan

Отлично Константин. Я не Константин. Всеравно отлично.

---------------


написал : Lyurik

Очень просто и интересно. Спасибо за урок

---------------


написал : positive11

Рады стараться!

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

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

Введите код: