Menyediakan Imej untuk Peranti Mudah Alih

Pengimejan untuk mudah alih tidak selalu seperti apa yang kelihatan

Ia menjadi semakin biasa bagi pro grafik untuk bukan sahaja kerja mereka muncul dalam cetakan tetapi juga pada web dan peranti seperti iPhone, iPad, peranti Android dan tablet Android. Di permukaan, ini dapat dilihat sebagai "perkara yang baik" sebagai media kerja kami muncul pada skrin yang semakin luas. Kelemahan adalah jumlah skrin dan bilangan resolusi skrin yang mengelirukan. Tidak jarang mendengar pendengaran yang tertanya-tanya apa yang berlaku pada hari-hari ketika resolusi gambar 300 dpi TIFF dalam format CMYK adalah norma. Oh untuk hari-hari tua yang baik!

Hari-hari sudah berakhir. Kini kita perlu bersaing dengan hakikat bahawa 200 hingga 200 imej mungkin kelihatan dengan baik pada satu peranti dan akan muncul saiz suku pada saiz lain dan tiga suku pada satu lagi. Semuanya benar-benar datang ke "Race Arms Resolution" yang dilancarkan oleh pengeluar peranti kerana mereka cuba untuk menjejaki lebih banyak piksel ke skrin daripada pesaing mereka.

Ini membawa kita kepada apa yang kita panggil "Kebangkitan Akhiran". Akhiran adalah perkara-perkara tersebut - @ 2x, @ 3x - ditujukan kepada nama imej. Sebagai contohnya, mereka meletakkan imej yang betul di tempat yang betul pada peranti yang betul. Kemudian ia menjadi lebih baik.

Banyak kerja kami melibatkan kerja dengan ikon dan, dengan peningkatan pergerakan Reka bentuk Flat, hal-hal ini dicipta dalam aplikasi lukisan vektor seperti Illustrator and Sketch. Masalahnya adalah peranti tidak boleh membuat fail .ai atau .eps. Mereka perlu ditukar kepada Grafik Vektor Boleh Skala dan, bergantung pada aplikasi yang digunakan untuk membuat ikon, mungkin tidak ada pilihan SVG.

Kemudian ia menjadi lebih baik.

Terdapat kelas baru perisian - Aplikasi prototyping - yang menjadi titik perhimpunan sebelum imej dan ikon anda ditolak ke peranti dan mereka juga mempunyai keistimewaan mereka.

Tutorial ini bergerak antara Photoshop dan Sketsa untuk grafik dan menggunakan Adobe Experience Design untuk menunjukkan beberapa titik kesakitan antara idea anda dan penggunaan yang akhirnya. Mari kita mulakan.

01 dari 05

Cara Menyediakan Imej untuk Peranti Mudah Alih di Adobe Photoshop

Tukar resolusi sebelum anda menukar dimensi apabila menggunakan kotak dialog Saiz Imej. Kesopanan Tom Green

Langkah pertama dalam proses ini ialah mengenali peranti sasaran atau peranti anda. Dalam kes ini, anda akan menyasarkan iPhone 6 yang mempunyai luas skrin 375 piksel lebar dengan tinggi 667 piksel. Reka bentuk panggilan untuk imej menjadi lebar skrin.

Imej yang akan digunakan ditembak di dalam Katedral Bern Minster di Bern, Switzerland. Setelah imej dibuka di Photoshop, pilih Imej> Saiz Imej untuk memeriksa dimensi imej dan resolusinya. Jelas, imej yang 3156 x 2592 dengan resolusi 300 ppi dan saiz fail 23.4 Mb tidak akan berfungsi.

Di dalam kotak dialog Saiz Imej, mengurangkan Resolusi hingga 100 ppi . Lakukan ini terlebih dahulu kerana dimensi imej juga akan berubah. Dengan resolusi yang ditetapkan, tukar lebar kepada 375 piksel. Jika anda menyemak data Saiz Imej, anda akan melihat imej telah menyusut dari 23.4 Mb ke 338k yang lebih mesra mudah alih. Klik OK untuk menerima perubahan dan tutup kotak dialog Saiz Imej.

02 dari 05

Bagaimana Menggunakan Kotak Dialog "Eksport Sebagai ..." dalam Adobe Photoshop

Kotak dialog Eksport baharu menggantikan ciri Simpan Untuk Web di Photoshop. Kesopanan Tom Green

Setelah imej siap untuk dieksport, pilih "Export> Export As ..." untuk membuka kotak dialog Export As.

