Уроки Веб и приложения Марат Садыгалиев 22 июня 2015

Создаём иконки погоды в Фотошоп

Сложность урока: Легкий

Всем привет. В этом уроке вы узнаете, как создать набор иконок с погодными условиями в программе Photoshop. Вы узнаете про технику работу с основными инструментами, чтобы создать иконки векторных фигур, а также узнаете как выровнять иконки с помощью функции Привязать к Линиям Сетки (Snap to Grid). Далее, мы создадим эффекты с помощью стилей слоя. В заключение, вы узнаете, как создать свои иконки с погодными условиями, используя указанные техники, а если вы поэкспериментируете с настройками стилей слоя, то вы можете легко создать свой неповторимый дизайн иконок.      Итак, давайте приступим!

Итоговый результат

Шаг 1

Создайте новый документ 600 x 600px, далее идём Просмотр – Показать – Сетку (View > Show > Grid) для активации сетки, а затем идём Просмотр – Привязать к – Линиям сетки (View > Snap To > Grid), чтобы привязать к сетке. Нажмите клавиши (Ctrl + K), чтобы появилось окно Установки (Preferences), далее, выберите настройку Направляющие, сетка и др. (Guides, Grid & Slices) и установите настройки, которые указаны на скриншоте ниже. Сетка облегчит вам работу при создании фигур.

Шаг 2

Установите цвет переднего плана на #02C0D1, а затем выберите инструмент Заливка (Paint Bucket Tool). С помощью инструмента Заливка, залейте задний фон цветом переднего плана.

Шаг 3

Установите цвет переднего плана на #FFFFFF и с помощью инструмента Эллипс (Ellipse Tool), создайте 4 кружка: 30x30px, 30x30px,35x35px, 20x20px.

Расположите кружки, как показано на скриншоте ниже.

Подсказка: во время работы, удерживайте клавишу (Shift), чтобы создать идеальный кружок.

Шаг 4

Далее, выберите инструмент Прямоугольник (Rectangle Tool), чтобы создать прямоугольную фигуру 15x35px. Расположите прямоугольник, как показано на скриншоте ниже.

Теперь, в панели слоёв, выделите слой с векторной фигуркой, которую вы создали в этом шаге, а также выделите слои с фигурками, которые вы создали в предыдущем шаге, далее, щёлкните правой кнопкой по выделенным слоям и в появившемся окне, выберите опцию Объединить Фигуры (Merge Shapes).

Примечание переводчика: у кого стоит более ранняя версия Photoshop, вы можете применить опцию Объёдинить слои (Merge Layers).

Шаг 5

В панели слоёв, дважды щёлкните по названию векторной фигуры, которую вы создали в предыдущем шаге, чтобы переименовать слой, назовите этот слой с фигурой “Облачно”.

Теперь, дважды щёлкните по слою с фигуркой облака, чтобы применить стили слоя. Примените настройки, которые указаны на скриншотах ниже.

В конце этого шага, расположите иконку “Облачно” в левом верхнем углу нашего рабочего документа, примерно, как показано ниже на последнем скриншоте данного шага.

Шаг 6

Поменяйте цвет переднего плана на #FCD524. С помощью инструмента Эллипс (Ellipse Tool), создайте кружок 35×35 px.

Шаг 7

Назовите слой с жёлтой векторной фигуркой, которую вы создали в предыдущем шаге, “Солнечно”.

К слою с фигуркой солнца, примените стили слоя. Примените настройки, которые указаны на скриншотах ниже.

Шаг 8

Теперь, убедитесь, чтобы слой “Солнечно” был активным, далее, расположите солнце, как показано на скриншоте ниже.

Шаг 9

Выделите слои “Облачно” и “Солнечно”, чтобы продублировать их (Ctrl+J).

В палитре слоёв, убедитесь, чтобы дубликат слоя “Солнечно” был расположен ниже дубликата слоя “Облачно”.

