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

Вы веб-разработчик или веб-дизайнер и хотите идти в ногу со временем? Тогда бесплатные иконки в стиле Material Design - это просто мастхэв!

Что такое Material Design

Material Design - это дизайн софта от Гугла, призванный объединить все его продукты и сервисы под одним универсальным интерфейсом, чтобы пользователям было удобнее.

Ключевая идея Material Design - создать у пользователей интуитивное ощущение работы с реальными физическими объектами.

Иконки в стиле Material Design

Сегодня я предлагаю вашему вниманию более 900 бесплатных иконок в стиле Material Design, которые вы можете свободно использовать на своих собственных сайтах.

Эти иконки просты, дружелюбны и современны. Каждая иконка создана дизайнерами с помощью рекомендаций по проектированию от Гугла, чтобы изобразить в простых и минимальных формах универсальные понятия, используемые обычно во всех пользовательских интерфейсах.

Иконки Material Design обеспечивают легкую читаемость и ясность в больших и малых размерах, оптимизированы для адекватного отображения на всех распространенных платформах и разрешениях экрана.

Бесплатные иконки Material Design доступны в форматах SVG и PNG, а также в виде шрифта для веб.

Проще всего использовать Material Design иконки именно в виде шрифта, подключаемого с сервера самого Гугла. Сделать это очень просто:

Как подключить иконки Material Design

И в файле CSS добавим соответствующий набор правил для класса.material-icons, с которым и будем использовать иконки:

Material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}

Как использовать иконки Material Design

Использовать иконки очень просто. В нужном месте страницы вставляем такой вот код:

face

Здесь слово face означает имя иконки из набора. Все имена вы сможете найти на этой странице . Там же, при клике по любой иконке, внизу будет появляться подсказка, как эту иконку вставлять на свой сайт.

В приведенном выше примере иконки используют просто свое имя. Не все браузеры поддерживают автоматическую замену имени на сам значок. Если вы хотите, чтобы и старые браузеры адекватно отображали иконки, то используйте их числовой эквивалент. Его вы найдете так же на указанной выше странице просто при клике по любой иконке и выборе пункта Icon Font.

Стилизация иконок Material Design

Для изменения внешнего вида иконок Material Design вы можете использовать следующие правила CSS:

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }

/* Rules for using icons as white on a dark background. */

Хотя все иконки можно задавать любого размера, все же рекомендуется придерживаться принципов Material Design и использовать заданные размеры 18, 24, 36 or 48px. По-умолчанию иконки выводятся размером в 24px.

Как задать собственный цвет иконкам в стиле Material Design

Если следовать руководящим принципам Material Design, то для иконок следует использовать только черный и белый цвет с 54% и 100% непрозрачностью соответственно. Для неактивных иконок - 26% и 30% соответственно.

Material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Однако ничто не помешает вам применить собственные цвета для иконок:

Скачать бесплатные иконки в стиле Material Design

Вы также можете скачать этот набор иконок к себе и использовать его в дизайн-макетах или при создании различных интерфейсов. Скачать бесплатные иконки в стиле Material Design можно (~60MB).

Если Вы задаетесь вопросом, как создать иконку приложения в стиле 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

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

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

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

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

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

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

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

  • В слоях выделите фигуру с символом (переключателем справа) и выполните операцию копирования (Ctrl+C) и дважды вставки вперед (Ctrl+F). В итоге должно получиться три одинаковых фигуры «Символ». С новыми двумя фигурами будем работать дальше
  • Переключитесь на верхнюю фигуру «Символ», и удерживая клавишу Shift вынесите фигуру за пределы холста под 45° вправо и вниз - это заготовка для формирования длинной тени

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

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

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

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

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

Не так давно Google представила свою новую концепцию пользовательских интерфейсов под названием . Это настолько масштабная идея, что рассказать о ней в рамках одной статьи просто невозможно. Мы не будем пытаться объять необъятное, а попробуем рассмотреть ее с точки зрения очень важной ее составляющей - графических объектов, часто для краткости и по традиции называемых иконками.

В концепции Google Material Design они являются неотъемлемой и очень важной частью взаимодействия с пользователем, будь то веб-страница или десктопное приложение. Согласно этой концепции у пользователя должно быть интуитивное ощущение работы с реальными физическими объектами в рамках цифровой среды. При относительно небольших размерах они должны быть ясные и четкие, обладать гармоничной цветовой гаммой и соблюдать определенный баланс между количеством свободного пространства и мелких деталей. Кроме того, необходимо учитывать, что веб- должны одинаково привлекательно смотреться на разных устройствах и операционных системах.

Сегодня мы рассмотрим некоторые, удачные на наш взгляд, попытки следовать концепции Material Design как раз в области создания таких элементов интерфейса как .

Web Material Icons Designs

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

Иконки услуг веб-студии в стиле

Весьма оригинальные и яркие иконки. Тщательно прорисованные детали в сочетании с броскими цветами и нестандартной формой несомненно привлекают внимание.

Material Design иконки для хостинг-провайдера

Набор иконок, ориентированных на использование, скорей, в административных страницах управления серверами и хостингом. Выполнены в схематическом стиле и мягкой цветовой гамме. Точно передают заложенный в них смысл и создают атмосферу практичности и деловитости.

Angular Material Design иконки

Это набор выглядит несколько темным и мрачным, но, тем не менее, весьма заметным и привлекательным. Автор воспользовался оригинальным решением, применив небольшое затемнение на противоположной части изображения отчего изображения приобрели объем.

Изометрические иконки в стиле Materials Design

В графике свои правила и она не всегда выглядит просто. Однако автору удалось сохранить простоту и ясность в первую очередь благодаря удачному сочетанию оттенков серого с теплыми оранжевыми цветами.