Икона за материали. Как да създадете икона на приложение в стил Material Design. Най-правилната инструкция. Създаване на акцент за цялата икона

Вие сте уеб разработчик или уеб дизайнер и искате да сте в крак с времето? Тогава безплатни икони за материален дизайн- това е просто задължително!

Какво е материален дизайн

материален дизайн- Това е софтуерен дизайн от Google, предназначен да комбинира всички свои продукти и услуги в един универсален интерфейс, за да го направи по-удобен за потребителите.

Основната идея на Material Design е да даде на потребителите интуитивно усещане за работа с реални физически обекти.

Икони за материален дизайн

Днес ви предлагам над 900 безплатни икони за материален дизайн, които можете свободно да използвате на собствените си уебсайтове.

Тези икони са прости, приятелски настроени и модерни. Всяка икона е създадена от дизайнери, използвайки насоките за дизайн на Google, за да изобрази в прости и минимални форми универсални концепции, често използвани във всички потребителски интерфейси.

Иконите за материален дизайн осигуряват лесна четливост и яснота в големи и малки размери, оптимизирани за адекватно показване на всички общи платформи и разделителни способности на екрана.

Безплатните икони за материален дизайн се предлагат във формати SVG и PNG, както и уеб шрифт.

Най-лесният начин да използвате иконите на Material Design е под формата на шрифт, свързан от самия сървър на Google. Много е лесно да направите това:

Как да свържете иконите на Material Design

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

материални икони (
семейство шрифтове: "Материални икони";
тегло на шрифта: нормално
стил на шрифта: нормален
размер на шрифта: 24px; /* Предпочитан размер на иконата */
дисплей: inline-block
височина на реда: 1;
преобразуване на текст: няма;
разстояние между буквите: нормално
пренасяне на думи: нормално;
бяло пространство: nowrap;
посока:ltr;
/* Поддръжка за всички браузъри WebKit. */
-webkit-font-smoothing: antialiased;
/* Поддръжка за Safari и Chrome. */
изобразяване на текст: optimizeLegibility;
/* Поддръжка за Firefox. */
-moz-osx-font-smoothing: нива на сивото;
/* Поддръжка за IE. */
font-feature-settings: "liga";
}

Как да използвате икони за материален дизайн

Използването на икони е много лесно. Поставете следния код на правилното място на страницата:

лице

Тук думата лице означава името на иконата от комплекта. Всички имена можете да намерите на тази страница. На същото място, когато щракнете върху която и да е икона, отдолу ще се появи подсказка как да вмъкнете тази икона на вашия сайт.

В примера по-горе иконите просто използват името си. Не всички браузъри поддържат автоматична замяна на името със самата икона. Ако искате старите браузъри да показват иконите адекватно, използвайте техния цифров еквивалент. Можете също да го намерите на страницата по-горе, просто като щракнете върху която и да е икона и изберете Шрифт на икона.



Икони за стилизиращ материален дизайн

За да промените външния вид на иконите на Material Design, можете да използвате следните CSS правила:

/* Правила за оразмеряване на иконата. */
.material-icons.md-18 (размер на шрифта: 18px;)
.material-icons.md-24 (размер на шрифта: 24px;)
.material-icons.md-36 (размер на шрифта: 36px;)
.material-icons.md-48 (размер на шрифта: 48px;)
/* Правила за използване на икони като черни на светъл фон. */
.material-icons.md-dark ( цвят: rgba(0, 0, 0, 0.54); )

/* Правила за използване на икони като бели на тъмен фон. */

Въпреки че всички икони могат да бъдат зададени на произволен размер, все пак се препоръчва да се придържате към принципите на Material Design и да използвате зададените размери от 18, 24, 36 или 48px. По подразбиране иконите се показват с размер 24px.

Как да зададете свой собствен цвят за иконите на Material Design

Следвайки указанията за материален дизайн, иконите трябва да са само черно-бели при съответно 54% ​​и 100% непрозрачност. За неактивни икони - съответно 26% и 30%.

