Share
Ikoner er uadskillelige del av en GUI (grafisk brukergrensesnitt) design. Jeg lastet ned, kjøpte og opprettet ikoner i tider, da en dag bestemte jeg meg for å lage mitt eget brukbare ikonsett. Noe å hjelpe andre GUI-designere gjør arbeidet raskere og bedre. Denne artikkelen forklarer i detalj prosessen med å skape og faser jeg gikk gjennom med dette prosjektet, og kan fungere som veiledning når du bestemmer deg for å gjøre noe lignende. Jeg gikk ned mer enn en kreativ sti før jeg ferdiggjorde denne "GUI Design Icons" skrift.
Siden denne artikkelen er litt lengre, har jeg delt det i kapitler. Du kan bruke disse koblingene til å hoppe til ønsket kapittel.
Jeg tegnet skisser av grafiske brukergrensesnitt bokstavelig talt i årevis, og denne ideen var hele tiden i hodet mitt. Jeg tenkte på å lage en linjal - stencil - med hvert ofte nødvendig ikon som brukes i GUI design?
La oss innse det - jeg har savnet sjansen for å være den første. Noen andre hadde allerede gjort dette. Jeg fant en fin, rustfri linjal (stencil) fra DesignCommision (se bilde), som du kan kjøpe hos uistencils.com.
Jeg bestilte det umiddelbart. Etter å ha sett det, var jeg enda mer fast bestemt på å lage en på egen hånd. Min ide var å gjennomføre dette litt annerledes - med plast. Det er ikke noe galt med rustfritt stål. Det er skinnende, moderne, det er fint. Men du kan ikke se om det, kantene er skarpe, og det ødelegger blyanter og skraper fingrene (det er ikke så ille, men det er ikke veldig behagelig å jobbe med det).
I begynnelsen var et papir, masse papir, blyanter, følte tips og mye tid. I mellomtiden (i ikke-tegningstiden) utforsket jeg ulike GUIer, søkte etter hva som kunne komme til nytte, og endte med mange papirer fulle av tegninger. Disse kan du også se her (klikk for større bilde). Når jeg bestemte meg for at jeg hadde nok av skisser, merket jeg alle ikonene som jeg kan prøve å gjenskape på datamaskinen. Dette er hvor jeg hoppet inn i den andre fasen.
Tiden som trengs for skisser var ingenting i forhold til tiden brukt i Adobe Illustrator. Som du ser, er ikonene ganske enkle, men du må passe på maksimal nøyaktighet, så få poeng som mulig (ikke unødvendige poeng) og - det viktigste - konsistens i stil.
Hvis du ser nærmere på linjalen fra DesignCommision, er dette den største ufullkommenheten - ikonene har ikke en enhetlig stil. De fleste ikonene er enkle, men brukerikonet har en veldig detaljert oversikt. De fleste ikonene har samme størrelse, men spilleknappen er for stor (og bred). De fleste ikonene er laget av rette linjer, men "jeg" og bokikonene er urimelig avrundet ... og så videre.
La meg vise deg prosessen med å lage to ikoner: låseikonet og laste animasjonsikonet. I begynnelsen skapte jeg to guider (ganske tilfeldig) i dokumentet - og jeg har forsøkt å holde ikonene størrelser langs disse veiledningene. Ikke at hvert ikon er fra den første guiden til den andre, men for omtrent å holde skalaen det samme.
Den raskeste til å lage ikoner er å forestille ikonet som en sammensatt av grunnleggende former. Det er alltid raskere å slette halvparten av en sirkel enn å tegne halvcirkelen for hånden (med pennverktøyet). Å holde arbeidet med pennverktøyet til et minimum, vil hjelpe deg å lage nøyaktige former på kort tid. I stedet for å bruke pennverktøyet, prøv å tenke brukt grunnleggende former og Pathfinder-verktøyene for å kutte dem fra hverandre etter behov.
Det ulåste hengelåsikonet er enda enklere (og raskere) å opprette.
Ikke tro at du kan gjøre alt perfekt ved første forsøk - akkurat som hengelåsikonene. Faktisk har jeg skrevet ut mange papirer for å se ikonene i større størrelse og på papir (tro det eller ikke, papir er fortsatt bedre for justeringer). Etter det har jeg lagt til noen detaljer, justert noen områder og slettet noen deler. Og deretter brukte disse endringene i Illustrator.
Bildene nedenfor viser prosessen min. Etter at jeg har skrevet ut ikonene i større størrelse, har jeg plukket markøren i samme farge (ikke spør hvorfor grå, jeg liker det) og lagt til deler der jeg ikke var fornøyd. Jeg har også
merket andre ufullkommenheter med en rød markør (som forandring av størrelse, slagslag, etc). Til sletting, Jeg har brukt det hvite korrigeringsbåndet eller bare et stykke hvitt klistremerke.
Som du kan se nedenfor, er enklere ikoner bare linjer i forskjellige lengder og vinkler, men med samme vekt.
Nå tilbake til etableringen. La oss se på hvordan du lager et annet ikon - brukes til å laste animasjoner.
Justering av dette ikonet er enda enklere fordi det er opprettet fra bare to linjer, alt du trenger å gjøre er:
En av hovedfordelene ved disse ikonene burde vært muligheten til å kombinere dem. For eksempel å plassere et lite plustegn ved siden av brukerikonet for å få et brukerikon, eller et lite kryss over mappeikonet for å opprette en fjern mappe ikon. Og så videre. Nedenfor vises et eksempel på et forstørrelsesglass som du kan kombinere med et pluss- og minustegn.
Min opprinnelige plan var å legge til tall, som kunne plasseres for eksempel over kalenderikonet eller i kommentarbobleikonet.
Slik ser det ut i Illustrator - ikonet, i / over / ved siden av som jeg har lagt noen eksempler på små ikoner for å teste utseendet.
For å unngå forvirringen mellom hvilket ikon er tegnet og som nettopp er kopiert, har jeg endret fargen på den kopierte til en lysere grå.
Og nå for testing ...
... og utskrift, justering og endring.
Jeg vil kort nevne en svært nyttig funksjon i Adobe Illustrator. Kunstbrett, som ble introdusert i Illustrator CS4, tillater at du har flere sider i ett dokument. Du kan si - ikke noe nytt i konkurransedyktige produkter, men vurder muligheten for forskjellige størrelser på sidene og forskjellige stillinger. Du kan legge til sidene, siden du legger til sidene i arbeidet ditt. Og så var jeg å legge til og legge til tavler ...
... og jeg flyttet ubrukte ikoner sidelengs, mens du flyttet de endelige inn i de nye tavlene.
Det hjalp meg mye, spesielt med utskrift og korrigeringer. Uten tavle måtte jeg bruke lag eller et stort dokument (men du kan ikke skrive ut bare en del av dette store lerretet lett).
Jeg ønsket å gjøre herskeren virkelig multi-purpose. Jeg tenkte på alle mulige måter å gjøre det enda bedre. For eksempel ved å legge til delelinjer. I Illustrator er det veldig enkelt, bare tegne en linje, og legg deretter til en Zig Zag-effekt for å lage en ujevnt linje (a), zigzag-linje (b), sett riktig alternativene i Stroke-vinduet for å få linjene til å strekke seg (c) eller prikket (d).
Kanskje du har lagt merke til at under forlengelsen av låsikonet, forlot vi nøkkelhullet i hvitt, så det ser ut som hullet, men det er det ikke. Du kan enkelt oppdage dette ved å endre fargen på det underliggende laget.
Det spilte ingen rolle før, men for det endelige produktet trenger vi ikoner i bare en farge, uten slag og effekt, og ideelt som bare ett objekt. For å oppnå dette bruker vi to funksjoner, utvide utseende og utvide, og paletten på Pathfinder. Her er prosessen:
Hvis vi flytter et dusin dager senere, kommer vi inn i fasen der jeg hadde alle ikoner ferdig og forberedt på denne måten. Så jeg har laget et nytt dokument i størrelsen på stencillinjalen og startet med å plassere disse ikonene. Som en bonus har jeg lagt til noen få knapper.
Siden det er en stencil linjal som vil bli kuttet, kan ikonene ikke ha flytende deler - fordi det er ingen måte å gjøre det på. Som du kan se på neste bilde, hvis du vil gjøre noe som meg, må du slette disse delene (kryssede deler), eller bli med i disse delene med tynne linjer (omkretset).
Her er disse "sammenføyningslinjene" i detalj - se antennikonet. Du kan også merke at fylling av batteriikonet allerede er slettet.
Linjalen i det siste utseendet i Illustrator ser slik ut. Alt jeg trengte var bare for å finne noen til å produsere den.
Jeg har sendt mange e-postmeldinger for å finne det rette selskapet. Først syntes det ikke å være noe problem med å få den produsert. Da fant jeg ut at det var et problem, og en stor en. Ikonene var for små (noen ganger laser kutter ut feil del). Hele linjalen var for tykk (noen ganger for tykk til å sette en blyant i den), og antallet kutt gjorde prisen på sluttproduktet urealistisk.
Etter tidlig entusiasme hadde jeg bare en prøve, mange trykte papirer og en averseness å gjøre noe annet med dette prosjektet. Så jeg satte dette prosjektet på vent, da det var mange morsommere ting å gjøre ...
Etter noen måneders forlat begynte jeg å tenke på prosjektet igjen. Linjalen er borte, hva med noe annet med disse ikonene? Hva med en skrift, noe som viklinger, men med stilen? De
entusiasme var tilbake, og jeg jobbet igjen. Som du vil se på et øyeblikk, er det gøy å lage en skrifttype fra forberedte ikoner som disse.
For skrifttypejobben var det nødvendig å opprette et annet dokument (med bare en tavle), størrelse 1000 til 1000 pt.
Etter det begynte jeg å kopiere ikonene fra originaldokumentet til separate lag, og jeg endret disse ikonene for å matche dokumentstørrelsen (for å fylle dokumentet pent). Siden alle ikonene allerede var uten slag og effekter, var resizing et spørsmål om bare ett klikk. I tillegg til å plassere de små ikonene i midten av dokumentet - bare bruk paletten Juster. Velg Juster til Artboard og klikk Horizontal Align Center og Vertical Align Center for å linjen alt opp.
Nå var jeg på å vise de store ikonene en etter en og plassere dem på riktig sted i forhold til små ikoner (i tilfelle disse store ikonene kan kombineres med små). Jeg gjorde dette for hånd. Som du ser i neste bilde, blir ikonet for kommentarer flyttet til bunnen, mens ikonet for dokumentet blir flyttet til toppen. Den siste delen av bildet viser kalenderikonet med alle de små ikonene som vises for å hindre at konturene overlapper.
Ikonet for brann viser at vi har et dokument på 1000 til 1000 pt, men i sjeldne tilfeller kan vi gå over grensene. For bokmerkeikon (og noen andre spesielle ikoner), trenger vi ikke bry oss om alle de små ikonene. I sidehullet kan vi bare plassere et plustegn, minus tegn og pil.
Eksporter ikoner for FontLab
Når alle ikonene ble plassert på riktig sted, var det på tide å få dem ut fra Illustrator. Selvfølgelig på en måte at de kan brukes i programvare for å lage skrifter (i vårt tilfelle FontLab, men det er det samme for alle andre programmer).
Å gjøre dette for hånden for nesten 200 ikoner vil ta mange timer - noe hvorfor gjør dette når du kan bruke et skript? Det er ikke en del av Illustrator, men jeg brukte et skript. Som er tilgjengelig for de som bestiller skriften.
Å jobbe med skript er veldig enkelt. Last den, kjør den, og du har alle lagene eksportert som EPS-filer. Og vi er ferdige med Illustrator.
Vel, å lage en skrift i FontLab er ikke for en artikkel, det er et emne for en stor bok. Men det er enkelt å lage en "dingbats" -fonta fra utarbeidede EPS-ikoner. Som du vil se, vil enhver annen skriftskapende programvare gjøre jobben, fordi vi bare trenger å laste EPS-filene i individuelle tegn og sette bredden.
I begynnelsen har vi en ny, tom skrift.
For å opprette et nytt tegn, dobbeltklikk inn i hvilken som helst boks, sett deretter størrelsen (bredde) til 1000 (samme som i Illustrator).
Importer ønsket EPS-fil og ... det er det.
Prosedyren er litt annerledes med store ikoner. Vi ønsker å vise dem bak de små, derfor trenger vi dem til å oppta ingen plass. Derfor satte vi deres bredde til null.
En rask test med forhåndsvisningsvinduet vil vise om det fungerer som det skal. I forhåndsvisningsvinduet har jeg startet med tegnet "k" (ikon for mappen, som burde ha null bredde). Dette betyr at det andre tegnet "V" (ikon for omlastning) begynner å vises fra begynnelsen, og derfor over forrige ikon.
Og det er alt. Etter en time med å klikke på skrifttypen er klar, så er det eneste som gjenstår å sette navnet og eksportere det.
Følgende bilder viser testing av forhåndsvisninger fra Microsoft Word.
Og nå har vi en komplett skrift.
Takk for at du har lest deg gjennom en så lang artikkel. Jeg håper at du har lært noe nytt og inspirerende i dag. Som du kan se fra artikkelen, var mine opprinnelige planer ganske forskjellige, men den resulterende fonten viste seg bra. Noen ganger begynner du i en kreativ retning og ender opp med å gå ned en annen kreativ sti.
Teksten "GUI Design Icons" er tilgjengelig for kjøp fra myfonts.com.
Abonner på Vectortuts + RSS-feed for å holde deg oppdatert med de nyeste vektoropplæringene og artiklene.
Accentsconagua