Sådan vil vores app-ikon se ud til sidst. Men nu nok snak. Lad os gå direkte til værks i Adobe Illustrator …
Trin 1: Oprettelse af fundament
Når du er i Illustrator, opretter du først en ny arbejdsflade via Fil>Ny. I det følgende vindue vælger du et format på 70x70mm. Bekræft vinduet med OK.
Tag Rektangel-værktøjet fra Værktøjskassen og klik én gang et hvilket som helst sted på din arbejdsflade. Derefter vises et dialogboks, hvor du kan indtaste størrelsen på dit rektangel. Vælg en størrelse på 35x35mm og bekræft det hele med OK. Dette er nu vores fundament for app-ikonet.
Eftersom Apple-app-ikoner aldrig er firkantede, skal vi nu sikre, at kanterne afrundes. Vælg rektanglet og gå derefter til den øverste menulinje og vælg Effekt>Stiliseringsfilter>Afrundede hjørner …
I det efterfølgende vindue indtaster du en hjørneradius på 7mm. Bekræft det hele med OK.
Når du har bekræftet denne effekt, vises kanterne afrundet, men stien er stadig firkantet. For at ændre dette går du nu til Objekt>Konverter til stier. Nu er effekten konverteret til et objekt (stien følger nu direkte de afrundede kanter).
I næste trin har du brug for Forløbspaletten. Hvis du ikke allerede har åbnet den, finder du den via Vindue>Forløb.
Klik nu på forløbsfeltet i Forløbspaletten, for at udfylde dit afrundede rektangel med en standard sort/hvid-forløb. (Hvis dit rektangel stadig har en kontur, så er det nu tid til at fjerne den).
Ved indstillingen for forløbsvinklen indtaster du en værdi på 90°, så den går pænt fra top til bund.
Da vores ikon skal have en blå forløb (du kan selvfølgelig også bruge dine egne farver), har jeg allerede forberedt to RGB-farveværdier til dig.
• mørkeblå - 28/57/145
• lyseblå - 84/244/255
For at tildele disse farveværdier til forløbet, skal du blot dobbeltklikke på farvefelterne i Forløbspaletten, hvorefter du har mulighed for at indtaste RGB-værdierne.
(Hvis en anden farvetilstand er valgt for dig der, skal du trykke på piletasten øverst til højre i Forløbspaletten, for at vælge den korrekte farvetilstand).
Når du har gjort alt dette, skal det se nogenlunde sådan ud hos dig. (Figur 11).
For at finjustere forløbet, går du til Effekt>Stiliseringsfilter>Indre glød … I indstillingen for fyldmetoden vælger du Miks sammen . Du vælger en Gennemsigtighed på 75% og et Blødgør på 8,8mm. Da vi kun vil anvende denne effekt i den ydre del, placerer du markøren ved Kant. Bekræft vinduet med OK.
Næste skridt er at tilføje en Skygge. Dette gøres også via Effekt>Stiliseringsfilter>Skygge … Vælg indstillingerne for denne effekt cirka som vist i figur 13. Du kan dog roligt variere lidt her.
I det næste trin kopierer du rektanglet med Command+C og indsætter det igen på samme sted med Command+F. (På en pc kan du gøre det med Ctrl+C og Ctrl+F).
Da vi ikke længere har brug for effekterne på kopi-rectangle, skal du slette dem. Som nogle af jer måske allerede ved, listes alle effekter og filtre, som man anvender i Illustrator, i Udseende-paletten. Hvis denne palet ikke er synlig for dig, kan du åbne den igen under Vindue>Udseende.
Slet nu Skyggen. Du kan gøre det nemt ved at trække skyggen i Udseende-paletten med musen holdt nede og slippe den over skraldespanden nederst til højre i paletten.
Du behøver ikke slette Indvendig skærm, da vi kun skal tilpasse den lidt. Først skal du dog ændre Rektangelkopins farve til hvid.
Klik derefter i Udseende-paletten på Indvendig skærm, skift tilstand til Normal og vælg en dyb sort farve til farven. Indstil Gennemsigtigheden til 100% og brug en værdi på 10mm for Blødgøring (se billede 17).
For at blande denne kopi med det underliggende originale med blå gradient skal du blot reducere Gennemsigtigheden til 50% og indstille fyldemetoden til Blødt lys. Alt dette gøres via Gennemsigtigheds-paletten. (Denne palet kan du også finde under Vindue>Gennemsigtighed).
Dette øger kontrasten lidt og vores app-ikon får mere dybde.
Trin 2: Opret strålekrans
I dette trin vil vi se på, hvordan du kan oprette strålekransen til app-ikonet. Start med at skjule de to rektangler, som du oprettede i trin 1, så du har plads på dit arbejdsområde.
Tag Linjetegneværktøjet fra Værktøjslinjen og indstil Konturfarve til sort og Stregtykkelse til 0,5pt.
Tegn nu en linje opad fra midten, hold venstre museknap nede. Når du har trukket linjen (hold stadig den venstre museknap nede), tryk på Ctrl-tasten + tasten med disse to parenteser <>.
Fortsæt nu med at bevæge musen rundt med den venstre museknap nede. Afhængigt af hastigheden på din musebevægelse oprettes der forskellige antal linjer.
Når du har lavet én fuld cirkel, skal det se omtrent sådan ud som vist i figur 19. (Øv gerne dette flere gange, da ordsproget "øvelse gør mester" også gælder her).
Marker alle linjer og grupér dem med Command+G (på pc: Ctrl+G). Kopier det hele med Command+C og Command+F (på pc: Ctrl+C og Ctrl+F) og indsæt det igen på samme sted. I denne kopi skal du ændre konturfarven til hvid og dreje den let til højre eller venstre, så de sorte linjer delvist bliver synlige igen.
Det skulle se omtrent sådan ud for dig. (Billede 20):
Marker alle linjer igen og grupér dem på ny med Command+G (på pc: Ctrl+G).
Nu kan du vise rektanglerne fra trin 1 igen. Sørg for, at strålekransens centrum er cirka midt i dit rektangel.
Nu kopierer I det grå, afrundede rektangel, som I har beregnet med den blå gradient i trin 1. (Command+C eller på PC - Strg+C).
Nu skal I klikke på jeres gruppe med strålekransen og se i Gennemsigtighedspaletten. Her har I nu muligheden (ligesom i Photoshop) for at oprette en maske. Dobbeltklik på området, som ses på illustration 23. Ved dette dobbeltklik dannes en såkaldt Gennemsigtighedsmaske.
Når I har dannet den, vil I også bemærke, at jeres Layer-palet har ændret sig, så længe I er i masken. Med Command+F (på PC: Strg+F) skal I nu indsætte det tidligere kopierede rektangel i masken. Nu skal I blot reducere Gennemsigtigheden fra 50% til 10%.
Nu skal I forlade masken for at vende tilbage til normal visning. Gør dette ved at klikke én gang på det hvide felt ved siden af maskesymbolet. (Illustration 25).
Trin 3: Skab grundlaget for piktogrammet
Nu har vi næsten klaret det største stykke arbejde og er klar til at indsætte et piktogram eller et symbol i vores app-ikon. Dog skal vi først hurtigt oprette en base eller en lille platform, så det hele senere ser lidt bedre ud.
Tag fat i Ellips-værktøjet og træk dermed cirka midt på en ellipse. (Se illustration 26).
Udfyld denne ellipse med en mørk blå farve. Jeg har brugt følgende farveværdier hertil. RGB - 0/0/255.
Reducer Gennemsigtigheden til ca. 70% og gå derefter til Effect>Blur-filtre> Gaussian Blur …
Jeg har valgt en Radiuser på 28 pixels til sløringen. I kan dog frit ændre denne værdi. Bekræft det hele med OK.
Trin 4: Indsæt piktogrammet
Efter at basen nu er klar, er tiden endelig kommet. Vi skal faktisk blot indsætte et piktogram i vores app-ikon. Som en lille ekstra ting har jeg inkluderet nogle forskellige piktogrammer i arbejdsfilerne til jer. I kan dog også meget gerne bruge jeres egne.
Gå til Fil>Indsæt i den øverste menulinje og vælg et piktogram efter eget valg der. I mit tilfælde er det computeren fra arbejdsdataene.
... færdig! ... kunne man mene ...
Der er dog stadig et eller to små ting, der skal gøres. For det første får piktogrammet stadig en skygge. Gå til Effect>Stiliseringsfiltre>Skygge. Orienter jer efter værdierne for denne skygge på illustration 32.
Trin 5: Tilføjelse af lysstråle
I det sidste trin vil vi tilføje en lysstråle for at afrunde det hele pænt. Tag fat i Ellips-værktøjet og træk en hvid ellipse som vist i illustration 33.
Til sidst skal I blot ændre udfyldningsmetoden for ellipsen til Blødt lys. Nu er jeres app-ikon færdigt.
Afsluttende ord:
Jeg håber, at I har haft det sjovt med tutorialen, og at I nu kan lave nogle flotte app-ikoner. I de vedhæftede filer finder I også min originale arbejdsfil, så I kan kigge deri, hvis I på et tidspunkt sidder fast.
Hvis I har yderligere spørgsmål om dette emne, så skriv dem bare i kommentarerne. Jeg vil stræbe efter at besvare dem hurtigt.
Mange hilsner
Jeres Julian
