Kasuta Illustrator CC 2015 Ekspordi ekraanide funktsiooni kasutamiseks

Kui Illustratoriga töötamise üks aspekt on, mida ma tõesti ei naudi, on joontekunstide teisendamine mobiilseadmete või veebi jaoks SVG-piltidena. Kasutades menüükäsku Ekspordi> Ekspordi kasutamine ja, et olla julmalt aus, ei olnud funktsioon Save To Web (Ekspordi> Salvesta veebist) salvestamine hõlpsasti kasutatav.

Joonise teisendamine .vv-vormingusse avas üsna hirmutava dialoogi, kus inimestele, kes selle töövoo jaoks uued saidid pakkusid segadusse hulgaliselt võimalusi, rääkimata sellest, et seal oli mitu .svg-vormingut ja ainult üks neist oli õige vormingus. Kui olete selle töövoogiga harjunud, ei olnud see suur asi, kuid õppimiskõver oli järsk.

See kõik on muutunud uue Ekspordi ekraanide funktsiooniga - Export> Eksport ekraanidele - ja paneel Asset Export, mis käivitati Illustrator CC 2015- le juunis 2016. Selles "Kuidas" näitaksin teile, kuidas neid mõlemaid kasutada Omadused. Alustame.

01, 04

Ekraanide eksportimise lubamine Adobe Illustrator CC 2015

Output artboards kasutades ekspordi jaoks ekraanide dialoogiboksi.

Pärast Illustratori kasutamist Illustratorist 88, arvan, et võite mõista mu vastumeelsust kaaluda Illustratorit kui veebi- ja mobiili liideste ja projektide tõsist kujundustööriista.

Kui CS4 versioonis 2008 tutvustati artboardsid, siis arvasin, et see on rakenduse huvitav lisa. Kui ma esimest korda nägin Illustratoris hiljuti vananenud funktsiooni Save To Web, jäi mulle huvitavaks, kuid leidsin, et Adobe Fireworks'is ühesugune funktsioon oli veebigraafikaga paremini kooskõlas kui Illustrator.

Mobiiliprojektide kujundamise ja SVG-piltide kasvavale toetumisele mobiiliprojektide jaoks oli Illustrator minu SVG-i "käima" tööriist ja sai olulise peatuse UI Designi töövooga.

Ikka, kui mul oleks vaja mobiilsidesse varasid eksportida, on sketch 3 ja Photoshop CC 2015 minu valikuvõimalused. Illustrator sisestas nimekirja 2016. aasta juunis, kasutades tõeliselt väljavõtete ekspordi menüüd.

Ülaltoodud näites on mul kaks ekraanit, mis on mõeldud iPhone'i jaoks, ja need asuvad eraldi moodulitena "Home" ja "Places". Nende väljastamiseks valisin File> Export> Ekspordi ekraanidele. Avaneb dialoogiboks Ekspordi ekraanidele.

02 04

Kuidas kasutada Ekspordi ekraanide dialoogiboksi

IOS-i ja Android-i väljundi töölauad teevad mõned lihtsad valikud dialoogiboksis Salvesta ekraanidele.

Kui ilmub dialoogiboks, klikkige valitavale igale klahvile. Seejärel saab sport märke. Võite ka topeltklõpsu teha joonise nime valimiseks ja selle muutmiseks. See on hea asi teada, kas teie tööplaate nimetatakse "Artboard 1" ja "Artboard 2", mis ausalt öeldes teile midagi ei ütle.

Vali ala on kolm valikut:

Ekspordi alale saab valida väljundi sihtkausta. Vaikekoostuseks on Illustrator dokumendi praegune asukoht.

Formaadid on koht, kus toimub "magic". Märkate, et seal on kolm ikooni - iOS. Android ja Gear. Esimesed kaks on iseenesestmõistetavad. Geari ikoon avab vormingu seaded, mis võimaldab teil kontrollida, kuidas kõik loendis olevad failivormingud optimeeritakse. Need seaded on "vormindatud" ja kui olete oma muudatused teinud, klõpsake nuppu Salvesta sätted ja need muudatused rakendatakse väljundvormingutele.

Kui valite iOS-i või Android-i, muutub see nimekiri, et see sisaldaks kõiki sellel platvormil olevaid resolutsioone. IOS-i loend näitab Retina kuvari skaalat tegureid ja Androidi valikul on skaala vahemikus .75x kuni 4x, mis mahutab praktiliselt iga Android-seadme seal.