Теперь, выделите дубликаты созданных слоёв, чтобы расположить их, как показано на скриншоте ниже.

Шаг 10

Создайте ещё один дубликат слоя “Облачно”. Расположите дубликат слоя, как показано на скриншоте ниже.

Назовите этот дубликат слоя “Пасмурно. Дождь”.

Шаг 11

Для упрощения работы, вы должны установить линии сетки через каждые 1px. Идём Редактирование – Установки - Направляющие, сетка и др. (Edit > Preferences > Guides, Grid & Slices), а затем в окошке Линии через каждые (Gridline Every), установите 1.

Установите цвет переднего плана на #57DAFF, сконцентрируйтесь на векторной фигурке “Пасмурно. Дождь” и с помощью инструмента Эллипс (Ellipse Tool), создайте маленький кружок 4x4px.

Расположите созданный кружок, как показано на скриншоте ниже.

Шаг 12

Убедитесь, чтобы слой с маленьким кружком, который вы создали в предыдущем шаге, был активным, далее, выберите инструмент Стрелка (Direct Selection Tool).

Выделите верхнюю опорную точку, а затем дважды нажмите клавишу направления со стрелкой ‘Верх’.

Далее, переименуйте этот слой, назовите этот слой “Капля дождя”.

Шаг 13

Продублируйте слой (Ctrl+J) “Капля дождя” несколько раз. Расположите дубликаты слоёв, как показано на скриншоте ниже.

Шаг 14

Убедитесь, чтобы слой “Капля дождя” был активен. Дважды щёлкните по данному слою, чтобы применить стили слоя. Примените настройки, которые указаны на скриншотах ниже.

Как только вы применили стили слоя, далее, щёлкните правой кнопкой мыши по слою и в появившемся окне, выберите опцию Скопировать стили слоя (Copy Layer Style), а затем выделите все слои с каплями дождя, далее, ещё раз щёлкните правой кнопкой мыши по выделенным слоям и в появившемся окне, выберите опцию Вклеить стили слоя (Paste Layer Style).

Шаг 15

Продублируйте слой “Облачно”. Назовите дубликат слоя “Снег”, расположите данный слой, как показано на скриншоте ниже.

Шаг 16

Убедитесь, чтобы слой “Снег” был активен. Поменяйте цвет переднего плана на #FFFFFF. Выберите  инструмент Эллипс (Ellipse Tool).

Создайте кружок 5x5px. Расположите нарисованный кружок, как показано на скриншоте ниже.

Шаг 17

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). В настройках данного инструмента, установите Радиус (Radius) 1px.

Далее, нарисуйте вытянутый прямоугольник 1x3px, расположив его точно, как показано на первом скриншоте ниже.

Продублируйте слой с нарисованным прямоугольником (Ctrl+J), расположив дубликат слоя точно, как показано на втором скриншоте ниже.

Шаг 18

В палитре слоёв, выделите слои с нарисованными прямоугольниками, которые вы создали в предыдущем шаге, далее, щёлкните правой кнопкой мыши по выделенным слоям и в появившемся окне, выберите опцию Объединить фигуры (Merge Shapes).

Продублируйте полученный объединённый слой, убедитесь, чтобы дубликат объединённого слоя был активен, далее, нажмите клавиши (Ctrl+T).

Поверните дубликат слоя на 45 градусов, а затем нажмите клавишу (Enter). Повторите данное действие дважды.

Подсказка: Удерживая клавишу (Shift) во время трансформации, поможет вам идеально повернуть выделенную фигуру.

Шаг 19

Выделите слои, которые составляют снежинку, далее, выполните действие Объединить фигуры (Merge Shapes).

К слою со снежинкой, примените стили слоя. Примените настройки, которые указаны на скриншотах ниже.

Шаг 20

Продублируйте слой со снежинкой, которую вы создали в предыдущем шаге. Расположите дубликат слоя, как показано на скриншоте ниже.

Шаг 21

