Share
Ikoner är oskiljaktiga del av en GUI (grafisk användargränssnitt) design. Jag hämtade, köpte och skapade ikoner i åldrar, då bestämde jag mig en dag om att skapa en egen användbar ikonuppsättning. Något som hjälper andra GUI-designers gör jobbet snabbare och bättre. I den här artikeln förklaras i detalj processen för att skapa och faser jag gick igenom med detta projekt och kan fungera som vägledning när du bestämmer dig för att göra något liknande. Jag gick ner mer än en kreativ väg innan jag avslutade denna "GUI Design Icons" typsnitt.
Eftersom denna artikel är lite längre har jag delat den i kapitel. Du kan använda dessa länkar för att hoppa till önskat kapitel.
Jag ritade skisser av grafiska användargränssnitt bokstavligen i åldrar, och denna idé var hela tiden i mitt huvud. Jag tänkte på att göra en linjal - stencil - med varje ofta behövs ikon som används i GUI-design?
Låt oss möta det - jag har saknat chansen att vara den första. Någon annan hade redan gjort detta. Jag hittade en fin, rostfri linjal (stencil) från DesignCommision (se bild), som du kan köpa hos uistencils.com.
Jag beställde genast det. Efter att ha sett det levande var jag ännu mer bestämd att göra en på egen hand. Min idé var att exekvera detta lite annorlunda - med plast. Det finns inget fel med rostfritt stål. Det är glänsande, modernt, det är trevligt. Men du kan inte se om det, kanterna är skarpa och det förstör pennorna och skrapar fingrarna (det är inte så illa, men det är inte så bekvämt att arbeta med det).
I början var ett papper, massor av papper, pennor, känt tips och mycket tid. Under tiden (i icke-ritningstiden) undersökte jag olika GUIs, letade efter vad som kan vara bra och slutade med många papper full av ritningar. Dessa kan du också se här (klicka för större bild). När jag bestämde mig för att jag hade tillräckligt med skisser markerade jag alla ikoner som jag kan försöka återskapa på datorn. Det var här jag hoppade in i andra fasen.
Den tid som behövs för skisser var ingenting jämfört med tiden som spenderades i Adobe Illustrator. Som du kan se är ikonerna ganska enkla, men du måste bry sig om maximal noggrannhet, så få poäng som möjligt (inga onödiga poäng) och - det viktigaste - konsistens i stil.
Om du tar en närmare titt på linjalen från DesignCommision är detta den största ofullkomligheten - ikonerna har inte en enhetlig stil. De flesta ikonerna är enkla men användarikonen har en mycket detaljerad beskrivning. De flesta ikonerna har liknande storlek, men spelningsknappen är för stor (och bred). De flesta ikonerna är gjorda av raka linjer, men ikonen "I" och boken är orimligt avrundade ... och så vidare.
Låt mig visa dig processen med att skapa två ikoner: låsikonen och laddning animationsikonen. I början skapade jag två guider (ganska slumpmässigt) i dokumentet - och jag har försökt att hålla ikonernas storlekar längs dessa guider. Inte att varje ikon är från den första guiden till den andra, men att ungefär hålla skalan lika.
Det snabbaste att skapa ikoner är att föreställa ikonen som en förening av grundläggande former. Det är alltid snabbare att ta bort halva cirkeln än att dra halvcirkeln för hand (med pennverktyget). Att hålla arbetet med penverktyget till ett minimum hjälper dig att skapa korrekta former på kort tid. Istället för att använda Penverktyget, försök att tänka på använda grundläggande former och Pathfinder-verktygen för att bryta dem ifrån varandra efter behov.
Den olåsta hänglåsikonen är ännu enklare (och snabbare) att skapa.
Tänk inte att du kan göra allt perfekt vid första försöket - precis som hänglåsikonen. Faktum är att jag har skrivit ut många papper för att se ikonerna i större storlek och på papper (tro det eller inte, papperet är fortfarande bättre för justeringar). Efter det har jag lagt till några detaljer, justerat vissa områden och raderat vissa delar. Och sedan tillämpade dessa ändringar i Illustrator.
Bilderna nedan visar min process. Efter att ha skrivit ikonerna i en större storlek har jag valt markören i samma färg (fråga inte varför grå, jag gillar det) och lagt till några delar där jag inte var nöjd. Jag har också
markerade andra imperfektioner med en röd markör (som förändring av storlek, slaglängd etc). För radering, Jag har använt den vita korrigeringsbandet eller bara en vit klistermärke.
Som du kan se nedan är enklare ikoner bara linjer i olika längder och vinklar, men med samma vikt.
Nu tillbaka till skapelsen. Låt oss titta på hur man skapar en annan ikon - används för att ladda animeringar.
Justera den här ikonen är ännu enklare eftersom den är skapad från bara två rader, allt du behöver göra är:
En av de viktigaste fördelarna med dessa ikoner borde ha varit möjligheten att kombinera dem. Till exempel för att placera ett litet plustecken bredvid användarikonen för att få en användarikon eller ett litet kors över mappikonen för att skapa en ta bort mapp ikon. Och så vidare. Nedan visas ett exempel på ett förstoringsglas, som du kan kombinera med plus- och minustecken.
Min ursprungliga plan var att lägga till nummer, som kan placeras till exempel över kalenderikonen eller i kommentarbubbelpicturen.
Så här ser det ut i Illustrator - ikon, in / över / bredvid vilken jag har lagt till exempel lite ikoner för att testa utseendet.
För att undvika förvirringen mellan vilken ikon är ritad och som just har kopierats, har jag ändrat färgen på den kopierade till en ljusare grå.
Och nu för att testa ...
... och utskrift, justering och förändring.
Jag kommer kort att nämna en mycket användbar funktion i Adobe Illustrator. Konstbrädor, som introducerades i Illustrator CS4, låter dig ha flera sidor i ett dokument. Du kan säga - inget nytt i konkurrenskraftiga produkter, men överväga möjligheten till olika storlekar på sidorna och olika positioner. Du kan lägga till sidorna, eftersom du lägger till sidorna i ditt arbete. Och så lade jag till och lade till tavlorna ...
... och jag flyttade oanvända ikoner i sidled, samtidigt som du flyttade de sista till de nya skyltarna.
Det hjälpte mig mycket, särskilt med utskrift och korrigeringar. Utan skyltar skulle jag behöva använda lager, eller ett stort dokument (men du kan inte skriva ut bara en del av den här stora duken enkelt).
Jag ville göra linjalen riktigt mångsidig. Jag tänkte på alla möjliga sätt hur man gör det ännu bättre. Till exempel med adderande linjer. I Illustrator är det väldigt enkelt, bara rita en linje och lägg sedan till en Zig Zag-effekt för att skapa en rakad linje (a), zigzag-linje (b), sätt rätt alternativ i streckfönstret för att linjerna ska strykas (c) eller prickad (d).
Kanske har du märkt att under låsikonens skapelse lämnade vi nyckelhålet i vitt, så det ser ut som hålet, men det är det inte. Du kan enkelt detektera det genom att ändra färgen på det underliggande lagret.
Det spelade ingen roll tidigare, men för den slutliga produkten behöver vi ikoner i bara en färg, utan stroke och effekt, och helst som bara ett objekt. För att uppnå detta använder vi två funktioner Expand Utseende och Expand, och paletten Pathfinder. Här är processen:
Om vi flyttar ett dussintals dagar senare kommer vi in i den fas där jag hade alla ikoner färdiga och förberedda på detta sätt. Så jag har skapat ett nytt dokument i storleken av stencil linjalen och började med att placera dessa ikoner. Som en bonus har jag lagt till några knappar.
Eftersom det är en stencil linjal som kommer att klippas ut, kan ikonerna inte ha flytande delar - för att det inte finns något sätt att göra det. Som du kan se på nästa bild, om du vill göra något som jag, måste du radera dessa delar (korsade delar) eller gå med i dessa delar med tunna linjer (cirklade).
Här är dessa "sammanfogningslinjer" i detalj - se antennikonen. Du kan också märka att fyllningen i batteriikonen redan har raderats.
Linjalen i sin sista look i Illustrator ser ut så här. Allt jag behövde var bara för att hitta någon att tillverka den.
Jag har skickat många e-postmeddelanden för att hitta rätt företag. Först såg det att det inte skulle vara något problem med att få den tillverkade. Då fick jag reda på att det var ett problem och en stor. Ikonerna var för små (ibland sänker lasern bort fel del). Hela linjalen var för tjock (ibland för tjock för att sätta en penna i den), och antalet nedskärningar gjorde priset för slutprodukten orealistiskt.
Efter den tidiga entusiasmen hade jag bara ett prov, många tryckta papper och en averseness att göra något annat med detta projekt. Så jag satte det här projektet på håll, eftersom det fanns många roligare saker att göra ...
Efter några månader överge började jag tänka på projektet igen. Linjalen är borta, vad sägs om något annat med dessa ikoner? Vad sägs om en typsnitt, något liknande lind, men med stilen? De
entusiasmen var tillbaka, och jag arbetade igen. Som du ser på ett ögonblick, är det roligt att skapa en typsnitt från färdiga ikoner som dessa.
För teckensnittsjobbet var det nödvändigt att skapa ett annat dokument (med endast en tavla), storlek 1000 vid 1000 pt.
Därefter började jag kopiera ikonerna från originaldokumentet till separata lager och jag ändrade dessa ikoner för att matcha dokumentstorleken (för att fylla dokumentet snyggt). Eftersom alla ikonerna var redan utan slag och effekter, ändrades storlek bara på ett klick. Förutom att placera de små ikonerna i mitten av dokumentet - använd bara paletten Justera. Välj Justera till Artboard och klicka på Horizontal Align Center och Vertical Align Center för att ställa upp allt.
Nu var jag på att visa de stora ikonerna en efter en och placera dem på rätt plats inför små ikoner (om dessa stora ikoner kan kombineras med små). Jag gjorde detta för hand. Som du kan se i nästa bild, flyttas ikonen för kommentarer till botten medan ikonen för dokument flyttas överst. Den sista delen av bilden visar kalenderikonen med alla små ikoner som visas för att förhindra att konturer överlappar varandra.
Eldikonen visar att vi har ett dokument som är 1000 till 1000 pt, men i sällsynta fall kan vi gå över gränserna. För bokmärkesikon (och några andra speciella ikoner) behöver vi inte bry sig om alla små ikoner. I sidhålet kan vi bara placera ett plustecken, minustecken och pil.
Exportera ikoner för FontLab
När alla ikonerna hade placerats på rätt plats var det dags att få dem ut från Illustrator. Naturligtvis på ett sätt att de kan användas i programvara för att skapa teckensnitt (i vårt fall FontLab, men det är samma för alla andra program).
Att göra detta för hand för nästan 200 ikoner skulle ta timmar av arbete - varför gör du det här när du kan använda ett manus? Det är inte en del av Illustrator, men jag använde ett manus. Vilket är tillgängligt för dem som beställer teckensnittet.
Att arbeta med skript är väldigt enkelt. Ladda det, kör det, och du har alla lager exporterat som EPS-filer. Och vi är färdiga med Illustrator.
Jo, att skapa ett teckensnitt i FontLab är inte för en artikel, det är ett ämne för en stor bok. Men det är enkelt att skapa ett "dingbats" teckensnitt från beredda EPS-ikoner. Som du kommer se, skulle någon annan typsnitt skapa programvara göra jobbet, eftersom vi bara behöver ladda EPS-filerna till enskilda tecken och ställa in bredden.
I början har vi en ny, tom typsnitt.
För att skapa en ny karaktär dubbelklickar du på valfri ruta och ställer sedan in storleken (bredd) till 1000 (samma som i Illustrator).
Importera den önskade EPS-filen och ... det är det.
Förfarandet är lite annorlunda med stora ikoner. Vi vill visa dem bakom de små, därför behöver vi dem att inte rymma något utrymme. Därför satte vi deras bredd på noll-.
Ett snabbtest med förhandsgranskningsfönstret visar om det fungerar korrekt. I förhandsgranskningsfönstret har jag börjat med tecknet "k" (ikon för mapp, som borde ha noll bredd). Det betyder att den andra tecknen "V" (ikonen för omladdning) börjar visa från början och därmed över föregående ikon.
Och det är allt. Efter en timme att klicka på teckensnittet är klart, så är det enda kvar som ställer in namnet och exporterar det.
Följande bilder visar testning av förhandsgranskningarna från Microsoft Word.
Och nu har vi ett komplett teckensnitt.
Tack för att du läste dig igenom en så lång artikel. Jag hoppas att du har lärt dig något nytt och inspirerande idag. Som du kan se från artikeln var mina ursprungliga planer helt annorlunda, men den resulterande teckensnittet visade sig vara bra. Ibland börjar du i en kreativ riktning och hamnar på en annan kreativ väg.
Teckensnittet "GUI Design Icons" är tillgängligt för köp från myfonts.com.
Prenumerera på Vectortuts + RSS-flödet för att hålla dig uppdaterad med de senaste vektorhandledningarna och artiklarna.
Accentsconagua