Material-icons.md-dark ( цвят: rgba(0, 0, 0, 0.54); )
.material-icons.md-dark.md-inactive ( цвят: rgba(0, 0, 0, 0.26); )
.material-icons.md-light ( цвят: rgba(255, 255, 255, 1); )
.material-icons.md-light.md-inactive (цвят: rgba(255, 255, 255, 0.3);)

Но нищо не ви пречи да приложите свои собствени цветове за иконите:

Изтеглете безплатни икони за материален дизайн

Можете също така да изтеглите този набор от икони за себе си и да го използвате в дизайнерски оформления или когато създавате различни интерфейси. Можете да изтеглите безплатни икони в стил Material Design (~ 60MB).

Ако се чудите как да създадете икона на приложение в стил Material, значи сте попаднали на правилното място!

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

Иконата на приложението се създава в Adobe Illustrator CC. Инструкциите са доста кратки. Ако знанията на редактора не са достатъчни за повторение, вижте видеото от материалите по-долу (стр. 3)

За написването на инструкциите са използвани следните материали

1. Указания на Google за материален дизайн: https://www.google.com/design/spec/style/icons.html
2. Какво пропусна Google в своите насоки за иконографията на Material Design: https://goo.gl/5SpsVn
3. Как да създадете икона за материален дизайн в Adobe Illustrator: https://youtu.be/GzXq6ouGTpE

Изходни файлове

Трябва да изтеглите някои файлове, които ще помогнат в разработката

1. Material Design Color Palette: 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 Файлове\ папки Adobe\Fonts
3. Решетка за лесна работа с икони (Product Icon Sticker Sheet): https://goo.gl/CYE2jV - съдържа 4 шаблона за икони на приложения

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

Копирайте файла с цветовата палитра в библиотеката на Adobe Illustrator, след което изберете получената палитра от списъка Swatch Libraries в панела Swatches. Инсталирайте шрифтовете и проверете дали са налични в Adobe Illustrator. Ако шрифтът Roboto Regular не е наличен, копирайте файловете с шрифтове в директориите, изброени по-горе в изходните файлове. Разархивирайте файловете с мрежата и ги отворете в Adobe Illustrator. Изберете този, който ви подхожда най-добре, затворете останалите. В тези шаблони правилните сенки и светлини вече са организирани - техните стойности могат да бъдат взети като основа. Да започваме.

Създаване на икона в материалния стил

В този урок ще създадем най-простата икона на една от геометричните фигури, описани в урока. Шаблонът на иконата е с размер 192 × 192 pt, което е много удобно за манипулиране на стойностите на размера. Геометричните размери на самата икона в зависимост от вида й са следните:

• квадратна икона: 152×152 pt
• правоъгълен: 176×128 pt
• кръг: ⌀ 176 pt

Заобляне на ъглите на квадратна и правоъгълна икона: 12 pt

Помислете за примера за създаване на квадратна икона

След всички извършени манипулации трябва да видите нещо подобно:

Следващата стъпка е да създадете зона за осветяване и сянка за фона.

Това завършва фоновата работа.

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

За да опростим описанието на процеса, поставяме символа на буквата "B" на фона

Създаване на дълга сянка за знак

• В слоевете изберете формата със символа (превключете вдясно) и копирайте (Ctrl + C) и поставете два пъти отпред (Ctrl + F). В резултат на това трябва да получите три еднакви фигури „Символ“. Ще продължим да работим с новите две фигури
• Превключете към горната форма "Символ" и като държите натиснат клавиша Shift, преместете формата извън платното на 45 ° надясно и надолу - това е празно място за образуване на дълга сянка
  
  
• В резултат на това средната и долната форма в списъка със слоеве трябва да са центрирани на фона, а горната трябва да е извън платното в долния десен ъгъл. Все още не докосваме долната фигура.
• Сега изберете двете фигури „Символ“ с десния превключвател - горната и средната, отидете в менюто Обект - Преливане - Опции за смесване, включете режима Определени стъпки, задайте 200 стъпки и щракнете върху OK, след което изпълнете командата от менюто Обект – смесване – създаване. На базата на двете форми ще се създаде една под формата на поток между двете стари.
  
