Иконка — достаточно важный элемент любого приложения, так как на ее основании у пользователя может сложится первое впечатление о программе. Поэтому уметь создавать хорошие иконки — достаточно важный навык для разработчиков. Сегодня мы будем создавать иконку фотокамеры в стиле ретро для iOS. Для создания будем использовать основные формы Photoshop и настройки стилей слоя. 

Подробности урока:

• Программа: Adobe Photoshop CS6
• Сложность: Advanced
• Время: 2 hours

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

Шаг 1

Перед тем, как приступать к выполнению урока, нужно выяснить некоторые вещи относительно IOS иконок. При создании IOS  иконок можно не применять форму с закругленными углами - Apple будет делать обрезку автоматически, а также пр необходимости добавлять блеск или глянцевый эффект. Также нужно не забыть экспериментировать с размерами иконки, чтобы убедиться, что она выглядит наилучшим образом. И последнее —  Retina-совместимость ваших иконок. "Retina дисплей" — название LCD экранов от Apple, которые имеют более высокую плотность пикселей, что позволяет глазу видеть вещи более гладко, без пикселизаций. Итак, если вы хотите, чтобы ваша иконка была совместима с Retina дисплеями, нужно просто добавить в название вашей иконки следующее - "@ 2x" и увеличить ее размер в два раза. Например, вы создаете иконку с размерами  72 × 72  и сохраняете ее как "camera.png". Все, что вам нужно сделать, создать дополнительную версию, установить  ее размеры 144 × 144 и сохранить как "[email protected]". Ниже приведены размеры иконок и радиусы закругления их углов: 

Шаг 2

Приступим к созданию иконки. Открываем фотошоп и создаем новый файл. Размеры файла 1024 × 1024, размеры холста (canvas) -  1300 × 1300. Устанавливаем разрешение 300 dpi. Теперь берем Rectangle Tool (U) и создаем квадрат 1024 × 1024. Заливаем его темный цветом 0f0f0f и называем слой “Base shape”.

Шаг 3

Создайте новый слой, закрепите его, создайте выделение предыдущего слоя и залейте выделение произвольным цветом. Установите Fill на 0% и примените следующий градиент.

Шаг 4

Создайте новый слой и еще раз закрепите его. Выберите Rounded Rectangle Tool (U) (Прямоугольник с закругленными краями) и установите радиус — 180px. Нарисуйте большой скругленный квадрат и залейте его цветом # 252525. Переместите его немного вниз, чтобы добавить вашему значок 3D-эффект. Примените следующие стили:

Шаг 5

Дублируйте этот скругленный квадрат и измените заливку копии на 0%.  Измените стили слоя:

Шаг 6

Создайте новый слой и используйте некоторые штрихи, используя Pen Tool  и команду Stroke Path ( жесткая  круглая кисть, 3 пикселя, pressure simulation: on).

Шаг 7

Следующим важным моментом является создание кнопок на верхней части. Выбираем  Rounded Rectangle Tool (U), сохранить радиус 180p и создаем форму. Размещаем слой ниже слоя, созданного в шаге 3 (закрепляем его), заливаем цветом  # e8dece и добавьте маску слоя. Закрашиваем черным, стирая ненужный участки. Продолжайте. пока не получите нужный результат. Затем просто примените следующие стили слоя:

Шаг 8

Добавляем другие моменты, используя мягкую круглую кисть:  (цвет: белый, режим наложения:  overlay (Перекрытие), непрозрачность: 60%).

Шаг 9

Дублируйте кнопку, переверните копию по горизонтали (Edit>Transform Path>Flip Horizontal) и переместите в другую часть иконки.

Шаг 10

Создайте новый слой, поместите его сразу после градиентного слоя, созданного на шаге 3 и нарисуйте три линии (используйте  изображение в качестве ориентира). Объедините их и измените Fill до 0%. Затем добавьте следующие стили:

Шаг 11

Создайте новый слой и добавим несколько деталей для создания глубины.

Шаг 12

