Illustrerar en serie applikationsikoner

Infinite Skills är ett mjukvaruföretag som utvecklar inlärningsmaterial för att människor ska förbättra sina kunskaper om en mängd olika applikationer, från industriprogramvara till vanliga ordbehandlingsprogram. Oändliga färdigheter kontaktade mig att skapa en serie applikationsikoner som kommer att följa med deras programvara. Det var självklart att med min otänkbara aptit för ikondesign och branding var spelet på!

Närma sig

Projektet måste bedömas för att bestämma rätt tillvägagångssätt. Sedan lanseringen av dessa appar på iTunes Store var ett nytt satsning för dem, hade de inga existerande ikondesignparametrar som jag behövde stanna inom. Jag tog tillfället i akt för att verkligen dissekera problemet och komma fram till bästa möjliga lösning.

Först och viktigast, jag behövde bestämma vad de förenande objekten i hela ikonkampanjen skulle vara. Jag visste att de skulle behöva arbeta som en familj, men ändå vara tillräckligt olika så att tittaren skulle känna igen dem snabbt som olika programvarustitlar.

Genom öppna kommunikationslinjer fastställdes det att det skulle finnas en tvättlista av programvaruuttitlar (vad du ser nedan är bara en partiell lista.) Jag hade klienten skicka mig de förväntade titlarna så att jag bättre kunde mäta benägenheten för ikoner som delar likheter i samband med skapandet av alla ikoner.

Efter mycket övervägande, skiss och övervägning bestämde jag att det skulle finnas fyra kärnpunkter som skulle skilja varje av ikonerna: bokstav, färg, förstärkning av grafik och bakgrund.

Brev

Var och en av ikonerna skulle primärt erkännas av en stor bokstav. Jag använde en sans serif och fet skrift så att ikonen inte skulle känna sig tuff eller för luftig. Brevet är vinklat för att visa en mer dynamisk utseende.

Färg

Eftersom flera objekt börjar med bokstaven "F", hjälper färgen till exempel att skilja ett dubbletter från en annan applikation. Adobe Flash och Apple Final Cut Pro är viktiga exempel.

Förbättra grafisk

Var och en av ikonerna skulle också få en förbättrad grafik som betecknar vad programtiteln kommer att lära dig. Där programvarutitlar var mer generiska använde jag också en generisk förbättrad grafik.

Bakgrund

Bakgrundsstruktur är en subtil skillnad som inte är avsedd att märkas vid första anblicken. När det är möjligt tar varje bakgrundstextur riktning från mjukvaran. I Final Cut Pro består bakgrunden av stjärnor som sammanfaller med film, kamera, filmer, etc..

Efter att jag bestämde mig för vad de differentierande objekten skulle vara, flyttade jag vidare på att arbeta upp trådramar för var och en av ikonerna. Jag ville ge mig det bästa tillfälle att harmonisera ikonerna, med det i åtanke arbetade jag på flera trådramar samtidigt.

Detta gjorde det väldigt tydligt med avseende på föremål som var nödvändiga för att kunna arbeta närmare som en enhet. Normalt arbetade två eller tre ikoner samtidigt en bra grund för att bestämma likheten. Dessutom, som ikoner var färdiga, hänvisade jag alltid till dem så att jag skulle vara säker på att hålla även de minsta detaljerna konsekventa.

Eftersom bokstäverna per ikon varierade var jag kreativ och flexibel med avseende på den medföljande grafiken. Ibland var ett brev väldigt brett och andra gånger var brev väldigt långa. För att kompensera för den skillnaden har jag implementerat två typer av grafik. Långa och skinniga föremål skulle springa i en vinkel från övre vänster till höger. Om ett motsvarande objekt inte var tunt och plattt ritade jag det i mer kvadratisk form och placerade det framför brevet. Det var viktigt att notera användningen av var och en av dessa händelser så att man inte användes överdrivet över den andra.

Illustrera objekt vars storlekar är dramatiskt olika

När du skapar en ikonserie är det viktigt att se till att ikonerna ser ut som de hör samman. Det finns många faktorer som påverkar det framgångsrika utförandet av detta inklusive: ämne, orientering och yta, för att nämna några.

Många gånger finns parametrar som behöver bearbetas. En parameter som jag stötte på under det här projektet var att klienten ville använda en byggnad i AutoCad-ikonen och en kamera på ikonen Photoshop for Photographers. Som du är mycket medveten skiljer sig en byggnad i detalj från något så litet som en kamera.

För Photoshop för fotografer tog jag mycket av detaljerna som du skulle se i en kamera. Naturligtvis lite destilleras ner med tanke på att den resulterande delen är en ikon. Kontrast det med en byggnad. För att bygga upp byggnaden behövde jag illustrera det på ett sådant sätt att det hade tillräckligt med detaljer att läsa som en byggnad, även om skalan är mycket mindre. Med detta sagt tog jag bort byggnaden till de kärnämnen som behövdes inkluderas för att den skulle kunna erkännas som sådan - fönster, takhyllor och trim var de viktigaste som skulle förbli.

Skapa undergrupper eller specialiserade versioner av vissa ikoner

Oändliga färdigheter visste att de skulle producera innehåll för specifika segment inom en användargrupp. De har till exempel en programtitel som är mer generell och är inriktad mot Photoshop-användare. De har också skapat en annan version som är speciellt för fotografer. Typiskt är versionering betecknad med en snipe (ord skrivna i en vinkel över kanten av något) men i det här fallet föredrog klienten en helt ny motsvarande grafik-en kamera.

Uppnå likhet samtidigt som du behåller intresse

Det står självklart att ikonerna måste komma över som en enhet. Det är emellertid också viktigt att betraktaren inte förlorar intresset för att betrakta objekten eftersom de blir uttråkad med deras utförande. Med detta i åtanke gjorde jag en punkt att skapa illusionen av olika ytor på var och en av de medföljande objekten jämfört med bokstaven den var bredvid.

Det finns ingen hård och snabb regel att ikoner måste komma tillvägagångssätt på detta sätt, snarare, det var mer av en konstnärlig licens som jag utövade. I vissa fall är det bara ologiskt att skapa en illusion av en annan yta, som i Microsoft Excel-ikonen, där man skulle förvänta sig att ett stapeldiagram skulle vara reflekterande, men på Adobe Illustrator-ikonen kommer du att observera att pennan har en matt plastisk utseende medan "jag" har ett mycket reflekterande utseende. Detta infusionerar lite mer intresse och hjälper till att visa objektet i ett mer realistiskt ljus.

Serie granskning av ikoner till datum

Tidsförlopp

Medan varje ikon tar flera timmar från början till slut har jag fått en ännu större inblick i skapandet av en del av en av ikonerna. Jag hoppas att du har haft en läsning om min process och kommer att ta lite av den information du har hittat till hjälp och tillämpa den på dina egna projekt.

Time Lapse App Icon Creation från Jonathan Patterson på Vimeo.