Hvis der er et aspekt ved at arbejde med Illustrator, at jeg virkelig ikke nyder det, er det at konvertere line art til svg billeder til mobil eller internettet. Brug menuen Eksporter> Eksporter som, og for at være ærlig ærlig, var funktionen Gem til web - Eksporter> Gem til web - ikke ligefrem nem at bruge.
Konvertering af en tegning til .svg-formatet åbnet en temmelig skræmmende dialogboks, der for folk, der var ny i denne arbejdsgang, gav et forvirrende udvalg af muligheder for ikke at nævne, at der var en række .svg-formater, og kun en af dem var den rette format. Når du var vant til denne arbejdsgang, var det ikke noget, men lærekurven var stejl.
Det er alle ændret med den nye Export For Screens-funktion - Eksporter> Eksport til skærmbilleder - og Asset Export-panelet, der blev introduceret til Illustrator CC 2015 i juni 2016. I denne "Hvordan skal" skal jeg vise dig, hvordan du bruger begge funktioner. Lad os komme igang.
01 af 04
Sådan får du adgang til eksport til skærmbilleder i Adobe Illustrator CC 2015
Jeg har været Illustrator-bruger siden Illustrator 88 Jeg tror, du kan forstå min modvilje mod at overveje Illustrator som et seriøst designværktøj til web- og mobilgrænseflader og -projekter.
Da kunstplader blev introduceret i CS4-versionen 2008, syntes jeg det var en interessant tilføjelse til applikationen. Da jeg først så den nuudviste Save For Web-funktion i Illustrator igen, fandt jeg det interessant, men jeg fandt den samme funktion i Adobe Fireworks var mere tilpasset webgrafik end Illustrator.
Med fremkomsten af en mobil-første tilgang til design og den stigende afhængighed af SVG-billeder til mobile projekter, var Illustrator mit "gå til" værktøj til SVG og blev et vigtigt stop i UI Design workflow.
Men hvis jeg havde brug for at eksportere aktiver til mobil, er Sketch 3 og Photoshop CC 2015 mine valgfrie værktøjer. Illustrator kom ind på listen i juni 2016 med den rigtig nifty Export for Screens menu.
I ovenstående eksempel har jeg to skærme beregnet til en iPhone, og de er på separate Artboards med navnet "Home" og "Places". For at udskrive dem valgte jeg File> Export> Export for Screens. Dialogboksen Eksporter til skærme åbnes.
02 af 04Sådan bruges dialogboksen Eksporter til skærmbilleder
Når dialogboksen vises, skal du klikke på hvert kunstplade, der skal vælges. Det vil derefter udøve et afkrydsningsfelt. Du kan også dobbeltklikke på et genstands navn for at vælge det og ændre det. Dette er en god ting at vide, om dine tavler hedder "Artboard 1" og "Artboard 2", som helt ærligt ikke fortæller dig noget.
Du har tre valg i feltet Vælg:
- Alle: Dette valg eksporterer hvert kunstplade i dokumentet som en separat fil.
- Rækkevidde: Indtast en række genstande, der skal eksporteres. Dette er især nyttigt til projekter med et par dusin genstande.
- Fuldt dokument: Vælg dette, og alle genstandene bliver fladt i et enkelt dokument.
Eksporter til område giver dig mulighed for at vælge destinationsmappen for udgangen. Standardmappen bliver den aktuelle placering af Illustrator-dokumentet.
Formater er hvor "magien sker. Du vil bemærke, at der er tre ikoner-iOS. Android og et gear. De to første er selvforklarende. Gear-ikonet åbner formatindstillingerne, som giver dig mulighed for at kontrollere, hvordan hvert af filformaterne på listen bliver optimeret. Disse indstillinger er "formatspecifikke", og når du har lavet dine ændringer, skal du klikke på knappen Gem indstillinger, og disse ændringer vil blive anvendt på de formater, der skal udføres.
Når du vælger iOS eller Android, ændres listen til at omfatte alle de tilgængelige opløsninger på den platform. IOS-noteringen viser skaleringsfaktorerne for nethinden, og Android-valget vil have skalaer fra .75x til 4x, der rummer næsten alle Android-enheder derude.
Hvis der er et format, der viser, at du vil fjerne, skal du klikke på "x". Hvis der er en, du vil tilføje, skal du klikke på knappen + Tilføj skala.
Når du er færdig, klik på knappen Eksporter kunstplade, og en statuslinje viser dig, hvornår processen er færdig.
03 af 04Brug af eksporten til skærmbilleder fra Adobe Illustrator CC 2015.
Når du tjekker resultaterne af Export for Screens, vil du opdage, at Illustrator har output en flad udgave af hver skærm. På overfladen kan dette synes at være lidt svagt, især hvis du forventede Illustrator at have eksporteret alle bit og stykker som billeder.
Hvis du træder tilbage og tænker på det et øjeblik, er det faktisk præcis det, du har brug for, fordi du kan bruge denne udgang i en prototypeprogram som Adobe Experience Design, Principleformac, Atomic.io, UXPin eller andre prototypeprogrammer
I dette eksempel bruger jeg Adobe Experience Design (XD) til at skabe et enkelt klik-thru. Det første skridt i processen var at vælge den iPhone 6-størrelse, der matchede dimensionerne af Illustrator Interface
Når grænsefladen blev åbnet, valgte jeg værktøjet Artboard og klickede en gang på tavlen for at tilføje en anden tavle. Jeg kaldte dem derefter "Hjem" og "Steder", valgte hvert kunstplade og importerede png-billedet fra Illustrator til tavlen.
For at oprette "hotspots" for klik-thru, trak jeg et rektangel over knappen Udforsk på startskærmen og sætte dens udfyldnings- og grænseværdier til ingen ved at fravælge disse egenskaber i panelet Egenskaber. Jeg gjorde det samme med knappen Tilbage på siden Steder.
For at tilføje interaktiviteten valgte jeg Prototype-tilstand og derefter klikket på "hotspot". Jeg slæbte pilen - kaldet en wire - til siden Places, og indstil overgangsmålet på Stederne, bevægelsen for at skubbe til venstre, lettet for at lette ud og varigheden af overgangen til .6 sekunder.
Jeg gentog dette trin med hotspot på siden Places. Den eneste forskel var overgangen blev sat til push højre. Da jeg klikede på knappen Afspil, testede jeg min prototype.
04 af 04Sådan bruges Eksportpanelet i Adobe Illustrator CC 2015
Sammen med menuen Gem til skærme tilføjede Adobe også et nyt panel - Asset Export - der fjernede et stort smertepunkt i UI Design-workflow.
Smertepunktet var ikoner. Illustrator er en stor vektor tegning ansøgning men at output, lad os sige 10 ikoner, på en side med 40 eller 50 af dem kræves hver enkelt er gemt som et SVG billede. Dette krævede uundgåeligt mere tid end normalt takket være successive ture til SVG-panelet. Dette smertepunkt er nu en ting fra fortiden.
Dette nye panel findes i vinduet> Asset Export. Når panelet åbnes, skal du vælge det aktiv, du vil konvertere til SVG eller andet format, og trække ind i panelet. Når du slipper musen, tilføjes en miniature af aktivet til panelet. Navngiv aktivet. Fortsæt med at trække objekter i panelet, indtil du er færdig.
Vælg hvert element I feltet Eksporter indstillinger, eller vælg dem alle ved at holde Skift-tasten nede og klikke på hver enkelt. Vælg dit format - i dette eksempel valgte jeg SVG- og klik på knappen Eksporter. De valgte emner vil blive udført som SVG-filer til samme sted som Illustrator-filen.
Hvor hele processen bliver jævnere, er du ikke nødt til at bruge panelet Asset Export. Hvis du klikker på knappen Gem til skærme nederst i panelet, åbnes dialogboksen.
Omvendt kan du klikke på fanen Aktiver i panelet Gem til skærm for at få adgang til panelet Asset Export. Hvis du f.eks. Har et brugerdefineret ikon på en tavle, kan du åbne Eksportpanelet Asset i dialogboksen Gem til skærm og trække det pågældende element i Eksportpanelet Asset.
