Notaðu Illustrator CC 2015 Útflutningur fyrir skjá eiginleika

Ef það er einn þáttur í að vinna með Illustrator sem ég sannarlega nýtir ekki er að breyta línulist til svg mynda fyrir farsíma eða á vefnum. Notaðu Export Export> Export As valmyndina og, til að vera grimmilega heiðarlegur, er Vista fyrir vefinn lögun - Export> Save For Web - ekki einfalt auðvelt að nota.

Umbreyta teikningu á .svg sniði opnaði frekar hræðilegu gluggakista sem fyrir fólk sem nýtti þessa vinnuflæði boðið upp á ruglingslegt úrval af valkostum, svo ekki sé minnst á þá staðreynd að það var fjöldi .svg sniða og aðeins einn þeirra var rétt snið. Þegar þú hefur notið þessarar vinnuflæðis var það ekkert mál, en námsferillinn var bratt.

Það hefur allt breyst með nýjum útflutningsskjáseiginleikum - Útflutningur> Útflutningur fyrir skjái - og útflutningsborðið sem var kynnt í Illustrator CC 2015 í júní 2016. Í þessari "Hvernig Til" mun ég sýna þér hvernig á að nota bæði lögun. Byrjum.

01 af 04

Hvernig á að komast í útflutning fyrir skjái Í Adobe Illustrator CC 2015

Output listboards með því að nota valmyndina Export for Screens.

Hafa verið Illustrator notandi síðan Illustrator 88 Ég held að þú getir skilið tregðu mína til að íhuga Illustrator sem alvarlegt hönnunar tól fyrir vef- og farsíma tengi og verkefni.

Þegar gáttir voru kynntar í CS4 útgáfu 2008, hélt ég að það væri áhugavert viðbót við umsóknina. Þegar ég sá fyrst núverandi Save For Web lögun í Illustrator, fannst mér það áhugavert en ég fann sömu eiginleika í Adobe Fireworks var meira í samræmi við grafík í vefnum en Illustrator.

Með tilkomu farsíma-fyrstu nálgun við hönnun og aukna treyst á SVG-myndum fyrir farsímaverkefni, var Illustrator mitt "fara til" tól fyrir SVG og varð mikilvægt stopp í UI Design workflow.

Enn, ef ég þurfti að flytja eignir fyrir farsíma, eru Sketch 3 og Photoshop CC 2015 valin verkfæri. Illustrator kom inn í listann í júní 2016 með virkilega nifty Export for Screens valmyndinni.

Í dæminu hér að ofan, ég hef tvær skjáir sem eru ætlaðar fyrir iPhone og þau eru á sérstökum listatöflum sem heitir "Heim" og "Staðir". Til að framleiða þau valið ég File> Export> Export for Screens. Valkosturinn Útflutningur fyrir skjái opnar.

02 af 04

Hvernig Til Nota Útflutningur fyrir Skjár Dialog Box

Output listboards fyrir IOS og Android með því að gera nokkrar einfaldar ákvarðanir í Save for Screens valmyndinni.

Þegar valmyndin birtist skaltu smella á hvert listatriði til að velja. Það mun þá athuga merkið. Þú getur líka tvísmellt á nafnplötu nafn til að velja það og breyta því. Þetta er gott að vita ef listarnir þínar eru heitir "Artboard 1" og "Artboard 2" sem, í rauninni, segir þér ekkert.

Þú hefur þrjá valkosti í valið svæði:

Útflutningur til svæðis gerir þér kleift að velja áfangastaðarmappa fyrir framleiðsluna. Sjálfgefna möppan verður núverandi staðsetning Illustrator skjalsins.

Snið er hvar "galdur gerist. Þú munt taka eftir því að það eru þrjár táknmyndir - IOS. Android og gír. Fyrstu tveir eru sjálfsskildar. Gear táknið opnar Format Settings sem gerir þér kleift að stjórna hvernig hvert skráarsnið á listanum verður bjartsýni. Þessar stillingar eru "sniðin" og þegar þú hefur gert breytingarnar þínar skaltu smella á Save Settings hnappinn og þær breytingar verða beittar á sniðin sem á að framleiða.

Þegar þú hefur valið iOS eða Android mun listinn breytast þannig að það innihaldi allar upplausnir sem eru á þessari vettvang. IOS skráningin mun sýna stigstærðina fyrir sjónhimnaskjáinn og Android valið mun hafa vog sem eru allt frá .75x til 4x sem rúmar næstum öllum Android tækjum þarna úti.

Ef snið er að finna sem þú vilt fjarlægja skaltu smella á "x". Ef það er einn sem þú vilt bæta við smellirðu á + Bæta við Skala hnappinn.

