Наиболее правильная инструкция. Как создать иконку приложения в стиле Material Design. Наиболее правильная инструкция Создание общей тени для всей иконки
Не так давно Google представила свою новую концепцию пользовательских интерфейсов под названием . Это настолько масштабная идея, что рассказать о ней в рамках одной статьи просто невозможно. Мы не будем пытаться объять необъятное, а попробуем рассмотреть ее с точки зрения очень важной ее составляющей - графических объектов, часто для краткости и по традиции называемых иконками.
В концепции Google Material Design они являются неотъемлемой и очень важной частью взаимодействия с пользователем, будь то веб-страница или десктопное приложение. Согласно этой концепции у пользователя должно быть интуитивное ощущение работы с реальными физическими объектами в рамках цифровой среды. При относительно небольших размерах они должны быть ясные и четкие, обладать гармоничной цветовой гаммой и соблюдать определенный баланс между количеством свободного пространства и мелких деталей. Кроме того, необходимо учитывать, что веб- должны одинаково привлекательно смотреться на разных устройствах и операционных системах.
Сегодня мы рассмотрим некоторые, удачные на наш взгляд, попытки следовать концепции Material Design как раз в области создания таких элементов интерфейса как .
Web Material Icons Designs
Это набор из шести иконок, в которых достаточно удачно выбран баланс между небольшим размером и мелкими деталями. Каждая иконка имеет броскую основную деталь, соответствующий ей цветовой фон и небольшое количество второстепенных деталей. При этом изображения выглядят достаточно объемными.Иконки услуг веб-студии в стиле
Весьма оригинальные и яркие иконки. Тщательно прорисованные детали в сочетании с броскими цветами и нестандартной формой несомненно привлекают внимание.Material Design иконки для хостинг-провайдера
Набор иконок, ориентированных на использование, скорей, в административных страницах управления серверами и хостингом. Выполнены в схематическом стиле и мягкой цветовой гамме. Точно передают заложенный в них смысл и создают атмосферу практичности и деловитости.Angular Material Design иконки
Это набор выглядит несколько темным и мрачным, но, тем не менее, весьма заметным и привлекательным. Автор воспользовался оригинальным решением, применив небольшое затемнение на противоположной части изображения отчего изображения приобрели объем.Изометрические иконки в стиле Materials 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)
Для написания инструкции использовались следующие материалы
- 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
Рассмотрим на примере создание квадратной иконки
После всех проделанных манипуляций Вы должны увидеть примерно следующее:
Следующее действие - создание зоны блика и тени фона
На этом работа с фоном завершена
Создание знака иконки
Для простоты описания процесса разместим на фоне символ алфавита «В»
Создание длинной тени для знака
- В слоях выделите фигуру с символом (переключателем справа) и выполните операцию копирования (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°