Hvis det er ett aspekt ved å jobbe med Illustrator, som jeg virkelig ikke liker, er det å konvertere linjekunst til svg-bilder for mobil eller på nettet. Bruk Eksporter> Eksporter som-menyen, og for å være brutalt ærlig, var Save For Web-funksjonen - Export> Save For Web - ikke akkurat enkel å bruke.
Konvertere en tegning til .svg-formatet åpnet en ganske skremmende dialogboks som for folk som var ny i denne arbeidsflyten, tilbød et forvirrende utvalg av muligheter for ikke å nevne at det var en rekke .svg-formater, og bare en av dem var den riktige format. Når du ble vant til denne arbeidsflyten, var det ikke så farlig, men læringskurven var bratt.
Det har alt blitt endret med den nye Export For Screens-funksjonen - Eksporter> Eksporter for skjermer - og Asset Export-panelet som ble introdusert til Illustrator CC 2015 i juni 2016. I denne "Hvordan skal" skal jeg vise deg hvordan du bruker begge egenskaper. La oss komme i gang.
01 av 04
Slik får du tilgang til eksport for skjermer i Adobe Illustrator CC 2015
Etter å ha vært en Illustrator-bruker siden Illustrator 88, tror jeg at du kan forstå min motvilje mot å vurdere Illustrator som et seriøst designverktøy for nett- og mobilgrensesnitt og prosjekter.
Når kunstgallerier ble introdusert i CS4 versjonen 2008, trodde jeg det var et interessant tillegg til applikasjonen. Da jeg først så den gjengitte Save For Web-funksjonen i Illustrator, fant jeg det igjen interessant, men jeg fant den samme funksjonen i Adobe Fireworks var mer justert med nettgrafikk enn Illustrator.
Med fremkomsten av en mobil første tilnærming til design og den økende avhengigheten av SVG-bilder for mobile prosjekter, var Illustrator mitt "gå til" -verktøy for SVG og ble et viktig stopp i UI Design-arbeidsflyten.
Likevel, hvis jeg trengte å eksportere eiendeler for mobil, er Sketch 3 og Photoshop CC 2015 mine valgfrie valg. Illustrator kom inn i listen i juni 2016 med den virkelig ferske Eksporter for Skjerm-menyen.
I eksemplet ovenfor har jeg to skjermer bestemt for en iPhone, og de er på separate Artboards kalt "Hjem" og "Steder". For å sende ut dem valgte jeg File> Export> Export for Screens. Dialogboksen Eksport for skjermer åpnes.
02 av 04Slik bruker du dialogboksen Eksporter for skjermer
Når dialogboksen vises, klikker du på hvert kunstplate som skal velges. Det vil da utøve et merke. Du kan også dobbeltklikke på et artikkelnavn for å velge det og endre det. Dette er en god ting å vite om dine kunstbrett er kalt "Artboard 1" og "Artboard 2", som helt ærlig, forteller deg ingenting.
Du har tre valg i feltet Velg:
- Alle: Dette valget eksporterer hvert kunstplate i dokumentet som en egen fil.
- Område: Skriv inn et utvalg av kunstgallerier som skal eksporteres. Dette er spesielt nyttig for prosjekter med et par dusin artboards.
- Fullt dokument: Velg dette og alle teglbrettene blir flatt i et enkelt dokument.
Eksporter til område lar deg velge destinasjonsmappe for utgangen. Standardmappen blir den nåværende plasseringen av Illustrator-dokumentet.
Formater er hvor "magien skjer. Du vil legge merke til at det er tre ikoner-iOS. Android og et utstyr. De to første er selvforklarende. Gear-ikonet åpner formatinnstillingene som lar deg kontrollere hvordan hvert filformat i listen blir optimalisert. Disse innstillingene er "formatspesifikke", og når du har gjort endringene, klikker du på Lagre innstillinger-knappen, og disse endringene blir brukt på formatene som skal sendes ut.
Når du velger iOS eller Android, endres listen for å inkludere alle de tilgjengelige resolusjonene på plattformen. IOS-oppføringen vil vise skaleringsfaktorene for Retina-skjermen, og Android-valget vil ha skalaer som spenner fra .75x til 4x, som plasserer nesten alle Android-enheter der ute.
Hvis det er et format som viser at du vil fjerne, klikker du på "x". Hvis det er en du vil legge til, klikker du på + Legg til skala-knappen.
Når du er ferdig, klikker du på Eksporter artikkeltasten og en fremdriftslinje vil vise deg når prosessen er ferdig.
03 av 04Bruke The Export for Screens Filer fra Adobe Illustrator CC 2015.
Når du sjekker ut resultatene av Export for Screens, vil du oppdage at Illustrator har utdata en flat versjon av hver skjerm. På overflaten kan dette virke som om det er litt svakt, spesielt hvis du forventer at Illustrator har eksportert alle bitene og brikkene som bilder.
Hvis du går tilbake og tenker på det for et øyeblikk, er dette faktisk akkurat det du trenger fordi du kan bruke denne utgangen i et prototypeprogram som Adobe Experience Design, Principleformac, Atomic.io, UXPin eller andre prototypeprogrammer
I dette eksemplet bruker jeg Adobe Experience Design (XD) for å lage en enkel klikk-thru. Det første trinnet i prosessen var å velge iPhone 6-størrelsen som matchet dimensjonene til Illustrator-grensesnittet
Når grensesnittet åpnet, valgte jeg Artboard-verktøyet og klikket en gang på tavlen for å legge til et annet tavla. Jeg deretter kalt dem "Hjem" og "Steder", valgt hver kunstplate og importerte png-bildet fra Illustrator til tavla.
For å lage "hotspots" for klikk-gjennom, trakk jeg et rektangel over Utforsk-knappen på startskjermbildet og angir fyllings- og grenseverdiene til ingen ved å fjerne markeringen av disse egenskapene i Egenskaper-panelet. Jeg gjorde det samme med Back-knappen på Steder-siden.
For å legge til interaktiviteten valgte jeg Prototype-modus og klikket deretter på "hotspot". Jeg trakk pilen - kalt en ledning - til Steder-siden og angir overgangsmålet på Steder, bevegelsen for å skyve til venstre, lettelsen for å lette ut og varigheten av overgangen til .6 sekunder.
Jeg gjentok dette trinnet med hotspot på Steder-siden. Den eneste forskjellen var overgangen ble satt til Push Right. Da jeg klikket på Play-knappen, testet jeg prototypen min.
04 av 04Slik bruker du eksportpanelet i Adobe Illustrator CC 2015
Sammen med Save for Screens menyen lagde Adobe også et nytt panel - Asset Export - som fjernet et stort smertepunkt i UI Design-arbeidsflyten.
Smertepunktet var ikoner. Illustrator er et flott vektor tegneapplikasjon, men å skrive ut, la oss si 10 ikoner, på en side med 40 eller 50 av dem som kreves at hver enkelt er lagret som et SVG-bilde. Dette krever uunngåelig mer tid enn vanlig takket være påfølgende turer til SVG-panelet. Dette smertepunktet er nå en ting fra fortiden.
Dette nye panelet finner du på Vindu> Asset Export. Når panelet åpnes, velger du aktiva du vil konvertere til SVG eller annet format, og drar inn i panelet. Når du slipper musen, legges en miniatyrbilde av aktiva til panelet. Gi navnet på eiendelen. Fortsett å dra objekter inn i panelet til du er ferdig.
Velg hvert element i Eksporter innstillingsområdet, eller velg dem alle ved å holde nede Skift-tasten og klikke på hver enkelt. Velg formatet ditt - i dette eksemplet valgte jeg SVG- og klikk på Eksporter-knappen. De valgte elementene blir sendt som SVG-filer til samme sted som Illustrator-filen.
Hvor denne hele prosessen blir jevnere, trenger du ikke å bruke Asset Export-panelet. Hvis du klikker på Lagre for skjermer nederst på panelet åpnes dialogboksen.
Omvendt kan du klikke på fanen Aktiver i panelet Lagre for skjermer for å få tilgang til Eksportpanelet Asset. Hvis du for eksempel har et egendefinert ikon på en tavle, kan du åpne Eksportpanelet for Asset i dialogboksen Lagre for skjerm og dra det elementet til Eksporter panelet Asset.
