Иконка ретро-камеры для iOS

25 июня 2014 · Глеб Х. · «Мир Фотошопа»

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

Шаг 1

Прежде, чем начать создание иконки, нужно прояснить несколько вещей. Во-первых, не делайте скруглённые углы на базовых формах иконки. Apple автоматически отсечёт часть иконки и добавит сияния на неё (опционально). Во-вторых, будьте точны в размерах и помните, что иконка размером 1024х1024 может выглядеть хорошо, но иконка размером 72х72 пикселя будет выглядеть по-другому. Пробуйте разные размеры, чтобы понять, как всё будет выглядеть. И последнее, если Вы создаёте иконки для Retina-дисплея, то размер нужно увеличивать в 2 раза, а также добавлять к имени файла приставку «@2x». Ниже представлены размеры и радиус округления углов иконок.

Шаг 2

Создайте новый документ в Фотошопе (Ctrl + N). Мы создадим иконку размером 1024х1024 пикселя, поэтому размер холста должен быть как минимум 1300х1300 пикселей с разрешением 300 dpi. Инструментом Rectangle Tool (U) создайте квадрат размером 1024х1024 пикселя цветом #0f0f0f. Назовите слой «Base shape».

Шаг 3

Создайте новый слой для квадрата. Он должен иметь обтравочную маску (Ctrl + Alt + G). Залейте этот слой любым цветом при помощи инструмента Paint Bucket Tool (G). Уменьшите Fill (заливку) до 0% и примените стиль Gradient Overlay:

Шаг 4

Создайте ещё один слой для квадрата. Выберите инструмент Rounded Rectangle Tool (U) и на верхней панели установите Radius на 180 пикселей. Заполните его цветом #252525. Инструментом Move Tool (V) опустите эту фигуру вниз, чтобы создать объёмность. Примените стили, показанные ниже.

Шаг 5

Создайте копию скругленного квадрата, уменьшите её заливку до 0% и замените стили:

Шаг 6

Создайте новый слой и добавьте несколько сияний при помощи инструмента Pen Tool (P) и обводки контура. Для обводки используйте жёсткую кисть размером 3 пикселя и включите имитацию нажима.

Шаг 7

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

Шаг 8

Выберите мягкую кисть в режиме Overlay с 60% непрозрачностью и добавьте световые отражения.

Шаг 9

Создайте копию кнопки, которую мы только что создали. Поверните её в другую сторону (Edit → Transform → Flip Horizontal) и расположите на правой стороне.

Шаг 10

Создайте новый слой и расположите его над градиентным слоем 3-го шага. Нарисуйте три линии, как показано на скриншоте ниже. Все три линии должны быть на одном слое. Уменьшите заливку слоя до 0% и примените несколько стилей.

Шаг 11

Создайте новый слой и добавьте световые отражения, чтобы создать объёмность.

Шаг 12

Следующие слои не должны быть привязаны к базовой форме (слою «Base shape»). На самом верху панели слоёв создайте новый слой. Выберите инструмент Rounded Rectangle Tool (U) и нарисуйте несколько закруглённых прямоугольников цветом #252525. Радиусы этих прямоугольников: 20, 10 и 5. Все прямоугольники объедините и примените стили, показанные ниже.

Шаг 13

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

Шаг 14

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

Шаг 15

Создайте новый слой и инструментом Ellipse Tool (U) нарисуйте круг цветом #cccccc. Добавьте маску и сотрите центральную часть круга. После этого примените стили.

Шаг 16

На новом слое создайте круг меньшего размера цветом #dcf9f9.

Шаг 17

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

Шаг 18

Объедините слои шагов 15-18 в группу «Mirror». Далее мы создадим винты. Создайте маленький овал, создайте копию и немного поднимите её. Между двумя эллипсами создайте прямоугольник. Измените цвет всех фигур на #c2c2c2. Объедините прямоугольник с нижним эллипсом и примените стили, показанные ниже.

Шаг 19

К верхнему эллипсу примените следующие стили:

Шаг 20

Инструментом Rectangle Tool (U) создайте перекрестие цветом #898989. В режиме Free Transform (Ctrl + T) поверните его на 45 градусов, активируйте режим Distort через правый клик и измените перспективу. Примените стили, показанные ниже.

Шаг 21

Объедините слои шагов 18-20 и назовите группу «Screw». Создайте несколько копий группы и расположите винты, как показано ниже. Нижний винт был перевёрнут и увеличен в размере.

Шаг 22

Добавьте световые отражения.

Шаг 23

Создайте новый слой и создайте на нём закруглённый прямоугольник радиусом 5 пикселей цветом #abcedb. Примените стили, показанные ниже.

Шаг 24

Создайте копию прямоугольника, создайте для неё обтравочную маску и немного поднимите. Замените стили:

Шаг 25

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

Шаг 26

На данный момент иконка должна выглядеть так:

Шаг 27

Теперь нам нужно создать объектив камеры. Инструментом Ellipse Tool (U) создайте круг цветом #252525 и примените стили, показанные ниже.

Шаг 28

На новом слое создайте световое отражение.

Шаг 29

Создайте копию круга 27-го шага и удалите с неё стили. Опустите слой немного и уменьшите на 5 пикселей. Примените стили, показанные ниже.

Шаг 30

Создайте световые отражения.

Шаг 31

Повторите 29-ый шаг, но с другими настройками стилей.

Шаг 32

Создайте новый круг меньшего размера цветом #2c292d. Примените стиль Inner Shadow.

Шаг 33

Создайте 7 копий круга и каждую из них уменьшите на 10 пикселей.

Шаг 34

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

Шаг 35

Создайте новый слой и создайте круг такого же размера, как и на 29-ом шаге. Залейте этот круг цветом #d5d3d0 и добавьте маску. Скройте внутреннюю часть круга, как показано на втором скриншоте.

Затем примените стили:

Шаг 36

На новом слое создайте ещё один круг и примените к нему несколько стилей.

Шаг 37

Создайте копию круга и уменьшите заливку до 0%. Уменьшите круг на 5 пикселей и измените стили.

Шаг 38

Создайте маленький круг, уменьшите заливку до 0% и примените пару стилей.

Шаг 39

Ещё один круг:

Шаг 40

И ещё один круг:

Шаг 41

Выберите мягкую кисть и добавьте ещё пару световых отражений. Попробуйте разные режимы кисти: Overlay, Color Dodge.

Шаг 42

Постарайтесь создать что-то подобное:

Шаг 43

Создайте прямоугольник цветом #252525 и примените к нему стили.

Шаг 44

Создайте новый слой и объедините его с прямоугольником предыдущего шага. Выделите прямоугольник и сожмите выделение на 3 пикселя (Select → Modify → Contract). Инвертируйте выделение (Ctrl + Shift + I) и нажмите Delete. Примените градиентную заливку.

Шаг 45

Соберите фигуру из закруглённых прямоугольников с радиусами 5 и 20 пикселей. Цвет фигуры — #252525. Примените к ней следующие стили:

Шаг 46

На новом слое добавьте световые отражения.

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта naldzgraphics.net, автор перевода указан в начале урока.