Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Cut&Slice me
Webdesign

Retina-Friendly Photoshop Slicing With "Cut&Slice Me"

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Rossie (you can also view the original English article)

Adobe Photoshop terus berkembang; fitur baru ditambahkan dengan setiap rilis, sementara fitur yang ada ditingkatkan. Namun, ada satu bidang yang masih ketinggalan jaman; cara memotong desain di Photoshop tidak berubah sejak web berbasis tabel.

Awal kemerdekaan resolusi (pikir Retina) berarti bahwa kita semakin bergantung pada bitmap untuk situs websites. Font web, CSS3, dan Scalable Vector Graphics adalah semua contoh teknik modern yang menjauhkan kita dari kekhawatiran tentang piksel. Kadang-kadang kita masih perlu untuk memotong PSD kita dan menggunakan gambar yang dihasilkan, tetapi sekarang saatnya bagi kita untuk melakukannya dengan cara yang lebih bertanggung jawab.

Masukkan Cut&Slice me, sebuah plugin CS6 yang dikembangkan oleh Daniel Peruho. Cut&Slice me bertujuan untuk mempercepat proses pemotongan modern dan menawarkan banyak fitur canggih. Gratis, mudah digunakan, dan berfungsi.

Beberapa hal yang ditawarkannya termasuk mengambil sekelompok layer dan memperlakukannya sebagai objek tunggal. Ini kemudian memotong semua piksel yang tidak perlu dan mengekspor grup sebagai file gambar. Saat mendesain tombol, setelah layer diberi nama sesuai dengan format yang diperlukan oleh plugin, itu dapat secara otomatis memotong beberapa status tombol itu. Ingin belajar lebih banyak? Mari selami.


Memulai

Untuk memulai, Anda harus menjalankan Photoshop CS6 terlebih dahulu. Anda kemudian harus menginstal plugin di mesin Anda. Buka home page Cut&Slice me dan download versi terbaru dari plugin. Juga, download file sampel yang akan digunakan untuk menunjukkan cara kerja plugin.

cut-n-slice-page

Setelah diunduh, klik dua kali file CutAndSliceMe.zxp untuk memicu instalasi plugin. Ketika Adobe Extension Manager muncul, cukup ikuti instruksi.

Luncurkan Photoshop dan pilih Window > Extensions > Cut and Slice me. Anda sekarang dapat melihat panel "Cut&Slice me".

cut-n-slice-open_plugin

Selanjutnya, ekstrak file CutAndSliceMe_sample.zip dan buka file sampel. Anda akan melihat yang berikut ini:

cut-n-slice-open_sample_file

Ini adalah mobile design dengan layer yang diberi nama dengan benar sesuai dengan persyaratan plugin. Singkatnya, kita akan melihat cara kerja, tetapi sebelum kita melakukannya ada beberapa hal yang harus Anda ketahui:

  • Pertama, Anda harus pergi ke bagian General dari panel Preferences dan memeriksa opsi Snap Vector Tools and Transforms to Pixel Grid (Anda akan melihat mengapa sedikit kemudian).
  • Kedua, penting untuk dipahami sejak awal bahwa Anda harus merancang untuk resolusi tertinggi. Retina untuk perangkat Apple dan xhdpi untuk perangkat Android (dalam kedua kasus secara efektif x2). Ini karena plugin mengambil ukuran desain Anda sebagai resolusi penuh, mengekspornya ke ukuran yang berbeda dengan memperkecil.
  • Juga, ketika Cut & Slice saya mengekspor ke iPhone dan Android, semua karakter yang tidak didukung dalam nama file dihapus.

Plugin dalam Action

Pastikan tombol dengan ikon iPhone dipilih, lalu klik Cut All assets. Ketika pengirisan selesai, navigasikan ke direktori file sampel dan buka folder "CutAndSlice_sample_iPhone_assets" yang dibuat secara otomatis oleh plugin.

Anda akan melihat setiap aset dalam dua ukuran; satu untuk Retina (yang sebenarnya merupakan ukuran resolusi penuh yang digunakan dalam file PSD Anda), dan satu lagi yang merupakan versi asli yang diperkecil.

