Иконка ретро-камеры для iOS
17.10.2018
Конечный результат:
Шаг 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».
ТОП 15 ПРИЛОЖЕНИЙ И СЕРВИСОВ , которые сделают вас УМНЕЕ и ЭРУДИРОВАНЕЕ
Шаг 3
Создайте новый слой для квадрата. Он должен иметь обтравочную маску (Ctrl + Alt + G). Залейте этот слой любым цветом при помощи инструмента Paint Bucket Tool (G). Уменьшите Fill (заливку) до 0% и примените стиль Gradient Overlay:
Шаг 4
Создайте ещё один слой для квадрата. Выберите инструмент Rounded Rectangle Tool (U) и на верхней панели установите Radius на 180 пикселей. Заполните его цветом #252525 . Инструментом Move Tool (V) опустите эту фигуру вниз, чтобы создать объёмность. Примените стили, показанные ниже.
Избавляемся от TouchWiz (тачвиза) на Samsung
Шаг 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
На новом слое добавьте световые отражения.