Ikona materijala. Kako kreirati ikonu aplikacije u stilu Material Design. Najispravnije uputstvo. Kreiranje isticanja za cijelu ikonu

Jeste li web programer ili web dizajner i želite da idete u korak s vremenom? Onda besplatne ikone dizajna materijala- to je jednostavno morate imati!

Šta je dizajn materijala

dizajn materijala- Ovo je softverski dizajn kompanije Google, dizajniran da kombinuje sve svoje proizvode i usluge pod jednim univerzalnim interfejsom kako bi bio praktičniji za korisnike.

Ključna ideja materijalnog dizajna je pružiti korisnicima intuitivan osjećaj rada sa stvarnim fizičkim objektima.

Ikone dizajna materijala

Danas vam donosim preko 900 besplatnih ikona Material Designa koje možete slobodno koristiti na svojim web stranicama.

Ove ikone su jednostavne, prijateljske i moderne. Svaku ikonu kreiraju dizajneri koristeći Googleove smjernice za dizajn kako bi u jednostavnim i minimalnim oblicima prikazali univerzalne koncepte koji se obično koriste u svim korisničkim interfejsima.

Ikone Material Design pružaju laku čitljivost i jasnoću u velikim i malim veličinama, optimizirane za adekvatan prikaz na svim uobičajenim platformama i rezolucijama ekrana.

Besplatne ikone materijalnog dizajna dostupne su u SVG i PNG formatima, kao i web font.

Najlakši način za korištenje ikona Material Design je u obliku fonta povezanog sa servera samog Google-a. Ovo je vrlo lako uraditi:

Kako povezati ikone Material Design

I u CSS datoteku dodajte odgovarajući skup pravila za klasu .material-icons, s kojima ćemo koristiti ikone:

ikone materijala (
font-family: "Ikone materijala";
font-weight: normalan
stil fonta: normalan
veličina fonta: 24px; /* Željena veličina ikone */
prikaz: inline-block
visina linije: 1;
text-transform: nema;
razmak između slova: normalan
word-wrap: normalno;
razmak: nowrap;
smjer:ltr;
/* Podrška za sve WebKit pretraživače. */
-webkit-font-smoothing: antialiased;
/* Podrška za Safari i Chrome. */
prikazivanje teksta: optimizeLegibility;
/* Podrška za Firefox. */
-moz-osx-font-smoothing: nijansi sive;
/* Podrška za IE. */
font-feature-settings: "liga";
}

Kako koristiti ikone dizajna materijala

Korištenje ikona je vrlo jednostavno. Zalijepite sljedeći kod na pravo mjesto na stranici:

lice

Ovdje riječ lice označava naziv ikone iz skupa. Sva imena možete pronaći na ovoj stranici. Na istom mjestu, kada kliknete na bilo koju ikonu, ispod će se pojaviti savjet kako umetnuti ovu ikonu na svoju web stranicu.

U gornjem primjeru, ikone jednostavno koriste svoje ime. Ne podržavaju svi pretraživači automatsku zamjenu imena samom ikonom. Ako želite da stari pretraživači prikazuju ikone na adekvatan način, onda koristite njihov numerički ekvivalent. Možete ga pronaći i na gornjoj stranici samo klikom na bilo koju ikonu i odabirom Font ikone.



Stiliziranje ikona materijalnog dizajna

Da biste promijenili izgled ikona Material Design, možete koristiti sljedeća CSS pravila:

/* Pravila za određivanje veličine ikone. */
.material-icons.md-18 (veličina fonta: 18px;)
.material-icons.md-24 (veličina fonta: 24px;)
.material-icons.md-36 (veličina fonta: 36px; )
.material-icons.md-48 (veličina fonta: 48px; )
/* Pravila za korištenje ikona kao crne na svijetloj pozadini. */
.material-icons.md-dark ( boja: rgba(0, 0, 0, 0.54); )

/* Pravila za korištenje ikona kao bijele na tamnoj pozadini. */

Iako se sve ikone mogu podesiti na bilo koju veličinu, ipak se preporučuje da se pridržavate principa materijalnog dizajna i koristite postavljene veličine od 18, 24, 36 ili 48px. Podrazumevano, ikone se prikazuju u veličini od 24px.

Kako postaviti vlastitu boju za ikone Material Design

Slijedeći smjernice dizajna materijala, ikone bi trebale biti samo crno-bijele sa 54% odnosno 100% neprozirnosti. Za neaktivne ikone - 26% i 30% respektivno.

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

Međutim, ništa vas ne sprečava da primenite sopstvene boje za ikone:

Preuzmite besplatne ikone za dizajn materijala

Također možete preuzeti ovaj skup ikona sebi i koristiti ga u dizajnu ili prilikom kreiranja različitih sučelja. Možete preuzeti besplatne ikone u stilu Material Design (~ 60MB).

Ako se pitate kako stvoriti ikonu aplikacije u stilu materijala, onda ste na pravom mjestu!

