Как создать иконку приложения в стиле Material Design. Наиболее правильная инструкция

Если Вы задаетесь вопросом, как создать иконку приложения в стиле Material, то Вы попали по адресу!

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

Иконка приложения создается в графическом редакторе Adobe Illustrator CC. Инструкция изложена достаточно кратко. Если знаний редактора не достаточно для повторения, обратитесь к видеозаписи из материалов, приведенных ниже (п.3)

Для написания инструкции использовались следующие материалы

  1. Google Material Design Guidelines: https://www.google.com/design/spec/style/icons.html
  2. What Google missed in their guidelines for Material Design iconography: https://goo.gl/5SpsVn
  3. How To Create A Material Design Icon In Adobe Illustrator: https://youtu.be/GzXq6ouGTpE

Исходные файлы

Вам необходимо скачать несколько файлов, которые помогут в разработке

  1. Палитра цветов Material Design: https://goo.gl/EVxUSx — скопируйте файл Material Palette.ase из архива в каталог с палитрами Adobe Illustrator (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\Swatches)
  2. Шрифты: https://goo.gl/GQbKob — установите шрифты в систему, а так же скопируйте файлы шрифтов в папки C:\Program Files\Common Files\Adobe\Fonts и C:\Program Files (x86)\Common Files\Adobe\Fonts
  3. Сетка для удобной работы с иконками (Product Icon Sticker Sheet): https://goo.gl/CYE2jV — содержит 4 шаблона иконок приложения

Подготовка к действию

Скопируйте файл палитры цветов в библиотеку Adobe Illustrator, затем выберите появившуюся палитру из списка Swatch Libraries в панели Swatches. Установите шрифты и проверьте их доступность в Adobe Illustrator. Если шрифт Roboto Regular недоступен, скопируйте файлы шрифтов в каталоги, указанные выше в исходных файлах. Разархивируйте файлы с сетками и откройте их в Adobe Illustrator. Выберите тот, который Вам подходит больше, остальные закройте. В этих шаблонах уже организованы правильные тени и блики — их значения можно брать за основу. Приступаем.

Создание иконки в стиле Material

В данной инструкции будем создавать простейшую иконку одной из описанных в руководстве геометрических форм. Шаблон иконок имеет размер 192×192 pt, что очень удобно для манипулирования значениями размеров. Геометрические размеры самой иконки, в зависимости от ее вида, следующие:

  • квадратная иконка: 152×152 pt
  • прямоугольная: 176×128 pt
  • круглая: ⌀ 176 pt

Закругление углов квадратной и прямоугольной иконки: 12 pt

Рассмотрим на примере создание квадратной иконки

  • Создаем новый слой для нашей иконки, называем его «Моя иконка» и создадим фоновое изображение на нем
  • Выбираем инструмент Rectangle Tool (M) и выполняем щелчок на рабочей области. В появившемся окне вводим размеры: ширина 152 и высота 152. Жмем ОК
    Создание прямоугольника
  • На верхней панели нажимаем Transform и указываем координаты X и Y 96 pt
    Координаты прямоугольника
  • Там же на верхней панели в поле Corner Radius вводим значение 12 pt
    Радиус изгиба
  • Указываем цвет заливки, выбрав его из основных цветов палитры Material (например Indigo 500 — Primary) и отключаем цвет обводки
    Выбор цвета заливки и отключение обводки
  • Переименуем данную фигуру в «Фон» на палитре слоев (не слой, а фигуру)

 

После всех проделанных манипуляций Вы должны увидеть примерно следующее:

Синий прямоугольник со скругленными краями

Следующее действие — создание зоны блика и тени фона

  • В слоях выделите фигуру с фоном (переключателем справа) и выполните операцию копирования (Ctrl+C) и дважды вставки вперед (Ctrl+F). В итоге должно получиться три одинаковых фигуры. С новыми двумя фигурами будем работать дальше
  • Переключитесь на среднюю в списке фигуру «Фон» (переключателем справа) и выполните смещение объекта вниз на 1 dp (одиночным нажатием стрелки вниз на клавиатуре)
  • Теперь выделите правым переключателем обе только что созданные фигуры (верхнюю и среднюю) и выполните операцию обрезки «Minus Back» — в итоге должна получиться новая фигура в виде узкой полоски вверху основной фигуры — это так называемый блик. Переименуйте фигуру в «Блик»
    обрезка
  • Установите для получившейся фигуры блика заливку белым цветом с непрозрачностью 20%
  • В слоях снова выделите фигуру с фоном и выполните операцию копирования (Ctrl+C) и дважды вставки назад (Ctrl+B). В итоге получится еще две фигуры с фоном ниже текущей фигуры
  • Переключитесь на среднюю в списке фигуру «Фон» (переключателем справа) и выполните смещение объекта вверх на 1 dp (одиночным нажатием стрелки вверх на клавиатуре)
  • Теперь выделите правым переключателем две фигуры «Фон» (верхнюю и среднюю) и выполните операцию обрезки «Minus Back» — в итоге должна получиться новая фигура в виде узкой полоски внизу основной фигуры — это так называемая тень. Переименуйте фигуру в «Тень»
  • Установите для получившейся фигуры тени заливку цветом, в зависимости от цвета фона с непрозрачностью 20%. Узнать этот цвет можно из таблицы «Tint, shade, and shadow values» по ссылке: https://goo.gl/8Vkg33 В нашем случае для фона Indigo тень должна быть цвета Indigo 900
  • В итоге должно получиться три фигуры в данной очередности: «Блик», «Тень» и «Фон»
    Фигуры фона

