Ito ay nagiging mas karaniwang para sa mga graphics pros hindi lamang lumitaw ang kanilang trabaho sa pag-print kundi pati na rin sa web at mga aparato tulad ng mga iPhone, iPad, Android device at Android tablet. Sa ibabaw, ito ay makikita bilang isang "mabuting bagay" habang lumilitaw ang media sa aming trabaho sa pagpapalawak sa mga digital na screen. Ang downside ay ang manipis na bilang ng mga screen at ang nakalilito bilang ng mga resolution ng screen. Hindi karaniwan na marinig ang napapanahong mga pros na nagtataka kung ano ang nangyari sa mga araw kung kailan ang isang 300 dpi na resolution ng TIFF na imahe sa CMYK format ay ang pamantayan. Oh para sa magagandang lumang araw!
Ang mga araw na iyon ay tapos na. Kailangan namin ngayon upang makipaglaban sa katotohanan na ang isang 200 sa pamamagitan ng 200 na imahe ay maaaring lumabas pagmultahin sa isang device at pa lumitaw quarter sukat sa isa at tatlong-kapat na sukat sa isa pa. Ang lahat ng ito ay talagang bumababa sa "Resolution Arms Race" na isinagawa ng mga tagagawa ng device habang sinisikap nilang maglagay ng higit pang mga pixel sa isang screen kaysa sa kanilang mga kakumpitensya.
Ito ay nagdudulot sa amin kung ano ang tawag namin sa "Ang Paglabas Ng Mga Suffix". Ang mga suffix ay ang mga bagay na iyon - @ 2x, @ 3x - na nakalagay sa pangalan ng isang imahe. Ang mga ito ay mahalagang, halimbawa, ilagay ang tamang imahe sa tamang lugar sa tamang aparato. Pagkatapos ay makakakuha ng mas mahusay.
Ang isang pulutong ng aming trabaho ay nagsasangkot ng pagtatrabaho sa mga icon at, sa pagtaas ng Flat disenyo ng paggalaw, ang mga bagay na ito ay nilikha sa ganoong vector drawing application bilang Illustrator at Sketch. Ang problema ay hindi maaaring mag-render ng mga device .ai o .eps file. Kailangan nilang ma-convert sa Scalable Vector Graphics at, depende sa application na ginamit upang lumikha ng mga icon, maaaring hindi na maging isang opsyon sa SVG.
Pagkatapos ay makakakuha ng mas mahusay.
Mayroong isang bagong uri ng software - Mga application ng prototyping - na nagiging punto ng pagpupulong bago ang iyong mga imahe at mga icon ay pinalabas sa mga device at mayroon din silang mga peculiarities.
Ang tutorial na ito ay gumagalaw sa pagitan ng Photoshop at Sketch para sa mga graphics at paggamit ng Adobe Experience Design upang ipakita ang ilang mga punto ng sakit sa pagitan ng iyong ideya at sa wakas paglawak. Magsimula na tayo.
01 ng 05Paano Maghanda ng mga Imahe para sa Mga Mobile Device sa Adobe Photoshop
Ang unang hakbang sa prosesong ito ay pag-alam sa iyong target device o device. Sa kasong ito, mai-target mo ang iPhone 6 na may isang screen na lugar na 375 na pixel ang lapad ng 667 pixel high. Ang disenyo ng mga tawag para sa imahe ay ang lapad ng screen.
Ang imahe na gagamitin ay kinunan sa loob ng Bern Minster Cathedral sa Bern, Switzerland. Sa sandaling ang imahe ay bubukas sa Photoshop, piliin ang Imahe> Sukat ng Imahe upang suriin ang mga sukat ng imahe at ang resolution nito. Malinaw, ang isang imahe na 3156 x 2592 na may Resolution ng 300 ppi at isang sukat ng file na 23.4 Mb ay hindi gagana.
Sa loob ng kahon ng dialogo ng Laki ng Imahe, bawasan ang Resolution sa 100 ppi. Gawin ito muna dahil ang mga sukat ng imahe ay magbabago rin. Sa hanay ng Resolusyon, baguhin ang lapad sa 375 Mga Pixel. Kung tinitingnan mo ang data ng Sukat ng Larawan mapapansin mo na ang imahe ay lumiit mula sa 23.4 Mb patungo sa isang mas mobile-friendly na 338k. I-click ang OK upang tanggapin ang pagbabago at isara ang kahon ng dialogo ng Laki ng Imahe.
Magpatuloy sa Pagbasa Sa ibaba
02 ng 05Paano Gamitin ang "I-export Bilang …" Dialog Box sa Adobe Photoshop
Kapag ang imahe ay handa na para i-export, piliin ang "I-export ang I-export Bilang …" upang buksan ang kahon ng Export As dialog.
Ang Dialog Box na ito ay isang kamakailang karagdagan sa Photoshop at pinapalitan ang dialog box na "I-save Para sa Web" na ginamit nila sa loob ng maraming taon. Kung kailangan mo pa ito, maaari mo itong makita sa I-export ang pop down. Ito ay, para sa mga malinaw na kadahilanan, na ngayon ay kilala bilang "Export For Web (Legacy)". Kung ito ang iyong unang pagbisita sa dialog box na ito, narito ang isang maikling paglilibot:
- Laki: Itinatakda ng hanay na ito ang laki ng output ng imahe. Ang kagiliw-giliw na aspeto ng lugar na ito ay palalawakin ang imahe ngunit ang imahe ay hindi lilitaw bilang "malabo" sa device dahil sa malaking bilang ng mga pixel sa screen ng device.
- 1x: I-click ang hold na ito at ikaw ay bibigyan ng isang bilang ng mga laki. Ang mga 1x, 2x at 3x na mga kategorya ay ayon sa kaugalian na nauugnay sa mga device ng Hi Dpi mula sa Apple at sila kasama ang ilang mga iba ay maghahanda ng mga imahe para sa mga Android device.
- Suffix: Ipapakita ng pagpipiliang ito ang iyong sukat ngunit ipapakita ito bilang @ 2x o ang laki ay napili. Ang suffix na ito ay idaragdag sa pangalan ng imahe.
- Ang + palatandaan: I-click ito upang magdagdag ng iba't ibang laki para sa output. Sa kasong ito, i-click ito nang dalawang beses at pumili ng 2x at 3x mula sa pop down. Saklaw nito ang halos anumang aparatong iOS.
- Ang Basura ay Maaaring: I-click ito at ang pagpipilian ay aalisin mula sa lineup.
- Mga Setting ng File: Piliin ang format - jpg, png, gif o svg - pinakamahusay na naaangkop sa larawan. Kung ang laki ng file ay isang alalahanin maaari mo ring bawasan ang mga setting ng Kalidad.
- Laki ng Larawan: maaari mong baguhin ang pisikal na sukat ng imahe.
- Laki ng Canvas: Maaari mong baguhin ang pisikal na sukat ng canvas ng imahe.
- Metadata: Maaari kang magdagdag ng copyright at ang iyong impormasyon sa pakikipag-ugnay sa metadata ng imahe.
Kapag tapos na, i-click ang pindutang I-export ang Lahat. Tatanungin ka kung saan mo gustong ilagay ang mga larawan. Ang isang mahusay na gawi na bumuo ay ang pag-click sa pindutan ng Bagong Folder at lumikha ng isang folder upang i-hold ang na-export na mga imahe. Kapag nag-click ka sa I-export, ipapakita ang mga imahe sa folder.
Magpatuloy sa Pagbasa Sa ibaba
03 ng 05Paano Maghanda ng Mga Imahe para sa Mga Mobile Device sa Sketch 3 Mula sa Bohemian Coding
Ang Sketch 3, isang Macintosh-only na application mula sa Bohemian Coding, ay mabilis na nakakakuha ng katanyagan sa mga designer ng UX at UI dahil sa matinding pokus nito sa disenyo ng web at app.Sa katunayan Photoshop, sa maraming mga paraan, ay sa kakaibang posisyon ng pagkakaroon upang i-play ang "catch up" na may Sketch.
Upang maghanda ng isang imahe para sa mobile sa Sketch, piliin ang imahe sa artboard at i-click ang pindutang Gawing I-export sa ibaba ng panel ng Properties. Bubuksan nito ang kahon ng dialog ng Export. I-click ang + sign upang idagdag ang mga bersyon ng 2x at 3x at idagdag din ang mga suffix. Ang mga format na magagamit ay PNG, JPG, TIF, PDF, EPS, at SVG. Sa kasong ito, piliin ang JPG. I-click ang pindutan ng I-export at i-target o lumikha ng isang folder upang i-hold ang iba't ibang mga imahe na nailipat.
04 ng 05Bakit Kailangan mong Lumikha ng Tatlong (o Higit Pa) Mga Bersyon ng Larawan
Sa maraming aspeto, ang Mobile market ay ang "Wild West" ng mga resolusyon at isang sukat ay tiyak na hindi magkasya sa lahat. Sa halimbawa sa itaas mula sa Adobe Karanasan sa Disenyo, ang imahe ay nakalagay sa 2 iPhone 6 artboards at isang Android device artboard. Pansinin kung paano lumilitaw na kalahating sukat ang 1x na bersyon sa kaliwa. Ito ay eksakto kung paano lumilitaw ang imahe sa isang iPhone 6 na may retina screen nito. Tugma ang perpektong 2x at ang bersyon ng Android ay tumatakbo sa labas ng screen. Ang iyong pagpipilian ay ang alinman sa scale ang imahe o i-export ang imahe sa labas ng Photoshop sa isang iba't ibang mga laki.
Magpatuloy sa Pagbasa Sa ibaba
05 ng 05Subukan ang Maaga, Subukan Madalas, Magtiwala Walang, Trust Walang One at Especially Yourself
Ang kailangan mong maunawaan ay ito lamang ang simula ng proseso. Pagtingin sa iyong trabaho sa maraming mga aparato na maaari mong ay itinuturing bilang isang mahalagang bahagi ng daloy ng trabaho. Kailangan mo ring magkaroon ng kamalayan na ito ay lamang ang unang hakbang sa proseso ng paglikha ng mga asset ng graphics para sa isang app o mga proyekto sa web ng mobile.
Ang paggamit ng mga prototyping application ay isang mahusay na paraan ng uncovering ang mga punto ng sakit ngunit ang parehong mga asset ay kailangang maging output para sa paggamit ng mga developer. Sa maraming mga kaso, ang mga pisikal na dimensyon ng mga asset, kabilang ang mga icon, ay pisikal na malaki at hindi sa svg ngunit png na format. Sa unang sulyap, ito ay maaaring tila sa isang bit sa itaas ngunit tandaan ang ginintuang panuntunan ng scaling mga larawan: ito ay mas mahusay na sa scale down kaysa scale up.
Ang ibaba ay upang gumana nang malapit sa iyong developer at gamitin ang prototyping software bilang isang paraan ng pagpapakita ng iyong layunin sa disenyo. Gayunpaman, sa kalaunan, ang mga parehong asset ay kailangang maging handa para sa pangwakas na produkto at mas mahusay na hawakan ng iyong developer ang kailangan niya kaysa sa iyo.
