Photoshop Etiquette: Mengorganisasi File PSD

Dalam mengerjakan project desain sering kali kita tidak memperhatikan dengan sungguh-sungguh pengorganisasian file ataupun metode desain dengan baik, khususnya file PSD. Diantara kesalahan yang dulu seringkali saya buat (karena mungkin harus bergerak cepat dalam mendesain) adalah tidak mengelompokkan layer kedalam grup-grup dan tidak memberi nama pada layer. Dan itu benar-benar akan menyusahkan kita dalam pengembangan desain itu sendiri dan membuat karya kita tidak rapi (baca:tidak profesional).

Contoh pengorganisasian Layer yang tidak teratur. Saya yakin mayoritas Anda pernah melakukannya

Contoh kesalahan di atas merupakan contoh yang sangat umum kita lakukan, dan beruntunglah Dan Rose memberikan beberapa sugesti untuk menjadikan file-file PSD yang kita kerjakan lebih terorganisir dan rapi. Apa yang seharusnya dilakukan dan tidak dilakukan, Dan Rose memaparkannya pada website Photoshop Etiquette.

Tip dan trik yang dibagi di Photoshop Etiquette (PE) antara lain: bagaimana mengorganisasikan file PSD (external dan internal, bagaimana berkerja dengan typografi dan gambar, Menggunakan Filter, Tips desain dan mengeksport file). PE memberikan contoh dengan tampilan lightbox elegan dan memberi sugesti: Do This! Not This. Berikut beberapa contoh pengorganisasian file PSD yang saya terjemahkan dari website aslinya, saya terjemahkan tidak sama persis kata aslinya untuk memudahkan pemahaman.

Pengelolaan File External

  • Perkecil Jumlah File PSD. Maksudnya jangan dengan mudah menekan key Ctrl/Cmd + N. Akan lebih mudah memodifikasi desain Anda dalam single file.
  • Berikan Nama File yang Benar. Akan menyulitkan (khususnya bagi orang lain) jika kita menyimpan file modifikasi terlalu banyak, terutama saat mencari file yang terbaru dan terbaik dari hasil pekerjaan kita. Meskipun kita sudah berusaha dengan misalnya memberi nama file dengan, misalnya Project-1.psd, Project-BARU.psd, Project-BARU-FIX.psd, dan Project-PASTI-NIH.psd (nah, lo!)
  • Simpan File Sumber dalam folder khusus. Jika kita menggunakan File sumber seperti ikon, gambar (stock images), dll, masukkan dalam folder khusus disamping fole PSD anda.
  • Jika bekerja dengan developer buat juga desain UI untuk menjelaskan tampilan state-state dalam webdesign seperti saat default, hover, visited, onClick dll. Contohnya seperti ini.

Pengelolaan File Internal

  • Namai Layer Secara Teratur. Berikan nama sesepesifik mungkin pada tiap layer. Penggunaan duplicate layer secara default akan dinamai dengan Layer 1 Copy,Layer 1 Copy 1, Layer 1 Copy 2 dan seterusnya.
  • Gunakan Folder/Grup. Kelompokkan file yang termasuk dalam, misalnya, grup header, grup navigasi, grup content dlsb.
  • Gunakan grid,  untuk mempermudah  menjaga setiap element desain kita tersusun presisi. Kita bisa memakai template dengan bantuan grid misalnya seperti 960, 978, 1140.
  • Hapus layer yang tidak perlu. Jika kita tidak akan mengunakan layer tersebut, hapuslah, jangan sekedar tidak ditampilkan (hide).
  • Mengglobalisasikan element layer. Agak susah menjelaskannya. Hmm, oke seperti ini:


    layer “banner” adalah layer yang mungkin diglobalisasi, tidak perlu diduplicate. Tujuannya tentunya memperkecil ukuran file PSD kita.

