Nëse ka një aspekt të punës me Illustrator-in, që unë me të vërtetë nuk e pëlqej, është konvertimi i artit të linjës në svg imazhe për celular ose në internet. Duke përdorur Export> Eksport si menu dhe, për të qenë brutalisht i sinqertë, funksioni Save For Web - Export> Save For Web - nuk ishte tamam i lehtë për t'u përdorur.
Konvertimi i një vizioni në formatin .svg hapi një kuti të dialogut mjaft frikësues që, për njerëzit e rinj në këtë fluks të punës, ofroi një sërë mundësish konfuze për të mos përmendur faktin se kishte një numër formatesh .vg dhe vetëm një prej tyre ishte e duhur format. Sapo të mësohesh me këtë fluks të punës, nuk ishte punë e madhe, por kurba e të mësuarit ishte e pjerrët.
Kjo ka ndryshuar të gjitha me veçoritë e reja të eksportit për eksportet - Export> Eksporto për ekranet - dhe paneli i eksportit të aseteve të cilat u prezantuan në Illustrator CC 2015 në qershor 2016. Në këtë "Si" do t'ju tregoj se si t'i përdorni të dyja features. Le të fillojmë.
01 nga 04
Si të qaseni në eksport për ekranet në Adobe Illustrator CC 2015
Duke qenë një përdorues Illustrator nga Illustrator 88 Unë mendoj se ju mund të kuptoni ngurrimin tim për të konsideruar Illustrator si një mjet serioz për dizajnin e ndërfaqeve dhe projekteve të internetit dhe të lëvizshme.
Kur u prezantuan tabelat në versionin CS4 2008, mendova se ishte një shtesë interesante për aplikacionin. Kur e pashë për herë të parë funksionin "Save For Web" në Illustrator, përsëri, e gjeta interesante, por gjeta të njëjtën veçori në Adobe Fireworks ishte më shumë në linjë me grafikë web se Illustrator.
Me ardhjen e një qasjeje të parë për të dizajnuar celularin dhe rritjen e mbështetjes në imazhet SVG për projekte të lëvizshme, Illustrator ishte vegla ime e "shkoj në" për SVG dhe u bë një ndalesë e rëndësishme në rrjedhën e punës të Dizajnit UI.
Megjithatë, nëse unë kam nevojë për të eksportuar asetet për celular, Sketch 3 dhe Photoshop CC 2015 janë mjetet e mia të zgjedhjes. Illustrator hyri në listë në qershor 2016 me të vërtetë të mrekullueshëm Export për ekranet menu.
Në shembullin e mësipërm, kam dy ekrane të destinuara për një iPhone dhe ata janë në Artboards të veçantë të quajtur "Home" dhe "Places". Për t'i nxjerrë ato, përzgjenda Skedar> Eksport> Eksporto për Ekrane. Hapet kutia e dialogut Eksporti për ekranet.
02 nga 04
Si të përdorni Kutia e dialogut për Eksport për Ekrane
Kur shfaqet kutia e dialogut, klikoni mbi secilën tabelë të tabelave që do të përzgjidhni. Ajo pastaj do të zhvillojë një shenjë kontrolli. Gjithashtu, mund të klikoni dy herë mbi një emër të artboard për ta zgjedhur atë dhe për ta ndryshuar atë. Kjo është një gjë e mirë për të dini nëse artboards tuaj janë quajtur "Artboard 1" dhe "Artboard 2" e cila, sinqerisht, nuk ju tregon asgjë.
Ju keni tre zgjedhje në zonën Zgjidh:
- Të gjitha: Kjo zgjedhje eksporton çdo artboard në dokument si një skedar të veçantë.
- Gama: Vendosni një gamë tabelash për t'u eksportuar. Kjo është veçanërisht e dobishme për projektet me disa duzina artboards.
- Dokumenti i plotë: Zgjidhni këtë dhe të gjitha tabelat do të rrafshohen në një dokument të vetëm.
Zona e Eksportit ju lejon të zgjidhni dosjen e destinacionit për daljen. Dosja e parazgjedhur do të jetë vendndodhja aktuale e dokumentit Illustrator.
Formatet janë vendi ku ndodh magjia. Ju do të vini re se ka tre ikona - iOS. Android dhe një Gear. Dy të parët janë vetë-shpjegues. Ikona Gear hap Format Settings që ju lejon të kontrolloni se si secili nga formatet e skedarëve në listë do të optimizohet. Këto cilësime janë "format specifike" dhe sapo të keni bërë ndryshimet tuaja, klikoni butonin Save Settings dhe ato ndryshime do të aplikohen në formatet që do të dalin.
Pasi të zgjidhni iOS ose Android, lista do të ndryshojë për të përfshirë të gjitha rezolutat në dispozicion në atë platformë. Lista e iOS do të tregojë faktorët e shkallëzimit për ekranin Retina dhe përzgjedhja e Android do të ketë peshore që shkojnë nga .75x deri në 4x e cila vendos praktikisht çdo pajisje Android atje.
Nëse ka një format që tregon se doni të hiqni, klikoni "x". Nëse ka një që dëshironi të shtoni klikoni butonin + Shto shkallëzimin.
Kur të përfundoni, klikoni butonin Export Artboard dhe një shirit i përparimit do t'ju tregojë kur përfundon procesi.
03 nga 04
Përdorimi i Eksportit për skedarët e ekraneve nga Adobe Illustrator CC 2015.
Kur të shikoni rezultatet e Eksportit për ekranet, do të zbuloni se Illustrator ka nxjerrë një version të rrafshët të çdo ekrani. Në sipërfaqe, kjo mund të duket paksa e dobët sidomos nëse prisni që Illustrator të ketë eksportuar të gjitha copat dhe copat si imazhe.
Nëse ktheheni prapa dhe mendoni për këtë për një moment, kjo është pikërisht ajo që ju nevojitet, sepse ju mund ta përdorni këtë produkt në një aplikim prototyping siç është Adobe Experience Design , Principleformac, Atomic.io , UXPin ose aplikacion tjetër prototyping
Në këtë shembull, po përdor Adobe Experience Design (XD) për të krijuar një klikim të thjeshtë. Hapi i parë në këtë proces ishte që të zgjidhni madhësinë e iPhone 6 që përputhet me dimensionet e Illustrator Interface
Kur ndërfaqja u hap, unë përzgjodha veglën Artboard dhe klikova një herë në kartelë për të shtuar një tabelë tjetër. Më pas i emërova "Home" dhe "Places", përzgjodhën secilën tabelë artistike dhe importuan imazhin png nga Illustrator në tabelën e tabelave.
Për të krijuar "hotspots" për click-thru, unë tërhoqi një drejtkëndësh mbi butonin Explore në ekranin kryesor dhe vendosur vlerat e saj mbushur dhe kufitare në asnjë duke deselecturing ato prona në panelin Properties. Unë bëra të njëjtën gjë me butonin Back në faqen e Places.
Për të shtuar Interaktivitetin, unë zgjodha modalitetin Prototip dhe më pas klikova në "hotspot". Unë pastaj tërhoqa shigjetën - të quajtur një tel - në faqen e Vendeve dhe vendosja e objektivit të tranzicionit në Vendet, lëvizja për Push Left, lehtësimi për të lehtësuar dhe kohëzgjatja e tranzicionit në .6 sekonda.
Kam përsëritur këtë hap me pikën e nxehtë në faqen Places. E vetmja ndryshim ishte se Tranzicioni ishte vendosur të drejtonte të drejtën. Kur klikova butonin Play, testova prototipin tim.
04 nga 04
Si të përdorni panelin e aktiveve të eksportit në Adobe Illustrator CC 2015
Së bashku me menunë Ruaj për ekranet Adobe gjithashtu shtoi një panel të ri - Eksportet e Aseteve - që hoqën një pikë të madhe dhimbjeje në rrjedhën e punës të Dizajnit UI.
Pika e dhimbjes ishte ikona. Illustrator është një aplikim i shkëlqyer i vizatimit të vektorit, por për të dalë, le të themi 10 ikona, në një faqe me 40 ose 50 prej tyre kërkohet që secila të ruhet si një imazh SVG. Kjo në mënyrë të pashmangshme kërkonte më shumë kohë se zakonisht falë udhëtimeve të njëpasnjëshme në panelin SVG. Kjo pikë dhimbjeje tani është një gjë e së kaluarës.
Ky panel i ri mund të gjendet në dritaren> Eksportet e Aseteve. Kur të hapet paneli, zgjidhni aktivin që dëshironi të konvertojë në SVG ose format tjetër dhe tërhiqeni në panel. Kur lëshoni miun një tablo të asetit shtohet në panel. Emëroni pasurinë. Mbani zvarritje të objekteve në panel derisa të përfundoni.
Përzgjidhni çdo element Në fushën e Cilësimeve të Eksportit ose përzgjidhni të gjitha duke mbajtur tastin Shift dhe duke klikuar mbi secilën prej tyre. Zgjidhni formatin tuaj - në këtë shembull, unë zgjodha SVG- dhe kliko butonin Export. Artikujt e zgjedhur do të dalin si skeda SVG në të njëjtin vend si skedari Illustrator.
Aty ku i gjithë ky proces merr edhe më shumë, nuk është e nevojshme të përdorësh panelin e Eksportit të Aseteve. Nëse klikoni butonin Ruaj për ekranet në pjesën e poshtme të panelit, hapet kutia e dialogut.
Anasjelltas, ju mund të klikoni butonin Asetet në panelin Ruaj për ekranet për të hyrë në panelin e Eksportit të Aseteve. Për shembull, nëse keni një ikonë të personalizuar në një tabelë të artit, mund të hapni panelin e Eksportit të Aseteve në kutinë e dialogut Ruaj për Ekran dhe ta zhvendosni atë në Panelin e Eksportit të Aseteve.