Share
Gjennom årene har jeg utviklet noen metoder og triks for å forbedre produktiviteten og arbeidskonsistensen. Denne opplæringen vil dekke hvordan du kan omfavne modulær tenking i arbeidsflyten din, når du bygger fleksible og lette brukergrensesnitt med Adobe Illustrator CS5 (eller over) sammen med noen gratis ressurser. La oss komme i gang.
Gridcalculator.dk tilbyr alternativene du trenger for å enkelt lage et fleksibelt rutenett. Dette kan spare deg tid på eksperimentering og beregninger.
Gitter skal skilles fra objekter, slik at du kan skifte synlighet uavhengig og bruke dem igjen mens du designer flere sider eller skjermer.
Plasser støttelinjene dine som de øverste lagene i dokumentet ditt, fremfor alt innholdet ditt.
Hvis rutenett har flere kolonner, er det best å skille dem i uavhengige lag eller det kan bli for overfylt. Noen sider kan trenge fire kolonner. Andre kan kanskje bare ha to. Dette gjør det mulig å administrere rutenettets synlighet i henhold til dine behov.
Å bruke en fullt skalerbar nettleser vil være nyttig for å eksportere bilder med høy oppløsning og å bygge responsive design.
Plasser nettleseren din under alle innholdslagene dine.
Merk: I vedleggene til denne opplæringen kan du laste ned mitt responsive Illustrator-oppsett som inneholder vektorversjoner av både Chrome-skrivebord og Safari-mobil.
Tilpasse arbeidsområder (Vindu> Arbeidsområde) for å passe dine personlige eller prosjektbehov er avgjørende for arbeidsflyten din. Jeg vet hvilke verktøy jeg bruker oftest, så å lukke / åpne paneler, og flytte vinduer rundt, er kjedelig og uproduktiv. Jeg jobber for tiden med tre arbeidsområder, avhengig av skjermstørrelse:
Bruke Workspaces er veldig pent: Jeg kan enkelt gå tilbake til grensesnittet til standardinnstillingene mine ved å klikke Reset (navnet på Artboard).
Når du oppretter et nytt dokument, forlater du Juster nye objekter til pikselruten ukontrollert. Ja, ukontrollert.
Hvis du kontrollerer dette alternativet, vil enkelte UI-elementer, som skissert (utvidet) tekst, bli forvrengt, og du vil ikke være i stand til å trekke noen former fritt når poengene dine stadig knuser til pikselrutenettet.
Du bør velge hvilke objekter som skal pikseljusteres ved å velge Juster til Pixel Grid alternativ fra Forvandle panel.
Merk: Når du søker Juster til Pixel Grid til et objekt, er det ikke mulig å returnere det valgte objektet til den opprinnelige "ujusterte" tilstanden. Hvis du fjerner merket for denne boksen, lagres det ikke.
Når du zoomer bildet ditt over 100%, kan du faktisk se pikslene som om du jobber med et bitmap-bilde. Aktiver det ved å gå til Vis> Forhåndsvisning av piksel. Dette vil la deg få øye på hvilke piksler som kan forårsake fuzzy kanter, slik at du kan fikse dem på fluen.
Merk: Pikselruten er følsom for linjalens opprinnelse (0,0). Hvis du flytter opprinnelsen til linjalen, endres hvordan Illustrator "rasteriserer" kunstverket. Kontroller også at objektet X og Y-koordinatene er avrundet.
Illustrator har noen grunnleggende matematisk funksjonalitet for å justere objekter innenfor paneler og dialoger. Dette er nyttig når du vil legge til (+), trekke (-), dele (/) eller multiplisere (*) verdier. Disse operasjonene kan brukes i objekter, streker, gjennomsiktighet og i mange andre ting.
Dessverre kan du bare gjøre en operasjon om gangen. Noe som "260/3 * 2" er ikke mulig.
Vanligvis brukes samme brukergrensesnittkomponent om og om igjen, bare endring av størrelse og farge. Tenk modulær, planlegge fram og bygge ikke-destruktive komponenter som lett kan gjenvinnes. Unngå å kontrollere hver skjerm for å se om du har glemt å oppdatere ett element. Symboler kan være veldig kraftige når det er bra, men ute.
Når du endrer det opprinnelige symbolet, blir disse endringene umiddelbart gjengitt i alle tilfeller som finnes i dokumentet. Dette er spesielt nyttig for tilbakevendende regioner, for eksempel knapper, bunntekster, paginasjonselementer, navigering, bakgrunner, osv.
Du kan til og med bruke symboler inne i symboler ("combos"). Dette sparer deg tid og sikrer konsistens i hele brukergrensesnittet.
9-skala-skalaen er et avansert symbols alternativ som lar deg definere hvilke områder av et symbol som ikke strekker seg mens du endrer størrelsen.
Hvis du endrer bredden på et symbol uten å bruke denne funksjonen, får du deformerte former. Dette kan være spesielt nyttig for knapper når du bare trenger et segment av et symbol som skal strekkes.
Merk: Du kan når som helst aktivere 9-skalering i et symbol. Men for bedre resultater, sørg for å sjekke alternativet 9-skalering når du lager symbolet for første gang.
Utseendeattributter påvirker ikke den underliggende strukturen til et objekt eller en gruppe objekter. Det er ganske nyttig å bruke effekter som avrundede hjørner eller stabler av fargefyll som kan endres eller fjernes hele tiden.
Det er en måte å lage knapper som tilpasser seg tekstlengden. Dette er hvordan:
Spill rundt med det. Du kan lagre det som en Grafisk stil for fremtidig bruk.
Merk: Dette anbefales kun for wireframing siden pixeljustering er vanskelig med denne metoden.
Dette er en av de mest underrated funksjoner, men det er veldig kraftig. Hver gang du endrer en global farge, oppdateres alle objekter som bruker den fargeprøven. Du kan øyeblikkelig finjustere dusinvis av objekter.
Fargegrupper er en stor tidsbesparende når du jobber med store farger eller flere merker på en gang. Å gi dem klare navn, gjør det enkelt for folk å søke og jobbe fra samme fil.
Hvis du er villig til å eksperimentere, kan du laste ned paletter og farger fra kilder som Kuler og Colourlovers. Også lek med Recolor Artwork hjul for å prøve forskjellige farge temaer: Rediger> Rediger farger> Recolor Artwork.
Tegnstiler kan brukes til hvilken som helst mengde tekst: fra store biter til enkle ord. De er mer fleksible og triumf stykke stiler. Siden vi ikke gjør utskriftsarbeid, bruker du bare tegnstiler for å sikre at typografien din er konsistent.
Du bør bestille din Character Styles-liste etter størrelse: fra større til mindre tekst, etter layoutordre: fra topp til bunn, eller alfabetisk. Dette vil hjelpe deg med å opprettholde et bedre hierarki og enkelt søke gjennom listen din.
Finjuster og gjenbruk stilene dine så mye som mulig for å unngå å lage for mange unntak. Dette vil forenkle utviklingen og forbedre konsistensen.
Enhver tekst uten kontekst eller relevans for emnet er verdiløs. Ikke abstrakt deg selv fra den virkelige opplevelsen. "Lorem ipsum" gir deg en form, men det gir deg ikke mening. Skrive din egen kopi for overskrifter eller navigasjon bidrar til å forklare deres bruk og den verdifulle informasjonen de kan gi. Hvis nettstedet ditt eller programmet krever datainngang, skriv inn virkelige og relevante ord. Skriv inn et ekte navn eller en by.
Når du bruker ekte tekst, oppdager du problemer som ellers kan gå ubemerket: kolonner er for store / smale, feltene må være større / mindre, noen ting fungerer på ett språk, men fungerer ikke på andre, osv..
Å bruke representative data er et godt oppslag for hva sluttproduktet skal være.
Med Illustrator er du ikke begrenset til en bestemt oppløsning. I et enkelt dokument, og ved hjelp av Artboards, kan du simulere hvordan et brukergrensesnitt skal svare på forskjellige skjermoppløsninger og redigere dem samtidig ved hjelp av globale farger, symboler og tegnstiler. Selv med dusin forskjellige skjermbilder, vil filen forbli liten og enkel å administrere.
Navngi hver Artboard i henhold til enhet / skjermstørrelse. Dette vil automatisk nevne disse skjermene ved lagring. Jeg vil dele noen lagrings- og navngivingstips videre i opplæringen.
Merk: I vedleggene til denne opplæringen kan du laste ned det responsive illustratoroppsettet sett ovenfor.
Dette lar deg se hvordan en enkelt side ser ut i hver skjermstørrelse og eksporterer alle lag (sider) fra et velg Artboard (skjermstørrelse) uavhengig.
Opprydding er veldig viktig for å holde filene dine i god form og øke ytelsen. For å oppnå det, bruk Illustrators innebygde alternativer.
Windows> Handlinger> Slett ubrukte panelelementer
Denne handlingen vil automatisk gå gjennom hvert panel, velge innhold som ikke er i bruk, og deretter slette dem om noen sekunder.
Denne standardhandlingen omfatter ikke å rydde opp ubrukte tegnstiler. Du kan legge til det trinnet eller du kan manuelt Velg Alle Ubrukte, så søppel dem.
Hvis du vil bli kvitt bortfall, uberørte objekter og tomme tekstbaner, så er det slik:
Når du bruker lag, skjul alle grupper eller objekt i Lagpanelalternativer. Slik ser det ut:
Gi navn på hvert lag med et sidenavn. Gi tall til hvert lags navn for å holde dem bestilt når de eksporteres. Bruke caps og ikke-avstandsnavn gjør det noen ganger lett å lese.
De 59 lagene / sidene vekt kun 2,5mb (ingen bilder innebygd), noe som gir høy ytelse og svært raske lagringstider.
For å inkludere stilguider for utvikling i filene dine, bør du opprette et "underlag" knyttet til hver en side / et lag. Slik gjør du:
Accentsconagua
STILGUIDE Disse veiledningene vil holde deg på innholdet ditt, og siden de er plassert i et "underlag", kan du enkelt administrere synligheten.
Når du plasserer bitmap-bilder, ikke legg inn dem i filen din. Velge link i stedet.
Dette vil redusere filstørrelsen, forbedre illustratorytelsen og gi muligheten til å redigere bildene separat. Illustrator oppdager automatisk når en fil er oppdatert.
Hvis du følger alle trinnene ovenfor, bør filene dine være lette. Selv om, hvis du sjekker Opprett PDF-kompatibel fil mens du sparer, vil dette oppsvare filstørrelsen og øke lagringstiden. Siden vi bare arbeider med skjermgrafikk med flere lag og tavle, er det ingen reell fordel når du forlater dette sjekket.
For bedre kontroll over eksportalternativene, last ned dette Multi Export-skriptet. Å bruke det er ganske greit, men ta en titt på dokumentasjonen slik at du kan dra full nytte av det.
Enhetsstørrelse / oppløsning fragmentering gjør at eksporterende mobile eiendeler krever mye tid. Vel, skript kan også hjelpe med det. Last ned denne Illustrator-skriptene for mobildesign.
Mobile ressurser krever spesifikke filnavn, avhengig av operativsystemet. For å følge deres navngivningskonvensjoner, er det lettere å opprette separerte Illustrator-filer for hvert OS. Hvis noen eiendeler er felles for plattformene du jobber med, opprett en fil som heter "vanlig" eller hva som passer deg.
I web- og mobilmiljøer er ytelse nøkkel og hver byte teller. Illustrator mangler PNG / JPG optimalisering, så bruk ImageOptim (Mac OS X) etter at du har eksportert innholdet ditt.
Vi er på vei mot en lydhør og fleksibel web, hvor våre brukergrensesnitt trenger å være immun mot pixeldensitet og konsekvent i mange forskjellige størrelser. Uendelig skalerbarhet er uvurderlig, og vektorer er en viktig del av oppløsning uavhengighet.
Illustrators modulære arbeidsflyt står opp mot skala og tid, og det er et solid alternativ fra et produktivitets- og fleksibilitetssynspunkt. Jeg stikker med den. Hva med deg?
