Ang imaging alang sa mobile dili sa kanunay daw kini daw
Kini nahimong mas komon alang sa mga graphics pros nga dili lamang makita ang ilang trabaho sa pag-imprinta apan usab sa web ug mga gamit sama sa iPhones, iPads, Android devices ug tablet Android. Sa ibabaw niini, kini nakita nga usa ka "maayong butang" samtang ang media ang atong gipakita sa pagpalapad ngadto sa mga digital screens. Ang kakapoy mao ang daghang gidaghanon sa mga screens ug ang makalibog nga gidaghanon sa mga resolusyon sa screen. Dili kasagaran nga makadungog sa mga seasoned pros nga naghunahuna kung unsa ang nahitabo sa mga adlaw nga ang usa ka resolusyon nga 300 dpi nga resolusyon sa TIFF image sa CMYK format mao ang lagda. Alang sa maayong mga karaan nga mga adlaw!
Kadtong mga adlawa natapos na. Kita karon kinahanglan nga makiglantugi sa kamatuoran nga ang usa ka 200 sa 200 nga larawan mahimo nga makita sa usa ka himan ug bisan pa makita ang gidak-on sa sukod sa lain ug tulo-ka-bahin nga gidak-on sa lain pa. Kini ang tanan nga nahulog ngadto sa "Resolution Arms Race" nga gipasiugdahan sa mga tiggama sa device samtang sila naningkamot nga mas daghang pixel ngadto sa usa ka screen kaysa sa ilang mga kakompetensya.
Kini nagdala kanato ngadto sa unsay atong pagatawgon nga "Ang Pagtaas sa mga Suffix". Ang mga suffix mao kadtong mga butang - @ 2x, @ 3x - giputos sa ngalan sa usa ka imahe. Sama kanila, pananglitan, ibutang ang husto nga hulagway sa husto nga dapit sa husto nga himan. Unya kini mas maayo pa.
Daghan sa atong trabaho naglakip sa pagtrabaho sa mga icon ug, uban sa pagtaas sa Flat nga kalihukan sa paglihok, kini nga mga butang gimugna sa mga aplikasyon nga drowing sa vector sama sa Illustrator ug Sketch. Ang suliran mao ang mga himan nga dili makahatag sa .ai o .eps nga mga file. Kinahanglan sila nga makomberte sa Scalable Vector Graphics ug, depende sa aplikasyon nga gigamit sa pagmugna sa mga icon, wala'y mahimo nga bisan usa ka opsyon sa SVG.
Unya kini mas maayo pa.
Adunay usa ka bag-o nga klase sa software- Prototyping applications - nga nahimo nga asembliya nga punto sa wala pa ang imong mga imahen ug mga simbolo gipangputol sa mga himan ug aduna usab sila'y mga kalainan.
Kini nga panudlo nagalihok tali sa Photoshop ug Sketch alang sa mga graphic ug paggamit sa Adobe Experience Design aron sa pagpakita sa pipila ka mga punto sa kasakit tali sa imong ideya ug sa katapusan nga pagdeploy. Magsugod na ta.
01 sa 05
Unsaon Pag-andam sa mga Imahe alang sa Mga Mobile Device sa Adobe Photoshop
Ang unang lakang sa niini nga proseso mao ang pagkahibalo sa imong target device o mga himan. Sa kini nga kaso, imong target ang iPhone 6 nga may screen area nga 375 ka pixel ang gilapdon nga 667 ka pixel ang gitas-on. Ang disenyo nanawagan nga ang hulagway mao ang gilapdon sa screen.
Ang hulagway nga gigamit gipusil sulod sa Bern Minster Cathedral sa Bern, Switzerland. Sa higayon nga mabuksan ang imahe sa Photoshop, pilia ang Image> Image Size aron susihon ang mga sukod sa imahe ug ang resolusyon niini. Dayag, ang usa ka imahe nga 3156 x 2592 nga adunay Resolution nga 300 ppi ug ang usa ka file nga 23.4 Mb nga yano dili mahimo.
Sa sulod sa kahon sa dialogo sa Image Size, pagpakunhod sa Resolution sa 100 ka ppi . Buhata kini una tungod kay ang mga sukod sa imahe mausab usab. Uban sa Resolution set, usba ang gilapdon ngadto sa 375 Pixels. Kon imong susihon ang datos sa Image Size mahibal-an nimo nga ang imahe nahulog gikan sa 23.4 Mb ngadto sa usa ka mas mobile-friendly nga 338k. I-klik ang OK aron dawaton ang pagbag-o ug isira ang kahon sa Imahe sa Imahe.
02 sa 05
Unsaon Paggamit ang "Export As ..." Dialogue Box sa Adobe Photoshop
Sa higayon nga ang imahe andam na sa pag-eksport, pilia ang "Export> Export As ..." aron maablihan ang kahon sa dialogo sa Export As.
Kining Dialogue Box usa ka bag-o nga dugang sa Photoshop ug mipuli sa kahon sa "Save For Web" nga ilang gigamit sulod sa mga katuigan. Kung gikinahanglan pa nimo kini, mahimo nimo kini makita sa Export pop down. Kini, alang sa klaro nga mga rason, karon nailhan nga "Export For Web (Legacy)". Kung kini mao ang imong una nga pagbisita sa kini nga kahon sa dialogo, ania ang usa ka mubo nga paglibot:
- Size: Kini nga kolum nagtakda sa gidak-on sa output sa imahe. Ang makapaikag nga aspeto sa kini nga dapit mao nga kini mopalapad sa imahe apan ang imahe dili makita nga "fuzzy" sa device tungod sa dako nga gidaghanon sa mga pixel sa screen sa device.
- 1X: I-klik ang hugpong niini ug ipresentar ka sa daghang gidak-on. Ang mga 1x, 2x ug 3x nga mga kategoriya sa tradisyonal nga pagkalangkit sa Hi Dpi devices gikan sa Apple ug sila uban sa pipila ka mga uban nga mag-andam og mga hulagway alang sa Android devices.
- Suffix: Kini nga pagpili magpakita sa imong gidak-on apan kini gipakita isip @ 2x o ang gidak-on napili. Kini nga suffix idugang sa ngalan sa imahe.
- Ang + nga ilhanan: I-klik kini aron makadugang sa lain-laing mga gidak-on alang sa output. Sa kini nga kaso, i-klik kini kaduha ug pilia ang 2x ug 3x gikan sa pop down. Kini maglakip halos sa bisan unsang iOS device.
- Ang Basura Mahimo: I-klik kini ug ang pagpili mapapas gikan sa linya.
- Mga Setting sa File: Pilia ang pormat - jpg, png, gif o svg - labing angay sa hulagway. Kung ang gidak-on sa file usa ka kabalaka nga mahimo usab nimo pakunhuran ang kalidad nga mga setting.
- Gidak-on sa Imahe: mahimo nimong usbon ang pisikal nga mga sukod sa hulagway.
- Gidak-on sa Canvas: Mahimo nimo usbon ang pisikal nga mga sukod sa canvas canvas.
- Metadata: Mahimo nimong idugang ang copyright ug imong impormasyon sa kontak sa metadata sa hulagway.
Kung nahuman, i-klik ang Export All button. Mangutana ka kung asa nimo ibutang ang mga imahen. Ang usa ka maayo nga pamatasan sa pagpalambo mao ang pag-klik sa button sa New Folder ug paghimo og usa ka folder aron paghupot sa mga na-eksport nga mga larawan. Sa diha nga imong i-klik ang Pag-eksport, imong ipakita ang mga hulagway sa folder.
03 sa 05
Unsaon Pag-andam sa mga Imahe alang sa Mga Mobile Device sa Sketch 3 Gikan sa Bohemian Coding
Ang Sketch 3, usa ka aplikasyon sa Macintosh nga gikan sa Bohemian Coding, paspas nga nakabaton og dungog taliwala sa UX ug mga tigdesinyo sa UI tungod sa iyang dakong pagtagad sa web ug app design. Sa pagkatinuod ang Photoshop, sa daghan nga mga paagi, anaa sa talagsaon nga posisyon nga kinahanglan nga magdula "gamiton" uban ang Sketch.
Aron maandam ang usa ka imahen alang sa mobile sa Sketch, pilia ang hulagway sa artboard ug i-klik ang Make Exportable button sa ubos sa Properties panel . Kini magbukas sa Export dialog box. I-klik ang + nga ilhanan aron idugang ang 2x ug 3x nga mga bersyon ug usab idugang ang suffixes. Ang mga format nga magamit mao ang PNG, JPG, TIF, PDF, EPS, ug SVG. Sa kini nga kaso, pagpili JPG. I-klik ang Export button ug i-target o paghimo og usa ka folder aron paghupot sa lainlaing mga litrato nga gieksport.
04 sa 05
Nganong Kinahanglan Ka nga Makahimo og Tulo (o Dugang) Mga Bersyon sa Imahe
Sa daghang bahin, ang merkado sa Mobile mao ang "Wild West" sa mga resolusyon ug usa ka gidak-on siguradong dili ang tanan. Sa pananglitan sa ibabaw gikan sa Adobe Experience Design, ang imahe gibutang sa 2 iPhone 6 artboards ug usa ka Android device artboard. Matikdi kon giunsa nga ang 1x nga bersyon sa wala makita nga katunga. Mao kini ang eksakto kung unsa ang makita sa imahe sa usa ka iPhone 6 nga adunay retina screen. Ang 2x nga bersyon hingpit nga mohaum ug ang bersyon sa Android midagan sa screen. Ang imong pagpili mao ang pag-scale sa imahe o pag-eksport sa imahe gikan sa Photoshop sa lainlaing gidak-on.
05 sa 05
Pagsulay og sayo, sulayi sa kasagaran, ayaw pagsalig, ayaw pagsalig bisan kinsa ug ilabi na ang imong kaugalingon
Ang kinahanglan nimong masabtan mao kini ang sinugdanan sa proseso. Pagtan-aw sa imong trabaho sa daghang mga himan kutob sa imong mahimo nga isipon nga usa ka importante nga piraso sa workflow. Kinahanglan mo usab nga mahibal-an nga kini mao lamang ang unang lakang sa proseso sa paghimo og mga asset sa graphic alang sa usa ka app o mobile web nga mga proyekto.
Ang paggamit sa mga aplikasyon sa prototyping usa ka maayong paagi sa pagbutyag sa mga punto sa kasakit apan kini nga mga kabtangan kinahanglan nga gamiton sa paggamit sa developer. Sa daghang mga kaso, ang pisikal nga mga sukod sa mga kabtangan, lakip ang mga imahen, dako nga pisikal ug dili sa svg apan png format. Sa una nga pagtan-aw, morag kini usa ka gamay sa ibabaw apan hinumdumi ang bulawan nga paghulagway sa mga hulagway sa panukiduki: kini mas maayo nga ipaubos kaysa magtaas.
Ang hinungdan mao ang pagtrabaho pag-ayo sa imong developer ug sa paggamit sa prototyping software isip usa ka paagi sa pagpakita sa imong plano sa plano. Sa ngadto-ngadto, sa katapusan, ang mga sama nga mga kabtangan kinahanglan nga andam alang sa katapusan nga produkto ug ang imong developer adunay mas maayo nga pagdumala sa unsay gikinahanglan niya kanimo.