Иконка для мобильных приложений

В этом уроке я расскажу вам, как создать иконку для мобильного устройства в Фотошоп. Давайте начнем!

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

Иконка для мобильных приложений

Материалы для урока:

  1. Текстура дерева

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

Иконка для мобильных приложений

Выберите инструмент Rounded Rectangle Tool (U) (Прямоугольник со скругленными углами), установите цвет #8f0400 и создайте следующую фигуру.

Иконка для мобильных приложений

На панели инструментов выберите Brush Tool (B) (Кисть), измените цвет на ярко-красный #dd0b00 и нарисуйте пятнышко в верхней правой части иконки.

Иконка для мобильных приложений

Этим же инструментом, добавьте тень черного цвета. Смотрите изображение ниже:

Иконка для мобильных приложений

При помощи инструмента Rounded Rectangle Tool (U) (Прямоугольник со скругленными углами) создайте еще одну фигуру в верхней части иконки, как на рисунке ниже:

Иконка для мобильных приложений

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

Bevel and Emboss (Тиснение):

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Теперь продублируйте последний слой и примените команду Ctrl + T (Свободное трансформирование), чтобы уменьшить размер. На новом слое добавьте обтравочную маску (для этого нажмите Alt + клик по разделительной линии между двумя слоями на панели слоев или Ctrl + Alt + G) и при помощи инструмента Brush Tool (Кисть) нарисуйте линию в верхней части формы дублированного слоя.

Иконка для мобильных приложений

Сделайте верхнюю часть светлее, а нижнюю темнее.

Иконка для мобильных приложений

Повторите те же действия только с нижней частью.

Иконка для мобильных приложений

На новом слое при помощи инструмента Rectangular Selection (M) создайте две тонкие вертикальные полоски и обрисуйте их белой кистью. Измените режим слоя на Overlay (Перекрытие).

Иконка для мобильных приложений

Создайте прямоугольное выделение. Выберите инструмент Gradient Tool (G) (Градиент) и залейте его градиентом от белого к прозрачному.

Иконка для мобильных приложений

Теперь создайте новый слой и прямоугольное выделение (M) в виде тонкой полоски. Залейте его черным цветом и примените команду Ctrl + T (Деформация), чтобы получился результат, как на изображении ниже. Продублируйте полоску и поместите ее на противоположную сторону.

Иконка для мобильных приложений

Создайте новый слой и при помощи инструмента Brush Tool (B) (Кисть) черного цвета обрисуйте края фигуры.

Иконка для мобильных приложений

Добавьте еще пару полосок, как это мы делали несколькими шагами ранее.

Иконка для мобильных приложений

Инструментом Brush Tool (B) (Кисть) черного цвета добавьте тени. Теперь сгруппируйте центральные слои (Ctrl + G) и добавьте маску. Мягкой кистью обрисуйте линии для смягчения краев.

Иконка для мобильных приложений

Создайте новый слой и добавьте шум, для этого зайдите в меню Filter > Noise > Add Noise (Фильтр - Шум - Добавить шум). Измените режим слоя на Soft Light (Мягкий свет) и при необходимости подкорректируйте, применив команду Ctrl + T (Свободное трансформирование).

Иконка для мобильных приложений

Инструментом Rectangular Shape Tool (U) (Прямоугольник) создайте форму плюса и примените к ней следующие стили:

Иконка для мобильных приложений

Drop Shadow (Тень):

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Stroke (Обводка):

Иконка для мобильных приложений

Продублируйте слой (Ctrl + J) с формой плюса и сдвиньте его немного вниз, используя инструмент Move Tool (V) (Перемещение).

Иконка для мобильных приложений

Примените к этому слою следующие стили:

Drop Shadow (Тень):

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Stroke (Обводка):

Иконка для мобильных приложений

С помощью инструмента Pen Tool (P) (Перо) добавим немного отражения. Создайте произвольные фигуры черного цвета и уменьшите значение Opacity (Непрозрачность) этих слоев. Смотрите изображение ниже.

Иконка для мобильных приложений

Прорисуйте границы краев, указанные стрелками ниже, путем добавления белых линий инструментом Pencil Tool (Карандаш).

Иконка для мобильных приложений

В этом шаге мы начнем создавать волшебную палочку. Для начала инструментом Pen Tool (P) (Перо) создайте цилиндрическую форму черного цвета.

Иконка для мобильных приложений

К этому слою добавьте следующие стили:

Inner Shadow (Внутренняя тень):

Иконка для мобильных приложений

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

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Добавьте еще одну фигуру белого цвета в верхней части палочки и примените к ней следующие стили слоя.

Иконка для мобильных приложений

Иконка для мобильных приложений

Иконка для мобильных приложений

В завершении добавьте еще одну составляющую палочки и примените к ней следующие стили слоя.

Иконка для мобильных приложений

Иконка для мобильных приложений

Иконка для мобильных приложений

Теперь создадим кисть, которая состоит из двух частей. Для начала создайте фигуру кисточки используя инструмент Pen Tool (P) (Перо).

Иконка для мобильных приложений

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

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

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Выберите инструмент Brush Tool (B) (Кисть) маленького размера с жесткими краеми и нарисуйте ворсинки, как показано ниже. Чтобы ускорить процесс, измените значение Spacing Propriety (Интервал) (F5) а также периодически изменяйте цвет кисти.

Иконка для мобильных приложений

Создайте новый слой и при помощи инструмента Brush Tool (B) (Кисть) добавьте тень к нижней части кисти, а верхнюю часть осветлите в ярко-желтый цвет.

Иконка для мобильных приложений

Инструментом Pen Tool (P) (Перо) нарисуйте цилиндрическую форму. Это будет вторая часть кисти.

Иконка для мобильных приложений

Примените к ней следующие стили:

Inner Shadow (Внутренняя тень):

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Откройте текстуру дерева и разместите ее поверх ручки кисти. Создайте обтравочную маску Clipping Mask (Ctrl + Alt + G) и измените режим слоя с текстурой на Overlay (Перекрытие).

Иконка для мобильных приложений

Для создания металлической части кисти воспользуйтесь инструментом Pen Tool (Перо) и примените стили слоя. Также добавьте тень кистью маленького размера.

Иконка для мобильных приложений

Иконка для мобильных приложений

Иконка для мобильных приложений

Иконка для мобильных приложений

Иконка для мобильных приложений

На новом слое инструментом Brush Tool (B) (Кисть) нарисуйте дым вокруг волшебной палочки.

Иконка для мобильных приложений

С помощью инструмента Custom Shape Tool (Произвольная фигура) создайте звезду.

Иконка для мобильных приложений

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

Иконка для мобильных приложений

Иконка для мобильных приложений

Иконка для мобильных приложений

Продублируйте слой со звездой несколько раз и расположите их вокруг волшебной палочки. Измените размер каждой из них.

Иконка для мобильных приложений

На новом слое кистью маленького размера нарисуйте небольшие искорки вокруг волшебной палочки, затем нарисуйте капли краски от кисти на краю стакана.

Иконка для мобильных приложений

С помощью инструмента Brush Tool (B) (Кисть) на новом слое добавьте свет синего цвета.

Иконка для мобильных приложений

Нам осталось добавить тень для значка и создать градиентный фон на отдельных слоях.

Иконка для мобильных приложений

Конечное изображение:

Иконка для мобильных приложений

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