Kui on vorming, mis näitab, et soovite eemaldada, klõpsake "x". Kui on veel üks, mida soovite lisada, klõpsake nuppu + Lisa skaala.

Kui olete valmis, klõpsake nuppu Ekspordi displeireklaamid ja edenemisriba näitab, kui protsess on lõppenud.

03 alates 04

Ekspordi kasutamine Adobe Illustrator CC 2015 ekraanifailide kasutamiseks.

Illustratorist väljuvate failide saab hõlpsasti lisada mis tahes arvule prototüübirakendustele nagu Adobe Experience Design.

Ekspordi ekraanide tulemuste kontrollimisel avastad, et Illustrator on välja andnud iga ekraani lamestatud versiooni. Pinnal võib see tunduda natuke nõrk, eriti kui ootate, et Illustrator on ekspordinud kõik bittid ja tükid piltidena.

Kui te sammu tagasi ja mõelnud sellele mõne hetke pärast, on see tegelikult just see, mida te vajate, kuna saate seda väljundit kasutada prototüüpide rakenduses, nagu Adobe Experience Design , Principleformac, Atomic.io , UXPin või muu prototüübirakendus

Selles näites kasutan lihtsa kliki loomiseks Adobe Experience Designi (XD). Esimene samm selles protsessis oli valida iPhone 6-i suurus, mis sobib Illustrator-liidese mõõtmetega

Kui liides on avatud, valisin tööriista Artboard ja klõpsasin karbil ühe kaardipikenduse lisamiseks. Siis nimetasin nad nimeks "Kodu" ja "Kohad", valisin iga tööplaani ja importisin png-pilti Illustratorist mööda joont.

Kiirklahvi "levipunktide" loomiseks tõmbasin avaekraanil Avakuva uurimisega ristküliku ja määranud selle täite- ja piirväärtused puuduvateks, tühistage nende omaduste valik Properties paneelilt. Ma tegin samamoodi nuppu Tagasi kohapeal lehel.

Interaktiivsuse lisamiseks valisin prototüübi režiimi ja seejärel klõpsasin "hotspot". Seejärel tõmbasin noole - nimega traat - kohale lehele ja seadisin kohale ülemineku sihtmärgi, käiguvahetuseks vasakule, hõlbustamiseks, et hõlbustada ja ülemineku kestust 0,6 sekundiks.

Kordan seda sammu lehe Kohtade levialas. Ainus erinevus oli see, et üleminek oli seatud nupule Paremale. Kui ma klõpsasin nupul Esita, katsetasin oma prototüüpi.

04 04

Kuidas ekspordi varade paneeli kasutada Adobe Illustrator CC 2015

Kohandatud ikoone saab eksportida SVG-failidena, kasutades paneeli Asset Export.

Lisaks sellele lisati ka Save for Screens (välise salvestamise) menüü Adobe uuele paneelile - Asset Export - mis eemaldas UI Designi töövoo tohutu valu punkti.

Valu punkt oli ikoonid. Illustrator on suurepärane vektorgraafika rakendus, kuid väljundina, oletame 10 ikooni, lehel 40 või 50 neist, mis vajavad igaüks salvestatakse SVG-kujutisena. SVG-paneeli järjestikuste reiside tõttu paratamatult vajati rohkem aega kui tavaliselt. See valu punkt on nüüd minevikku.

See uus paneel asub aknas> Asset Export. Kui paneel avaneb, valige vara, mida soovite teisendada SVG-vormingusse või muusse vormingusse ja lohistage paneelile. Hiiri vabastades lisatakse paneele pisipildi vara. Nimetage vara. Hoidke objekte lohistades paneeli, kuni olete valmis.

Valige iga üksus Ekspordi seadete alal või valige need kõik, hoides all klahvi Shift ja klikkides kummalegi. Valige oma formaat - selles näites valisin SVG- ja klõpsake nuppu Eksport. Valitud objektid väljastatakse SVG-failidena Illustrator-faili samasse kohta.

Kui see kogu protsess muutub veelgi väiksemaks, ei pea te varade eksportimise paneeli kasutama. Kui klõpsate nupu Salvesta ekraanidele nupu allosas, avaneb dialoogiboks.

Vastupidi, võite vaadata paneeli Asset Export (Ehitise eksport) avamiseks vahekaardil Assets (varud). Näiteks kui teil on kohandatud ikoon tööriistaribal, võite selle dialoogiboksis Salvesta ekraanile avada varade eksportimise ja lohistage see element paneeli varade ekspordiks.