Ещё раз продублируйте слой “Облачно”. Назовите дубликат слоя “Пасмурно. Гроза”. Расположите дубликат слоя, как показано на скриншоте ниже.

Шаг 22

В палитре слоёв, перейдите на слой “Капля дождя”. Дважды продублируйте этот слой.

Выделите дубликаты слоёв с каплями дождя, фокусируясь на слое “Пасмурно. Гроза”, расположите капли дождя, как показано на скриншоте ниже.

Шаг 23

Поменяйте цвет переднего плана на #FFDF45 и с помощью инструмента Перо (Pen Tool), создайте фигуру, как показано на скриншоте ниже (соблюдайте порядок номеров, а также постарайтесь использовать сетку в качестве ориентира).

Шаг 24

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

Шаг 25

Поменяйте цвет переднего плана на #FFFFFF, выберите инструмент Эллипс (Ellipse Tool) .

Нарисуйте кружок 36 x36 px, а затем кружок поменьше 30 x30 px. Убедитесь, чтобы кружки были расположены, как показано на скриншоте ниже.

Шаг 26

Убедитесь, чтобы слои с кружками были выделены, а затем Объедините фигуры (Merge Shapes).

Выберите инструмент Выделение контура (Path Selection Tool), щёлкните внутри маленького круга (30 x30), далее, в верхней панели настроек данного инструмента, выберите опцию Вычесть переднюю фигуру (Subtract Front Shape).

Примечание переводчика: у кого стоит более ранняя версия программы Photoshop, вы можете создать Луну, используя следующие действия: 1. установите цвет переднего плана на белый цвет 2. с помощью инструмента Эллипс (Ellipse Tool), нарисуйте круг 3. далее, в настройках данного инструмента установите опцию Вычесть из области фигуры (Subtract from Shape) 4. нарисуйте круг поменьше внутри большого круга 5. растрируйте слой.

Шаг 27

В палитре слоёв, щёлкните правой кнопкой мыши по слою “Облачно” и в появившемся окне, выберите опцию Скопировать стили слоя (Copy Layer Style).

Далее, перейдите на слой с нарисованной Луной и ещё раз щёлкните правой кнопкой мыши по указанному слою и в появившемся окне, выберите опцию Вклеить стили слоя (Paste Layer Style).

Шаг 28

Продублируйте слой с Луной (Ctrl+J). Расположите дубликат слоя, как показано на скриншоте ниже.

Шаг 29

Теперь, выберите инструмент Многоугольник (Polygon Tool), а затем щёлкните по рабочему документу, чтобы появилось окно настроек данного инструмента Создать многоугольник (Create Polygon).

Примените настройки, которые указаны на первом скриншоте, нажмите кнопку ОК. Теперь, нарисуйте первую звёздочку.

Используя тот же самый инструмент, примените настройки, которые указаны на остальных двух скриншотах, нажмите кнопку ОК. Теперь, нарисуйте ещё две звёздочки.

Далее, выделите слои со звёздочками, а затем, выполните действие Вклеить стили слоя (Paste Layer Style).

Мы завершили урок! Надеюсь, вам понравился данный урок. Спасибо, что были со мной!

Итоговый результат

Автор: Razvan Gabriel

Переводчик: Садыгалиев Марат

Источник: photoshoptutorials.ws

Комментарии 53

Спасибо за урок! Очень понравилось создавать иконки

Хорошее исполнение урока!

спасибо, хороший урок

Спасибо за урок!

Большое спасибо)

спасибо, легкий увлекательный урок)

Хороший урок. Спасибо за перевод!

Спасибо за перевод!

Очень полезный урок))) Спасибо

Спасибо за урок)))

Очень понравился урок! Спасибо.

Благодарю! Удивительный и лёгкий урок! Просто без подобно! :)

Очень понравился урок! Спасибо)

Спасибо за урок))

комментарий

Марат, спасибо за урок! Так хорошо отдохнула, выполняя его...

Спасибо за урок)

Спасибо! Интересный урок

Еще 8
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее