Nyiapkeun Gambar pikeun Alat Mobile

Imaging keur mobile teu salawasna naon sigana

Hal ieu jadi beuki umum pikeun pro grafik pikeun henteu ngan boga karya maranéhanana muncul dina print tapi ogé dina web jeung alat kayaning iPhones, iPads, alat Android sarta tablet Android. Dina beungeut cai, ieu bisa ditempo salaku "hal anu alus" salaku media karya urang mucunghul dina expands kana layar digital. downside nyaeta jumlah sheer tina layar tur jumlah ngabingungkeun of resolusi layar. Teu ilahar ngadangu pro seasoned wondering naon kajadian ka poé lamun 300 dpi resolusi gambar TIFF dina CMYK format éta pakewuh. Oh keur poé heubeul alus!

Maranéhanana poé anu leuwih. Urang ayeuna kudu contend jeung kanyataan yén hiji 200 ku 200 gambar bisa muncul rupa on hiji alat na acan muncul ukuran saparapat kana sejen tur ukuranana tilu-saparapat on acan sejen. Ieu kabeh bener asalna handap ka "Resolusi leungeun Balap" keur waged ku pabrik alat sabab coba mun macet deui piksel kana layar ti pesaing maranéhanana.

Ieu brings kami naon gé kami nelepon "kebangkitan The Suffixes". The suffixes anu eta hal - @ 2x, @ 3x - tacked on kana nami hiji gambar. Aranjeunna dasarna, contona, nempatkeun gambar katuhu dina tempat katuhu dina alat katuhu. Lajeng nya meunang malah hadé.

A loba karya urang ngalibatkeun gawé bareng ikon na, kalayan kebangkitan gerakan desain Datar, hal ieu téh dijieun dina aplikasi vector gambar kayaning Illustrator jeung sketsa. masalahna nyaeta alat saukur moal tiasa ngarobah .ai atanapi .eps payel. Éta kudu dirobah jadi scalable Véktor grafik na, gumantung kana aplikasi dipaké pikeun nyieun ikon, aya bisa henteu malah jadi hiji pilihan SVG.

Lajeng nya meunang malah hadé.

Aya kelas anyar aplikasi Prototyping software- - nu jadi titik assembly saméméh Gambar anjeun sarta ikon anu shoved kaluar ka alat jeung maranéhna mibanda peculiarities maranéhna ogé.

Tutorial ieu ngalir antara Photoshop jeung sketsa keur grafik na ngagunakeun Adobe Garapan Desain mun demonstrate sababaraha sahiji titik nyeri antara gagasan anjeun sarta ahirna deployment. Hayu urang ngamimitian.

01 of 05

Kumaha Nyiapkeun Gambar pikeun alat nu bagerak dina Adobe Photoshop

Ngarobah resolusi nu sateuacan Anjeun ngarobah diménsi nalika maké kotak dialog Ukuran Gambar. Kahadean Tom Héjo

Léngkah munggaran dina prosés ieu nyaho alat target Anjeun atawa alat. Dina hal ieu, anjeun bakal jadi targeting iPhone 6 anu boga wewengkon layar 375 piksel lega ku 667 piksel tinggi. desain nyaéta panggero pikeun gambar nu janten lebar layar.

gambar ka dipake ditémbak di jero katedral Bern Minster di Bern, Swiss. Sakali gambar ngabuka di Photoshop, pilih Gambar> Ukuran Gambar mariksa diménsi gambar na resolusi na. Jelas, hiji gambar nu geus 3156 x 2592 kalawan resolusi 300 PPI sarta ukuranana file ngeunaan 23,4 Mb saukur moal jalan.

Jero kotak dialog Ukuran Gambar, ngurangan Resolusi ka 100 PPI. Ngalakukeun ieu mimitina lantaran diménsi gambar ogé bakal robah. Kalawan Resolusi nu set, ngarobah lebar mun 375 piksel. Lamun pariksa Ukuran Gambar data anjeun bakal aya bewara gambar geus shrunk ti 23,4 Mb ka 338k langkung-mobile friendly. Klik OKE pikeun nampa robah jeung tutup kotak dialog Ukuran Gambar.

02 of 05

Kumaha Pake "Ékspor Salaku ..." Dialog Box dina Adobe Photoshop

The Ékspor anyar Salaku kotak dialog ngagantikeun nu Simpen Pikeun fitur Web di Photoshop. Kahadean Tom Héjo

Sakali gambar geus siap pikeun ékspor, pilih "Ékspor> Ékspor Salaku ..." pikeun buka Ékspor Salaku kotak dialog.

