Paggamit sa Pakigparang sa Paglarawan sa mga Pakigpulong sa Illustrator CC 2015

Kon adunay usa ka aspeto sa pagtrabaho sa Illustrator nga dili gayud ako makatagamtam niini mao ang pag-usab sa linya sa art ngadto sa mga imahe sa svg alang sa mobile o web. Paggamit sa Export> Export As menu ug, aron mahimong brutally honest, ang Save For Web feature - Export> Save For Web - dili sayon ​​nga gamiton.

Ang pag-usab sa usa ka drowing sa format sa .vg nagbukas sa usa ka makahahadlok nga kahon sa kahon nga, alang sa mga tawo nga bag-o niini nga workflow, naghatag og nakalibog nga lainlaing mga kapilian nga wala maghisgot sa kamatuoran nga adunay daghang mga format sa .vg ug usa lamang niini ang angay format. Sa higayon nga naanad ka sa kini nga workflow dili kini dako, apan ang kurba sa pagkat-on nahimutang sa taas.

Ang tanan nausab sa bag-o nga Export For Screens feature - Export> Export for Screens - ug ang Asset Export panel nga gipaila sa Illustrator CC 2015 sa Hunyo 2016. Niini nga "Unsaon" Ipakita ko kanimo kung unsaon paggamit mga bahin. Magsugod na ta.

01 sa 04

Unsaon Pag-access sa Export For Screens Sa Adobe Illustrator CC 2015

Output artboards gamit ang Export for Screens dialog box.

Ingon nga usa ka gumagamit sa Illustrator sukad sa Illustrator 88 Sa akong hunahuna mahimo nimong masabtan ang akong pagduha-duha sa pagkonsiderar sa Illustrator isip usa ka seryoso nga himan sa pagplano alang sa web ug mga mobile interface ug mga proyekto.

Sa diha nga ang mga artboards gipaila sa bersyon sa CS4 2008, naghunahuna ako nga usa ka makapaikag nga pagdugang sa aplikasyon. Sa una nakong nakita ang wala'y hunong nga feature sa Save For Web sa Illustrator, pag-usab, nakit-an nako kini nga makapaikag apan nakit-an nako nga ang susama nga feature sa Adobe Fireworks mas nalangkit sa web graphics kay sa Illustrator.

Sa pag-uswag sa usa ka mobile-unang pamaagi sa pagdisenyo ug sa nagkataas nga pagsalig sa SVG nga mga hulagway alang sa mga mobile nga proyekto, ang Illustrator mao ang akong "go to" tool alang sa SVG ug nahimo nga usa ka mahinungdanon nga paghunong sa UI Design workflow.

Bisan pa, kung kinahanglan kong i-export ang mga kabtangan alang sa mobile, ang Sketch 3 ug Photoshop CC 2015 mao ang akong mga gamit sa pagpili. Ang ilustrator misulod sa listahan sa Hunyo 2016 nga adunay maayo kaayong Export for Screens menu.

Sa pananglitan sa ibabaw, duna koy duha ka screens nga gitagana alang sa usa ka iPhone ug kini anaa sa lain nga Artboards nga ginganlan "Home" ug "Places". Aron makuha kini, gipili ko ang File> Export> Export for Screens. Ang Export for Screens dialog box maabli.

02 sa 04

Unsaon Paggamit Ang Pag-eksport alang sa Dialog Box

Output artboards alang sa iOS ug Android pinaagi sa paghimo sa pipila ka yano nga mga pagpili sa Save for Screens dialog box.

Sa diha nga ang dialog box makita, i-klik ang matag artboard nga pilion. Dayon kini magpahigayon og marka sa tseke. Mahimo usab nimo i-double-click ang pangalan sa art sa pagpili niini ug usba kini. Maayo nga butang nga mahibal-an kung ang imong artboards ginganlan nga "Artboard 1" ug "Artboard 2" nga, sa pagkatinuod, walay gisulti kanimo.

Adunay tulo ka mga pagpili sa Select area:

Ang Export To area makahimo nimo pagpili sa destination folder alang sa output. Ang default folder mao ang kasamtangan nga nahimutangan sa dokumento sa Illustrator.

Ang mga porma diin ang "salamangka mahitabo. Mamatikdan nimo nga adunay tulo ka mga icon-iOS. Android ug Gear. Ang una nga duha ka mga kaugalingon nga pagpatin-aw. Ang Gear icon nagbukas sa Format Settings nga nagtugot kanimo sa pagpugong sa unsa nga paagi ang matag format sa mga file sa listahan ma-optimize. Kini nga mga setting mao ang "format nga piho" ug sa higayon nga imong gihimo ang imong mga pagbag-o, i-klik ang button sa Save Settings ug kini nga mga kausaban magamit sa mga format nga mahimong output.

Sa higayon nga imong pilion ang iOS o Android ang listahan mausab aron maapil ang tanan nga mga resolusyon nga anaa sa plataporma. Ang iOS listing magpakita sa scaling factors alang sa Retina display ug ang Android selection adunay mga timbangan gikan sa .75x ngadto sa 4x nga masangkad halos tanan nga Android device didto.

Kung adunay usa ka format nga nagpakita nga gusto nimong kuhaon, i-klik ang "x". Kon adunay usa nga gusto nimo idugang nga i-klik ang button sa Add Scale.