На этом работа с фоном завершена

Создание знака иконки

Для простоты описания процесса разместим на фоне символ алфавита «В»

  • Создайте надпись, содержащую одну букву размером примерно 150 pt и цвета Grey 100
  • Переведите текст в кривые (меню: Type — Create Outlines)
  • Отцентруйте символ относительно фона (либо наоборот, сдвиньте по вкусу). Напомню, что центр имеет координаты 96×96 pt, если Вы пользуетесь цифрами
    Символ на фоне
  • Переименуйте фигуру в списке слоев на «Символ»

Создание длинной тени для знака

  • В слоях выделите фигуру с символом (переключателем справа) и выполните операцию копирования (Ctrl+C) и дважды вставки вперед (Ctrl+F). В итоге должно получиться три одинаковых фигуры «Символ». С новыми двумя фигурами будем работать дальше
  • Переключитесь на верхнюю фигуру «Символ», и удерживая клавишу Shift вынесите фигуру за пределы холста под 45° вправо и вниз — это заготовка для формирования длинной тени
    Перенос копии фигуры по диагонали вниз вправо
  • В итоге средняя и нижняя фигура в списке слоев должны быть расположены по центру фона, а верхняя должна быть за пределами холста справа снизу. Нижнюю фигуру пока не трогаем
  • Теперь выделите правым переключателем две фигуры «Символ» — верхнюю и среднюю, зайдите в меню Object — Blend — Blend Options, включите режим Specified Steps, укажите 200 шагов и нажмите ОК, затем выполните команду меню Object — Blend — Make. На базе двух фигур будет создана одна в виде перетекания между двумя старыми
    Будущая тень
  • Не снимая выделения с получившейся фигуры, выполните действие в меню Object — Expand… и нажмите ОК — произойдет разбиение перетекания на отдельные полигоны
  • Выполните объединение полигонов (Unite)
    Объединение полигонов
  • Переименуйте получившуюся фигуру <Path> с будущей тенью в «Длинная тень»
  • Теперь создадим маску. Скопируйте фоновую фигуру «Фон» (Ctrl+C) и произведите вставку Past in Place (Shift+Ctrl+V). В результате фигура с фоном будет вставлена поверх всех фигур в слое
  • Выделите правым переключателем только что вставленный «Фон», который в самом верху, и фигуру «Длинная тень» и выполните обрезку Crop. В результате получим группу фигур <Group>, содержащую несколько фигур <Path>
    Обрезка Crop
  • Удалите все фигуры <Path>, за исключением самой тени — она полностью белая и, скорее всего, расположена выше остальных <Path>. На скриншоте указана фигура, которую следует удалить из группы
    Удаление лишних Path
  • Переименуйте <Group> в «Длинная тень» и расположите его под фигурой «Символ»
    Порядок фигур
  • Переключитесь на фигуру «Длинная тень», затем на панели Gradient выберите тип Linear, угол −45°, начальный и конечный цвет такой же, какой выбирали для тени фона — в нашем случае это Indigo 900 (Ваш цвет выбирайте из таблицы «Tint, shade, and shadow values» по ссылке: https://goo.gl/8Vkg33), непрозрачность левой части 20%, непрозрачность левой правой части 0% и положение средней точки 33%
    Параметры градиента для длинной тени
  • Теперь необходимо почистить фигуру тени от «ступенек», которые образовались во время Blanding (перетекания фигур). Сделайте активным фигуру «Длинная тень» и увеличьте изображение достаточно сильно, чтобы оценить край фигуры
    Ступенчатый край фигуры длинной тени
  • Выберите инструмент Lasso Tool и выделите точки таким образом, чтобы не задеть крайние, как показано ниже
    Выделение лишних точек длинной тени
  • Удалите лишние точки при помощи инструмента Remove selected anchor points
    Remove selected anchor points

Создание зоны блика и тени знака

  • Переключитесь на фигуру «Символ» скопируйте (Ctrl+C) и дважды вставьте наперед (Ctrl+F) две новые фигуры
  • Выберите среднюю фигуру «Символ» и сдвиньте вниз на 1 pt (один раз нажать стрелку вниз на клавиатуре)
  • Теперь выделите правым переключателем обе только что созданные фигуры (верхнюю и среднюю) и выполните операцию обрезки «Minus Back» — в итоге должна получиться новая фигура <Group> в виде узкой полоски вверху основной фигуры — это так называемый блик. Переименуйте фигуру в «Блик символа»
  • Установите для получившейся фигуры блика заливку белым цветом с непрозрачностью 20%
  • Переключитесь на фигуру «Символ» и примените эффект Stylize — Drop Shadow с параметрами: режим Normal, непрозрачность 20%, смещение по X и по Y 4 dp, размытие 4 dp, цвет тени из таблицы «Tint, shade, and shadow values» по ссылке: https://goo.gl/8Vkg33
    Тень символа
  • На панели Appearance к текущей фигуре «Символ» примените функцию «Add new Fill», чтобы получить возможность добавления еще одной тени, если символ изменил цвет заливки, укажите снова значение цвета заливки Fill: Grey 100
    Добавление заливки
  • Затем примените к фигуре «Символ» еще один эффект тени Stylize — Drop Shadow с параметрами: режим Normal, непрозрачность 20%, смещение X 0 pt, смещение Y 1 pt, размытие 0 pt, цвет как и в предыдущий раз (из таблицы теней)

Создание светового блика для всей иконки

  • Скопируйте фигуру фона «Фон», создайте новый слой и вставьте фигуру фона на него. Отключите заливку фигуры. Переименуйте слой в «Освещение»
  • Создайте для фигуры на новом слое градиентную заливку с параметрами: тип Radial, цвет начала и конца градиента — белый, непрозрачность начала градиента 10%, конца градиента 0%, положение средней точки 33%
  • При помощи инструмента Gradient Tool (G) создайте градиент от верхнего левого угла фона к нижнему правому, после чего измените угол градиента в настройках на −45°

Создание общей тени для всей иконки

  • Примените эффект тени Stylize — Drop Shadow к заливке (Fill) фигуры «Фон» слоя с иконкой «Моя иконка» со следующими параметрами: режим Multiply, непрозрачность 12%, смещение по X и Y 0 pt, размытие 2 pt, цвет тени черный (здесь всегда черный)
  • На панели Appearance к текущей фигуре «Фон» примените функцию «Add new Fill», чтобы добавить еще одну заливку для добавления на нее еще одной тени
  • Примените эффект тени Stylize — Drop Shadow к только созданной заливке с параметрами: режим Multiply, непрозрачность 24%, смещение по X 0 pt, смещение по Y 4 pt, размытие 2 pt, цвет тени черный (здесь всегда черный)
    Две тени для фона

Итоговое изображение иконки выглядит так

Итоговое изображение иконки

Сохранение иконки

  • Отключите все вспомогательные слои. Должны остаться включенными только два слоя «Моя иконка» и «Освещение»
  • Выполните сохранение 5 вариантов иконки, используя функцию File — Save For Web и формат PNG-24 с прозрачностью. Убедитесь также, что включена опция Clip to Artboard
    Настройки сохранения
  • Имя файла сохраняемых иконок должно быть ic_launcher.png
  • 6 копий сохраняются в 5 разных каталогов. В каждый каталог свой размер изображения. Далее приведены имена каталогов и размер изображений файла ic_launcher.png, которые должны находиться в этих каталогах:
    • mipmap-mdpi = 48×48 px
    • mipmap-hdpi = 72×72 px
    • mipmap-xhdpi = 96×96 px
    • mipmap-xxhdpi = 144×144 px
    • mipmap-xxxhdpi = 192×192 px

В итоге получаются следующие иконки:

mipmap-mdpimipmap-hdpi  mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi

 

Как создать иконку приложения в стиле Material Design. Наиболее правильная инструкция: 10 комментариев

  1. Затем примените к фигуре «Символ» еще один эффект тени Stylize — Drop Shadow с параметрами: режим Normal, непрозрачность 20%, смещение X 0 pt, смещение Y 1 pt, размытие 0 pt, цвет как и в предыдущий раз (из таблицы теней)

    Эти указания приводят к тени которой явно нет в конце!

  2. Замечательный урок! Я так поняла автор воспользовался зарубежными источниками и переведя получилось вот это:) Хорошая работа!
    Нигде нет уроков на русском по созданию набора иконок, может автор переведёт эту статью http://forum.xda-developers.com/showthread.php?t=2399426 ? Было бы здорово!

    1. Спасибо.
      Я публикую в блоге в первую очередь инструкции, которые я пишу по собственной необходимости.
      Если мне станет необходимо в работе создать набор иконок, я обязательно, как обычно, накопаю гору материала, испробую всё и напишу четкую инструкцию со 100% гарантией результата, как эта.
      Спасибо за ссылку. Если мне придется делать набор, обязательно обращусь к этой статье и обязательно напишу свою простую и понятную инструкцию, как всегда.
      Удачи!

      1. Я нашел её начав вводить в поиск английские теги. Попробуйте добавить такие слова как «урок», «создание», или написать что-то вроде «как создать иконку в стиле material».

Добавить комментарий