Imaging untuk seluler tidak selalu seperti yang terlihat
Hal ini menjadi semakin umum bagi para profesional grafis untuk tidak hanya menampilkan karya mereka di media cetak tetapi juga di web dan perangkat seperti iPhone, iPad, perangkat Android dan tablet Android. Di permukaan, ini bisa dilihat sebagai "hal yang baik" karena media tempat kami bekerja meluas ke layar digital. Kelemahannya adalah banyaknya layar dan jumlah resolusi layar yang membingungkan. Tidak jarang mendengar para pro berpengalaman bertanya-tanya apa yang terjadi pada hari-hari ketika resolusi gambar TIFF 300 dpi dalam format CMYK adalah norma. Oh untuk hari-hari tua yang baik!
Hari-hari itu sudah berakhir. Kami sekarang harus bersaing dengan fakta bahwa gambar 200 hingga 200 mungkin tampak bagus pada satu perangkat dan belum muncul ukuran seperempat pada ukuran lain dan tiga perempat pada yang lain. Itu semua benar-benar datang ke "Race Arms Resolusi" sedang dilancarkan oleh produsen perangkat ketika mereka mencoba untuk macet lebih banyak piksel ke dalam layar daripada pesaing mereka.
Ini membawa kita pada apa yang kita sebut "The Rise Of The Suffixes". Akhiran adalah hal-hal - @ 2x, @ 3x - ditempelkan pada nama gambar. Mereka pada dasarnya, misalnya, menempatkan gambar yang tepat di tempat yang tepat di perangkat yang tepat. Maka itu menjadi lebih baik.
Banyak pekerjaan kami melibatkan bekerja dengan ikon dan, dengan munculnya gerakan desain Flat, hal-hal ini dibuat dalam aplikasi menggambar vektor seperti Illustrator dan Sketch. Masalahnya adalah perangkat tidak bisa merender file .ai atau .eps. Mereka perlu dikonversi ke Scalable Vector Graphics dan, tergantung pada aplikasi yang digunakan untuk membuat ikon, mungkin tidak ada opsi SVG.
Maka itu menjadi lebih baik.
Ada kelas baru perangkat lunak - aplikasi Prototyping - yang menjadi titik perakitan sebelum gambar dan ikon Anda didorong ke perangkat dan mereka memiliki kekhasan juga.
Tutorial ini bergerak di antara Photoshop dan Sketch untuk grafik dan menggunakan Adobe Experience Design untuk menunjukkan beberapa titik nyeri antara ide Anda dan penyebaran akhirnya. Mari kita mulai.
01 05
Cara Mempersiapkan Gambar untuk Perangkat Seluler di Adobe Photoshop
Langkah pertama dalam proses ini adalah mengetahui perangkat atau perangkat target Anda. Dalam hal ini, Anda akan menargetkan iPhone 6 yang memiliki area layar seluas 375 piksel dengan tinggi 667 piksel. Desain panggilan untuk gambar menjadi lebar layar.
Gambar yang akan digunakan ditembak di dalam Katedral Bern Minster di Bern, Swiss. Setelah gambar terbuka di Photoshop, pilih Image> Image Size untuk memeriksa dimensi gambar dan resolusinya. Jelas, gambar yang 3156 x 2592 dengan Resolusi 300 ppi dan ukuran file 23,4 Mb tidak akan berfungsi.
Di dalam kotak dialog Ukuran Gambar, kurangi Resolusi menjadi 100 ppi . Lakukan ini dulu karena dimensi gambar juga akan berubah. Dengan set Resolusi, ubah lebar menjadi 375 Piksel. Jika Anda memeriksa data Ukuran Gambar Anda akan melihat gambar telah menyusut dari 23,4 Mb ke 338k yang lebih ramah seluler. Klik OK untuk menerima perubahan dan tutup kotak dialog Ukuran Gambar.
02 dari 05
Cara Menggunakan Kotak Dialog "Ekspor As ..." dalam Adobe Photoshop
Setelah gambar siap untuk diekspor, pilih "Ekspor> Ekspor Sebagai ..." untuk membuka kotak dialog Ekspor Sebagai.
Kotak Dialog ini adalah tambahan terbaru untuk Photoshop dan menggantikan kotak dialog "Simpan Untuk Web" yang mereka gunakan selama bertahun-tahun. Jika Anda masih membutuhkannya, Anda dapat menemukannya di Ekspor pop down. Ini, untuk alasan yang jelas, sekarang dikenal sebagai "Ekspor Untuk Web (Legacy)". Jika ini adalah kunjungan pertama Anda ke kotak dialog ini, berikut tur singkatnya:
- Ukuran: Kolom ini menetapkan ukuran output gambar. Aspek yang menarik dari area ini adalah akan memperbesar gambar tetapi gambar tidak akan muncul sebagai "fuzzy" pada perangkat karena banyaknya piksel di layar perangkat.
- 1X: Klik tahan ini dan Anda akan disajikan dengan sejumlah ukuran. Kategori 1x, 2x, dan 3x secara tradisional dikaitkan dengan perangkat Hi Dpi dari Apple dan mereka bersama dengan beberapa orang lain akan menyiapkan gambar untuk perangkat Android.
- Sufiks: Pilihan ini akan menunjukkan ukuran Anda tetapi akan ditampilkan sebagai @ 2x atau ukurannya dipilih. Akhiran ini akan ditambahkan ke nama gambar.
- Tanda +: Klik ini untuk menambahkan berbagai ukuran untuk keluaran. Dalam hal ini, klik dua kali dan pilih 2x dan 3x dari pop down. Ini akan mencakup hampir semua perangkat iOS.
- Tong Sampah: Klik ini dan pilihan dihapus dari daftar.
- Pengaturan File: Pilih format - jpg, png, gif atau svg - paling cocok untuk gambar. Jika ukuran file menjadi perhatian, Anda juga dapat mengurangi pengaturan Kualitas.
- Ukuran Gambar: Anda dapat mengubah dimensi fisik gambar.
- Ukuran Kanvas: Anda dapat mengubah dimensi fisik kanvas gambar.
- Metadata: Anda dapat menambahkan hak cipta dan informasi kontak Anda ke metadata gambar.
Setelah selesai, klik tombol Ekspor Semua. Anda akan ditanyai di mana Anda ingin menempatkan gambar. Kebiasaan yang baik untuk dikembangkan adalah mengklik tombol Folder Baru dan membuat folder untuk menyimpan gambar yang diekspor. Ketika Anda mengklik Ekspor, Anda akan diperlihatkan gambar dalam folder.
03 dari 05
Cara Mempersiapkan Gambar untuk Perangkat Seluler dalam Sketsa 3 Dari Pengkodean Bohemian
Sketsa 3, aplikasi khusus Macintosh dari Bohemian Coding, dengan cepat menjadi terkenal di kalangan desainer UX dan UI karena fokusnya yang intens pada desain web dan aplikasi. Bahkan Photoshop, dalam banyak hal, berada dalam posisi ganjil karena harus bermain "mengejar" dengan Sketch.
Untuk menyiapkan gambar untuk seluler dalam Sketsa, pilih gambar pada artboard dan klik tombol Buat Dapat Diekspor di bagian bawah panel Properties . Ini akan membuka kotak dialog Ekspor. Klik tanda + untuk menambahkan versi 2x dan 3x dan juga tambahkan sufiks. Format yang tersedia adalah PNG, JPG, TIF, PDF, EPS, dan SVG. Dalam hal ini, pilih JPG. Klik tombol Ekspor dan targetkan atau buat folder untuk menampung berbagai gambar yang diekspor.
04 dari 05
Mengapa Anda Perlu Membuat Tiga (atau Lebih) Versi Gambar
Dalam banyak hal, pasar Mobile adalah resolusi "Wild West" dan satu ukuran pasti tidak cocok untuk semua. Dalam contoh di atas dari Adobe Experience Design, gambar ditempatkan pada 2 iPhone 6 artboards dan artboard perangkat Android. Perhatikan bagaimana versi 1x di sebelah kiri tampaknya berukuran setengah. Inilah tepatnya bagaimana gambar akan muncul pada iPhone 6 dengan layar retina. Versi 2x sangat cocok dan versi Android lari dari layar. Pilihan Anda adalah untuk skala gambar atau mengekspor gambar dari Photoshop pada ukuran yang berbeda.
05 dari 05
Uji Dini, Uji Seringkali, Percayai Tidak Ada, Percaya Tidak Ada Satu Dan Khususnya Diri Sendiri
Apa yang perlu Anda pahami adalah ini hanyalah awal dari proses. Melihat karya Anda di banyak perangkat yang Anda bisa dianggap sebagai bagian penting dari alur kerja. Anda juga harus menyadari bahwa ini hanyalah langkah pertama dalam proses pembuatan aset grafis untuk aplikasi atau proyek web seluler.
Menggunakan aplikasi prototyping adalah cara yang bagus untuk mengungkap titik-titik rasa sakit tetapi aset yang sama ini perlu menjadi output untuk digunakan oleh pengembang. Dalam banyak kasus, dimensi fisik aset, termasuk ikon, akan secara fisik sangat besar dan tidak dalam format svg tetapi png. Pada pandangan pertama, ini mungkin tampak sedikit di atas tetapi ingat aturan emas skala gambar: lebih baik untuk menurunkan skala daripada skala.
Intinya adalah untuk bekerja sama dengan pengembang Anda dan menggunakan perangkat lunak prototyping sebagai cara untuk menunjukkan maksud desain Anda. Namun, akhirnya, aset yang sama itu harus siap untuk produk akhir dan pengembang Anda memiliki pegangan yang lebih baik tentang apa yang dia butuhkan daripada Anda.