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

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

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

15 мая 2013 | Опубликовано в Уроки | 3 Комментариев »

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

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

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

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

1_retro_camera_photoshop

Шаг 1

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

camicon-01

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

camicon-06

Шаг 7

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

camicon-07
camicon-071
camicon-072
camicon-073
camicon-074

Шаг 8

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

Шаг 9

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

camicon-09

Шаг 10

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

Шаг 11

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

Шаг 12

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

camicon-121
camicon-122
camicon-123
camicon-124
camicon-125

Шаг 13

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

camicon-13
camicon-131
camicon-132
camicon-133
camicon-134

Шаг 14

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

Шаг 15

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

Шаг 16

Создайте новый слой и нарисуйте маленький круг. Заполните его цветом # dcf9f9 и примените эти стили.
camicon-16
camicon-161
camicon-162
camicon-163
camicon-164
camicon-165
camicon-164
camicon-165

Шаг 17

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

Шаг 18

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

camicon-18
camicon-181
camicon-182

Шаг 19

Выберите верхний эллипс и примените эти стили.
camicon-19
camicon-191
camicon-192

Шаг 20

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

Шаг 21

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

Шаг 22

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

Шаг 23

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

Шаг 24

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

Шаг 25

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

camicon-25

Шаг 26

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

Шаг 27

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

camicon-27
camicon-271
camicon-272
camicon-273
camicon-274

Шаг 28

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

camicon-28

Шаг 29

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

Шаг 30

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

Шаг 31

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

Шаг 32

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

Шаг 33

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

Шаг 34

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

Шаг 35

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

Шаг 36

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

Шаг 37

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

Шаг 38

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

Шаг 39

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

Шаг 40

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

Шаг 41

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

Шаг 42

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

Шаг 43

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

Шаг 44

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

Шаг 45

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

Шаг 46

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

Вот и все!

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

1_retro_camera_photoshop

Автор: Alan Klim

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




Комментарии

  1. Mike
    Thumb up Thumb down 0

    =-O

  2. Дисо
    Thumb up Thumb down 0

    ещё не начал делать а уже не знаю смогу ли закончить 8)

  3. AlbinoS
    Thumb up Thumb down 0

    Все с помощью стиля слоя ? эмм =-O пойду делать *CRAZY*

[an error occurred while processing the directive]


[an error occurred while processing the directive]