Þegar þú hefur lokið því skaltu smella á Export Artboard hnappinn og framvindustikan sýnir þér hvenær ferlið er lokið.

03 af 04

Notaðu The Export For Screens Skrár frá Adobe Illustrator CC 2015.

Skrárnar sem framleiða frá Illustrator geta hæglega verið bætt við hvaða fjölda forrita sem gerðar eru til sýningar, svo sem Adobe Experience Design.

Þegar þú skoðar niðurstöður útflutnings fyrir skjái, verður þú að uppgötva að Illustrator hefur framleiðsla fletja útgáfu af hverri skjá. Á yfirborðinu kann þetta að virðast vera svolítið veikur sérstaklega ef þú átt von á að Illustrator hafi flutt allar bita og stykki sem myndir.

Ef þú stígar til baka og hugsar um það í smá stund, þá er þetta í raun nákvæmlega það sem þú þarft vegna þess að þú getur notað þessa framleiðsla í prototyping forriti, svo sem Adobe Experience Design , Principleformac, Atomic.io , UXPin eða önnur frumgerðarsnið

Í þessu dæmi er ég að nota Adobe Experience Design (XD) til að búa til einfaldan smell-til. Fyrsta skrefið í því ferli var að velja iPhone 6 stærð sem samsvaraði stærð Illustrator Interface

Þegar viðmótið opnaði valið ég Artboard tólið og smelltist einu sinni á borðplötuna til að bæta við öðru teikniborði. Ég nefndi þá þá "Heim" og "Staðir", valið hvert listatriði og fluttu png myndina frá Illustrator inn í listblaðið.

Til að búa til "hotspots" fyrir smellinn í gegnum þá rétthyrndi ég rétthyrningur yfir Explore hnappinn á heimaskjánum og setti fylla og landamæri við enginn með því að hafna þessum eiginleikum á Eiginleikar spjaldið. Ég gerði það sama við baka hnappinn á síðunni Staðir.

Til að bæta við gagnvirkni, valið ég frumgerðarsnið og smellt síðan á "hotspot". Ég dróði síðan örina, sem heitir vír, til Staðurssíðunnar og setti flutningsmarkmiðið á staðina, hreyfingu til að þrýsta til vinstri, auðvelda að slaka á og lengd breytinganna í .6 sekúndur.

Ég endurtók þetta skref með heitinu á síðunni Staðir. Eini munurinn var umbreytingin var stillt á Push Right. Þegar ég smellt á Play hnappinn prófaði ég frumgerð mína.

04 af 04

Hvernig á að nota Export Asset Panel í Adobe Illustrator CC 2015

Sérsniðnar tákn geta verið fluttar út sem SVG skrár með því að nota Export Export spjaldið.

Ásamt Vista fyrir Skjá valmyndinni Adobe bætti líka við nýjum spjöldum - Eignastýring - sem fjarlægt mikla sársauka í UI Design workflow.

Sársauki var tákn. Illustrator er frábær vektor teikning umsókn en að framleiðsla, segjum 10 tákn, á síðu með 40 eða 50 þeirra þurfa hver og einn er vistuð sem SVG mynd. Þetta þarf óhjákvæmilega meiri tíma en venjulega, þökk sé eftirfylgjandi ferðum á SVG spjaldið. Þessi sársauki er nú hluti af fortíðinni.

Þessi nýja spjaldið er að finna í glugga> Eignastýring. Þegar spjaldið opnar skaltu velja þá eign sem þú vilt breyta í SVG eða annað snið og draga inn í spjaldið. Þegar þú sleppir músinni er smámynd af eigninni bætt við spjaldið. Nafni eignarinnar. Haltu áfram að draga hluti í spjaldið þar til þú ert búin.

Veldu hvert atriði Í útflutningsstillingar svæðinu eða veldu þá alla með því að halda inni Shift lyklinum og smella á hvert. Veldu sniðið þitt - í þessu dæmi valdi ég SVG- og smellt á Export hnappinn. Völdu atriði verða gefin út sem SVG skrár á sama stað og Illustrator skrá.

Ef þetta allt ferli verður jafnvel nýliða ertu ekki að nota flipann Eigið útflutning. Ef þú smellir á Vista fyrir skjáinn neðst á spjaldið opnast valmyndin.

Hins vegar getur þú smellt á flipann Eignir á vellinum Vista til skjáa til að fá aðgang að Export Export Panel. Til dæmis, ef þú ert með sérsniðið tákn á listblaði, getur þú opnað útflutningspanann Eign í valmyndinni Vista fyrir skjá og dregið það inn í Export Export-spjaldið.