Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Рисуем иконку погоды в Adobe Photoshop

27 февраля 2014 | Опубликовано в Уроки | 23 Комментариев »

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

 

 


Create weather icons with photoshop - featured

Шаг 1

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

create weather icon in photoshop step 1a

Шаг 2

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

create weather icon in photoshop step 2

Шаг 3

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

create weather icon in photoshop step 3a

create weather icon step 3b

Шаг 4

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

create weather icon photoshop tutorial step 4a

Шаг 5

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

create weather icon in photoshop step 4a

create weathe icon in photoshop step 4b

create weather icon in photoshop step 4c

Шаг 6

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

create weather icon in photoshop step 5a

create weather icon in photoshop step 5b

create weather icon in photoshop step 6c

create weather icon in phtoshop step 6d

Шаг 8

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

Create weather icon in photoshop step 7

Шаг 9

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

create weather icon in photoshop step 9a

create weather icon in photoshop step 9b

Шаг 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%. 

create weather icon in photoshop step 10a

create weather icons in photoshop step 10b

cerate weather icons in photoshop step 10c

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

Create weather icons in photoshop

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

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

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




Комментарии

  1. Данила
    Thumb up Thumb down +2

    Спасибо, за таториал!

    Ведь данную иконку можно сделать в иллюстраторе (я не умею) и там же будет удобней с размерами работать, вопрос почему фотошоп? Привычка, дело вкуса или иные причины?

    Просто рано или поздно придется делать иконки и я пытаюсь разобраться в вопросе.

    Имя Ответ:

    Thumb up Thumb down 0

    Делай все фигурами в фотошопе, если удобно. с масштабированием проблем не будет. Растр в высоком размере, в смарт обьекте, тоже хлопот не доставит. удачи.

    Mary Ответ:

    Thumb up Thumb down 0

    У автора этого урока много туториалов. И все для фотошопа. Наверное все же дело привычки. Честно говоря, в иллюстраторе такую иконку можно сделать а ровно так же :) Не проще и не сложнее. Так что конкретно в этом случае разницы все же просто нет.

    s.o. Ответ:

    Thumb up Thumb down 0

    Но все таки я бы советовала Illustrator. Поверьте мне с вектором на много продуктивней будет в дальнейшем.

    Вектор вы можете растрировать, а вот превратить растровое изображение в вектор не возможно.

    Фотошоп хорош для работы с растровыми объектами, для обработки фото, для коллажей.

    Учитесь рисовать в Иллюстраторе.

    Человек Ответ:

    Thumb up Thumb down +1

    Соглашусь полностью!

[an error occurred while processing the directive]


[an error occurred while processing the directive]