Anyagok ikonra. Alkalmazásikon létrehozása Material Design stílusban. A leghelyesebb utasítás. Kiemelés létrehozása a teljes ikonhoz

Ön webfejlesztő vagy webdesigner, és szeretne lépést tartani a korral? Akkor ingyenes anyag tervezési ikonok- ez csak egy kötelező darab!

Mi az az anyagtervezés

anyagtervezés- Ez a Google szoftverterve, amely az összes termékét és szolgáltatását egyetlen univerzális felületen egyesíti, hogy kényelmesebb legyen a felhasználók számára.

A Material Design alapötlete az, hogy a felhasználók számára intuitív érzést keltsen a valódi fizikai tárgyakkal való munkavégzés során.

Anyagtervezési ikonok

Ma több mint 900 ingyenes Material Design ikont mutatok be, amelyeket szabadon felhasználhat saját webhelyein.

Ezek az ikonok egyszerűek, barátságosak és modernek. Minden ikont a tervezők hoznak létre a Google tervezési irányelvei alapján, hogy egyszerű és minimális formában ábrázolják az összes felhasználói felületen általánosan használt univerzális fogalmakat.

A Material Design ikonok könnyű olvashatóságot és áttekinthetőséget biztosítanak nagy és kis méretben is, és úgy vannak optimalizálva, hogy megfelelően jelenjenek meg minden általános platformon és képernyőfelbontáson.

Ingyenes Material Design ikonok állnak rendelkezésre SVG és PNG formátumban, valamint webes betűtípussal.

A Material Design ikonok használatának legegyszerűbb módja a Google szerveréről csatlakoztatott betűtípus. Ezt nagyon könnyű megtenni:

Material Design ikonok csatlakoztatása

A CSS-fájlban pedig adjuk hozzá a .material-icons osztályhoz a megfelelő szabálykészletet, amellyel az ikonokat fogjuk használni:

anyagikonok (
font-family: "Material Icons";
betűsúly: normál
betűstílus: normál
betűméret: 24 képpont; /* Előnyben részesített ikonméret */
kijelző: inline-block
vonalmagasság: 1;
szöveg-átalakítás: nincs;
betűköz: normál
szótördelése: normál;
white-space: nowrap;
irány:ltr;
/* Minden WebKit böngésző támogatása. */
-webkit-font-smoothing: élsimítás;
/* A Safari és a Chrome támogatása. */
szöveg-megjelenítés: optimaleLegibility;
/* Firefox támogatása. */
-moz-osx-font-smoothing: szürkeárnyalatos;
/* IE támogatás. */
font-feature-settings: "liga";
}

Az anyagtervezési ikonok használata

Az ikonok használata nagyon egyszerű. Illessze be a következő kódot az oldal megfelelő helyére:

arc

Itt az arc szó a készletből származó ikon nevét jelenti. Ezen az oldalon minden név megtalálható. Ugyanitt, amikor bármelyik ikonra kattint, az alábbiakban megjelenik egy tipp, hogyan illesztheti be ezt az ikont webhelyére.

A fenti példában az ikonok egyszerűen a nevüket használják. Nem minden böngésző támogatja a név automatikus cseréjét magával az ikonnal. Ha azt szeretné, hogy a régi böngészők megfelelően megjelenítsék az ikonokat, használja azok számszerű megfelelőjét. A fenti oldalon is megtalálhatja, ha bármelyik ikonra kattint, és kiválasztja az Ikon betűtípust.



Styling Material Design ikonok

A Material Design ikonok megjelenésének megváltoztatásához a következő CSS-szabályokat használhatja:

/* Az ikon méretének szabályai. */
.material-icons.md-18 ( betűméret: 18 képpont; )
.material-icons.md-24 (betűméret: 24 képpont; )
.material-icons.md-36 (betűméret: 36 képpont; )
.material-icons.md-48 ( betűméret: 48 képpont; )
/* Az ikonok világos háttéren feketeként való használatának szabályai. */
.material-icons.md-dark ( szín: rgba(0, 0, 0, 0,54); )

/* Az ikonok sötét háttéren fehérként való használatának szabályai. */