• Без да премахвате селекцията от получената фигура, изпълнете действието в менюто Обект - Разгъване ... и щракнете върху OK - потокът ще бъде разделен на отделни полигони
• Извършване на сливане на многоъгълници (обединяване)
  
• Преименувайте получената форма С бъдеща сянка в "Дълга сянка"
• Сега нека създадем маска. Копирайте формата на фона (Ctrl+C) и поставете на място (Shift+Ctrl+V). В резултат на това формата с фон ще бъде вмъкната върху всички фигури в слоя.
• Изберете десния превключвател, току-що поставен "Фон", който е най-отгоре, и формата "Дълга сянка" и изрежете Изрязване. В резултат на това получаваме група фигури съдържащ множество форми
• Изтрийте всички фигури С изключение на самата сянка - тя е напълно бяла и най-вероятно се намира над останалите Екранната снимка показва формата, която трябва да бъде премахната от групата
  
• Преименуване в "Дълга сянка" и я поставете под формата "Символ".
  
• Превключете към формата "Дълга сянка", след това в панела "Градиент" изберете Линеен тип, ъгъл -45°, начален и краен цвят е същият, както сте избрали за фоновата сянка - в нашия случай е Индиго 900(Изберете своя цвят от таблицата „Нюанс, сянка и стойности на сенки“ на връзката: https://goo.gl/8Vkg33), непрозрачност на лявата страна 20%, непрозрачност на лявата дясна страна 0% и позиция на средната точка 33%
  
• Сега трябва да почистите формата на сянка от "стъпалата", които са се образували по време на Blanding (течащи форми). Направете формата на дългата сянка активна и увеличете достатъчно, за да оцените ръба на формата
  
• Изберете Lasso Tool и изберете точките, така че да не докосвате крайните, както е показано по-долу
  
• Премахнете допълнителни точки с инструмента Премахване на избрани опорни точки
  

Създаване на зона за осветяване и сянка за знак

Създаване на акцент за цялата икона

• Копирайте фоновата форма "Background", създайте нов слой и поставете фоновата форма върху него. Изключете запълването на формата. Преименувайте слоя на "Осветление"
• Създайте градиентно запълване за формата на нов слой със следните параметри: тип Radial, цветът на началото и края на градиента е бял, непрозрачността на началото на градиента е 10%, краят на градиента е 0% , позицията на средната точка е 33%
• С помощта на Gradient Tool (G) създайте градиент от горния ляв ъгъл на фона до долния десен ъгъл, след което променете ъгъла на градиента в настройките на -45°

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

Не толкова отдавна Google представи своята нова концепция за потребителски интерфейс, наречена . Това е толкова мащабна идея, че е просто невъзможно да се говори за нея в рамките на една статия. Няма да се опитваме да обхванем необятността, а ще се опитаме да я разгледаме от гледна точка на нейния много важен компонент - графични обекти, често за краткост и традиционно наричани икони.

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

Днес ще разгледаме някои, според нас, успешни опити за следване на концепцията за Material Design именно в областта на създаването на интерфейсни елементи като .

Дизайн на икони за уеб материали

Това е набор от шест икони, които постигат добър баланс между малък размер и малки детайли. Всяка икона има закачлив основен детайл, съответстващ цвят на фона и малко количество второстепенни детайли. В същото време изображенията изглеждат доста обемни.

Икони за услуги на уеб студио със стил

Много оригинални и ярки икони. Внимателно изчертаните детайли, съчетани с ефектни цветове и нестандартни форми, несъмнено привличат вниманието.

Икони за материален дизайн за хостинг доставчик

Набор от икони, фокусирани върху използването по-скоро в административните страници за управление на сървъри и хостинг. Изработен в схематичен стил и меки цветове. Те точно предават заложеното в тях значение и създават атмосфера на практичност и ефективност.

Ъглови икони за дизайн на материали

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

Изометрични икони в стил на дизайн на материали

Графикът има свои собствени правила и не винаги изглежда прост. Авторът обаче успя да запази простотата и яснотата предимно благодарение на успешната комбинация от нюанси на сивото с топли оранжеви цветове.