Ovaj vodič je najprecizniji vodič za kreiranje ikone Android aplikacije u stilu Material Design, prikupljen iz različitih izvora koje sam mogao pronaći na internetu.

Ikona aplikacije kreirana je u Adobe Illustrator CC. Upute su prilično kratke. Ako znanje urednika nije dovoljno za ponavljanje, pogledajte video iz materijala u nastavku (str. 3)

Za pisanje uputstava korišteni su sljedeći materijali

1. Google smjernice za dizajn materijala: https://www.google.com/design/spec/style/icons.html
2. Šta je Google propustio u svojim smjernicama za ikonografiju materijalnog dizajna: https://goo.gl/5SpsVn
3. Kako napraviti ikonu materijalnog dizajna u Adobe Illustratoru: https://youtu.be/GzXq6ouGTpE

Izvorni fajlovi

Morate preuzeti neke datoteke koje će vam pomoći u razvoju

1. Paleta boja dizajna materijala: https://goo.gl/EVxUSx - kopirajte datoteku Material Palette.ase iz arhive u direktorij paleta Adobe Illustrator (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\Swatches )
2. Fontovi: https://goo.gl/GQbKob - instalirajte fontove u sistem, a također kopirajte datoteke fontova u C:\Program Files\Common Files\Adobe\Fonts i C:\Program Files (x86)\Common Fajlovi\ folderi Adobe\Fonti
3. Mreža za lak rad sa ikonama (Product Icon Sticker Sheet): https://goo.gl/CYE2jV - sadrži 4 šablona ikona aplikacije

Priprema za akciju

Kopirajte datoteku palete boja u biblioteku Adobe Illustrator, a zatim odaberite rezultirajuću paletu sa liste Swatch Libraries na panelu Swatches. Instalirajte fontove i provjerite da li su dostupni u Adobe Illustratoru. Ako Roboto Regular font nije dostupan, kopirajte datoteke fontova u direktorije navedene iznad u izvornim datotekama. Raspakujte datoteke mreže i otvorite ih u Adobe Illustratoru. Odaberite onaj koji vam najviše odgovara, ostalo zatvorite. U ovim predlošcima već su organizirane ispravne sjene i svjetla - njihove vrijednosti mogu se uzeti kao osnova. Hajde da počnemo.

Kreiranje ikone u materijalnom stilu

U ovom vodiču ćemo kreirati najjednostavniju ikonu jednog od geometrijskih oblika opisanih u tutorijalu. Predložak ikone ima veličinu od 192×192 pt, što je vrlo zgodno za manipuliranje vrijednostima veličine. Geometrijske dimenzije same ikone, u zavisnosti od njenog tipa, su sledeće:

• kvadratna ikona: 152×152 pt
• pravougaona: 176×128 pt
• krug: ⌀ 176 pt

Zaokruživanje uglova kvadratne i pravougaone ikone: 12 pt

Razmotrite primjer kreiranja kvadratne ikone

Nakon svih obavljenih manipulacija, trebali biste vidjeti nešto poput ovoga:

Sljedeći korak je kreiranje područja svjetla i sjene za pozadinu.

Ovim se završava rad u pozadini.

Kreiranje ikone znaka

Da bismo pojednostavili opis procesa, na pozadinu stavljamo simbol abecede "B".

Stvaranje duge senke za znak

• U slojevima odaberite oblik sa simbolom (prebacite desno) i kopirajte (Ctrl + C) i zalijepite dvaput ispred (Ctrl + F). Kao rezultat, trebali biste dobiti tri identična oblika "Simbola". Nastavićemo da radimo sa nove dve figure
• Prebacite se na gornji oblik "Simbol" i držeći pritisnut tipku Shift, pomaknite oblik izvan platna za 45 ° udesno i dolje - ovo je prazan prostor za formiranje duge sjene
  
  
• Kao rezultat toga, srednji i donji oblik na listi slojeva treba da budu centrirani na pozadini, a gornji bi trebao biti izvan platna u donjem desnom uglu. Još ne diramo donju cifru.
• Sada desnim prekidačem odaberite dva oblika "Simbol" - gornji i srednji, idite na meni Object - Blend - Blend Options, uključite način Specified Steps, navedite 200 koraka i kliknite OK, a zatim izvršite naredbu menija Objekt - Pomiješaj - Napravi. Na osnovu dva oblika, jedan će biti kreiran u obliku toka između dva stara.
  
• Bez uklanjanja selekcije sa rezultirajuće figure, izvršite radnju u meniju Objekat - Proširi ... i kliknite OK - tok će biti podeljen na zasebne poligone
• Izvršite spajanje poligona (ujedinite)
  