Box Dialog Ieu tambahan panganyarna pikeun Photoshop jeung ngagantikeun kotak dialog "Simpen Pikeun Web" aranjeunna dipaké pikeun taun. Lamun masih peryogi eta, anjeun tiasa manggihan eta di Ékspor pop handap. Éta, alesan atra, ayeuna katelah "Ékspor Pikeun Web (warisan)". Lamun ieu téh sadérék mimiti anjeun ka kotak dialog ieu, di dieu mangrupa wisata ringkes:

Nalika rengse, klik Ékspor Sadaya tombol. Anjeun bakal dipénta dimana rék nempatkeun gambar. Hiji kabiasaan alus pikeun ngembangkeun anu keur klik tombol Polder Anyar sarta nyieun hiji folder nyekel Gambar diékspor. Lamun anjeun klik Ékspor, anjeun bakal ditingalikeun gambar dina polder.

03 of 05

Kumaha Nyiapkeun Gambar pikeun alat nu bagerak dina sketsa 3 Ti Coding peuyeum

Photoshop aya dina posisi ganjil of maén & # 34; nyekel up & # 34; kalawan sketsa lamun datang ka ngarancang pikeun mobile. Kahadean Tom Héjo

Sketsa 3, hiji Macintosh-hijina aplikasi ti Coding peuyeum, anu gancang gaining prominence diantara UX jeung UI désainer alatan fokus sengit na on web tur aplikasi desain. Kanyataanna Photoshop, ku sababaraha cara, nyaeta dina posisi ganjil ngabogaan maén "nyekel up" jeung sketsa.

Nyiapkeun hiji gambar keur mobile dina sketsa, pilih gambar on artboard tur klik Jieun tombol Exportable di handapeun panel Pasipatan. Ieu bakal muka kotak dialog Ékspor. Klik + asup pikeun nambahkeun éta 2x na 3x versi na oge nambah suffixes. The format sadia nu PNG, JPG, TIF, PDF, EPS, sarta SVG. Dina hal ieu, milih JPG. Klik tombol Ékspor sarta sasaran atawa jieun folder pikeun nyekel rupa gambar diékspor.

04 of 05

Naha Anjeun Kudu Jieun Tilu (atawa More) versi tina Gambar nu

Nalika sakabéh sejenna gagal make versi gambar jeung & # 64; 2x ahiran lamun ngagunakeun software prototyping. Kahadean Tom Héjo

Dina loba ngahormat, pasar Mobile teh "Wild West" tina resolusi na salah ukuran pasti teu cocog kabeh. Dina conto di luhur tina Adobe Garapan Desain, gambar ieu disimpen dina 2 iPhone 6 artboards na hiji alat artboard Android. Perhatikeun kumaha versi 1x dina kénca mucunghul janten satengah ukuran. Ieu persis kumaha gambar bakal muncul dina hiji iPhone 6 kalawan layar rétina na. Versi 2x fits sampurna sarta versi Android ngalir kaluar layar. pilihan anjeun boh skala gambar atawa ngékspor gambar nu kaluar tina Photoshop dina ukuranana béda.

05 of 05

Test Awal, uji Lolobana, Amanah Euweuh, Amanah No Hiji na Utamana sorangan

Aya hiji ukuran fits sagala solusi jeung anjeun kudu nguji kana saloba Alat anjeun tiasa. Kahadean Tom Héjo

Naon kudu ngartos ieu téh ngan mimiti prosés. Nempo karya Anjeun on sakumaha loba alat anjeun bisa geus bisa dianggap salaku sapotong vital tina workflow nu. Anjeun oge kudu sadar ieu ngan hambalan kahiji dina prosés nyieun aset grafik pikeun hiji aplikasi atawa proyék web mobile.

Ngagunakeun aplikasi prototyping mangrupakeun jalan gede uncovering poin nyeri tapi ieu aset sarua bakal perlu jadi output keur dipake ku pamekar nu. Dina loba kasus, diménsi fisik aset, kaasup ikon, bakal fisik badag teu di svg tapi PNG format. Dina glance kahiji, ieu bisa sigana jadi saeutik leuwih luhur tapi inget aturan emas tina skala Gambar: eta leuwih hade mun skala handap ti skala nepi.

Garis handap mangrupa digawekeun raket jeung pamekar anjeun sarta ngagunakeun software prototyping salaku cara némbongkeun niat design Anjeun. Antukna, sanajan, maranéhanana aset sarua bakal perlu jadi siap pikeun produk ahir na pamekar anjeun boga cecekelan hadé kana naon anjeunna atanapi manehna perlu ti anjeun.