cut-n-slice-exported_iphone_assets

Sekarang mari ulangi latihan kita, kali ini mengekspor untuk Android. Ubah mode plugin dengan mengklik tombol dengan ikon Android, lalu klik Cut All aset lagi. Kali ini folder "CutAndSlice_sample_Android_assets" dibuat dengan empat subfolder; satu untuk setiap ukuran aset. Ukuran yang awalnya dirancang dapat ditemukan di folder xhdpi, semua aset lainnya sedang diperkecil versi-versi ini.

cut-n-slice-exported_android_assets

Cara Kerjanya

Sekarang kita telah melihat lebih atau kurang apa yang dilakukan plugin, saatnya mencari tahu cara kerjanya.

Aspek yang paling penting untuk dipertimbangkan adalah pengorganisasian layer, dalam hal penamaan dan pengelompokan. Atur elemen Anda dalam kelompok, seolah-olah itu adalah objek. Kemudian tambahkan @ ke akhir semua nama grup yang ingin Anda ekspor, dan akhirnya klik Cut All assets. Isi setiap grup akan diekspor sebagai file PNG, memotong semua piksel transparan.

Catatan: Demi kinerja Cut & Slice saya hanya memeriksa nama grup, jadi untuk diekspor layer Anda harus dalam grup.

Terkadang Anda mungkin tidak ingin mengekspor semua aset; Anda mungkin ingin mengekspor hanya aset yang Anda masukkan ke dalam grup tertentu. Jika hal ini terjadi, klik pada Cut Subgroups dan Cut&Slice saya akan mengekspor semua layer @ Anda di dalam grup yang dipilih.

Ketika Anda ingin mengiris hanya satu kelompok atau satu layer, pilih dan klik Cut Selected.

Memotong Berbagai Status

Akhirnya, ketika berhadapan dengan tombol, kita sering memiliki beberapa keadaan status itu. Untuk mengekspornya dengan benar, Anda perlu menambahkan grup yang berisi berbagai status tombol Anda, beri nama sebagai berikut:

  • normal
  • hover
  • clicked/pressed
  • selected
  • disabled

Kemudian letakkan grup-grup ini di dalam grup lain dengan _BTN ditambahkan ke namanya. Perhatikan bahwa sufiks _BTN dapat digunakan dengan elemen apa pun yang memiliki status.

cut-n-slice-buttons_examples
Contoh tombol dengan status berbeda.

Menentukan Ukuran Aset

Seperti yang telah disebutkan, Cut&Slice me crop bitmap dengan erat, menghapus semua piksel transparan di sekitarnya yang tidak Anda inginkan. Tetapi apa yang terjadi ketika Anda ingin semua status tombol memiliki ukuran yang sama? Dalam hal ini Anda dapat menggunakan layer vektor persegi panjang, bernama #, di bagian paling atas grup Anda, yang mewakili area yang ingin Anda ekspor. Grup Anda akan diekspor pada ukuran bentuk vektor, tanpa mengekspor layer vektor itu sendiri. Ini berlaku untuk semua grup, tidak hanya untuk tombol. Plugin menggunakan layer vektor untuk fitur ini karena jika opsi Snap Vector Tools and Transforms to Pixel Grid diperiksa, seperti yang saya sebutkan di atas, bentuk vektor Anda akan menjadi pixel sempurna tanpa tepi buram.

Untuk menguji proses ini, pilih layer tepat di bawah grup login_BTN. Kemudian atur Opacity menjadi 100% dan Fill menjadi 40%. Sekarang Anda akan dapat melihat bentuk di atas tombol. Ubah ukurannya sesuai keinginan dan ekspor. Sekarang buka folder aset dan periksa ukuran tombol yang diekspor. Seharusnya menjadi ukuran yang baru saja ditetapkan.

cut-n-slice-change_button_size

Contoh Dunia Nyata

Kita sekarang memiliki pemahaman yang kuat tentang bagaimana kita dapat menggunakan plugin, jadi inilah saatnya untuk mengujinya di dunia nyata. Di sini saya tidak akan mengajari Anda cara mendesain template situs web dari awal, sebagai gantinya saya akan menggunakan template yang dibuat sebelumnya untuk menunjukkan cara memberi nama dan mengatur layer dengan benar.

