Imazhe për celular nuk është gjithmonë ajo që duket
Është duke u bërë gjithnjë e më e zakonshme për grafikë, jo vetëm që puna e tyre të shfaqet në shtyp, por edhe në internet dhe pajisje të tilla si iPhone, iPad, pajisje Android dhe tableta Android. Në sipërfaqe, kjo mund të shihet si një "gjë e mirë", ashtu siç shfaqet mediat tona në zgjerimin e ekraneve dixhitale. Dobësitë janë numri i ekraneve dhe numri konfuze i zgjidhjeve të ekranit. Nuk është e pazakontë të dëgjosh pro të kalitur duke menduar për atë që ndodhi në ditët kur një imazh i TIFF me rezolucion 300 dpi në formatin CMYK ishte normë. Oh për ditët e mira të vjetra!
Ato ditë kanë mbaruar. Ne tani duhet të luftojmë me faktin se një imazh prej 200 deri në 200 mund të duket i shkëlqyeshëm në një pajisje dhe megjithatë shfaqet në madhësi të katërtëshe në një dhe tre tremujorë në një tjetër. E gjitha me të vërtetë zbret në "Gara për Armët e Rezolutës" që po zhvillohen nga prodhuesit e pajisjes pasi përpiqen të mbushin më shumë pixels në një ekran sesa konkurrentët e tyre.
Kjo na sjell në atë që ne do të quajmë "Rritja e Suffixes". Suffixes janë ato gjëra - @ 2x, @ 3x - mbërthyer në emrin e një imazhi. Ata në thelb, për shembull, vendosin imazhin e duhur në vendin e duhur në pajisjen e duhur. Pastaj ajo merr edhe më mirë.
Një pjesë e madhe e punës sonë përfshin punën me ikona dhe, me ngritjen e lëvizjes së Dizajnit të Sheshtë, këto gjëra krijohen në aplikacione të tilla vektoriale si Illustrator dhe Sketch. Problemi është që pajisjet thjesht nuk mund të bëjnë .ai ose .eps files. Ato duhet të konvertohen në Grafik Vector Scalable dhe, varësisht nga aplikacioni i përdorur për të krijuar ikonat, nuk mund të ketë as një opsion SVG.
Pastaj ajo merr edhe më mirë.
Ekziston një klasë e re e softuerëve - Aplikacionet për prototyping - që po bëhen pika e grumbullimit para se imazhet dhe ikonat tuaja të shuhen te pajisjet dhe ato kanë veçoritë e tyre.
Ky tutorial lëviz midis Photoshop dhe Sketch për grafikë dhe duke përdorur Adobe Experience Design për të demonstruar disa nga pikat e dhimbjes midis idenë tuaj dhe vendosjes eventuale. Le të fillojmë.
01 nga 05
Si të përgatitni imazhe për pajisjet mobile në Adobe Photoshop
Hapi i parë në këtë proces është njohja e pajisjes ose pajisjeve të synuara. Në këtë rast, do të gjesh iPhone 6 që ka një sipërfaqe të ekranit prej 375 piksish të gjera me 667 piksela të larta. Projektimi kërkon që imazhi të jetë gjerësia e ekranit.
Imazhi që do të përdoret u xhirua brenda Katedrales së Bernit të Bernës, Zvicër. Sapo të hapet imazhi në Photoshop, zgjidhni Image> Image Size për të kontrolluar përmasat e imazhit dhe zgjidhjen e saj. Natyrisht, një imazh që është 3156 x 2592 me Rezolucion prej 300 ppi dhe një madhësi prej 23.4 Mb thjesht nuk do të funksionojë.
Brenda kutisë së dialogut Madhësia e Imazhit, zvogëloni Rezolucionin në 100 ppi . Bëni këtë së pari sepse dimensionet e imazhit do të ndryshojnë gjithashtu. Me vendosjen e Rezolutës, ndryshoni gjerësinë në 375 piksel. Nëse kontrolloni të dhënat e Madhësisë së Imazhit do të vini re se imazhi është zvogëluar nga 23.4 Mb në një 338k më të lëvizshëm. Kliko OK për të pranuar ndryshimin dhe mbyllni kutinë e dialogut Madhësia e imazhit.
02 nga 05
Si të përdorni kutinë e dialogut "Export As ..." në Adobe Photoshop
Pasi imazhi të jetë gati për eksport, zgjidhni "Export> Export As ..." për të hapur kutinë e dialogut Export As.
Kjo Kutia e Dialogut është një shtesë e kohëve të fundit në Photoshop dhe zëvendëson kutinë e dialogut "Save For Web" që përdorën për vite me rradhë. Nëse ende keni nevojë, mund ta gjeni në Eksportin poshtë. Është, për arsye të dukshme, tani i njohur si "Export For Web (Legacy)". Nëse kjo është vizita juaj e parë në këtë dialog box, këtu është një turne të shkurtër:
- Madhësia: Kjo kolonë përcakton madhësinë e prodhimit të imazhit. Aspekti interesant i kësaj zone është se do të zgjerojë imazhin, por imazhi nuk do të shfaqet si "fuzzy" në pajisje për shkak të numrit të madh të pikseve në ekranin e pajisjes.
- 1X: Kliko për të mbajtur këtë dhe ju do të paraqitet me një numër të madhësive. Kategoritë 1x, 2x dhe 3x tradicionalisht janë të lidhur me pajisjet Hi Dpi nga Apple dhe së bashku me disa të tjerë do të përgatisin imazhe për pajisjet Android.
- Suffix: Kjo zgjedhje do të tregojë madhësinë tuaj por do të shfaqet si @ 2x ose madhësia zgjidhet. Ky prapashtesë do t'i shtohet emrit të imazhit.
- Shenja +: Klikoni këtë për të shtuar madhësi të ndryshme për dalje. Në këtë rast, kliko atë dy herë dhe zgjodhi 2x dhe 3x nga pop poshtë. Kjo do të mbulojë pothuajse çdo pajisje iOS.
- Trash mund: Kliko këtu dhe zgjedhja hiqet nga radhitja.
- Cilësimet e skedarëve: Zgjidhni formatin - jpg, png, gif ose svg - më së miri për imazhin. Nëse madhësia e skedarit është një shqetësim, gjithashtu mund të ulni cilësimet e Cilësisë.
- Madhësia e imazhit: ju mund të ndryshoni dimensionet fizike të imazhit.
- Madhësia e kanavacë: Ju mund të ndryshoni dimensionet fizike të kanavacës së imazhit.
- Metadata: Ju mund të shtoni të drejtën e autorit dhe informacionin tuaj të kontaktit në metadatat e imazhit.
Kur të përfundoni, klikoni butonin Eksport të gjitha. Ju do të pyeteni se ku doni të vendosni imazhet. Një zakon i mirë për të zhvilluar është të klikoni butonin e dosjes së re dhe të krijoni një dosje për të mbajtur imazhet e eksportuara. Kur klikoni Eksporto, do të shfaqet imazhet në dosje.
03 nga 05
Si të përgatitni imazhe për pajisjet mobile në skemën 3 Nga kodimi bohem
Sketch 3, një aplikacion i vetëm për Macintosh nga Bohemian Coding, po fiton me shpejtësi përparësi në mesin e UX dhe UI designers për shkak të fokusit të saj të fuqishëm në web dhe app design. Në të vërtetë Photoshop, në shumë mënyra, është në pozicionin e çuditshëm që duhet të luajë "të arrijë" me Sketch.
Për të përgatitur një imazh për celular në Sketch, zgjidhni imazhin në tabelën e tabelës dhe klikoni butonin Bëni eksportues në pjesën e poshtme të panelit të pronave . Kjo do të hapë kutinë e dialogut të Eksportit. Klikoni shenjën + për të shtuar versionet 2x dhe 3x dhe gjithashtu shtoni sufikset. Formatet në dispozicion janë PNG, JPG, TIF, PDF, EPS dhe SVG. Në këtë rast, zgjidhni JPG. Klikoni butonin Export dhe cakton ose krijoni një dosje për të mbajtur imazhet e ndryshme të eksportuara.
04 nga 05
Pse ju duhet të krijoni tre (ose më shumë) versionet e imazhit
Në shumë aspekte, tregu Mobile është "Perëndimi i egër" i rezolutave dhe një madhësi definitivisht nuk i përshtatet të gjitha. Në shembullin e mësipërm nga Adobe Design Experience, imazhi vendoset në dy tabelat e iPhone 6 dhe një tabelë të pajisjes Android. Vini re se si versioni 1x në të majtë duket të jetë gjysma e madhësisë. Kjo është saktësisht se si do të shfaqet imazhi në një iPhone 6 me ekranin e saj të retinës. Versioni 2x përshtatet në mënyrë të përkryer dhe versioni i Android shkon jashtë ekranit. Zgjedhja juaj është të shkallëzoni imazhin ose të eksportoni imazhin nga Photoshop në një madhësi të ndryshme.
05 e 05
Testoni herët, testoni shpesh, mos besoni asgje, mos u besoni askujt dhe sidomos vetes
Ajo që ju duhet të kuptoni është se ky është vetëm fillimi i procesit. Duke parë punën tënde në sa më shumë pajisje që mund të keni duhet të konsiderohet si një pjesë vitale e rrjedhës së punës. Ju gjithashtu duhet të jeni të vetëdijshëm se ky është vetëm hapi i parë në procesin e krijimit të aseteve grafike për një aplikacion ose projekte të uebit celular.
Përdorimi i aplikacioneve të prototipave është një mënyrë e shkëlqyer për të zbuluar pikat e dhimbjes, por këto të dhëna të njëjta do të duhet të dalin për t'u përdorur nga zhvilluesi. Në shumë raste, dimensionet fizike të aseteve, duke përfshirë ikonat, do të jenë fizikisht të mëdha dhe jo në formatin svg por png. Në shikim të parë, kjo mund të duket pak më e lartë, por mbani mend rregullin e artë të imazheve të shkallëzuara: është më mirë të zbritet poshtë se të rritet.
Linja e fundit është të punosh ngushtë me zhvilluesin tënd dhe të përdorësh softuerin e prototipeve si një mënyrë për të treguar synimin tënd të dizajnit. Përfundimisht, edhe këto të njëjtat pasuri duhet të jenë gati për produktin përfundimtar dhe zhvilluesi juaj ka një trajtim më të mirë për atë që ai ose ajo ka nevojë për ju.