Jos Illustratorilla on eräs näkökohta, jota en todellakaan nauti, se muuntaa viivapiirrokset svg-kuviksi mobiililaitteille tai webille. Vie Vie-valikosta -valikko ja kirkkaasti rehellinen Save for Web -toiminto - Vie> Tallenna Web-sovellus - eivät olleet kovin helppokäyttöisiä.
Piirroksen muuntaminen .svg-muotoon avasi melko pelottavan valintaikkunan, joka tarjosi houkuttelevien valikoiden vaihtoehtoja tähän työnkulkuun uudet ihmiset, puhumattakaan siitä, että oli olemassa useita .svg-muotoja ja vain yksi niistä oli oikea muoto. Kun olet tottunut tähän työnkulkuun, se ei ollut iso juttu, mutta oppimiskäyrä oli jyrkkä.
Tämä on muuttunut uudella Export For Screens -ominaisuudella - Vie> Vie näytteille - ja Asset Export-paneelille, jotka otettiin käyttöön Illustrator CC 2015: ssä kesäkuussa 2016. Tässä "Miten" aion näyttää, miten voit käyttää molempia ominaisuudet. Aloitetaan.
01/04
Adobe Illustrator CC 2015 -sovelluksen viennin käyttäminen
Koska Illustrator-käyttäjä on toiminut Illustrator 88 -ohjelmassa, luulen, että ymmärrät haluttomuutta harkita Illustratoria vakavana web- ja mobiilirajapintojen ja -hankkeiden suunnittelutyökaluna.
Kun piirustuskartat julkaistiin CS4-versiossa 2008, mielestäni se oli mielenkiintoinen lisäys hakemukseen. Kun näin ensimmäisen kerran Illustratorin nyt säästyneen Save For Web -ominaisuuden, huomasin sen olevan mielenkiintoinen, mutta löysin saman ominaisuuden Adobe Fireworks -ohjelmassa, joka oli linjassa Web-grafiikan kanssa kuin Illustrator.
Kun markkinoille tuli mobiili-ensimmäinen lähestymistapa suunnitteluun ja lisättiin SVG-kuviin mobiilihankkeille, Illustrator oli minun "go to" -työkalu SVG: lle ja siitä tuli tärkeä pysäytys UI Design -työtavoissa.
Silti, jos minun tarvitsee viedä omaisuutta mobiililaitteille, Sketch 3 ja Photoshop CC 2015 ovat minun valintani työkaluja. Illustrator tuli listalle kesäkuussa 2016 todella hienoisella Export for Screens -valikolla.
Yllä olevassa esimerkissä minulla on kaksi iPhonenäyttöä varten tarkoitettua näyttöä, ja ne ovat erillisissä Artboards-nimissä nimeltä "Home" ja "Places". Voit tulostaa ne valitsemalla Tiedosto> Vie> Vie näytöt. Näyttöön tulee Vie näyttöön -valintaikkuna.
02/04
Vientiasetusten valintaikkunan käyttäminen
Kun valintaikkuna tulee näkyviin, napsauta jokaista valittavissa olevaa taulunäytettä. Sitten urheilulippu on merkki. Voit myös valita hiiren kakkospainikkeella taustan taulun nimen ja muuttaa sen. Tämä on hyvä tietää, ovatko taulutelevisi nimeltään "Taulun 1" ja "Taulun 2", jotka suoraan sanottuna eivät kerro mitään.
Valittavana alueella on kolme vaihtoehtoa:
- Kaikki: Tämä valinta vie asiakirjan jokaisen taulun mukaan erillisenä tiedostona.
- Alue: Syötä joukko vietyjä tauluvälejä. Tämä on erityisen hyödyllinen projekteissa, joissa on muutamia kymmeniä taidelaatikoita.
- Täydellinen dokumentti: Valitse tämä ja kaikki taulunalustat leviää yhdeksi asiakirjaksi.
Export To (viedä) -alueelle voit valita tulostuksen kohdekansion. Oletuskansi on Illustrator-asiakirjan nykyinen sijainti.
Muodot ovat "taika tapahtuu. Huomaat, että on kolme kuvaketta - iOS. Android ja Gear. Ensimmäiset kaksi ovat itsestään selvää. Gear-kuvaketta avaa Muotoasetukset, joiden avulla voit hallita kuinka kukin luettelossa olevien tiedostomuotojen kokoonpano optimoidaan. Nämä asetukset ovat "muotoa koskevat", ja kun olet tehnyt muutokset, napsauta Tallenna asetukset -painiketta ja muutokset tulevat lähetettäviin muotoihin.
Kun valitset iOS: n tai Androidin, luettelo muuttuu siten, että se sisältää kaikki kyseisen alustan käytettävissä olevat ratkaisut. IOS-luettelossa näkyvät Retina-näytön skaalauskertoimet ja Android-valikoimassa on asteikkoja, jotka vaihtelevat välillä .75x ja 4x, mikä mahtuu lähes kaikkiin Android-laitteisiin.
Jos on muotoa, jonka haluat poistaa, napsauta "x". Jos on olemassa yksi, jonka haluat lisätä, napsauta + Lisää asteikko -painiketta.
Kun olet valmis, napsauta Vie Taulun esittely -painiketta ja etenemispalkki näyttää, kun prosessi on valmis.
03/04
Adobe Illustrator CC 2015 -ohjelmiston vientitiedostojen käyttäminen.
Kun tarkastelet Export for Screens -näytön tuloksia, huomaat Illustratorin tuottavan jokaisen näytön litistyneen version. Pinnalla tämä voi tuntua olevan hieman heikko etenkin, jos olet odottanut, että Illustrator on vienyt kaikki bittiä ja kappaletta kuvina.
Jos astutte takaisin ja ajattelette sitä hetken, tämä on oikeastaan juuri sitä mitä tarvitset, koska voit käyttää tätä tuotetta prototyyppausohjelmassa, kuten Adobe Experience Design , Principleformac, Atomic.io , UXPin tai muu prototyyppausohjelma
Tässä esimerkissä käytän Adobe Experience Design (XD) -ohjelmaa luoda yksinkertainen napsautussuhde. Prosessin ensimmäinen vaihe oli valita iPhone 6-koko, joka sopi Illustrator-käyttöliittymän mittasuhteisiin
Kun käyttöliittymä avasi, valitsin Taulun työkalu -työkalun ja napsautin kerran pahvilaatikkoon toisen taulu- piirroksen lisäämiseksi. Sitten nimettiin ne "Koti" ja "Paikat", valitsin jokaisen taulun ja tuodaan png-kuva Illustratorista taulusta.
Luodessani "hotspotit" klikkauksen kautta piirsin suorakulmion aloitusnäytön Tutki-painikkeella ja asetan sen täyttö- ja raja-arvot yksikseen poistamalla kyseiset ominaisuudet Ominaisuudet-paneelista. Tein saman kohdan paikat-sivulla Takaisin-painikkeella.
Interaktiivisuuden lisäämiseksi valitsin Prototype-tilan ja napsautin "hotspot" -kohtaa. Vedin sitten nuolen kutsuttu lanka - paikat -sivulle ja asetan siirtymätavoitteen paikoille paikoilleen, Push Left -liikkeelle, kevennyksen helpottamiseksi ja siirtymisen kestoon .6 sekunniksi.
Toistin tämän vaiheen hotspotilla paikoista -sivulla. Ainoa ero oli, että Siirtymä asetettiin Push Right -asetukseksi. Kun napsautin Play-painiketta, testasin prototyyppiäni.
04/04
Vientiasetusten paneelin käyttäminen Adobe Illustrator CC 2015 -ohjelmassa
Save for Screens -valikon lisäksi Adobe lisäsi myös uuden paneelin - Asset Export -, joka poistaa suuren kipupisteen UI Design-työnkulusta.
Kipupiste oli kuvakkeita. Illustrator on loistava vektorigrafiikkasovellus, mutta lähdön, sanotaan 10 kuvaketta, sivulla 40 tai 50, joista jokainen tallennetaan SVG-kuvana. Tämä väistämättä vaatii enemmän aikaa kuin tavallisesti, koska peräkkäiset matkat SVG-paneelille. Tämä kipupiste on nyt menneisyyden asia.
Uusi paneeli löytyy Window> Asset Exportista. Kun paneeli avautuu, valitse ominaisuus, jonka haluat muuntaa SVG: ään tai muuhun muotoon, ja vedä paneeliin. Kun vapautat hiiren, paneeliin lisätään pienoiskuva esineestä. Nimi omaisuus. Pidä esineitä vetämällä paneeliin, kunnes olet valmis.
Valitse jokin kohta Vie asetukset -alueella tai valitse ne kaikki pitämällä Vaihto-näppäintä painettuna ja napsauttamalla niitä. Valitse muoto - tässä esimerkissä valitsin SVG- ja napsautan Vie-painiketta. Valitut kohteet tulostetaan SVG-tiedostoina samalle paikalle kuin Illustrator-tiedosto.
Jos tämä koko prosessi muuttuu entistäkin nopeammaksi, sinun ei tarvitse käyttää Asset Export -paneelia. Jos napsautat paneelin alaosassa olevaa Tallenna näytöt-painiketta, valintaikkuna avautuu.
Vastaavasti voit napsauttaa Asetukset-välilehteä Save for Screens -paneelissa, niin pääset Asset Export -paneeliin. Jos esimerkiksi sinulla on taustatiedostoon mukautettu kuvake, voit avata Asetusvienti-paneelin Save for Screen -valintaikkunassa ja vetää kyseisen kohteen Asset Export-paneeliin.