• Preimenujte rezultirajući oblik Sa budućom senkom u "Dugoj senci"
• Sada napravimo masku. Kopirajte oblik pozadine (Ctrl+C) i zalijepite na mjesto (Shift+Ctrl+V). Kao rezultat toga, oblik s pozadinom će biti umetnut na vrh svih oblika u sloju.
• Odaberite desnim prekidačem upravo zalijepljenu "Background", koja se nalazi na samom vrhu, i oblik "Duga sjena" i izrežite Crop. Kao rezultat, dobijamo grupu figura koji sadrži više oblika
• Izbrišite sve oblike Sa izuzetkom same sjene - potpuno je bijela i najvjerovatnije se nalazi iznad ostalih Snimak ekrana prikazuje oblik koji treba ukloniti iz grupe
  
• Preimenuj u "Dugu sjenu" i postavite je ispod oblika "Simbol".
  
• Prebacite se na oblik "Duga sjena", zatim u Gradijent panelu odaberite Linearni tip, ugao -45°, početnu i krajnju boju istu kao što ste odabrali za pozadinu - u našem slučaju je to Indigo 900(Odaberite svoju boju iz tabele "Vrijednosti nijansi, nijansi i sjene" na linku: https://goo.gl/8Vkg33), neprozirnost lijeve strane 20%, neprozirnost lijeve desne strane 0% i središnja pozicija 33%
  
• Sada morate očistiti oblik sjene od "koraka" koji su nastali tokom blandinga (tekući oblici). Učinite oblik duge sjene aktivnim i zumirajte samo toliko da cijenite ivicu oblika
  
• Odaberite Lasso Tool i odaberite tačke tako da ne dodirnete one ekstremne, kao što je prikazano ispod
  
• Uklonite dodatne točke pomoću alata Ukloni odabrane točke sidrenja
  

Kreiranje zone isticanja i sjene za znak

Kreiranje isticanja za cijelu ikonu

• Kopirajte oblik pozadine "Background", kreirajte novi sloj i zalijepite oblik pozadine na njega. Isključite popunjavanje oblika. Preimenujte sloj u "Osvetljenje"
• Na novom sloju kreirajte gradijent ispunu za oblik sa sljedećim parametrima: tip Radial, boja početka i kraja gradijenta je bijela, neprozirnost početka gradijenta je 10%, kraj gradijenta je 0% , pozicija srednje tačke je 33%
• Koristeći Gradient Tool (G) kreirajte gradijent od gornjeg lijevog ugla pozadine do donjeg desnog, a zatim promijenite ugao gradijenta u postavkama na -45°

Kreiranje ukupne sjene za cijelu ikonu

Ne tako davno, Google je predstavio svoj novi koncept korisničkog interfejsa pod nazivom . Ovo je toliko velika ideja da je jednostavno nemoguće govoriti o njoj u okviru jednog članka. Nećemo pokušavati da obuhvatimo neizmjernost, već ćemo je pokušati sagledati sa stanovišta njegove vrlo važne komponente – grafičkih objekata, često radi sažetosti i tradicionalno nazvanih ikonama.

U Google Material Design konceptu, oni su sastavni i vrlo važan dio korisničkog iskustva, bilo da se radi o web stranici ili desktop aplikaciji. Prema ovom konceptu, korisnik bi trebao imati intuitivan osjećaj rada sa stvarnim fizičkim objektima unutar digitalnog okruženja. S relativno malim veličinama, trebali bi biti jasni i oštri, imati skladnu shemu boja i održavati određenu ravnotežu između količine slobodnog prostora i malih detalja. Osim toga, mora se uzeti u obzir da web treba izgledati podjednako atraktivno na različitim uređajima i operativnim sistemima.

Danas ćemo se osvrnuti na neke, po našem mišljenju, uspješne pokušaje praćenja koncepta Material Designa upravo u oblasti kreiranja elemenata interfejsa kao što su .

Dizajn ikona web materijala

Ovo je set od šest ikona koje postižu dobar balans između male veličine i malih detalja. Svaka ikona ima privlačan glavni detalj, odgovarajuću boju pozadine i malu količinu sekundarnih detalja. Istovremeno, slike izgledaju prilično obimne.

Ikone usluga web studija u stilu

Vrlo originalne i svijetle ikone. Pažljivo ucrtani detalji, u kombinaciji sa upečatljivim bojama i nestandardnim oblicima, nesumnjivo privlače pažnju.

Ikone materijalnog dizajna za hosting provajdera

Skup ikona usmjerenih na korištenje, prije, na administrativnim stranicama za upravljanje serverima i hostingom. Izrađena u šematskom stilu i nježnih boja. Oni precizno prenose značenje koje im je svojstveno i stvaraju atmosferu praktičnosti i efikasnosti.

Ikone ugaonog dizajna materijala

Ovaj set izgleda pomalo mračno i tmurno, ali ipak vrlo uočljivo i atraktivno. Autor je iskoristio originalno rešenje, primenivši blago zatamnjenje na suprotnoj strani slike, zbog čega su slike dobile volumen.

Izometrijske ikone u stilu dizajna materijala

Raspored ima svoja pravila i ne izgleda uvijek jednostavno. Međutim, autor je uspio zadržati jednostavnost i jasnoću prvenstveno zahvaljujući uspješnoj kombinaciji nijansi sive s toplim narančastim bojama.