В этом уроке мы научимся создавать иконку погоды в Photoshop. Урок достаточно простой, а на его основе вы сможете создать собственные иконки как Photoshop, так например и в Illustrator.

Шаг 1

Создайте новый документ Photoshop. Укажите размеры 800px на 400px.

Шаг 2

Залейте фон цветом #ebeee1 используя инструмент Paint Bucket Tool/ Заливка (G).

Шаг 3

Создаем базу для иконки. Выберите в качестве первого цвета #3bc3f6 и возьмите инструмент Rounded Rectangle Tool / Прямоугольник со скругленными углами (U). Кликните левой кнопкой мыши в документе и введите значения 250px для Width/ ширины, 250px для Height / высоты, и 65pcx для Radius / радиус. Чтобы выровнять фигуру нажмите Ctrl + A и нажмите на кнопку Align vertical/horizontal center / Выровнять вертикально/горизонтально по центру в верхнем меню. Теперь переименуйте слой в “Base”.

Шаг 4

Создаем солнце. Для этого создайте новый слой и выберите инструмент Ellipse Tool / Эллипс (U). Нарисуйте небольшой круг цвета #e8db4b.

Шаг 5

Для солнечных лучей создайте новый слой и нарисуйте небольшую фигуру инструментом Rounded Rectangle Tool / Прямоугольник со скругленными углами (U). Теперь в меню выберите Layer > Duplicate Layer / Слой > Дублировать слой и переместите копию луча в противоположную солнцу часть. Нажмите Ctrl + E чтобы объединить слои с лучами. Чтобы создать больше лучей, дублируйте слой и в меню выберите Edit > Transform > Rotate 90° CW / Редактировать > Трансформирование > Поворот на 90° по ч/с. Вновь объедините слои с лучами, снова дублируйте слой и укажите поворот уже на 45°.

Шаг 6

Создаем облако. Для начала нажмите клавишу D, чтобы установить цвета по умолчанию. Создайте новый слой и возьмите инструмент Ellipse Tool / Эллипс (U). Нарисуйте небольшой круг и дублируйте его несколько раз (Layer > Duplicate Layer / Слой > Дублировать слой). Измените размеры и положения кругов, чтобы они выглядели как на второй картинке ниже. Выделите все слои с кругами при помощи клавиши Shift и нажмите Ctrl + E, чтобы объединить их в один слой. Затем в меню выберите Layer > Layer Style > Blending Options / Слой > Стиль слоя / Параметры наложения и укажите параметры как показано в третьей и четвертой картинках ниже:

Шаг 8

Рисуем блик. Создайте новый слой, назовите его “Highlight 1″. Убедитесь что новый слой активен и удерживя клавишу Ctrl кликните левой кнопкой мыши по слою “Base”, чтобы создать выделение по контуру базы. Возьмите инструмент Brush Tool / Кисть (B), выберите белый цвет и растушеванную кисть размером 300px и укажите 0 в параметре Hardness/жесткость. Рисуйте кистью в верхней части иконки, затем нажмите Ctrl + D, чтобы снять выделение. Смените blending mode/режим наложения для этого слоя на Overlay/Перекрытие и снизьте параметр opacity/непрозрачность до 90%.

Шаг 9

Теперь давайте нарисуем отражение. Создайте новый слой и назовите его “Highlight 2″. Возьмите инструмент Elliptical Marquee Tool / Овальная область (M) и создайте выделение как показано на первой картинке ниже. Залейте выделение белым цветом. Убедитесь что активен слой “Highlight 2″ и удерживая клавишу Ctrl кликните левой клавишей мыши по слою “Base”, чтобы вызвать выделение по контуру базы. В меню выберите Select > Inverse / Выделение > Инвертировать, после чего нажмите Delete. Смените режим наложения для слоя «Highlight 2» на Overlay/Перекрытие с 30% непрозрачности.

Шаг 10

Добавим теней. Создайте новый слой. Снова выберите инструмент Elliptical Marquee Tool / Овальная область (M) и создайте небольшой овал под иконкой, как показано на первой картинке ниже. Залейте его черным цветом и снимите выделение. В меню выберите Filter > Blur > Motion Blur / Фильтр >Размытие > Размытие в движении. Укажите в параметре Distance/расстояние  100 px, а в Angle/Угол 0.

Теперь в меню выберите Filter > Blur > Gaussian Blur/ Фильтр > Размытие > Размытие по Гауссу и укажите радиус в 2,7 px. Переместите слой с тенью над слоем “Base” и измените режим наложения на Linear Burn / Линейный затемнитель с непрозрачностью в 25%. 

Финальный результат

Автор урока Chris B.

Перевод — Дежурка

Смотрите также:

• Создаем iOS иконку ретро-камеры в фотошопе
• Создаем иконку микрофона в Photoshop
• Уроки по созданию иконок