Создаем новый слой и помещаем его над остальными слоями. Выберите Rounded Rectangle Tool (U) и нарисуйте закругленные прямоугольники (цвет: # 252525). Радиусы, которые мы использовали, являются: 20, 10, 5. Используйте изображение в качестве ориентира. Как только вы закончите, объедините все прямоугольники и к новому слою  примените следующие стили: 

Шаг 13

Создайте новый слой и, используя ту же, что и в предыдущем шаге, нарисуйте  фигуру , как показано на изображении (радиусы: 20, 5). Когда фигура будет создана, объедините их и примените следующие стили. 

Шаг 14

Создайте новый слой и создайте выделение предыдущей формы. Закрасьте выделение белым и  перейдите в Filter> Pixelate> Mezzotint, затем Filter> Blur> Motion Blur (угол: 0, расстояние: 20-25). Измените режим смешивания на Color Burn (Затемнение основы)  и уменьшите непрозрачность до 40%.

Шаг 15

Теперь создайте новый слой, выберите инструмент Ellipse Tool (U) и нарисуйте круг (удерживая Shift). Заполните его цветом # CCCCCC и добавьте маску слоя. Закрасьте черным область на изображении ниже (красный цвет), а затем примените следующие стили.

Шаг 16

Создайте новый слой и нарисуйте маленький круг. Заполните его цветом # dcf9f9 и примените эти стили.

Шаг 17

Добавьте некоторые элементы чтобы добавить зеркальный эффект. 

Шаг 18

Сгруппируйте слои, созданные в шагах 15-18 и назовите группу “Mirror” (или другое название). Теперь будем создавать несколько шурупов. Для этого нужно снова скомбинировать несколько фигур. Рисуем маленькие эллипс  (Ellipse Tool-U), дублируем его, перемещаем копию вверх и создаем прямоугольник между этими двумя эллипсами. Изменяем цвет всех компонентов на # c2c2c2. Объединяем прямоугольник с нижним эллипсом и применяем следующие стили: 

Шаг 19

Выберите верхний эллипс и примените эти стили.

Шаг 20

Выберите Rectangle Tool (U) и нарисуйте два маленьких прямоугольника. Залейте их # 898989 и образуйте из них крестик. Поверните его на 45 градусов, немного деформируйте, чтобы придать ему глубины и примените следующие стили.

Шаг 21

Сгруппируйте слои, созданные в шагах 18-2, и назовите группу  “Screw”. Дублируйте группу три раза и разместите копии соответственно изображению ниже (нижние винты отражены по вертикали и расширены).

Шаг 22

Добавьте дополнительные элементы: 

Шаг 23

Создайте новый слой и выберите инструмент Rounded Rectangle Tool (U). Установите радиус 5px и нарисуйте форму, как на первом изображении. Заполните ее цветом # abcedb и примените следующие стили.

Шаг 24

Дублируйте  форму, обрежьте ее и переместить вверх. Заменить существующие стили.

Шаг 25

Создания следующих элементов нету смысла описывать, так как все техники были уже описаны в шагах выше.

Шаг 26

Ваше изображение должно иметь следующий вид:

Шаг 27

Последний элемент, который мы должны создать, - объектив камеры. Это может показаться достаточно сложным, но на самом деле, все проще, чем кажется. Итак, Итак, возьмите Ellipse Tool (U) и нарисуйте круг. Заполните его цветом # 252525 и примените следующие стили.

Шаг 28

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

Шаг 29

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

Шаг 30

Опять же добавим несколько деталей : 

Шаг 31

Повторите Шаг 29. Примените следующие стили к новому кругу.

Шаг 32

Создайте новый слой и нарисуйте маленький круг. На этот раз залейте его цветом # 2c292d и добавьте следующий стиль внутренней тени.

Шаг 33

Дублируйте этот круг семь раз. Разместите каждую копии на  10px ниже.

Шаг 34

Создайте новый слой и создайте выделите круг,  созданный на шаге 32. Залейте его случайным цветом, измените Fill до 0% и примените следующие стили.

Шаг 35

Создайте новый слой, выберите инструмент Ellipse Tool (U) и нарисуйте круг такого же размера, как в шаге 29. Заполните его цветом # d5d3d0 и добавьте маску слоя. Закрасьте область, которая показана на втором изображении и примените следующие стили.

Шаг 36

Создайте новый слой и выберите инструмент Ellipse Tool (U). Нарисуйте круг и поместить его соответственно изображению ниже. Затем просто добавьте следующие стили.

Шаг 37

Дублируйте этот круг,  измените Fill до 0%, уменьшите его на 5px и замените существующие стили на эти.

Шаг 38

Нарисуйте гораздо меньший круг, залейте его случайным цветом, измените Fill на 0% и добавить следующие стили.

Шаг 39

Нарисуйте еще один маленький круг и добавьте следующие стили (заливка — 0%).

Шаг 40

Нарисуйте еще один маленький круг, измените Fill до 0% и добавьте следующий стиль внутреннего свечения.

Шаг 41

Теперь, все что вам нужно сделать — это добавить некоторые случайные элементы. Используйте мягкую круглую кисть и экспериментируйте с режимом наложения (Overlay, Color Dodge).

Шаг 42

Продолжайте добавлять элементы, пока вы не будете удовлетворены результатом.

Шаг 43

Создайте новый слой и выберите Rectangle Tool (U). Нарисуйте прямоугольник, как на первом изображении, залейте его цветом # 252525 и добавьте стили.

Шаг 44

Создайте новый слой и объединить его с созданным в предыдущем шаге. Теперь выделите этот новый слой и перейдите Select> Modify> Contract и выберите 3 px. Нажмите Shift + Ctrl + I и нажмите Delete. Теперь добавьте этот градиент.

Шаг 45

Объедините три скругленных прямоугольника, чтобы создать форму, показанную на изображении (радиусы 5 и 20). Заполните эти формы цветом # 252525 и объединить их. Примените к новой форме следующие стили: 

Шаг 46

Наконец, создайте новый слой и добавьте некоторые элементы.

Вот и все!

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

Автор: Alan Klim

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