Kung may isang aspeto ng pagtatrabaho sa Illustrator na talagang hindi ako nasisiyahan ay ang pag-convert ng line art sa mga imahe ng svg para sa mobile o sa web. Gamit ang I-export> I-export Bilang menu at, upang maging brutally tapat, ang tampok na I-save Para sa Web - I-export ang> I-save Para sa Web - ay hindi eksakto madaling gamitin.
Ang pag-convert ng isang pagguhit sa format ng .svg ay nagbukas ng isang halip na intimidating na kahon ng dialogo na, para sa mga taong bago sa daloy ng trabaho na ito, nag-aalok ng nakalilito na hanay ng mga opsyon na hindi banggitin ang katunayan mayroong ilang mga format ng .vg at isa lamang sa mga ito ang tamang format. Kapag nakuha mo na ginamit sa daloy ng trabaho na ito ay hindi napakahusay, ngunit ang pag-aaral ng curve ay matarik.
Na binago ang lahat ng may bagong tampok na I-export Para sa Mga Screen - I-export ang> I-export para sa Mga Screen - at ang Asset Export panel na ipinakilala sa Illustrator CC 2015 sa Hunyo 2016. Sa "Paano Upang" ipapakita ko sa iyo kung paano gamitin ang parehong mga tampok. Magsimula na tayo.
01 ng 04
Paano Upang I-access ang I-export Para sa Mga Screen Sa Adobe Illustrator CC 2015
Ang pagkakaroon ng isang gumagamit ng Illustrator mula sa Illustrator 88 Sa tingin ko maaari mong maunawaan ang aking pag-aatubili upang isaalang-alang ang Illustrator bilang isang malubhang tool sa disenyo para sa mga interface ng web at mobile at mga proyekto.
Nang ang artboards ay ipinakilala sa bersyon ng CS4 2008, naisip ko na isang nakawiwiling karagdagan sa application. Noong una kong nakita ang hindi na ginagamit na tampok na Save For Web sa Illustrator, muli kong natagpuan ito na kawili-wiling ngunit natagpuan ko na ang parehong tampok sa Adobe Fireworks ay mas nakahanay sa web graphics kaysa sa Illustrator.
Sa pagdating ng unang diskarte sa mobile sa disenyo at ang pagtaas ng pagsandig sa mga imahe ng SVG para sa mga mobile na proyekto, ang Illustrator ay ang aking "pumunta sa" na tool para sa SVG at naging isang mahalagang paghinto sa workflow UI Design.
Gayunpaman, kung kailangan kong i-export ang mga asset para sa mobile, ang Sketch 3 at Photoshop CC 2015 ay ang aking mga tool ng pagpili. Inilista ng ilustrador ang listahan sa Hunyo 2016 sa talagang nakakatawang Export for Screens menu.
Sa halimbawa sa itaas, mayroon akong dalawang screen na nakalaan para sa isang iPhone at sila ay nasa magkahiwalay na Artboards na pinangalanang "Home" at "Mga Lugar". Upang i-output ang mga ito, pinili ko ang File> Export> Export for Screens. Ang kahon ng Pag-export para sa Mga Screen ay bubukas.
02 ng 04
Paano Gamitin ang I-export para sa Mga Screen Dialog Box
Kapag lumitaw ang dialog box, mag-click sa bawat artboard na mapili. Pagkatapos ay magsanay ito ng marka ng tseke. Maaari mo ring i-double-click ang isang artboard ng pangalan upang piliin ito at baguhin ito. Ito ay isang magandang bagay upang malaman kung ang iyong artboards ay pinangalanang "Artboard 1" at "Artboard 2" na, deretsahan, ay nagsasabi sa iyo wala.
Mayroon kang tatlong pagpipilian sa Select area:
- Lahat: Ang pagpipiliang ito ay nag-export ng bawat artboard sa dokumento bilang isang hiwalay na file.
- Saklaw: Ipasok ang isang hanay ng mga artboard na mai-export. Ito ay lalong kapaki-pakinabang para sa mga proyekto na may ilang dosenang artboards.
- Buong Dokumento: Piliin ito at lahat ng artboards ay pipi sa isang solong dokumento.
Hinahayaan ka ng Export To area na piliin ang destination folder para sa output. Ang default na folder ay ang kasalukuyang lokasyon ng dokumento ng Illustrator.
Ang mga format ay kung saan ang "magic ay nangyayari. Mapapansin mo na mayroong tatlong mga icon- iOS. Android at Gear. Ang unang dalawa ay maliwanag. Binubuksan ng icon ng Gear ang Mga Setting ng Format na nagpapahintulot sa iyo na kontrolin kung paano i-optimize ang bawat format ng file sa listahan. Ang mga setting na ito ay "format na tukoy" at sa sandaling ginawa mo ang iyong mga pagbabago, i-click ang pindutan ng I-save ang Mga Setting at ilalapat ang mga pagbabagong iyon sa mga format upang maging output.
Sa sandaling pipiliin mo ang iOS o Android ang listahan ay magbabago upang isama ang lahat ng mga resolution na magagamit sa platform na iyon. Ang listahan ng iOS ay magpapakita ng mga kadahilanan ng scaling para sa Retina display at ang pagpili ng Android ay magkakaroon ng mga antas na mula sa .75x hanggang 4x na tumatanggap ng halos bawat Android device.
Kung may isang format na nagpapakita na gusto mong alisin, i-click ang "x". Kung mayroong isang nais mong idagdag pindutin ang + Magdagdag ng Scale button.
Kapag natapos na, i-click ang pindutan ng I-export ang Artboard at ipapakita sa iyo ng progresong bar kapag natapos na ang proseso.
03 ng 04
Paggamit ng Ang I-export Para sa Mga Screen File mula sa Adobe Illustrator CC 2015.
Kapag tiningnan mo ang mga resulta ng I-export para sa Mga Screen, matutuklasan mo na ang Illustrator ay may output na isang flat na bersyon ng bawat screen. Sa ibabaw, mukhang ito ay medyo mahina lalo na kung hinihintay mo ang Illustrator na ma-export ang lahat ng mga piraso at piraso bilang mga larawan.
Kung babalik ka at pag-isipan ang mga ito para sa isang sandali, ito ay talagang eksakto kung ano ang kailangan mo dahil maaari mong gamitin ang output na ito sa isang prototyping application tulad ng Adobe Karanasan Disenyo , Principleformac, Atomic.io , UXPin o iba pang application prototyping
Sa halimbawang ito, gumagamit ako ng Adobe Experience Design (XD) upang lumikha ng isang simpleng pag-click-thru. Ang unang hakbang sa proseso ay upang piliin ang laki ng iPhone 6 na tumutugma sa mga sukat ng Illustrator Interface
Kapag binuksan ang interface, pinili ko ang Artboard tool at na-click nang isang beses sa pasteboard upang magdagdag ng isa pang artboard. Pagkatapos ay pinangalanan ko sila "Home" at "Places", pinili ang bawat artboard at na-import ang png na imahe mula sa Illustrator papunta sa artboard.
Upang lumikha ng "hotspots" para sa pag-click-thru, iginuhit ko ang isang rektanggulo sa ibabaw ng pindutan ng Explore sa home screen at itakda ang mga halaga ng punan at hangganan sa wala sa pamamagitan ng pagpili sa mga katangian sa mga Properties panel. Ginawa ko ang parehong bagay sa Back button sa pahina ng Mga Lugar.
Upang idagdag ang Interactivity, pinili ko ang Prototype mode at pagkatapos ay na-click sa "hotspot". Pagkatapos ay hinila ko ang arrow - na tinatawag na wire - sa pahina ng Mga lugar at itakda ang target na Transition sa Mga Lugar, ang paggalaw sa Push Left, ang pag-easing upang paluwagan at ang tagal ng paglipat sa .6 segundo.
Inulit ko ang hakbang na ito sa hotspot sa pahina ng Mga lugar. Ang pagkakaiba lamang ay ang Transition ay nakatakda sa Push Right. Kapag nag-click ako sa pindutan ng Play sinubukan ko ang aking prototype.
04 ng 04
Paano Gamitin Ang Export Asset Panel Sa Adobe Illustrator CC 2015
Kasama ang menu ng I-save para sa Mga Screen Nagdagdag din ang Adobe ng isang bagong panel - Asset Export - na nag-alis ng isang malaking punto ng sakit sa disenyo ng workflow ng UI.
Ang punto ng sakit ay mga icon. Ang Illustrator ay isang mahusay na application ng pagguhit ng vector ngunit sa output, sabihin nating 10 mga icon, sa isang pahina na may 40 o 50 ng mga ito na kinakailangan ang bawat isa ay nai-save bilang isang imahe SVG. Ito ay hindi kinakailangan ng mas maraming oras kaysa karaniwan salamat sa sunud-sunod na mga biyahe sa panel ng SVG. Ang puntong ito ng sakit ay ngayon isang bagay ng nakaraan.
Ang bagong panel ay matatagpuan sa Window> Asset Export. Kapag bubukas ang panel, piliin ang asset na nais mong i-convert sa SVG o iba pang format at i-drag sa panel. Kapag inilabas mo ang mouse ang isang thumbnail ng asset ay idinagdag sa panel. Pangalanan ang asset. Panatilihin ang pag-drag ng mga bagay sa panel hanggang sa tapos ka na.
Piliin ang bawat item Sa lugar ng Mga setting ng pag-export, o piliin ang lahat ng ito sa pamamagitan ng pagpindot sa Shift key at pag-click sa bawat isa. Piliin ang iyong format - sa halimbawang ito, pinili ko ang SVG- at i-click ang pindutan ng I-export. Ang mga napiling item ay magiging output bilang mga file ng SVG sa parehong lokasyon bilang File ng Illustrator.
Kung saan ang buong proseso na ito ay makakakuha ng kahit neater ay hindi mo kailangang gamitin ang Asset Export panel. Kung na-click mo ang pindutan ng I-save para sa Mga Screen sa ibaba ng panel, bubukas ang dialog box.
Sa kabaligtaran, maaari mong i-click ang tab ng Asset sa panel ng I-save para sa Mga Screen upang ma-access ang panel ng Asset Export. Halimbawa, kung mayroon kang custom na icon sa isang artboard maaari mong buksan ang panel ng Export ng Asset sa kahon ng I-save para sa Screen dialog at i-drag ang item na iyon sa panel ng Asset Export.