Bár az összes ikon bármilyen méretre beállítható, továbbra is ajánlott ragaszkodni az anyagtervezési elvekhez, és a 18, 24, 36 vagy 48 képpontos beállított méretet használni. Alapértelmezés szerint az ikonok 24 képpont méretben jelennek meg.

Hogyan állítsa be saját színét a Material Design ikonokhoz

Az anyagtervezési irányelveket követve az ikonok csak fekete-fehérek lehetnek 54%-os, illetve 100%-os átlátszatlanság mellett. Inaktív ikonok esetén - 26%, illetve 30%.

Material-icons.md-dark ( szín: rgba(0, 0, 0, 0,54); )
.material-icons.md-dark.md-inactive ( szín: rgba(0, 0, 0, 0,26); )
.material-icons.md-light ( szín: rgba(255, 255, 255, 1); )
.material-icons.md-light.md-inactive ( szín: rgba(255, 255, 255, 0,3); )

Azonban semmi sem akadályozza meg, hogy saját színeket alkalmazzon az ikonokhoz:

Ingyenes anyagtervezési ikonok letöltése

Ezt az ikonkészletet saját magának is letöltheti, és felhasználhatja tervezési elrendezésekben vagy különféle felületek létrehozásakor. Ingyenes ikonokat tölthet le a Material Design stílusában (~ 60 MB).

Ha kíváncsi, hogyan hozhat létre Anyagstílus alkalmazásikont, akkor jó helyen jár!

Ez az oktatóanyag a legpontosabb útmutató az Android alkalmazás ikonjának Material Design stílusban történő létrehozásához, különféle forrásokból gyűjtve, amelyeket a neten találtam.

Az alkalmazás ikonja az Adobe Illustrator CC-ben jön létre. Az utasítások meglehetősen rövidek. Ha a szerkesztő ismerete nem elegendő az ismétléshez, nézze meg a videót az alábbi anyagokból (3. o.)

Az utasítások megírásához a következő anyagokat használtuk fel

1. A Google anyagtervezési irányelvei: https://www.google.com/design/spec/style/icons.html
2. Amit a Google kihagyott a Material Design ikonográfiára vonatkozó irányelveiből: https://goo.gl/5SpsVn
3. Anyagtervezési ikon létrehozása az Adobe Illustratorban: https://youtu.be/GzXq6ouGTpE

Forrás fájlok

Le kell töltened néhány fájlt, amelyek segítenek a fejlesztésben

1. Material Design Color Palette: https://goo.gl/EVxUSx – másolja a Material Palette.ase fájlt az archívumból az Adobe Illustrator paletták könyvtárába (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\Swatches )
2. Betűtípusok: https://goo.gl/GQbKob - telepítse a betűtípusokat a rendszerbe, és másolja a betűtípusfájlokat a C:\Program Files\Common Files\Adobe\Fonts és C:\Program Files (x86)\Common mappába Fájlok\ mappák Adobe\Fonts
3. Rács az ikonokkal való egyszerű munkavégzéshez (Termékikon matricalap): https://goo.gl/CYE2jV - 4 alkalmazásikonsablont tartalmaz

Felkészülés a cselekvésre

Másolja a színpaletta fájlt az Adobe Illustrator könyvtárába, majd válassza ki a kapott palettát a Színtárak panel Színtár-könyvtárak listájából. Telepítse a betűtípusokat, és ellenőrizze, hogy elérhetők-e az Adobe Illustratorban. Ha a Roboto Regular betűtípus nem elérhető, másolja a fontfájlokat a forrásfájlok fent felsorolt ​​könyvtáraiba. Csomagolja ki a rácsfájlokat, és nyissa meg őket az Adobe Illustratorban. Válassza ki az Önnek legmegfelelőbbet, a többit zárja be. Ezekben a sablonokban a megfelelő árnyékok és csúcsfények már rendszerezve vannak - ezek értékei alapulhatnak. Kezdjük el.

Anyagstílusú ikon készítése

Ebben az oktatóanyagban elkészítjük az oktatóanyagban leírt geometriai alakzatok egyikének legegyszerűbb ikonját. Az ikonsablon mérete 192×192 pt, ami nagyon praktikus a méretértékek manipulálásához. Maga az ikon geometriai méretei, típusától függően, a következők:

