Így fog kinézni az alkalmazás-ikonunk végül. Most már elég beszélgetni. Kezdjünk bele közvetlenül az Adobe Illustratorban ...

Adobe Illustrator – Alkalmazás ikont készíteni

1. lépés: Alap létrehozása

Amikor elindultok az Illustratorban, először is hozzatok létre egy új munkaterületet az Fájl>Új menüponton belül. A megjelenő ablakban válasszatok 70x70 mm formátumot. Erősítsétek meg az ablakot az OK gombra kattintva.

Adobe Illustrator – App-ikon létrehozása

Vegyétek elő az ötszög-rajzoló eszközt a Eszköztár-ból, majd kattintsatok egyszer a munkaterületre. Erre megjelenik egy párbeszédpanel, ahol megadhatjátok az ötszög méretét. Itt válasszatok egy 35x35 mm-es méretet, majd erősítsétek meg az egészet az OK gombbal. Ez most az ikon alapja.

Adobe Illustrator – App-ikon létrehozása

Mivel az Apple alkalmazás-ikonok sosem szögletesek, most gondoskodnunk kell róla, hogy a sarkok lekerekítve legyenek. Válasszátok ki az ötszöget, majd a felső menüsávon menjek az Effekt>Stilizálás szűrők>Sarkok lekerekítése ... opcióra.

Adobe Illustrator – alkalmazásikon létrehozása

A megjelenő ablakban adjatok meg egy 7 mm-es sarok sugárt. Erősítsétek meg az egészet az OK gombbal.

Adobe Illustrator - alkalmazásikon létrehozása

Miután ezt az effektust jóváhagytátok, a sarkok valóban lekerekítve jelennek meg, azonban az út még mindig szögletesen halad. Ennek megváltoztatásához menjek a Objektum>Megjelenés átkonvertálása menüpontba. Ezzel az effektus átalakult egy objektummá (mostantól az út közvetlenül a lekerekített sarkak mentén halad).

Adobe Illustrator – App ikont létrehozni

A következő lépésben szükségetek lesz a színátmenet palettára. Ha még nincs megnyitva, az Ablak>Színátmenet menüponton keresztül érhetitek el.

Adobe Illustrator – alkalmazásikon létrehozása

Kattintsatok most a színátmenet mezőre a Színátmenet palettában, hogy kitöltsétek a lekerekített ötsöget egy alapértelmezett Fekete/Feheár színátmenettel. (Ha még mindig van egy Keretezés az ötszög körül, most az a helyes időpont, hogy eltávolítsátok.)

Adobe Illustrator – App-ikon készítése

A színátmenet irányának beállításakor adjatok meg egy 90°-os értéket, hogy szépen felülről lefelé haladjon.

Adobe Illustrator – App-ikon létrehozása

Mivel az ikonunk egy Kék színátmenetet kap, (természetesen használhattok saját színeket is) már előkészítettem két RGB színértéket számotokra.

sötét Kék - 28/57/145

Ezen színértékeket most a színátmenethez rendelhetitek, csak duplakattintásra a színátmenet paletta Szín mezőjében. Ekkor lehetőségetek lesz az RGB értékek megadására.

(Ha más színü módban vagytok beállítva, akkor kattintsatok a kis nyílra jobb felső sarokban a Színátmenet palettán, hogy kiválaszthassátok a megfelelő színű módot).

Adobe Illustrator - alkalmazásikon létrehozása

Ha ezt megcsináltátok, akkor a végeredmény valahogy így fog kinézni nálatok. (Ábra 11).

Adobe Illustrator – App ikon létrehozása

A színátmenetet még tovább finomíthatjátok az Effekt>Stilizálás szűrők>Belülről világítás ... menüpontban. Az Töltés módjánál válasszátok a Egygyeltetés értéket. Az átlátszóság esetében egy 75% értéket vegyetek be, míg a Elmosás értékét állítsátok 8,8 mm-re. Mivel ezt az effektust csak a külső területen szeretnénk alkalmazni, jelöljétek meg a Szélet. Erősítsétek meg az ablakot az OK gombra kattintva.

Adobe Illustrator – App ikont készíteni

