Om det finns en aspekt av att arbeta med Illustrator som jag verkligen inte tycker om är det att konvertera linjekonst till svg bilder för mobil eller på webben. Med menyn Exportera> Exportera som, och för att vara brutalt ärlig, var funktionen Spara för webb - Exportera> Spara för webben - inte exakt lätt att använda.
Omvandling av en ritning till .svg-formatet öppnade en ganska skrämmande dialogruta som för personer som var ny i detta arbetsflöde erbjöd ett förvirrande utbud av alternativ för att inte tala om att det fanns ett antal .svg-format och bara en av dem var den rätta formatera. När du var van vid detta arbetsflöde var det inte så mycket, men inlärningskurvan var brant.
Det har ändrats med den nya funktionen Exportera för skärmar - Exportera> Exportera till skärmar - och Exportera expansionspanelen som introducerades till Illustrator CC 2015 i juni 2016. I denna "Hur ska" ska jag visa dig hur du ska använda båda funktioner. Låt oss börja.
01 av 04
Så här får du tillgång till export för skärmar i Adobe Illustrator CC 2015
Jag har varit en Illustrator-användare sedan Illustrator 88 Jag tror att du kan förstå min motvilja att överväga Illustrator som ett seriöst designverktyg för webb- och mobila gränssnitt och projekt.
När skivor introducerades i CS4-versionen 2008, tyckte jag att det var ett intressant tillägg till applikationen. När jag först såg den nu borttagna Save For Web-funktionen i Illustrator, fann jag det intressant, men jag hittade samma funktion i Adobe Fireworks var mer anpassad till webbgrafik än Illustrator.
Med tillkomsten av ett mobilt första tillvägagångssätt för design och det ökande beroende av SVG-bilder för mobila projekt, var Illustrator mitt "gå till" -verktyg för SVG och blev ett viktigt stopp i UI Design-arbetsflödet.
Fortfarande, om jag behövde exportera tillgångar för mobil, är Sketch 3 och Photoshop CC 2015 mina valfria verktyg. Illustratorn kom in i listan i juni 2016 med den väldigt fina Export-menyn.
I det ovanstående exemplet har jag två skärmar som är avsedda för en iPhone och de finns på separata Artboards med namnet "Hem" och "Platser". För att exportera dem, väljer jag Arkiv> Exportera> Exportera till skärmar. Dialogrutan Exportera till skärmar öppnas.
02 av 04Så här använder du dialogrutan Exportera till skärmar
När dialogrutan visas, klicka på varje tavla som ska väljas. Det kommer då att sporta en kryssmarkering. Du kan också dubbelklicka på ett tavla namn för att markera det och ändra det. Det här är en bra sak att veta om dina tavelplattor heter "Artboard 1" och "Artboard 2" som helt uppenbart inte säger något.
Du har tre val i området Välj:
- Allt: Detta val exporterar varje tavla i dokumentet som en separat fil.
- Räckvidd: Ange en rad tavlor som ska exporteras. Detta är särskilt användbart för projekt med några tiotal tavlor.
- Fullständigt dokument: Markera det här och alla tavlor kommer att bli platta i ett enda dokument.
I exportområdet kan du välja destinationsmapp för utmatningen. Standardmappen blir den aktuella platsen för Illustrator-dokumentet.
Formater är där "magiken händer. Du kommer märka att det finns tre ikoner-iOS. Android och ett redskap. De två första är självförklarande. Gear-ikonen öppnar Formatinställningarna som låter dig styra hur varje filformat i listan optimeras. Dessa inställningar är "formatspecifika" och när du har gjort dina ändringar klickar du på knappen Spara inställningar och de ändringar som ska tillämpas på de format som ska matas ut.
När du väl har valt iOS eller Android ändras listan till att inkludera alla tillgängliga upplösningar på den plattformen. IOS-noteringen visar skalningsfaktorerna för Retina-skärmen och Android-valet kommer att ha skalor som sträcker sig från .75x till 4x, vilket rymmer nästan alla Android-enheter där ute.
Om det finns ett format som visar att du vill ta bort, klickar du på "x". Om det finns en du vill lägga till klickar du på knappen + Lägg till skala.
När du är klar klickar du på knappen Exportera kartong och en statusfält visar dig när processen är klar.
03 av 04Använda Exportera för Skärmar Filer från Adobe Illustrator CC 2015.
När du kolla in resultaten av Exportera till skärmar kommer du att upptäcka att Illustrator har en utplattad version av varje skärm. På ytan kan det tyckas vara lite svagt, särskilt om du förväntade dig att Illustrator skulle ha exporterat alla bitar och bitar som bilder.
Om du går tillbaka och tänker på det för ett ögonblick, är det faktiskt exakt vad du behöver eftersom du kan använda den här utmatningen i en prototypapplikation, till exempel Adobe Experience Design, Principleformac, Atomic.io, UXPin eller annan prototypapplikation
I det här exemplet använder jag Adobe Experience Design (XD) för att skapa en enkel klick-igenom. Det första steget i processen var att välja iPhone 6-storleken som matchade dimensionerna för Illustrator-gränssnittet
När gränssnittet öppnades, valda jag Artboard-verktyget och klickade en gång på pasteboard för att lägga till en annan tavla. Sedan kallade jag dem "Hem" och "Platser", valda varje tavla och importerade png-bilden från Illustrator till tavlan.
För att skapa "hotspots" för klick-thru, ritade jag en rektangel över Utforsk-knappen på startskärmen och ställer in dess fyllnings- och gränsvärden till ingen genom att avmarkera de här egenskaperna på panelen Egenskaper. Jag gjorde samma sak med knappen Tillbaka på platsen.
För att lägga till interaktiviteten valde jag Prototype-läge och klickade sedan på "hotspot". Sedan slog jag pilen - kallad en tråd - till sidan Ställer och ställde in övergångsmålet på Platser, rörelsen för att trycka vänster, lätta för att lätta ut och övergångstiden för övergången till .6 sekunder.
Jag upprepade det här steget med hotspot på sidan Places. Den enda skillnaden var övergången satt till Push Right. När jag klickade på Play-knappen testade jag min prototyp.
04 av 04Så här använder du exporttillgångspanelen i Adobe Illustrator CC 2015
Tillsammans med menyn Spara för skärmar adderade Adobe också en ny panel - Asset Export - som tog bort en stor smärtpunkt i UI Design-arbetsflödet.
Smärtpunkten var ikoner. Illustrator är en bra vektorritningsapplikation men att skriva ut, låt oss säga 10 ikoner, på en sida med 40 eller 50 av dem krävs att varje sparas som en SVG-bild. Detta krävde oundvikligen mer tid än vanligt tack vare successiva resor till SVG-panelen. Denna smärtpunkt är nu en sak av det förflutna.
Den här nya panelen finns i fönstret> Asset Export. När panelen öppnas markerar du den tillgång du vill konvertera till SVG eller annat format och dra in panelen. När du släpper musen läggs en miniatyrbild av tillgången till panelen. Namnge tillgången Fortsätt dra objekt i panelen tills du är klar.
Markera varje objekt I området Exportera inställningar eller markera alla genom att hålla ned Skift-tangenten och klicka på var och en. Välj ditt format - i det här exemplet valde jag SVG- och klickar på Exportera. De valda objekten kommer att matas ut som SVG-filer till samma plats som Illustrator-filen.
Om hela processen blir jämnare behöver du inte använda panelen Asset Export. Om du klickar på knappen Spara för skärmar längst ner på panelen öppnas dialogrutan.
Omvänt kan du klicka på fliken Tillgångar på panelen Spara för skärmar för att komma åt exportpanelen för tillgång. Om du till exempel har en anpassad ikon på en tavla kan du öppna exportpanelen för tillgång i dialogrutan Spara till skärm och dra det objektet till panelen Exportera tillgång.
