Share
Hva du skal skapeI dag skal vi se på ulike måter å eksportere ikoner ved hjelp av et verktøy som ofte fryktes, men vil ta produktiviteten til et annet nivå når du mestrer det. Det verktøyet er ingen annet enn Slice Tool, og tro meg, hvis du aldri har brukt det før, vil du lese denne artikkelen, siden jeg vil forklare alt det er å vite om det når det gjelder eksporteksempler.
Enten du velger å bruke en premade icon-pakke, eller starte fra begynnelsen, vil vi i dag lære deg noen viktige hensyn til å tenke på når du eksporterer dine dyrebare ressurser.
Før vi får alt teknisk, vil jeg ta et par sekunder og forklare årsaken til å skrive denne delen.
Så i en tidligere opplæring snakket jeg om å bruke illustrasjonsbrett og lag Som metoder for eksport av våre dyrebare ikoner, men for å være ærlig, kan disse metodene redusere deg når du har en større pakke. Tanken var at jeg ønsket / trengte å presentere en prosess egnet for nybegynnere som ville være lett å forstå, forutsatt at de visste hvordan de kunne bruke de mest grunnleggende av Illustrators verktøy.
Nå, mens disse metodene kanskje ikke hadde vært de beste i form av produktivitet, var de ganske enkle å følge og anvende, noe som gir deg akkurat det samme resultatet.
Siden noen av dere trodde at prosessen var altfor treg og smertefull, bestemte jeg meg for å opp spillet mitt og vise deg den raskeste måten å eksportere en ikonpakke på, med en litt mer avansert metode.
Vel, jeg kan ha sagt avansert, men for å være ærlig er det ikke så vanskelig når du leker med det et par ganger.
Når det er sagt, la oss komme tilbake til hovedemnet vårt og snakke litt om skiver og hvordan Illustrator bruker dem.
Du kan tenke på en "skive" som en definert del av et kunstverk som du kan opprette for å kunne eksportere hverandre i stedet for å eksportere hele brikken.
I utgangspunktet ble skiver laget for webdesignere, men som med de fleste Illustrators verktøy, fant denne raskt en ny bruk: Eksporterende ikoner.
Det er ganske enkelt faktisk. Først la oss tenke på Artboard som et stykke papir som du legger ned på kunstverket. Nå, når du oppretter en "skive", avgrenser du faktisk et segment av det papiret ved å lage en utklipp som du deretter kan fjerne fritt fra den større sammensetningen.
Jeg liker å forestille seg at prosessen ligner på å ta en kutter og skar de spore margene i segmentet, skille den fra papiret.
Med hvert opprettet stykke tilordner Illustrator et nummer, fra øverste venstre hjørne helt til nederst til høyre. Først kan du ikke bryr deg for mye om denne handlingen, men med tiden kommer du til å sette pris på det, siden du får en bedre forståelse av hva som skjer med bildene dine.
Hvis du aldri har opprettet et stykke før, ikke bekymre deg fordi det er ganske enkelt å gjøre. Det er tre måter å lage skiver på som du bør være oppmerksom på:
Dette første alternativet er veldig enkelt å forstå, siden det lar deg lage skiver rundt grensene til en eller flere objekter.
Så, la oss si at vi har et par ikoner, og vi vil skille ut den første.
For å gjøre det, velger vi ikonet, og deretter går til Objekt> Slice> Make.
Dette vil umiddelbart skille det ikonet fra resten ved å lage en avgrensende linje rundt den.
Selv om vi har opprettet et stykke for bare ett ikon, har Illustrator delt de resterende delene av Artboard i større stykker, en for hver side av ikonets stykke. Vi har en stor en til toppsiden, en smalere for venstre side, en ganske bred en til høyre side, og en enda smalere for den nederste siden.
Nå, hvis du tar en nærmere titt på Artboard, ser du kanskje at disse skivene er nummerert, på en ganske enkel måte, fra øverste venstre hjørne til nederst til høyre. Illustrator tilordner tall til sine skiver for å la deg velge hvilke av skivene du vil eksportere, og hvilke ikke. Jeg snakker mer om dette i eksportprosessen.
Raskt tips: Som du ser, har den opprettede snittgrensen en rektangulær form, siden Illustrator skaper avgrensningen ved å se på ikonets totale bredde og høyde og ikke dens form. Dette er ganske forståelig, siden hvis du skulle designe en nettside, ville det være ganske vanskelig å bryte ned sammensetningen din ved hjelp av flere organiske linjer, og deretter sette den sammen igjen perfekt.
Det er et par ting du bør være oppmerksom på når du bruker denne metoden. Hvis du åpner Objekt> Skive menyen, vil du se at du har Gjøre alternativet som vi tidligere har brukt og a Opprett fra utvalg et par rader lavere ned. Mens de to gjør det samme når du bare har ett objekt valgt, oppfører de seg helt annerledes når du har valgt flere objekter.
Hovedforskjellen mellom de to er den med Gjøre Du kan lage skiver rundt hver av de valgte objektene, mens du er i Opprett fra utvalg alternativet vil du instruere Illustrator for å lage skiver rundt den totale overflaten av alle de valgte objektene.
Nå, hvis du skulle opprette et webprosjekt (webside), vil Opprett fra utvalg alternativet ville være helt fint å bruke, men hvis du lager et ikonpakke, vil du alltid gå med Gjøre siden du vil individuelt eksportere hver og en av ikonene dine.
Sammenlignet med den forrige metoden, Guides en er mer nøyaktig, siden prosessen krever at du manuelt legger til vertikale og horisontale guider til hver side av delen av teksten du vil avgrense.
Først må du aktivere linjalene ved å trykke Control-R (høyreklikk> Vis linjaler) og deretter dra dine guider og plasser dem der du vil at skive linjene skal falle. Når du har avgrenset din del med hjelpelinjene, kan du gå til Objekt> Slice> Lag fra guider å lage de faktiske skivene.
Hvis du tar en nærmere titt på hvordan Illustrator legger til tall i skivene, vil du se at når en del er avgrenset og tilordnet, vil den tvinge de andre til å ta tak i følgende tallverdi uansett størrelsen de har. Det er også ganske interessant å se at skivene er opprettet rundt den avgrensede overflaten av gjenstandene og ikke skjæringspunktet av støttelinjene.
Denne tredje metoden er trolig den "øverste hunden" når det gjelder nøyaktighet, siden den lar deg klikke og dra for å lage et 100% manuelt utvalg. For å være ærlig, vil det være situasjoner når du vil ha mer kontroll over dine skiver, men jeg finner ikke alt som er nyttig når det gjelder å skære et stort ikonpakke, siden det ville ta lang tid å gjøre det.
Men bare hvis du noen gang trenger å bruke den, bør du vite hvordan du gjør det. Først må du ta tak i Slice Tool, som som standard ligger på venstre sidefelt mot bunnseksjonen, like over Håndverktøy. Når du har valgt verktøyet, kan du plassere deg selv over delen av kunstverket du vil avgrense, og klikk deretter og dra for å lage et valg som automatisk blir til et stykke når du slipper museknappen.
Sammenlignet med et vanlig utvalg, er Slice Tool lar deg holde nede Rom nøkkel for å flytte / reposisjonere valget ditt, noe som er ganske nyttig siden noen ganger du kanskje finner ut at du har startet på feil fot.
Nå er den kule tingen om denne metoden at skivene umiddelbart opprettes, uten å måtte gå over til Objekt> Skive undermenyen for å kunne Gjøre eller Skape et stykke fra en utvalg.
Den eneste ulempen jeg kan tenke på er at du kanskje ikke har 100% nøyaktighet til du slår på Pixel Preview modus (Vis> Forhåndsvisning av piksel eller Alt-Control-Y), slik at du kan lage piksel-perfekte valg, som for dagens designere er et must.
Så til dette punktet har jeg snakket om de tre forskjellige metodene du kan bruke til å lage skiver. Nå er det på tide å se hvilken metode som er best når det gjelder å eksportere våre dyrebare, små ikoner.
La oss starte med den første metoden. Som du husker, er dette avhengig av å bruke ett eller flere objekter for å lage skivene.
La oss si at vi har samme lille ikonpakke som før, bare denne gangen vil vi skille og eksportere alle komponentene, ikke bare en.
Vel, normalt ville du bare velge alle eiendelene ved å trykke Kontroll-A og deretter gå til Objekt> Slice> Make.
Så ville du gå til Fil> Lagre for web, velge PNG som ønsket format,sett din Eksport alternativ til Utvalgte skiver og til slutt slo Lagre.
Saken er at i begynnelsen kan du tro at alt gikk bra, men så snart du ser på ikonene dine (mer nøyaktig deres størrelse), kan du oppleve at noe gikk galt.
Det er fordi selv om du brukte en skikk Nett for å størrelsen på ikonene dine, kan eiendelene ikke gå helt i form av bredde og høyde, og siden du brukte ikonene som de valgte objektene og ikke de faktiske nettene, bør det ikke være en overraskelse.
Trikset er å bruke de faktiske gridene i stedet for ikonene, og lage skiver rundt dem. På denne måten vil dine eksporterte ikoner være akkurat som du vil ha dem.
Nå, for eksempel, bruker jeg en 48 x 48 px rutenett, men jeg har en all-around 2 px polstring lagt til. For ikke å nevne at ikonene mine er litt kortere, har bare en høyde 40 px. Det betyr at hvis jeg skulle lage skivene ved hjelp av ikonene selv og deretter eksportere dem, ville mine ikoner være litt mindre (44 x 40 px), siden Illustrator brukte Bredde og Høyde av mine eiendeler i stedet for min rister (48 x 48 px).
Når det er sagt, bør du alltid ha et andre lag med bare nettene dine og bruke dem til å lage skiver for å kunne eksportere dine eiendeler riktig..
Nå er den kule tingen det når du lager skiver og går til Fil> Lagre for web, Illustrator gir deg muligheten til å velge eller fjerne hvilke ikoner du eksporterer manuelt. Så for eksempel hvis jeg bestemmer at jeg ikke vil velge det siste ikonet, kan jeg bare gå over det og venstre-klikk en gang mens du holder nede Skifte, og dermed fjerne den fra min endelige eksport.
Som standard hvis du velger alle ikonene dine, og deretter går det om å lagre dem, vil Illustrator beholde alle skivene som er valgt. Du kan se om et stykke er valgt ved å se på avgrensningen. Hvis linjen rundt aktiva er rød (alt annet enn det første ikonet), blir objektet ditt lagt til det endelige valget. hvis det er blått og litt bleknet så er det ikke (det første ikonet).
Du kan fjerne markeringen av deler av ikonpakken ved å holde nede Skifte nøkkel og venstre klikke på dem. Du lurer kanskje på hvorfor vi bruker Skifte nøkkel. Det er fordi siden Illustrator allerede har alle dem valgt, må du holde nøkkelen trykket for å holde resten av eiendelene valgt, ellers vil du ende opp med bare ett ikon aktivt.
Nå for å være ærlig ser jeg ikke hvorfor du ville, siden du en gang er ferdig med pakken, er du ganske sikker på at du vil eksportere alle eiendelene, ikke bare noen, men jeg syntes det var fint å peke på det ute.
Så snart du treffer Lagre knappen, vil Illustrator spørre deg om et sted å lagre filene dine, og gir deg muligheten til å navngi dine eiendeler. Denne delen er litt vanskelig siden navnet du tildeler vil bli overført til alle ikonene, som er det vi ønsket, men eiendelene selv vil bære nummeret på sine skiver.
Du kan bare eksportere filene og deretter gi nytt navn til dem, eller du kan gjøre det direkte inne i Lagre for web popup ved å dobbeltklikke på hvert ikonvalg og gi det ønsket navn.
Uansett hvilken metode du velger, må du fortsatt ta deg tid og gå gjennom dem alle for å kunne nevne dem riktig.
Nå, for å være ærlig, finner jeg dette alternativet å være det beste ut av de tre siden det er super-rask, og det eksporterer bare ikonene dine, så ingen tomme Artboard-skiver som må slettes etterpå.
Som med den forrige metoden, er det ganske grei. Først lager du skiver ved hjelp av støttelinjene (Objekt> Slice> Lag fra guider), og så går du til Fil> Lagre for web.
Her er det et par ting du bør være oppmerksom på. Hvis du forlater Eksport alternativet satt til Utvalgte skiver Som vi gjorde for den første metoden, vil Illustrator eksportere ikonene dine, men det vil også eksportere de tomme skivene mellom dem. Nå, hvis du ikke har et stort sett, kan du bare avvelge disse stykkene, men hvis du har noe større, kan det vise seg å være en veldig smertefull prosess.
På den annen side kan du bare eksportere ikonene og deretter slette uønskede skiver, men igjen kan det ta deg litt tid.
Nå, hvis du tar i betraktning at du må manuelt legge til støttelinjene til hver side av ikonene dine, er det ganske tydelig at den første metoden er mer egnet, siden det er problemfri og mye raskere.
Hvis du trodde at veiledningsmetoden var langsom og smertefull, så vil den sette den siste neglen i kisten din, siden det vil ta deg tid til å fullføre.
Nå vet du sikkert at du må lage skivene manuelt for hver enkelt av dine ikoner, og deretter gå direkte til Fil> Lagre for web.
Her vil du bli fristet til å bruke Utvalgte skiver Eksporter alternativ, men i forhold til de to andre metodene, vil dette bare eksportere det siste stykket fra Artboard. Det betyr at du må bruke Alle skiver alternativ, som selvfølgelig vil eksportere alle skiver om de er fylt med ikoner eller bare tomt mellomrom.
Til slutt må du gå gjennom hele mappen og slette alle unødvendige ikoner og endre navn på dem etter behov.
Så anbefaler jeg denne metoden i det hele tatt? Nei. Så hvorfor nevnte jeg det selv? Vel, jeg liker å være så eksplisitt som mulig når du snakker om slike verktøy og metoder.
Så, på dette punkt håper jeg virkelig at du vet hva skiver er, og enda viktigere hvordan de er laget, slik at du kan dra nytte av dette verktøyet og gjøre prosessen med å eksportere ikonene dine raskt og smertefritt.
Nå pleier jeg vanligvis å la beslutningen komme til deg, men denne gangen må jeg være grov og fortell deg å gå med den første metoden, objektet (e), siden det er ganske tydelig at det er den eneste bra jobbet.
Når det er sagt, vil jeg takke deg for din tid og oppmerksomhet, og som alltid snakker jeg til deg neste gang.
Accentsconagua