Bekerja dengan Tipografi

  • Gunakan angka bulat pada ukuran font dalam point (pt) atau pixel (px). Jangan meresize font dengan Free Transform tool. Akan merepotkan dan tidak umum dalam konversi ke HTML/CSS jika ukuran font kita, misalnya: 16.7688646pt.
  • Sertakan Font. Tidak semua komputer memliki font yang kita gunakan dalam desain (terutama font-font khusus).  Maka sertakan font khusus tersebut beserta file PSD kita. PE menyarankan kita untuk menghormati legalitas, pastikan font tersebut berlisensi free atau jika tidak, pastikan kita sudah membelinya.
  • Jangan melakukan stretch (menarik font semau gue). Akan susah mengaplikasikannya dengan CSS.
  • Hilangkan check “Hypenate (Tanda Hubung)” pada Paragraph Panel. Karena text diproses secara berbeda antara di browser dan di Photoshop. (Tidak ada penambahan seperti di Photoshop, misalnya: tanda hubung bila sebuah kata terpotong di tengah)
Baca Juga:  Detox - Ubah timeline facebook dengan berita seputar desain dan development

Bekerja dengan Gambar

  • Gambar ulang Button dan Shape, jangan distretch. Dalam resize shape sebagai contoh rounded rectangle, stretching hanya akan membuat bentuknya menjadi tidak sempurna, seperti rounded corner yang tidak persis dengan sebelum diresize.
  • Globalisasi Mask. jika kita mengaplikasikan mask pada beberapa gambar/shape, minimalisasikan dengan mengelompokkan shape/image dalam folder dan lakukan masking pada group foldernya.
  • Pastikan Logo sebagai Vector Smart Object. Hal ini untuk menghindari pecahnya logo saat diresize.
  • Simpan Semua Stok Gambar. Stok Gambar adalah sesuatu yang berharga untuk mengembangkan desain yang sudah dibuat. Apalagi jika gambar tersebut berbayar. Simpan semua stok gambar pada folder khusus.
  • Snap! Seringkali kita melakukan zooming untuk mengetahui akurasi dan kepresisian element desain kita. Dengan snap (View > Snap to) kita bisa memposisikan element dengan presisi pada Guides atau Grid, dll.

Bekerja dengan Filter

  • Terapkan Color Overlay pada object yang telah dirasterized, bukan pada shape yang memiliki color properties.
  • Sekarang bukan jamannya menggunakan bewel & emboss. Tinggalkan efek tersebut.
  • Pattern overlay, berhati-hatilah menggunakannya. Dalam CSS, perulangan pattern akan tampak aneh jika kita memotong pattern kita dengan tidak sempurna.
  • Pikirkan pula bahwa efek/filter yang kita gunakan dapat diterapkan pada CSS/CSS3.

Tips Desain

Jangan gunakan warna hitam atau mendekati #000000, karena drop shadow yang dihasilkan akan terlihat tidak normal. Perhatikan Stroke, untuk mempermudah CSS gunakan selalu stroke dalam posisi inside.

Penggunaan drop shadow hitam menjadikan desain terlihat tidak normal

Sebelum Mengexport File PSD

Upayakan agar desain kita di teliti orang lain sebelum kita anggap benar-benar siap. Hal ini membantu mengurangi kesalahan-kesalahan misanya pada tulisan. Kemudian pastikan bahwa desain ini telah menggunakan item yang legal, artinya tidak ada penggunaan gambar, icon, brush yang belum dibayar (jika lisensinya bukan free).

Mengexport PSD

Gunakan File > Save for Web & Devices… untuk mengeksport file PSD kita. Hal ini menjadikan file hasil export kita lebih ringan (sampai 8x) daripada menggunakan File > Save As… Setelah itu pilih “Progressive” agar JPEG yang dihasilkan memiliki ukuran ringan (sangat berperngaruh untuk file gambar ukuran besar).

Demikianlah tips dan triks yang ditawarkan PE, semoga cukup menginspirasi dan bermanfaat untuk menambah skill kita terutama dalam mengelola file PSD. Cukup terinspirasi?

Catatan: Postingan ini dibuat berdasarkan penjelasan pada Photoshop Etiquette, dan diterjemahkan penulis dengan narasi sendiri untuk mempermudah pemahaman.

Komentar

comments

Edy Pang

Think, feel, design and code for front-end development. Love apple, apples & apple juice.

grain storage instagram türk takipçi satın al