Photoshop Extract: Produksi Grafis Seluler Terjadi Setelah Afterburner

01 08

Apa itu Aset Ekstrak

Buat comp di Photoshop.

Fitur Extract Properties yang baru dari Photoshop CC 2014 akan mengikat afterburner pada alur kerja penciptaan gambar yang responsif untuk Responsive Web Design (RWD). Mari kita lihat bagaimana perintah Extract Assets dapat dengan cepat mengurangi comp halaman web menjadi aset siap-perakitan dalam beberapa menit.

Mari kita mulai dengan pertanyaan yang jelas: Apa itu Aset Ekstrak?

Secara sederhana, Extract Assets adalah fitur baru di Photoshop yang menyediakan fitur Generator Photoshop dengan sebuah antarmuka untuk membantu mengotomatiskan pembuatan aset pencitraan untuk desain web dan layar dari file Photoshop Anda. Perintah Ekstrak Aset memungkinkan Anda untuk menentukan lapisan atau lapisan mana Anda ingin membuat aset untuk, ukuran fisik mereka, format file dan lokasi yang disimpan pada disk. Fitur ini tidak dimaksudkan untuk teks kecuali tujuannya adalah untuk mengubah teks menjadi bitmap, yang sebenarnya bukan ide yang baik.

Mari kita mulai.

02 08

Buka File Photoshop .psd

Kami mulai dengan comp halaman web yang disiapkan di Photoshop.

Contoh yang saya gunakan berisi Objek Pintar dari Illustrator, beberapa teks, unit pahlawan yang berisi teks, gambar dan tombol dan serangkaian gambar luar yang memperkuat tema situs. Kuncinya di sini adalah mengatur Lapisan ke dalam kelompok-kelompok. Ini diperlukan karena tugasnya adalah menarik semua item ini keluar dari comp sehingga mereka dapat dengan cepat ditambahkan ke tata letak web yang beradaptasi dengan berbagai resolusi layar dan ukuran.

03 dari 08

Dua Cara Untuk Mengekstrak Aset

Extract Assets dapat ditemukan di menu File atau dengan mengklik kanan layer.

Tidak seperti Generate, yang juga mengekstrak objek melalui penambahan ekstensi grafis ke nama layer, Extract Assets menggunakan antarmuka yang dapat dijangkau dengan mengklik kanan layer atau memilih layer dan memilih File> Extract Assets .

04 dari 08

Antarmuka Aset Ekstrak

Kotak dialog Ekstrak Aset.

Kotak dialog Ekstrak Aset agak intuitif. Anda ditunjukkan lapisan atau seleksi yang akan diekstraksi. Di atas itu Anda ditunjukkan ukuran file dan di bawahnya adalah kontrol yang memungkinkan Anda untuk memperbesar dan memperkecil objek. Sisi kanan kotak dialog adalah tempat keajaiban terjadi. Keempat tombol di bagian atas memungkinkan Anda memilih resolusi / ukuran objek. Strip berikutnya menunjukkan Anda lapisan yang dipilih dan mengklik tanda + memungkinkan Anda menampilkan lapisan yang dipilih dalam format lain juga. The Trash Ca n menghapus lapisan dari antrian. Di strip berikutnya, Anda dapat memilih jenis file dan Anda dapat menyesuaikan lebar dan tinggi gambar output.

05 dari 08

Mengekstrak Gambar SVG

Mengekstrak gambar svg.

Photoshop tidak menangani gambar svg semua yang baik dan browser dan perangkat tidak dapat menampilkan gambar Illustrator. Hal ini mengakibatkan munculnya file svg yang digunakan untuk karya seni vektor seperti logo Illustrator yang ditampilkan di sini. Menjadi vektor resolusi mereka adalah perangkat independen yang berarti mereka dapat diskalakan tanpa kehilangan detail atau gambar. Untuk mengonversi Ilustrator Smart Object ke svg, pilih svg dari pop down dan klik Extract .

06 08

Proses Ekstrak Aktiva

Gambar ditempatkan dalam folder di tempat yang sama dengan gambar .psd.

Beberapa hal akan terjadi ketika Anda mengklik tombol Extract. Pertama-tama Anda akan diperingatkan bahwa nama file dapat berubah. Ini bukan masalah besar. Kemudian Anda akan diberitahu folder baru sedang dibuat untuk memegang aset. Setelah proses selesai, folder, ditempatkan di lokasi yang sama dengan file .psd asli, terbuka dan memperlihatkan aset baru kepada Anda.

07 08

Tombol Pengaturan adalah Sahabat Baru Anda

Mengakomodasi resolusi perangkat.

Mengklik tombol Pengaturan membuka kotak dialog Pengaturan yang sangat berguna. Pengaturan di sebelah kiri adalah faktor skala. Apa yang mereka lakukan adalah membuat berbagai salinan gambar yang akan digunakan pengembang dalam permintaan media untuk menargetkan resolusi layar perangkat tertentu. Misalnya, versi 3x akan ditargetkan ke layar Retina iPhone atau iPad sedangkan faktor 1,25 akan diarahkan ke perangkat Android. Akhiran ditambahkan ke akhir nama file untuk memungkinkan pengembang Anda dengan mudah mengidentifikasi gambar yang akan digunakan dalam kueri media. Setelah Anda selesai, klik tombol OK dan pilihan Anda akan menyala di area Extract Assets di kotak dialog. Anda juga dapat mengakses pengaturan dengan mengklik ikon roda gigi di area Extract Asset di sisi kanan antarmuka

08 08

Menyelesaikan

Beberapa gambar dengan berbagai format dan resolusi diekstraksi.

Ketika Anda mengklik tombol Ekstrak semua aset akan dibuat dan ditambahkan ke folder. Pada titik ini yang perlu Anda lakukan adalah mengirim pengembang Anda salinan folder dan melanjutkan ke proyek berikutnya.