Mari kita mulai dengan men-download template website gratis ini dari CSS Author. Template memiliki versi web dan versi mobile. Unduh keduanya, lalu buka versi web template.

cut-n-slice-web_template_example

Anda mungkin sudah memperhatikan bahwa penamaan dan struktur layer jauh dari yang kita butuhkan. Kita harus melakukan pengaturan ulang dan penggantian nama untuk memenuhi persyaratan plugin. Pada screenshot berikut, Anda dapat melihat perbandingan struktur layer sebelum dan sesudah pengeditan kita. Ubah layer Anda (merah) agar sesuai dengan yang ada di kanan (hijau).

cut-n-slice-rearrange_and_rename_layers
Perbandingan lapisan sebelum (merah) dan setelah (hijau)

Pada kesempatan ini kita ingin mengekspor ke web, jadi ubah modenya dengan mengklik tombol dengan ikon Monitor lalu klik Cut All asset. Screenshot berikut menunjukkan apa yang harus Anda lihat. Jika tampilan Anda berbeda, periksa layer Anda untuk kesalahan akhirnya dan coba lagi.

cut-n-slice-exported_web_assets

Selamat! Anda baru saja memotong desain pertama Anda dengan sukses. Untuk latihan lebih lanjut, buka dan memotong template versi seluler.

cut-n-slice-mobile_template_example

Dalam hal ini, ketika Anda mengedit file, ekspor untuk iPhone dan Android dan periksa apakah semuanya sudah benar. Jika demikian, Anda siap untuk mengambil ini ke tingkat berikutnya dan memotong desain Anda sendiri.

Sprite

Anda mungkin telah memperhatikan bahwa ketika mengekspor aset, kita memiliki banyak file PNG. Dan, seperti yang kita tahu, menarik lebih banyak file gambar individual dari server web berarti lebih banyak permintaan HTTP, memperlambat rendering halaman web Anda. Untuk mengatasi masalah, Anda dapat mempertimbangkan untuk mengubah semua PNG Anda (atau beberapa di antaranya) menjadi file sprite gambar tunggal.

Untungnya, ini adalah tugas yang mudah hari ini dan ada banyak cara untuk mendekatinya. Ada banyak online tools yang dapat membantu proses ini. Lihatlah generator sprite berikut:

..lihat yang paling sesuai dengan kebutuhan Anda.

Sejauh ini bagus, tapi ada satu hal lagi yang perlu kita tunjukkan. Dengan teknologi seperti CSS3 dan SVG, kita tidak lagi hanya mengandalkan gambar. Kita sekarang dapat dengan mudah menggunakan ikon SVG atau tombol bertenaga CSS3 dalam desain. Manfaat utama menggunakan grafik SVG dan CSS3 adalah mereka bebas resolusi dan bekerja sangat baik dalam desain yang responsif. Selain itu, Anda dapat mengubah dan mengubah mereka langsung di kode Anda tanpa perlu menggunakan editor gambar. Tapi tunggu! Ini tidak berarti bahwa gambar sama sekali tidak pantas. Mereka masih dapat digunakan untuk foto, grafik kompleks dan elemen grafis, dan sebagainya. CSS3 dan SVG bagus, tetapi dukungan browser belum sepenuhnya dapat diandalkan, jadi Anda harus berhati-hati saat menggunakannya.


Kesimpulan

Kemampuan untuk mengotomatisasi tugas desain sangat penting dalam dunia web yang berubah dengan cepat saat ini. Untungnya, tool seperti Cut&Slice me memberikan otomatisasi semacam itu dan menghemat banyak waktu kita. Seperti yang Anda lihat, dengan sedikit disiplin ketika kita memberi nama dan mengatur layer kita, kita dapat memotong bahkan desain yang rumit dengan cepat dan mudah. Dengan hanya beberapa klik, kita memiliki semua aset yang dibutuhkan untuk dipotong dan siap digunakan.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.