As der ien aspekt fan wurkje mei Illustrator dat ik it net genietsje kin, is it konvertearjen fan artikels om svg-ôfbyldings foar mobile of web. Mei it menu eksportearje> Eksportearje as it menu en, om brutaal earlik te wêzen, is de Spesifikaasje foar spesjale - eksportearje> bewarje foar Webside - net krekt maklik te brûken.
It konvertearjen fan in tekenrige foar it .svg-formaat iepene in echt yntimidearjend dialoochfinster dat foar nije minsken oan dizze wurkflier biede in ferrassende rigel fan opsjes om net te ferjitten it feit wie in tal fan .svg formaten en mar ien fan har wie de goede formaat. Ien kear dat jo dizze workflow brûkt hawwe, wie it net grut, mar de learline wie steil.
Dit hat allegear feroare mei de nije eksportearje foar Eksportearje foar skermen - Eksportearje> Eksport foar skermen - en it paniel Asset eksportearjen dy't yn juny 2016 yn 'e Illustrator CC 2015 yntrodusearre binne. Dit "How To" sil ik jo sjen litte hoe't beide funksjes. Litte wy begjinne.
01 of 04
Hoe jo ta te passen eksportearje foar skermen yn Adobe Illustrator CC 2015
Nei't in brûker fan Illustrator sûnt Illustrator 88 wurden is, tink ik dat jo myn ferwidering begripe om Illustrator te behanneljen as in serieuze opset-ark foar web- en mobile ynterfakken en projekten.
As artboards ynfierd waarden yn 'e CS4 ferzje 2008, tocht ik dat dit in ynteressante oanfolling wie foar de oanfraach. As ik earst de no-opsleine Save For Web-funksje yn Illustrator sjoch, haw ik it nijsgjirrige fûn, mar ik fûn dat deselde funksje yn Adobe Fireworks mear opnien mei web graphics as Illustrator.
Mei de komst fan in mobile-earste oanpak nei it ûntwerp en it ferheegjen fan relaasjes op SVG-ôfbyldings foar mobile projekten, Illustrator wie myn "go to" tool foar SVG en waard in wichtige stop yn 'e UI-ûntwerp-workflow.
Dochs, as ik nedich hawwe foar it mobilen fan aktives foar mobile, Sketch 3 en Photoshop CC 2015 binne myn ark fan kar. Illustrator is yn juny 2016 yn 'e list ynfierd mei it echt nuttige menu foar eksport foar skermen.
Yn it boppeneamde foarbyld haw ik twa skermen foar in iPhone oanwêzich en se binne op aparte artboards neamd "Home" en "Places". Om se út te jaan, haw ik Triem> Eksport> Eksport foar skermen selektearre. It dialoochfinster Export foar skermen iepenet.
02 of 04
Hoe brûk it dialoochfinster foar eksport foar skermen
As it dialoochfinster ferskynt, klikje op elke artboard om te selekteare. It sil dan sport in markearring markearje. Jo kinne ek dûbelklikke op de namme fan de artboard om dizze te selektearjen en te feroarjen. Dit is in goede ding om te witten as jo artboards wurde neamd "Artboard 1" en "Artboard 2", dy't, nea, jo neat fertelle.
Jo hawwe trije keuzes yn 't Selektearje gebiet:
- Alles: Dizze kar elts eksportearret elke artboard yn it dokumint as in aparte triem.
- Range: Fier in sprieding fan artboards dy't eksportearre wurde. Dit is benammen nuttich foar projekten mei in pear dozen artboards.
- Folslein dokumint: Selektearje dit en alle artboards wurde yn ien inkele dokumint ôflein.
It sône Eksportearje kinne jo kieze foar de útfier. De standertmenu is de hjoeddeistige lokaasje fan it dokumint Illustrator.
Formaten binne wêr 't de magyk bart. Jo sjogge der binne trije icons- iOS. Android en in gear. De earste twa binne sels ferklearjend. It byldkaike iepene iepene de Opmaakynstellingen wêrtroch jo kontrolearje kinne hoe't elke fan de triemformaten yn de list optimisearre wurde sil. Dizze ynstellings binne "spesifike spesjale" en as jo jo wizigingen makke hawwe, klikje op de knop "Ynstellings bewarje" en dy wizigingen sille tapast wurde nei de formaten om útfier te wurden.
Ienris jo kieze iOS of Android de list sil wizigje om alle beskikbere resolúsje beskikber te meitsjen op dat platfoarm. De list fan ' e iOS-siden sil de skalende faktueren foar de Retina-display sjen en de Android-seleksje sil skalen hawwe fan .75x oant 4x dy't praktysk elke Android-apparaat derop draacht.
As jo in formaat sjen litte dat jo fuortsmite wolle, klik dan op 'x'. As jo ien binne wolle jo klikke op de knop + knop taheakje.
As jo foltôge binne, klik dan op 'e knop Eksporteart, en in stapbalke sil jo sjen as it proses foltôge is.
03 of 04
It brûken fan De It foar eksoeren foar skermen befetsje fan Adobe Illustrator CC 2015.
As jo de útkomsten fan Eksport foar skermen kontrolearje, sille jo ûntdekke dat Illustrator in ferplichte ferzje fan elke skerm hat. Op it oerflak kin dit miskien wol wat swak wêze, as jo ferwachte hawwe dat Illustrator alle bitsjes en stikjes eksportearre hawwe as ôfbyldings.
As jo foar in momint weromgean en tinke oan dat, dan is dit krekt wat jo nedich binne omdat jo dizze útfier brûke kinne yn in prototype applikaasje lykas Adobe Experience Design , Principleformac, Atomic.io , UXPin of oare prototypingapplikaasje
Yn dit foarbyld brûke ik Adobe Experience Design (XD) om in ienfâldige klik te meitsjen. De earste stap yn it proses wie om de iPhone 6-grutte te selektearjen dy't de ôfmjittingen fan 'e Illustrator-ynterface oanpast
As it interface iepene is, haw ik it Artboard-ark selektearre en ien kear op it pasteboard klikke om in oare artboard te foegjen. Ik neamde se dan ek "Thús" en "Plakken", elke artboard selektearre en it png ôfbylding fan Illustrator yn it artboard ymportearre.
Om de "hotspots" te meitsjen foar de klik-thru, haw ik in rjochthoeke op 'e knop Untdekke op it hûs skerm setten en de wearden en grinzen-wearden opnij oanmeitsje troch dizze eigenskippen yn' e Eigenskippenpaniel te selektearjen. Ik die itselde ding mei de Back knop op de side Plakken.
Om de interaktiviteit te foegjen, haw ik de prototype modus selektearre en dan klikke op it "hotspot". Dêrnei ha ik de pylk nei de plakken ferwidere - nei de side Plakken en set it tastiel Transysje op 'e plakken, de moasje nei Pushlinks, de easken om te ferminderjen en de tiid fan' e oergong nei 6 sekonden.
Ik haw dizze stap mei it hotspot op 'e side pleatst. It iennichste ferskil wie de Transysje ynsteld nei Push Right. Doe't ik de Play-knop klikke, stelde ik myn prototype.
04 of 04
Hoe brûke it eksportbehearder yn Adobe Illustrator CC 2015
Mei it menu "Save for Screens" hat Adobe ek in nij paniel tafoegje - Asset Eksport - dat in grut pine punt yn 'e wurkwize fan' e UI-ûntwerp fuorthelle.
It pine punt wie ikoanen. Illustrator is in geweldige fektor-tekenapplikaasje, mar om út te jaan, litte wy 10 ikoanen sizze, op in side mei 40 of 50 fan harren nedich is elk ien as SVG-ôfbylding bewarre. Dit ûntwikkelet mear tiid as gewoan as trochdat opfolgjende reizen nei it SVG-paniel. Dit pine punt is no in ding fan it ferline.
Dit nije paniel is te finen by Window> Asset Export. As it paniel iepene wurdt, selektearje de asset dy't jo yn SVG konvertearje wolle of oare formaat en ferpleatse yn it paniel. As jo de mûs loslitte in thumbnail fan de asset wurdt tafoege oan it paniel. Name de asset. Bliuwende objekten yn 'e paniel blokkearje oant jo dien binne.
Selektearje elke elemint Yn it gebiet ynstellings te eksportearjen of selektearje se allegear troch de toets Shift te hâlden en op elk te klikken. Selektearje jo formaat - yn dit foarbyld, haw ik SVG keazen en klik op de knop Eksportearje. De selekteare items sille as SVG-bestannen op deselde lokaasje as it Illustrator-bestân útjûn wurde.
Wêr't it hiele proses sels neater krijt, moatte jo it paniel Asset Eksport net brûke. As jo op 'e knop Bewarje foar skermen klikke op' e boaiem fan it paniel iepenet it dialoochfinster.
Oarsom kinne jo klikke op de ljepper Assets yn it paniel "Bewarje foar skermen" om tagong te krijen ta it paniel Asset eksportearje. As jo bygelyks in oanpaste byldkaike hawwe op in artboard, kinne jo it paniel Asset Eksport yn it dialoochfinster "Save for Screen" iepenje en dit item yn it paniel Asset eksportearje.