Kung nahuman, i-klik ang Export Artboard button ug usa ka progreso nga bar ang mopakita kanimo kon ang proseso nahuman na.

03 of 04

Paggamit sa Ang Ang Pag-eksport Para sa mga Screens Files gikan sa Adobe Illustrator CC 2015.

Ang mga file gikan sa Illustrator daling madugang sa bisan unsang gidaghanon sa mga application nga prototyping sama sa Adobe Experience Design.

Kon imong susihon ang mga resulta sa Export for Screens, madiskobrehan nimo nga ang Illustrator nagpagawas sa usa ka flat nga bersyon sa matag screen. Sa nawong, kini ingon og usa ka gamay nga huyang ilabi na kung ikaw nagpaabut sa Illustrator nga maka-eksport sa tanan nga mga piraso ug piraso isip mga hulagway.

Kung ikaw mobalik ug hunahunaon kini sa makadiyot, kini gayud ang tukma kung unsa ang imong gikinahanglan tungod kay mahimo nimo kining gamiton sa usa ka prototyping nga aplikasyon sama sa Adobe Experience Design , Principleformac, Atomic.io , UXPin o uban pang prototyping application

Sa niini nga pananglitan, ako naggamit sa Adobe Experience Design (XD) aron sa paghimo sa usa ka simple nga click-thru. Ang unang lakang sa proseso mao ang pagpili sa iPhone 6 nga gidak-on nga nahiangay sa mga sukod sa Illustrator Interface

Sa dihang gibuksan ang interface, gipili nako ang Artboard nga himan ug na-klik kas-a sa pasteboard aron makadugang sa artboard. Ginganlan dayon nako sila og "Panimalay" ug "Mga Dapit", gipili ang matag arte ug gipalit ang imahe sa png gikan sa Illustrator ngadto sa artboard.

Aron sa paghimo sa mga "hotspots" alang sa click-thru, gikuha ko ang usa ka rektanggulo sa button sa Explore sa home screen ug gibutang ang mga porma sa pagpuno ug utlanan niini ngadto sa wala sa pagpili sa mga kabtangan sa Properties panel. Gihimo nako ang sama nga butang sa Back button sa mga pahina sa Mga Lugar.

Aron madugangan ang Interactivity, gipili nako ang Prototype mode ug dayon i-klik ang "hotspot". Dayon akong giguyod ang pana - nga gitawag og wire - ngadto sa pahina sa Mga Dapit ug gipahimutang ang target sa Transition sa Mga Dapit, ang motion to Push Left, ang pagwagtang sa kasayon ​​ug ang gidugayon sa pagbalhin sa .6 seconds.

Akong gisubli kini nga lakang uban ang hotspot sa mga panid sa Mga Lugar. Ang bugtong kalainan mao ang Transition nga gitakda nga Push Right. Sa dihang akong gikuptan ang Play button gisulayan nako ang akong prototype.

04 sa 04

Unsaon Paggamit Ang Export Asset Panel Sa Adobe Illustrator CC 2015

Ang custom nga mga imahen mahimong ma-export ingon nga SVG file gamit ang panel sa Asset Export.

Uban sa Save for Screens menu ang Adobe usab nagdugang sa usa ka bag-ong panel - Asset Export - nga nakuha ang usa ka dako nga sakit nga punto sa UI Design workflow.

Ang punto sa kasakit mao ang mga imahen. Ang Illustrator usa ka dako nga aplikasyon sa drowing sa vector apan sa pag-output, ipaingon ang 10 ka mga icon, sa usa ka pahina nga adunay 40 o 50 niini gikinahanglan nga ang matag usa maluwas isip usa ka SVG image. Kini dili kalikayan nga nagkinahanglan og dugang nga panahon kay sa naandan salamat sa sunod-sunod nga mga pagbiyahe ngadto sa SVG panel. Kini nga punto sa kasakit karon usa ka butang sa nangagi.

Kini nga bag-ong panel makita sa Window> Asset Export. Sa diha nga ang panel mag-abli, pilia ang asset nga gusto mong i-convert ngadto sa SVG o uban pang format ug i-drag ngadto sa panel. Kon imong buhian ang mouse usa ka thumbnail sa asset ang idugang sa panel. Ngalan ang kabtangan. Padayon ang pagguyod sa mga butang ngadto sa panel hangtud nga mahuman ka.

Pilia ang matag butang Sa Export settings area, o pilia kining tanan pinaagi sa pagpugong sa Shift key ug pag-klik sa matag usa. Pilia ang imong pormat - niining pananglitan, gipili nako ang SVG- ug i-klik ang Export button. Ang gipili nga mga butang ipadala ingon nga mga SVG file sa samang lokasyon sa Illustrator file.

Diin kining tibuok nga proseso nakuha bisan pa nga neater nga dili kinahanglan nga gamiton ang Asset Export panel. Kon imong i-klik ang button sa Save for Screens sa ubos sa panel ang dialog box moabli.

Sa kasukwahi, mahimo nimo i-klik ang tab sa Assets sa panel sa Save for Screens aron maka access sa panel sa Asset Export. Pananglitan, kon ikaw adunay usa ka custom icon sa usa ka artboard mahimo ka magbukas sa Asset Export panel sa kahon sa dialog sa Save for Screen ug i-drag ang item ngadto sa Asset Export panel.