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

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

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

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

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

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

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

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

Палитра цветов Material Design: https://goo.gl/EVxUSx — скопируйте файл Material Palette.ase из архива в каталог с палитрами Adobe Illustrator (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\Swatches)
Шрифты: https://goo.gl/GQbKob — установите шрифты в систему, а так же скопируйте файлы шрифтов в папки C:\Program Files\Common Files\Adobe\Fonts и C:\Program Files (x86)\Common Files\Adobe\Fonts
Сетка для удобной работы с иконками (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>
Удалите все фигуры <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

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

Переключитесь на фигуру «Символ» скопируйте (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

Готово!