Második lépésként adjatok hozzá még egy Árnyékolás hatást az egésznek. Ezintézhetitek az Effekt>Stilizálás szűrők>Árnyékolás ... menüponton keresztül. Válasszátok ki ennek a szűrőnek az beállításait körülbelül olyan módon, ahogy az ábra 13-on látható. Persze itt bátran variálhattok.

Adobe Illustrator – alkalmazásikon készítése

A következő lépésben másoljátok le a téglalapot Command+C-vel, és illesszétek be ugyanarra a helyre Command+F-fel. (PC-n a műveletet Ctrl+C és Ctrl+F kombinációval végezhetitek el).

Mivel a téglalop másolatán már nem szükségesek a korábban alkalmazott hatások, ezeket törölni kell. Talán néhányan tudjátok már, hogy az Illustratorban alkalmazott összes hatás és szűrő a Megjelenés palettában listázódik. Ha ez a paletta nincs látható, megnyithatjátok újra a Ablak>Megjelenés menüponton keresztül.

Adobe Illustrator – App-ikon létrehozása

Töröljétek most a Árnyékot. Ezt könnyen megtehetitek úgy, hogy megfogjátok az Árnyékot a Megjelenés palettában, nyomvatartva az egeret, és arra húzzátok a kis kukát ebben a palettában a jobb alsó sarokban.

Adobe Illustrator - alkalmazásikon készítése

A Belső sugárzást nem kell törölni, csak enyhén módosítani. Viszont előtte a téglalop másolatának Területi színét fehérre kell változtatni.

Adobe Illustrator – alkalmazás-ikon létrehozása.

Kattintsatok a Megjelenés palettán a Belső sugárzáshoz, állítsátok ott a módust Normálra, és válasszatok a színnek egy mély feketét. A Átlátszóságot állítsátok 100%-ra, a Simítást pedig válasszatok 10 mm-re (19. ábra).

Adobe Illustrator – alkalmazásikon létrehozása

Ezzel nő a kontraszt és az alkalmazás-ikonunk mélységet nyer.

Adobe Illustrator – App ikont készíteni

2. lépés: Sugárkeret készítése

Ebben a lépésben azt fogjuk megtanulni, hogyan hozz létre egy sugárkeretet az alkalmazás-ikonhoz. Ehhez először jobb lenne, ha elrejtenéd a két téglalapot, amit az 1. lépésben készítettél, hogy ismét legyen hely a munkaterületeden.

Válaszd ki a Vonal eszközt a Eszköztárban, és állítsd be a Kontúrszínét feketére és a Kontúrvastagságot 0,5pt-re.

Húzzál egy vonalat most kb. középről felfelé, miközben lenyomva tartod az egeret. Amint felhúztad a vonalat (a kurzort továbbra is lenyomva tartva), nyomd meg az Ctrl-t + azzal a Karakter gombbal, amelyen ez a két zárójel < > található.

Ezután tartsd lenyomva az egeret és húzd meg egy körben. Ennek a billentyűkombinációnak megfelelően a kurzormozgás sebességétől függően különböző mennyiségű vonalat állít elő.

Ha körbementél egyszer, akkor neked körülbelül úgy kell kinéznie, mint a 19. ábrán. (Próbáld ki ezt bátran többször is, mert itt is érvényes az "az iskolában tanultuk" mondás).

Adobe Illustrator – App ikon létrehozása

Jelölj ki minden vonalat, és csoportosítsd ezeket Command+G-vel (PC-n: Ctrl+G). Command+C-vel és Command+F-fel (PC-n: Ctrl+C és Ctrl+F) másold le az egészet, és illeszd be ugyanarra a helyre. Ezen másolat esetében a kontúrszínt fehérre állítsd, és enyhén jobbra vagy balra forgasd, hogy a fekete vonalak részben láthatóvá váljanak újra.

Ez kb. így kell kinéznie nálad. (20. ábra):

Adobe Illustrator – alkalmazásikon készítése

Jelölj ki ismét minden vonalat, és csoportosítsd újra Command+G-vel (PC-n: Ctrl+G).

Most már visszaállíthatod az 1. lépésben készített téglalapokat. Ügyelj arra, hogy a sugárkereted középpontja közel legyen a téglalapod középpontjához.

Adobe Illustrator – App-ikon létrehozása

Most másoljátok ki a szürke lekerekített téglalapot, amit az 1. lépésben a kék átmenettel számoltatok össze. (Parancs+C Mac gépen vagy Ctrl+C) PC-n.

