—»     —»   Уроки Photoshop: Разрабатываем иконку iPod Shuffle
  Раздел: Образование и Изучение   Нет комментариев  

Уроки Photoshop: Разрабатываем иконку iPod Shuffle



В нашей сегодняшней статье мы расскажем вам о создании иконок для приложений iOS. Конкретная иконка, которую мы сегодня будем разрабатывать, представляет собой iPod Shuffle – она может быть использована в приложениях музыкального назначения. Также вы научитесь создавать особый эффект, присущий всему оформлению iOS.

В результате у нас должно выйти нечто подобное:

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Приступаем

Создайте новый документ в Photoshop с размерами 512х512 пикселей.

Основа

Пройдите в меню Layer>New Fill Layer>New Gradient Fill для создания новой заливки градацией. Установите параметр угла на 0 градусов, и выставите стиль отражения. В начале градации выставите цвет #CCCCCC, на середине (50%) выставите #E8E8E8. Затем на 75% смените цвет на #A2A2A2, и на 90% смените цвет на #E6E6E6. Последний цвет нужно будет задать на 100%, и он будет #7C7C7C. В итоге должно получиться что-то вроде этого:

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

После того как сделаете это, нажмите правой кнопкой мыши, чтобы дублировать слой, а затем создайте многоугольник размером 512х512 пикселей с параметром закругления углов на 90 пикселей. Переместите векторную маску на дублированный слой. На этом новом слое пройдите в опции смешивания и активируйте эффект внутренней тени (Inner Shadow) и внутреннего свечения (Inner Glow). Во внутренней тени выставьте белый цвет, а режим смешивания установите на Screen. Понизьте уровень плотности отображения до 25%, а в параметр дистанции поставьте цифру 4, в параметр загрязнения выставьте 100, а размер спустите до 0. В опциях эффект внутреннего свечения понизьте уровень плотности отображения до 40%, в параметр размера поставьте 3, а уровень загрязнения повысьте до 100. Кроме того, установите белый цвет свечения, а режим смешивания измените на наложение (overlay). Запутались? Посмотрите на изображение ниже, и убедитесь в том, что всё идёт по плану.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Колёсико управления

Его форму можно создать путём нанесения одной большой окружности. Это можно сделать, создав прямоугольник с закругленными углами, предварительно выставив параметр изгибов углов на нечто около 300 пикселей. После этого, установите режим фигуры на вычитание, и создайте еще одну окружность, меньшую по размеру.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Перейдите в опции смешивания фигур колёсика и установите эффект тени на режим помножения черного (Multiply Black), а далее установите дистанцию на 5 пикселей, а размер на 7 пикселей.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Следующий стиль, который нам понадобится – это внутренняя тень с дистанцией в 22 пикселя и размером в 35 пикселей.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Далее, понизьте уровень плотности отображения до 25%, примените эффект внешнего свечения (Outer Glow), и выставьте режим помножения чёрного (Black Multiply). Здесь нам нужно выставить нечто около 5 пикселей в поле размера.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Далее внутреннее свечение. Уровень плотности отображения должен быть выставлен на 10% + 100% загрязнения и 1 пиксель для размера.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Далее нам нужно добавить немного выпуклости (Bevel). Установите мягкую внутреннюю выпуклость на 100% глубины. Размер должен быть на 0, а параметру белого экрана (White screen) должно быть задано 50% уровня плотности отображения. Параметр помножения чёрного должен быть выставлен на 0%.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Далее нам нужно небольшое наложение градацией. Все параметры должны быть по умолчанию, за исключением цветов. Установите цвета на #141414 к #1e1e1e.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Теперь добавьте контур (Stroke) толщиной в 1 пиксель для того, чтобы у нашего колёсика был эффект глубины. Убедитесь, что режим заливки установлен на Color, а цвет установлен на #191919.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Кнопки управления

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

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Когда вы закончили делать фигуры, примените следующие стили к слою.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle
Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Итоговая кнопка Воспроизведение/Пауза

Все векторные фигуры есть во вспомогательном PSD-документе. Для того чтобы придать кнопкам более реалистичный вид, используйте внутреннюю теню и просто тень.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Теперь примените следующие стили к слою с фигурой.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle
Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Добавление теней

Для того чтобы увеличить эффект глубины в целом, нам нужно применить небольшую градацию. Уровень плотности отображения наложения градации в опциях смешивания должен быть снижен до 25% (для левой стороны) и 50% (для правой стороны). Это нужно для того, чтобы у нас левая сторона получилась черной, а правая – белой. Примерно на 50% градации добавьте еще одно заполнение белым цветом.

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Завершение

Уроки Photoshop: Разрабатываем иконку iPod Shuffle

Надеемся, что данная статья окажется полезной для вас, и что вы почерпнули достаточно интересной информации в области разработки иконок, а также научились использовать стили слоев и придавать реалистичный вид разработке. По данному принципу вы без труда сможете разрабатывать различные иконки, которые в дальнейшем могут быть использованы в iOS. Надеемся, что статья развила ваши навыки!

Скачать PSD-файл
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: иконки, Photoshop, iPod
Опубликовал Mysterious Master   Прочитано (раз): 7700   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31