Imaging kanggo seluler ora tansah katon
Lagi dadi tambah akeh umum kanggo pro grapik ora mung nduweni karya sing katon ing cetak nanging uga ing web lan piranti kayata iPhones, iPads, Android devices, lan tablet Android. Ing permukaan, iki bisa ditemokake minangka "apik" minangka media karya kita katon ing layar digital. Downside iku nomer layar lan nomer resolusi layar sing mbingungake. Iku ora umum kanggo ngrungokake pro-seasoned wondering punapa wae kedaden ing dina nalika resolusi 300 dpi gambar TIFF ing format CMYK punika pakewuh. Oh kanggo dina-dina lawas sing apik!
Dina iku wis rampung. Saiki kita kudu nyengkuyung karo kasunyatan sing 200 nganti 200 gambar bisa katon apik ing salah siji piranti lan durung katon ukuran waktu ing ukuran liyane lan telung waktu ing liyane. Iku kabeh nemen mudhun menyang "Resolusi Arms Race" kang diluncurake dening manufaktur piranti lagi nyoba kanggo jam luwih piksel menyang layar saka saingan.
Iki ndadekke kita apa sing bakal kita sebut "Ninggalke Suffixes". Suffixes iku sing - @ 2x, @ 3x - ditambal ing jeneng gambar. Contone, ing atine, umpamane, sijine gambar sing tengen ing panggenan sing bener ing piranti tengen. Banjur bakal luwih apik.
Akeh karya kita nyakup lambang lan, kanthi mundhut saka gerakan desain Flat, iki digawe ing aplikasi gambar vektor kaya Illustrator and Sketch. Masalahe mung piranti ora bisa nggawe .ai utawa .eps file. Padha kudu diowahi dadi Scalable Vector Graphics lan, gumantung saka aplikasi sing digunakake kanggo nggawe lambang, bisa uga ora ana opsi SVG.
Banjur bakal luwih apik.
Ana kelas piranti lunak anyar - Aplikasi prototyping - sing dadi titik perakitan sadurunge gambar lan lambang sampeyan disurung metu menyang perangkat lan padha duwe peculiarities uga.
Tutorial iki mranata ing antarane Photoshop lan Sketsa kanggo grafis lan nggunakake Adobe Experience Design kanggo nduduhake sawetara titik pain antarane idea lan penyebaran pungkasan. Ayo diwiwiti.
01 saka 05
Cara Nyiapake Gambar kanggo Piranti Ponsel ing Adobe Photoshop
Langkah pisanan ing proses iki yaiku ngerti piranti utawa piranti target. Ing kasus iki, sampeyan bakal nyasarake iPhone 6 kang nduweni area layar lebar 375 piksel kanthi dhuwur 667 piksel. Rancangan nggawe gambar dadi jembar layar.
Gambar sing bakal digunakake ditembak ing Katedral Bern Minster di Bern, Swiss. Sawise gambar mbukak ing Photoshop, pilih Gambar> Ukuran Gambar kanggo mriksa dimensi gambar lan resolusi. Temtuné, gambar sing 3156 x 2592 kanthi Resolusi 300 ppi lan ukuran file 23.4 Mb mung ora bisa dilakoni.
Ing jero kotak dialog Ukuran Gambar, ngurangi Resolusi nganti 100 ppi . Apa iki pisanan amarga dimensi gambar uga bakal ganti. Kanthi resolusi pesawat, ganti lebar nganti 375 piksel. Yen sampeyan mriksa data Ukuran Gambar sampeyan bakal sok dong mirsani gambar sing nyusup saka 23.4 Mb menyang 338k luwih gampang seluler. Klik OK kanggo nampa owah-owahan lan nutup kotak dialog Ukuran Gambar.
02 saka 05
Cara Nganggo "Ekspor As ..." Dialog Box in Adobe Photoshop
Sawise gambar wis siap diekspor, pilih "Ekspor> Ekspor As ..." kanggo mbukak kotak dialog Export As.
Kotak Dialog iki minangka tambahan anyar kanggo Photoshop lan ngganteni kothak dialog "Simpen Kanggo Web" sing digunakake taun-taun. Yen sampeyan isih perlu, sampeyan bisa nemokake ing Ekspor pop mudhun. Iku, kanggo alasan jelas, saiki dikenal minangka "Ekspor Kanggo Web (Warisan)". Yen iki minangka kawitan pisanan ing kothak dialog iki, iki minangka tur singkat:
- Ukuran: Kolom iki nyetel ukuran output gambar. Aspèk paling menarik saka wilayah iki yaiku nggedhekake gambar nanging gambar ora bakal katon minangka "kabur" ing piranti amarga piksel piksel sing ageng ing layar piranti.
- 1X: Klik ditahan lan sampeyan bakal diwenehi sawetara ukuran. Kategori 1x, 2x lan 3x secara tradisional digandhengake karo piranti Hi Dpi saka Apple lan padha karo sawetara liyane bakal nyiyapake gambar kanggo piranti Android.
- Suffix: Pilihan iki bakal nuduhake ukuran sampeyan, nanging bakal ditampilake minangka @ 2x utawa ukuran dipilih. Akhiran iki bakal ditambahake ing jeneng gambar.
- Tandha +: Klik kanggo nambah macem-macem ukuran kanggo output. Ing kasus iki, klik kaping pindho lan milih 2x lan 3x saka pop mudhun. Iki bakal nutupi piranti apa wae iOS.
- Sampah Bisa: Klik iki lan pilihan dibusak saka antrian.
- Setelan berkas: Pilih format - jpg, png, gif utawa svg - paling cocog kanggo gambar kasebut. Yen ukuran berkas dadi masalah sampeyan uga bisa nyuda setelan Quality.
- Ukuran Gambar: sampeyan bisa ngganti dimensi fisik gambar.
- Ukuran Kanvas: Sampeyan bisa ngganti dimensi fisik kanvas gambar.
- Metadata: Sampeyan bisa nambah hak cipta lan informasi kontak menyang metadata gambar.
Yen wis rampung, klik tombol Export All. Sampeyan bakal dijaluk kepengin nggawe gambar. Karakter sing becik kanggo berkembang yaiku klik tombol Folder Anyar lan nggawe folder kanggo nahan gambar sing diekspor. Nalika sampeyan klik Ekspor, sampeyan bakal ditampilake gambar ing folder kasebut.
03 saka 05
Cara Nyiapake Gambar kanggo Piranti Ponsel ing Gambar 3 Saka Coding Bohemian
Sketch 3, aplikasi mung Macintosh dari Bohemian Coding, kanthi cepet ngembangake antarané desainer UX lan UI amarga fokus utama ing web lan desain aplikasi. Nyatane Photoshop, kanthi cara akeh, ana ing posisi aneh kudu muter "nyekel" karo Sketch.
Kanggo nyiapake gambar kanggo seluler ing Sketch, pilih gambar ing artboard lan klik tombol Make Exportable ing ngisor panel Properties . Iki bakal mbukak kotak dialog Ekspor. Klik tanda + kanggo nambah versi 2x lan 3x lan uga nambah suffixes. Format sing kasedhiya yaiku PNG, JPG, TIF, PDF, EPS, lan SVG. Ing kasus iki, milih JPG. Klik tombol Ekspor lan target utawa nggawe folder kanggo nyekel macem-macem gambar sing diekspor.
04 saka 05
Yagene Sampeyan Perlu Nggawe Tiga (utawa luwih) Versi Gambar
Ing salebeting maneka warna, pasar Mobile minangka "West Wild" resolusi lan ukuran siji mesthi ora pas kabeh. Ing conto ndhuwur Adobe Experience Design, gambar iki diselehake ing 2 iPhone 6 artboards lan artboard piranti Android. Kabar dhisik carane versi 1x ing sisih kiwa katon dadi setengah ukuran. Iki pancen babagan gambar sing bakal katon ing iPhone 6 karo layar retina. Versi 2x cocok banget lan versi Android mbukak layar. Panjenengan milih kanggo ngukur ukuran gambar utawa ngekspor gambar metu saka Photoshop kanthi ukuran sing beda.
05 saka 05
Tes Awal, Tes Sering, Tak Percaya, Percaya Ora Ana siji lan Utamane Dadi
Apa sampeyan kudu ngerti iki mung wiwitan proses. Ndeleng karya ing pirang-pirang piranti sampeyan bisa uga dianggep minangka bagéyan sing penting ing alur kerja. Sampeyan uga kudu weruh iki mung langkah pisanan ing proses nggawe aset grafis kanggo aplikasi utawa proyek web seluler.
Nggunakake aplikasi prototyping minangka cara sing apik kanggo nggoleki titik nyeri, nanging aset sing padha kudu output kanggo pangembang. Ing sawetara kasus, dimensi fisik aset, kalebu lambang, bakal gedhe banget lan ora ana ing format svg nanging png. Mesthi wae, iki bisa uga ana ing sisih ndhuwur nanging eling aturan emas ing skala: luwih apik kanggo mundur tinimbang ukuran munggah.
Ing ngisor iki kanggo makarya kanthi rapet karo pangembang lan nggunakake piranti lunak prototyping minangka cara ngetokake maksud rancangan sampeyan. Pungkasan, sanajan, aset sing padha kudu siap kanggo prodhuk final lan pangembang sampeyan kudu nangani apa sing luwih apik saka sampeyan.