• négyzet ikon: 152×152 pt
• téglalap alakú: 176×128 pt
• forduló: ⌀ 176 pont

Négyzet és téglalap alakú ikon sarkainak lekerekítése: 12 pont

Tekintsük a négyzet alakú ikon létrehozásának példáját

Az összes elvégzett manipuláció után valami ilyesmit kell látnia:

A következő lépés egy kiemelő és árnyékos terület létrehozása a háttér számára.

Ezzel befejeződik a háttérmunka.

aláírás ikon létrehozása

A folyamat leírásának egyszerűsítése érdekében a „B” ábécé jelét helyezzük a háttérre

Hosszú árnyék létrehozása egy jel számára

• A rétegekben jelölje ki az alakzatot a szimbólummal (jobb oldali kapcsoló), majd másolja (Ctrl + C) és illessze be kétszer előre (Ctrl + F). Ennek eredményeként három azonos „szimbólum” formát kell kapnia. Folytatjuk a munkát az új két figurával
• Váltson a felső "Szimbólum" alakra, és tartsa lenyomva a Shift billentyűt, mozgassa az alakzatot a vásznon kívül 45°-kal jobbra és lefelé - ez egy üres hosszú árnyék létrehozásához
  
  
• Ennek eredményeként a réteglistában a középső és az alsó alakzatnak a háttér közepén kell lennie, a felsőnek pedig a vásznon kívül kell lennie a jobb alsó sarokban. Az alsó ábrát még nem érintjük.
• Most a jobb kapcsolóval válassza ki a két „Szimbólum” alakzatot - a felsőt és a középsőt, lépjen az Object - Blend - Blend Options menübe, kapcsolja be a Specified Steps módot, adjon meg 200 lépést, majd kattintson az OK gombra, majd hajtsa végre a menüparancsot. Tárgy - Keverés - Készíts. A két forma alapján a két régi között áramlás formájában jön létre az egyik.
  
• Anélkül, hogy eltávolítaná a kijelölést az eredményül kapott ábráról, hajtsa végre a műveletet az Objektum - Kibontás... menüben, majd kattintson az OK gombra - a folyamat külön sokszögekre lesz felosztva.
• Sokszög-egyesítés végrehajtása (egyesítés)
  
• Nevezze át a kapott alakzatot Egy jövőbeli árnyékkal a "Long Shadow"-ban
• Most hozzunk létre egy maszkot. Másolja a Háttér alakzatot (Ctrl+C) és Beillesztés a helyére (Shift+Ctrl+V). Ennek eredményeként a háttérrel ellátott alakzat a réteg összes alakzata fölé kerül beillesztésre.
• Válassza ki az imént beillesztett „Háttér” jobb oldali kapcsolót, amely a legfelül található, és válassza ki a „Hosszú árnyék” alakzatot, és vágja körbe. Ennek eredményeként figurák csoportját kapjuk több alakzatot tartalmaz
• Az összes alakzat törlése Maga az árnyék kivételével - teljesen fehér, és valószínűleg a többi felett helyezkedik el A képernyőképen látható az alakzat, amelyet el kell távolítani a csoportból
  
• Átnevezés a "Hosszú árnyék"-ba, és helyezze a "Szimbólum" alakzat alá
  
