В результате у нас должно выйти нечто подобное:
Приступаем
Создайте новый документ в Photoshop с размерами 512х512 пикселей.
Основа
Пройдите в меню Layer>New Fill Layer>New Gradient Fill для создания новой заливки градацией. Установите параметр угла на 0 градусов, и выставите стиль отражения. В начале градации выставите цвет #CCCCCC, на середине (50%) выставите #E8E8E8. Затем на 75% смените цвет на #A2A2A2, и на 90% смените цвет на #E6E6E6. Последний цвет нужно будет задать на 100%, и он будет #7C7C7C. В итоге должно получиться что-то вроде этого:
После того как сделаете это, нажмите правой кнопкой мыши, чтобы дублировать слой, а затем создайте многоугольник размером 512х512 пикселей с параметром закругления углов на 90 пикселей. Переместите векторную маску на дублированный слой. На этом новом слое пройдите в опции смешивания и активируйте эффект внутренней тени (Inner Shadow) и внутреннего свечения (Inner Glow). Во внутренней тени выставьте белый цвет, а режим смешивания установите на Screen. Понизьте уровень плотности отображения до 25%, а в параметр дистанции поставьте цифру 4, в параметр загрязнения выставьте 100, а размер спустите до 0. В опциях эффект внутреннего свечения понизьте уровень плотности отображения до 40%, в параметр размера поставьте 3, а уровень загрязнения повысьте до 100. Кроме того, установите белый цвет свечения, а режим смешивания измените на наложение (overlay). Запутались? Посмотрите на изображение ниже, и убедитесь в том, что всё идёт по плану.
Колёсико управления
Его форму можно создать путём нанесения одной большой окружности. Это можно сделать, создав прямоугольник с закругленными углами, предварительно выставив параметр изгибов углов на нечто около 300 пикселей. После этого, установите режим фигуры на вычитание, и создайте еще одну окружность, меньшую по размеру.
Перейдите в опции смешивания фигур колёсика и установите эффект тени на режим помножения черного (Multiply Black), а далее установите дистанцию на 5 пикселей, а размер на 7 пикселей.
Следующий стиль, который нам понадобится – это внутренняя тень с дистанцией в 22 пикселя и размером в 35 пикселей.
Далее, понизьте уровень плотности отображения до 25%, примените эффект внешнего свечения (Outer Glow), и выставьте режим помножения чёрного (Black Multiply). Здесь нам нужно выставить нечто около 5 пикселей в поле размера.
Далее внутреннее свечение. Уровень плотности отображения должен быть выставлен на 10% + 100% загрязнения и 1 пиксель для размера.
Далее нам нужно добавить немного выпуклости (Bevel). Установите мягкую внутреннюю выпуклость на 100% глубины. Размер должен быть на 0, а параметру белого экрана (White screen) должно быть задано 50% уровня плотности отображения. Параметр помножения чёрного должен быть выставлен на 0%.
Далее нам нужно небольшое наложение градацией. Все параметры должны быть по умолчанию, за исключением цветов. Установите цвета на #141414 к #1e1e1e.
Теперь добавьте контур (Stroke) толщиной в 1 пиксель для того, чтобы у нашего колёсика был эффект глубины. Убедитесь, что режим заливки установлен на Color, а цвет установлен на #191919.
Кнопки управления
Для того чтобы добавить кнопки, воспользуйтесь ручкой. Помните, ручка – это самый сильнейший инструмент Photoshop, которым вы должны овладеть в обязательном порядке.
Когда вы закончили делать фигуры, примените следующие стили к слою.
Итоговая кнопка Воспроизведение/Пауза
Все векторные фигуры есть во вспомогательном PSD-документе. Для того чтобы придать кнопкам более реалистичный вид, используйте внутреннюю теню и просто тень.
Теперь примените следующие стили к слою с фигурой.
Добавление теней
Для того чтобы увеличить эффект глубины в целом, нам нужно применить небольшую градацию. Уровень плотности отображения наложения градации в опциях смешивания должен быть снижен до 25% (для левой стороны) и 50% (для правой стороны). Это нужно для того, чтобы у нас левая сторона получилась черной, а правая – белой. Примерно на 50% градации добавьте еще одно заполнение белым цветом.
Завершение
Надеемся, что данная статья окажется полезной для вас, и что вы почерпнули достаточно интересной информации в области разработки иконок, а также научились использовать стили слоев и придавать реалистичный вид разработке. По данному принципу вы без труда сможете разрабатывать различные иконки, которые в дальнейшем могут быть использованы в iOS. Надеемся, что статья развила ваши навыки!
Скачать PSD-файл
Внимание! У вас нет прав для просмотра скрытого текста.
