Не так давно Google представила свою новую концепцию пользовательских интерфейсов под названием . Это настолько масштабная идея, что рассказать о ней в рамках одной статьи просто невозможно. Мы не будем пытаться объять необъятное, а попробуем рассмотреть ее с точки зрения очень важной ее составляющей - графических объектов, часто для краткости и по традиции называемых иконками.
В концепции Google Material Design они являются неотъемлемой и очень важной частью взаимодействия с пользователем, будь то веб-страница или десктопное приложение. Согласно этой концепции у пользователя должно быть интуитивное ощущение работы с реальными физическими объектами в рамках цифровой среды. При относительно небольших размерах они должны быть ясные и четкие, обладать гармоничной цветовой гаммой и соблюдать определенный баланс между количеством свободного пространства и мелких деталей. Кроме того, необходимо учитывать, что веб- должны одинаково привлекательно смотреться на разных устройствах и операционных системах.
Сегодня мы рассмотрим некоторые, удачные на наш взгляд, попытки следовать концепции Material Design как раз в области создания таких элементов интерфейса как .
Вы веб-разработчик или веб-дизайнер и хотите идти в ногу со временем? Тогда бесплатные иконки в стиле Material Design - это просто мастхэв!
Material Design - это дизайн софта от Гугла, призванный объединить все его продукты и сервисы под одним универсальным интерфейсом, чтобы пользователям было удобнее.
Ключевая идея Material Design - создать у пользователей интуитивное ощущение работы с реальными физическими объектами.
Сегодня я предлагаю вашему вниманию более 900 бесплатных иконок в стиле Material Design, которые вы можете свободно использовать на своих собственных сайтах.
Эти иконки просты, дружелюбны и современны. Каждая иконка создана дизайнерами с помощью рекомендаций по проектированию от Гугла, чтобы изобразить в простых и минимальных формах универсальные понятия, используемые обычно во всех пользовательских интерфейсах.
Иконки Material Design обеспечивают легкую читаемость и ясность в больших и малых размерах, оптимизированы для адекватного отображения на всех распространенных платформах и разрешениях экрана.
Бесплатные иконки Material Design доступны в форматах SVG и PNG, а также в виде шрифта для веб.
Проще всего использовать 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";
}
Использовать иконки очень просто. В нужном месте страницы вставляем такой вот код:
face
Здесь слово face означает имя иконки из набора. Все имена вы сможете найти на этой странице . Там же, при клике по любой иконке, внизу будет появляться подсказка, как эту иконку вставлять на свой сайт.
В приведенном выше примере иконки используют просто свое имя. Не все браузеры поддерживают автоматическую замену имени на сам значок. Если вы хотите, чтобы и старые браузеры адекватно отображали иконки, то используйте их числовой эквивалент. Его вы найдете так же на указанной выше странице просто при клике по любой иконке и выборе пункта Icon Font.
Для изменения внешнего вида иконок 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, то для иконок следует использовать только черный и белый цвет с 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 можно (~60MB).
Если Вы задаетесь вопросом, как создать иконку приложения в стиле Material, то Вы попали по адресу!
Данная инструкция является максимально верным руководством по созданию иконки приложения Android в стиле Material Design, собранное из различных источников, которые мне удалось найти в сети.
Иконка приложения создается в графическом редакторе Adobe Illustrator CC. Инструкция изложена достаточно кратко. Если знаний редактора не достаточно для повторения, обратитесь к видеозаписи из материалов, приведенных ниже (п.3)
Вам необходимо скачать несколько файлов, которые помогут в разработке
Скопируйте файл палитры цветов в библиотеку Adobe Illustrator, затем выберите появившуюся палитру из списка Swatch Libraries в панели Swatches. Установите шрифты и проверьте их доступность в Adobe Illustrator. Если шрифт Roboto Regular недоступен, скопируйте файлы шрифтов в каталоги, указанные выше в исходных файлах. Разархивируйте файлы с сетками и откройте их в Adobe Illustrator. Выберите тот, который Вам подходит больше, остальные закройте. В этих шаблонах уже организованы правильные тени и блики - их значения можно брать за основу. Приступаем.
В данной инструкции будем создавать простейшую иконку одной из описанных в руководстве геометрических форм. Шаблон иконок имеет размер 192×192 pt, что очень удобно для манипулирования значениями размеров. Геометрические размеры самой иконки, в зависимости от ее вида, следующие:
Закругление углов квадратной и прямоугольной иконки: 12 pt
После всех проделанных манипуляций Вы должны увидеть примерно следующее:
На этом работа с фоном завершена
Для простоты описания процесса разместим на фоне символ алфавита «В»