Så här kommer vår app-ikon se ut i slutändan. Men nu räcker det med prat. Låt oss börja direkt i Adobe Illustrator...
Steg 1: Skapa fundamentet
När du har öppnat Illustrator, skapar du först en ny arbetsyta genom att gå till Arkiv>Ny. I det följande fönstret väljer du ett format på 70x70mm. Bekräfta fönstret med OK.
Välj Rektangel-verktyget från Verktygspaletten och klicka sedan någonstans på din arbetsyta. Därefter visas en dialogruta där du kan ange storleken på din rektangel. Här väljer du en storlek på 35x35mm och bekräftar allt med OK. Detta är nu vårt fundament för app-ikonen.
Eftersom Apples app-ikoner aldrig är fyrkantiga, måste vi se till att avrunda hörnen. Välj rektangeln och gå sedan till Effekt>Stilisera>Avrunda hörn...
I det följande fönstret anger du en hörnradien på 7 mm. Bekräfta allt med OK.
När du har bekräftat detta kommer hörnen att visas avrundade, men banan är fortfarande fyrkantig. För att ändra detta går du nu till Objekt>Ändra utseende. Effekten har nu omvandlats till ett objekt (banan löper nu längs de avrundade hörnen direkt).
I nästa steg behöver du Gradientpallen. Om du inte redan har öppnat den hittar du den under Fönster>Gradient.
Klicka nu på fältet för gradering i Gradientpallen för att fylla din avrundade rektangel med en standard svart/vit gradering. (Om din rektangel fortfarande har en Kontur, är det dags att ta bort den nu).
Vid inställningen för graderingsvinkeln anger du ett värde på 90° så att den går fint från topp till botten.
Eftersom vår ikon ska ha en blå gradation, (du kan naturligtvis använda egna färger också) har jag redan förberett två RGB-färgvärden för dig.
• mörkblå - 28/57/145
• ljusblå - 84/244/255
För att tilldela dessa färgvärden till graderingen, dubbelklicka bara på färgfälten i Gradientpallen. Då ges du möjlighet att ange RGB-värdena.
(Om en annan färgläge redan är inställt där för dig, klicka på den lilla pilen längst upp till höger i Gradientpallen för att välja lämpligt färgläge).
När du har gjort detta, bör allt se ungefär ut som hos dig. (Illustration 11).
För att finslipa graderingen lite till, gå till Effekt>Stilisera>Skugga och glöd... I fyllningsmetodinställningarna väljer du Mixa in. Ställ in en Opacitet på 75% och ange 8,8 mm för Suddighet. Eftersom vi bara vill tillämpa denna effekt i den yttre delen, markera Kant. Bekräfta fönstret med OK.
Nästa steg är att lägga till en Skugga. Det kan du göra genom Effekt>Stilisera>Skugga... Välj inställningarna för denna filter ungefär som i illustration 13. Du kan dock gärna variera lite här.
I nästa steg kopierar ni rektangeln med Command+C och klistrar in den på samma plats med Command+F igen. (På PC gör ni samma sak med Strg+C och Strg+F).
Eftersom vi inte längre behöver effekterna som tidigare applicerades på rektangeln, måste ni ta bort dem. Som några av er kanske redan vet, listas alla effekter och filter som ni applicerar i Illustrator i Utseende-panelen. Om den här panelen inte är synlig för er, kan ni öppna den igen genom att gå till Fönster>Utseende.
Ta bort nu skuggningen. Detta kan ni enkelt göra genom att dra skuggningen i Utseende-panelen med vänster musknapp intryckt till papperskorgen längst ned till höger i panelen.
Ni behöver inte ta bort inspelet. Ni behöver bara justera den lite. Innan dess bör ni ändra fyllningsfärgen på er rektangelkopia till vitt.
Klicka sedan på inspelet i Utseende-panelen, ställ in läget på Normal och välj en mörk svart färg för färgen. Ställ genomskinligheten till 100% och för oskärpning kan ni välja en 10 mm-värde (se bild 17).
För att reducera kontrasten något och ge vår app-ikon mer djup, sänker ni enkelt genomskinligheten till 50% och ställer fyllningsläget på mjukt ljus. Detta gör ni genom Genomskinlighets-panelet. (Också här hittar ni panelen genom Fönster>Genomskinlighet).
Detta kommer att öka kontrasten något och vår App-ikon kommer att få mer djup.
Steg 2: Skapa strålkrans
I detta steg kommer vi att fokusera på hur ni kan skapa strålkransen för App-ikonen. För det bästa börjar ni med att först gömma de två rektanglarna ni skapade i steg 1, så att ni får mer plats på er arbetsyta.
Hämta Linjeverktyget från Verktygsfältet och ställ in Linjefärgen som svart och Linjetjockleken som 0,5 pt.
Dra nu ungefär uppifrån mitten en linje uppåt och håll musknappen nedtryckt. När ni dragit linjen (fortfarande med musknappen nedtryckt), tryck på Ctrl-tangenten + tangen < >.
Fortsätt nu med att hålla musknappen nedtryckt och dra en cirkel. Genom denna tangentkombination skapas olika många linjer beroende på din muspekarens hastighet.
När ni har dragit en cirkel, skulle det ungefär se ut som i bild 19 för er. (Försök detta flera gånger, eftersom ordspråket "övning ger färdighet" gäller även här).
Markera alla linjer och gruppera dem med Command+G (på PC: Strg+G). Med Command+C och Command+F (på PC: Strg+C och Strg+F) kopierar ni det hela och klistrar in det på samma plats igen. I denna kopia ändrar ni linjefärgen till vitt och vrider den lätt åt höger eller vänster, så att de svarta linjerna blir delvis synliga igen.
Hela detta bör se ungefär ut som för er. (Bild 20):
Markera nu alla linjer igen och gruppera dem igen med Command+G (på PC: Strg+G).
Nu kan ni återigen visa rektanglarna från steg 1. Se till att strålkransens mittpunkt ungefär hamnar i rektangelns mittpunkt.
Nu kopierar ni det gråa avrundade rektangel som ni beräknade med den blåa gradienten i steg 1. (Command+C eller på PC - Strg+C).
Nu klickar ni på er grupp med strålkransen och tittar i Transparens-paletten. Här har ni nu möjlighet (liknande i Photoshop), att skapa en mask. Dubbelklicka på området som syns i figur 23. Genom denna dubbelklick skapas en s.k. Genomskinlighetsmask.
När ni har skapat denna kommer ni också märka att er Lager-palett har ändrats, så länge ni är inne i masken. Med Command+F (på PC: Strg+F) infogar ni nu det tidigare kopierade rektangel i masken. Nu behöver ni bara minska genomskinligheten från 50% till 10%.
Nu måste ni lämna masken för att återgå till normalvisning. Det gör ni genom att klicka en gång på det vita fältet bredvid maskikonen. (Figur 25).
Steg 3: Skapa en bas för piktogram
Nu har vi nästan gjort det största arbetet och är redo att lägga till ett piktogram eller symbol i vår appikon. Dock måste vi först snabbt skapa en bas eller en liten plattform så att det hela ser bättre ut senare.
Ta tag i Ellipsverktyget och dra en Ellipse ungefär mitt på. (Se figur 26).
Fyll denna Ellipse med en mörkblå färg. Jag har använt följande färgvärden. RGB - 0/0/255.
Minska genomskinligheten till ca. 70% och gå sedan till Effekt>Mjukgörande filtret>Gaussisk suddighet …
För suddigheten har jag valt en Radie på 28 pixlar. Ni kan naturligtvis ändra detta värde fritt. Bekräfta allt med OK.
Steg 4: Lägg till piktogram
Eftersom basen nu är klar är det äntligen dags. Vi behöver egentligen bara lägga till ett piktogram i vår appikon. Som en liten extrafunktion har jag lagt in några olika piktogram i arbetsfilerna åt er. Ni kan dock också gärna använda egna.
Gå till den övre menyraden och välj Arkiv>Placera och välj där ett piktogram efter eget val. I mitt fall är det en dator från arbetsfilerna.
… klart! … kan man tycka …
Det finns dock en eller två små saker kvar att göra. Å ena sidan kommer piktogrammet att få en skugga. Gå till Effekt>Stilfilter>Skugga. Orientera er vid värdena för denna skugga enligt figur 32.
Steg 5: Lägg till ljusreflex
I det sista steget kommer vi lägga till en ljusreflex för att avsluta det hela snyggt. Ta tag i Ellipsverktyget och dra en vit Ellipse som i figur 33.
Till sist behöver ni bara ställa fyllningsmetoden för Ellipsen till Mjukt ljus. Er appikon är färdig.
Avslutande ord:
Jag hoppas att ni har haft roligt med handledningen och att ni nu kan skapa några fina app-ikoner. I de bifogade filerna hittar ni också min originalarbetsfil så att ni kan titta där om ni inte kan komma vidare vid något tillfälle.
Om ni har några frågor om detta ämne, skriv dem gärna i kommentarerna. Jag kommer att försöka svara på dem så snabbt som möjligt.
Många hälsningar
Euer Julian