• Váltson a "Long Shadow" alakzatra, majd a Gradient panelen válassza a Lineáris típust, a szöget -45°, a kezdő- és végszínt ugyanaz, mint amit a háttérárnyéknál választott - esetünkben ez Indigo 900(Válassza ki színét a következő linken található "Árnyalás, árnyalat és árnyék értékek" táblázatából: https://goo.gl/8Vkg33), bal oldali átlátszatlanság 20%, bal jobb oldali átlátszatlanság 0% és középpont pozíciója 33%
  
• Most meg kell tisztítani az árnyék alakzatot a Blanding során kialakult "lépésektől" (folyó alakzatok). Aktiválja a Hosszú árnyék alakzatot, és csak annyira nagyítson rá, hogy értékelje az alakzat szélét
  
• Válassza ki a Lasszó eszközt, és jelölje ki a pontokat úgy, hogy ne érintse meg a szélsőségeseket, az alábbiak szerint
  
• Távolítsa el az extra pontokat a Kijelölt rögzítési pontok eltávolítása eszközzel
  

Kiemelt és árnyékos zóna létrehozása egy jelhez

Kiemelés létrehozása a teljes ikonhoz

• Másolja ki a "Háttér" háttér alakzatot, hozzon létre egy új réteget, és illessze be a háttér alakzatot. Kapcsolja ki az alakzat kitöltését. Nevezze át a réteget "Lighting"-re
• Hozzon létre egy színátmenetes kitöltést az alakzathoz egy új rétegen a következő paraméterekkel: típus Radiális, a színátmenet elejének és végének színe fehér, a gradiens elejének átlátszatlansága 10%, a színátmenet vége 0% , a középpont helyzete 33%
• A Gradient Tool (G) segítségével hozzon létre egy színátmenetet a háttér bal felső sarkától a jobb alsóig, majd módosítsa a színátmenet szögét a beállításokban -45°-ra

Általános árnyék létrehozása a teljes ikonhoz

Nem is olyan régen a Google bemutatta új felhasználói felület koncepcióját, melynek neve. Ez egy olyan nagyszabású ötlet, hogy egyszerűen lehetetlen egy cikk keretein belül beszélni róla. Nem igyekszünk felölelni a mérhetetlenséget, hanem megpróbáljuk a nagyon fontos alkotóeleme – a sokszor rövidség kedvéért grafikus objektumok – és hagyományosan ikonoknak nevezett tárgyak – szemszögéből vizsgálni.

A Google Material Design koncepciójában ezek szerves és nagyon fontos részét képezik a felhasználói élménynek, legyen szó weboldalról vagy asztali alkalmazásról. E koncepció szerint a felhasználónak intuitív érzéssel kell rendelkeznie, hogy valódi fizikai tárgyakkal dolgozik a digitális környezetben. Viszonylag kis méretekkel tisztának és élesnek kell lenniük, harmonikus színvilággal kell rendelkezniük, és bizonyos egyensúlyt kell tartaniuk a szabad hely mennyisége és az apró részletek között. Ezen túlmenően figyelembe kell venni, hogy a web egyformán vonzó legyen a különböző eszközökön és operációs rendszereken.

Ma megvizsgálunk néhány, véleményünk szerint sikeres kísérletet a Material Design koncepció követésére, pontosan az olyan felületelemek létrehozása terén, mint pl.

Web Anyag Ikonok Tervek

Ez egy hat ikonból álló készlet, amely jó egyensúlyt teremt a kis méret és az apró részletek között. Mindegyik ikonnak van egy fülbemászó fő részlete, egy hozzáillő színű háttér és egy kis mennyiségű másodlagos részlet. Ugyanakkor a képek meglehetősen terjedelmesnek tűnnek.

Web stúdió szolgáltatások ikonok stílusban

Nagyon eredeti és fényes ikonok. A gondosan megrajzolt részletek, a szemet gyönyörködtető színekkel és a nem szabványos formákkal kombinálva kétségtelenül felkeltik a figyelmet.

Material Design ikonok a tárhelyszolgáltató számára

Ikonok csoportja, amelyek inkább a szerverek kezelésének és a tárhelyszolgáltatás adminisztratív oldalainak használatára összpontosítanak. Sematikus stílusban és lágy színekben készült. Pontosan közvetítik a bennük rejlő jelentést, és a gyakorlatiasság és a hatékonyság légkörét teremtik meg.

Szögletes anyagtervezési ikonok

Ez a készlet kissé sötétnek és komornak tűnik, de ennek ellenére nagyon feltűnő és vonzó. A szerző az eredeti megoldást használta ki, enyhe elsötétítést alkalmazott a kép másik oldalán, ami miatt a képek hangerőt kaptak.

Izometrikus ikonok az anyagok tervezési stílusában

Az ütemezésnek megvannak a maga szabályai, és nem mindig tűnik egyszerűnek. A szerzőnek azonban sikerült megőriznie az egyszerűséget és az egyértelműséget elsősorban a szürke árnyalatok és a meleg narancssárga színek sikeres kombinációja miatt.