Adobe Illustrator – alkalmazás ikon létrehozása

Most kattintsatok a sugaras csoportra és nézzetek a Átlátszóság palettára. Itt lehetőségetek nyílik (hasonlóan a Photoshophoz), hogy egy maszkot hozz létre. Duplán kattints a 23. ábrán látható területre. Ezzel a dupla kattintással egy úgynevezett Borítékolási maszk kerül létrehozásra.

Adobe Illustrator – Alkalmazásikon létrehozása

Amint létrehoztátok ezt, észre fogjátok venni, hogy a Réteg paletta megváltozott, amíg a maszkban vagy. A korábban másolt téglalapot most már behelyezitek a maszkba a Parancs+F (PC-n: Ctrl+F) segítségével. Most már csak a Borítékolás értékét kell 50%-ról 10%-ra csökkenteni.

Adobe Illustrator – App-ikon létrehozása

Most el kell hagynotok a maszkot, hogy visszatérjetek a normál nézethez. Ezt úgy tehetitek meg, hogy egyszer rákattintotok a maszk jel melletti fehér mezőre. (25. ábra).

Adobe Illustrator – Alkalmazás-ikon készítése

3. lépés: Alap a Piktogrammhoz

Már majdnem végeztünk a legnagyobb részével és készen állunk arra, hogy egy piktogrammot vagy szimbólumot tegyünk be az App-ikonunkba. Azonban előtte gyorsan létre kell hoznunk egy alapot vagy egy kis platformot, hogy az egész később jobban nézzen ki.

Fogjátok meg az Ellipszis eszközt és húzzatok vele kb. középen egy ellipszist. (Lásd 26. ábrán).

Adobe Illustrator – alkalmazásikon készítése

Ezt az ellipszist kitöltitek egy sötét kékkel. Egyelőre a következő színt használtam. RGB - 0/0/255.

Adobe Illustrator – App ikon készítése

Az ellipszis átlátszóságát körülbelül 70%-ra csökkentitek, majd megyetek az Effektus>Lágyító maszk>Gauss Lágyítás... menüpontba.

Adobe Illustrator - App ikont készíteni

A lágyításhoz 28 pixeles Sugárértéket választottam. Természetesen ezt az értéket ti is módosíthatjátok. Az egészet OK-val jóváhagyjátok.

Adobe Illustrator – Alkalmazásikon létrehozása

4. lépés: Piktogramm beillesztése

Az alap most már megvan, végre eljött az idő. Tulajdonképpen csak be kell szúrnunk a piktogrammot az App-ikonunkba. Mint kis extra, néhány különböző piktogrammot tettem be a munkafájlokba. Persze nyugodtan használhattok sajátokat is.

Menjetek a felső menüsorban a Fájl>Beszúrás lehetőségre és válasszatok ki egy tetszőleges piktogrammot. Nálam például a számítógép volt a munkaállomás adataiból.

... kész! ... azt lehet hinni ...

Adobe Illustrator – App ikon készítése

A piktogramm még kap egy árnyékot is. Ehhez menj az Effektus>Stilizálás szűrő>Árnyékolás pontra. Az értékek megadásánál az 32. ábrát használjátok iránymutatásként a árnyék értékeihez.

Adobe Illustrator - App ikon létrehozása

5. lépés: Fényfénnyel való kiegészítés

Az utolsó lépésben hozzá fogunk adni egy fényfényt a teljes képhez. Fogjátok meg az Ellipszis eszközt és húzzatok egy fehér ellipszist a 33. ábrán látható módon.

Adobe Illustrator – alkalmazás-ikon készítése

Végül csak meg kell állítani az Ellipszis kitöltési módszerét Lágy fénnyé. Kész az App-ikontok.

Adobe Illustrator – alkalmazásikon létrehozása

Bezáró gondolatok:

Remélem, hogy szórakoztató volt a útmutató és most képes leszel néhány szép alkalmazás ikont létrehozni. A mellékelt fájlokban megtalálod az eredeti munkafájlomat is, így beleolvashatsz, ha valahol elakadtál.

Ha bármilyen kérdésed van ezzel kapcsolatban, írj nekem bátran a kommentekbe. Igyekszem majd azokat időben megválaszolni.

Sok szeretettel

Julian