Kotak Dialog ini merupakan tambahan kepada Photoshop dan menggantikan kotak dialog "Simpan Untuk Web" yang mereka gunakan selama bertahun-tahun. Jika anda masih memerlukannya, anda boleh menemuinya di dalam Eksport turun. Ia adalah untuk alasan yang jelas, kini dikenali sebagai "Export For Web (Legacy)". Jika ini adalah lawatan pertama anda ke kotak dialog ini, inilah lawatan singkat:

Apabila selesai, klik butang Export All. Anda akan ditanya di mana anda mahu meletakkan imej. Kebiasaan yang baik untuk membangunkan adalah dengan mengklik butang Folder Baharu dan membuat folder untuk memegang imej yang dieksport. Apabila anda mengklik Eksport, anda akan dipaparkan imej dalam folder.

03 dari 05

Cara Menyediakan Imej untuk Peranti Mudah Alih dalam Lakaran 3 Dari Coding Bohemian

Photoshop berada dalam kedudukan ganjil bermain & # 34; mengejar & # 34; dengan lakaran ketika datang untuk merancang untuk mudah alih. Kesopanan Tom Green

Lakaran 3, aplikasi Macintosh sahaja dari Bohemian Coding, dengan cepat mendapat perhatian di kalangan pereka UX dan UI kerana fokusnya yang kuat terhadap reka bentuk web dan aplikasinya. Malah Photoshop, dalam banyak cara, berada dalam kedudukan ganjil untuk bermain "mengejar" dengan Sketsa.

Untuk menyediakan imej untuk mudah alih dalam lakaran, pilih imej pada artboard dan klik butang Make Exportable di bahagian bawah panel Properties . Ini akan membuka kotak dialog Eksport. Klik tanda + untuk menambah versi 2x dan 3x dan juga menambah akhiran. Format yang tersedia ialah PNG, JPG, TIF, PDF, EPS, dan SVG. Dalam kes ini, pilih JPG. Klik butang Eksport dan sasarkan atau buat folder untuk memegang pelbagai imej yang dieksport.

04 dari 05

Kenapa Anda Perlu Membuat Tiga (atau Lebih) Versi Imej

Apabila segala-galanya gagal menggunakan versi imej dengan akhiran & # 64; 2x apabila menggunakan perisian prototaip. Kesopanan Tom Green

Dalam banyak aspek, pasaran Bergerak adalah "Wild West" resolusi dan satu saiz pasti tidak sesuai dengan semua. Dalam contoh di atas dari Adobe Experience Design, gambar diletakkan pada 2 iPhone 6 artboards dan artboard peranti Android. Perhatikan bagaimana versi 1x di sebelah kiri nampaknya separuh saiz. Ini adalah persis bagaimana imej akan muncul pada iPhone 6 dengan skrin retinanya. Versi 2x sangat sesuai dan versi Android lari dari skrin. Pilihan anda adalah untuk skala imej atau mengeksport imej keluar dari Photoshop pada saiz yang berbeza.

05 dari 05

Ujian Awal, Ujian Sering, Percayalah Tidak, Percayalah Tidak Ada dan Terutama Diri Anda

Tidak ada satu ukuran yang sesuai dengan semua penyelesaian dan anda perlu menguji seberapa banyak peranti yang anda boleh. Kesopanan Tom Green

Apa yang anda perlu fahami ialah ini adalah permulaan proses. Melihat kerja anda pada seberapa banyak peranti yang anda boleh dianggap sebagai sebahagian besar aliran kerja. Anda juga perlu menyedari ini hanya langkah pertama dalam proses membuat aset grafik untuk aplikasi atau projek web mudah alih.

Menggunakan aplikasi prototyping adalah cara yang baik untuk mengesan titik kesakitan tetapi aset yang sama perlu output untuk digunakan oleh pemaju. Dalam banyak kes, dimensi fizikal aset, termasuk ikon, akan secara fizikal besar dan tidak dalam format svg tetapi png. Pada pandangan pertama, ini mungkin kelihatan sedikit di bahagian atas tetapi ingat peraturan emas yang mengukur imej: lebih baik untuk menurunkan daripada skala.

Intinya adalah untuk bekerjasama rapat dengan pembangun anda dan menggunakan perisian prototaip sebagai cara untuk menunjukkan niat reka bentuk anda. Akhirnya, aset yang sama perlu bersedia untuk produk akhir dan pemaju anda mempunyai pegangan yang lebih baik pada apa yang dia perlukan daripada anda.