http://dppka-sergaikab.com/news.php?item.130 Page 1/5
Etika Mendesain Web dengan Photoshop
bintangweb, Saturday 09 August 2014 - 13:43:52
Mendesain web bisa jadi perkara yang rumit. Karena anda perlu bersikap perfeksionis terhadap presisi konten di dalamnya. Padahal jika anda tahu rahasianya, mendesain web adalah pekerjaan yang menyenangkan. Apalagi dengan Photoshop. Ada sejumlah etika yang perlu anda ketahui dulu ketika anda ingin menggunakan Photoshop untuk mendesain sebuah website. Mari kita mulai dari awal.
Atur lokasi file anda. Atur dalam folder-folder yang mudah anda temukan. Jadi meskipun nantinya sekian tahun telah berlalu, anda tetap dapat memahami karya anda secara struktural.
Jaga jumlah file PSD anda di batas minimal. Jika terlalu banyak menyimpan file-file photoshop (.psd) secara terpisah, anda akan beresiko lupa terhadap file mana yang harus digunakan.
Beri nama yang sesuai. Kadang kita tidak mau repot ketika menamai file. Jadi kita gunakan nama seperti terbaru.psd. Padahal ironisnya, meski membuat file bernama Newest sekalipun, akan tetap ada file terbaru di masa depan. Jadi lebih baik gunakan nama file yang bisa menunjukkan ciri khas.
Simpan aset di satu folder dengan file PSD. Misalnya icon, stock photo, dlsb. Sehingga pewaris PSD anda tidak perlu berburu aset originalnya dan tidak ada lagi waktu yang terbuang percuma.
Buat template khusus untuk elemen UI. Bantu developer web Anda dengan membuat template PSD yang khusus untuk pembuatan User Interface (button, form, dlsb) lebih mudah di masa depan.
Sharing & backup pekerjaan anda. Sehingga jika sewaktu-waktu terjadi kegagalan hardware, anda masih punya cadangan datanya.
Simpan pekerjaan anda setiap saat. Apa sulitnya menekan CTRL+S di tengah-tengah kegiatan anda?
Selalu beri nama layer anda. Karena biasanya sumber terbesar kemarahan para pewaris PSD adalah layer yang berantakan dan tidak bernama, sehingga komponen desain jadi susah diidentifikasi.
Beri nama yang akurat pada layer. Berikan nama yang sekali lirik dapat mendeskripsikan setiap layer untuk mengurangi resiko
http://dppka-sergaikab.com/news.php?item.130 Page 2/5
kesimpangsiuran.
Kelompokan layer-layer pada folder-folder. Sehingga Anda dapat lebih mudah menampilkan / menyembunyikan komponen tertentu. Navigasi dan editing juga akan jadi jauh lebih mudah.
Hapus layers yang tidak perlu. Semakin banyak layer, ukuran file PSD anda jadi membengkak. Jadi, lebih baik hapus semua layer yang tidak terpakai daripada sekedar menyembunyikannya.
Globalisasi elemen yang umum. Misalnya logo, foto, dlsb. Tidak ada alasan untuk memiliki 5 salinan logo untuk layout yang berbeda. Jika Anda membuat logo dalam 1 layout, anda hanya perlu mengedit satu layout tersebut, kemudian mendistribusikannya pada layout lainnya.
Gunakan fitur Layer Comps. Fitur Layer Comps (Window > Layer Comps) dan fitur Smart Objects adalah opsi terbaik untuk menunjukkan variasi tanpa harus membangun beberapa PSD.
Bersikaplah fleksibel ketika edit foto. Bekerja dengan foto / gambar itu harus non-destruktif. Anda tentu tidak ingin sembarangan menambahkan filter dan efek pada foto yang sudah bagus kan?
Jangan Stretch / Flatten. Skenario terbaik adalah menjaga bentuk vektor Anda. Atau jika tidak, simpan salinan dari sebuah vektor sebelum anda rasterize.
Globalisasi setting Mask anda. Terapkan mask ke satu folder dibanding harus menerapkan mask yang sama per layer. Anda dapat bekerja lebih efektif dengan cukup mengedit satu mask saja.
Snap. Fitur Snap (View > Snap) dapat membantu anda memposisikan gambar dengan tepat, di kanan, kiri, atau tengah. Jadi aktifkan semua setting Snap To anda: Grid, Layer, Guide, dst.
Gunakan Blending Mode dengan hati-hati. Bagaimana Anda mendapatkan sebuah warna? Pastikan bukan dari penggabungan dari 2 Overlay, 4 Multiply dan 16 Color Burn. Karena akan sulit untuk mencari tahu nilai hex dari warna yang anda tumbuk-tumbuk dengan Blending Mode.
Tahan diri anda, jangan merusak. Gunakan Layer Masks, Smart Objects & Adjustment untuk menghindari terhapusnya piksel yang berharga. Misalnya jika sebuah siluet perlu retouching, maka kegiatan ini akan jauh lebih aman jika anda tidak melakukannya langsung di file aslinya.
Kendalikan konten text anda. Text adalah komponen yang butuh perlakuan spesial. Misalnya dari segi pilihan warna, ukuran, dlsb.
http://dppka-sergaikab.com/news.php?item.130 Page 3/5
Kadang anda harus melakukan segala sesuatunya secara tradisional, bukan praktis. Beberapa di antaranya akan dibahas pada poin-poin berikutnya.
Pertahankan nilai piksel text sebenarnya. Jangan resize ukuran text dengan Free Transform. Lebih baik sesuaikan pada Window > Character agar piksel text anda tidak akan pecah ketika disimpan.
Gunakan jenis font berlisensi. Bermainlah adil dan taat hukum. Jaga tipe font Anda agar legal dan tidak melanggar copyright. Gunakan Google Font: Google.com/fonts/ jika anda ingin variasi gratis.
Jangan Stretch text anda. Selain terlihat mengerikan, anda akan menyulitkan programmer anda karena tidak ada cara mudah untuk membentuk font sesuai desain anda melalui HTML / CSS.
Sesuaikan ukuran Text Box anda. Bagus sekali jika Anda masih menggunakan text box. Hanya saja, jangan membuatnya 5 meter lebih panjang dari teks sebenarnya. Karena text box yang terlampau panjang dari yang diperlukan dapat menyulitkan anda dalam selection text di masa depan.
Gunakan Text Box yang terpisah untuk komponen-komponen yang berbeda area. Misalnya heading, paragraf, footer, dlsb. Dengan demikian, anda dapat lebih mudah mengatur keselarasannya secara kontekstual.
Pikirkan dulu sebelum menggunakan efek. Photoshop dilengkapi dengan fungsi efek dan filter yang menggoda. Jika anda ingin menggunakannya, maka gunakanlah dengan penuh kearifan. More filter ? better design.
Gunakan Color Overlays dengan tepat. Misalnya jika anda buat sebuah persegi warna biru langit. Kemudian anda ganti jadi warna merah dengan Blending Option > Color Overlay. Kenapa harus begitu jika anda bisa klik thumbnail warna Shape persegi tersebut.
Sempurnakan motif berpola. Tidak mudah untuk membuat desain sebuah JPEG persegi yang ingin dijadikan latar belakang berpola (tile melalui CSS), Sedikit miring saja polanya akan rusak. Namun jika anda berhasil, anda dapat menyimpan banyak space dan bandwidth server anda.
Gunakan efek sesederhana mungkin. Tidak ada bonus poin untuk jumlah efek yang anda tambahkan. Apalagi jika anda tidak tahu bagaimana sebuah gambar diterjemahkan menjadi CSS.
Dither. Gradien dimaksudkan untuk memuluskan transisi warna. Jika anda ingin simpan dalam bentuk transisi kasar, lebih baik gunakan setting efek Dither.
Strokes. Inside Strokes dapat menghasilkan sudut persegi yang bagus. Sedangkan Center dan Outer Strokes memberikan anda
http://dppka-sergaikab.com/news.php?item.130 Page 4/5
bulatan sempurna. Jika anda menggunakan strokes yang salah, hal ini dapat mempengaruhi lebar keseluruhan shape anda.
Gunakan Grid. Grid atau garis batas yang anda tarik dari Ruler Photoshop dapat membantu anda menjaga konsistensi ukuran-ukuran antara komponen secara akurat.
Gunakan Drop Shadows. Jika Anda dapat melihat Drop Shadow, kemungkinan setting Drop Shadow anda masih terlalu tebal. Drop Shadow, seperti halnya efek lainnya, perlu diubah dari setting default Photoshop untuk menghasilkan efek yang lebih realistis dan kelihatan canggih.
Gunakan Webfonts. Jangan menyulitkan developer anda untuk mencari tipe font alternatif . Pekerjaan mereka sudah cukup sulit. Bantu mereka dengan menggunakan webfont.
Consider Device Width. Will your one PSD at 960px cut it? Or do you need a Responsive Workflow? WHY? It s best to design with the mindset of how things will adapt to different widths, as opposed to hoping everything plays nice after the fact.
Pertimbangkan lebar device yang digunakan user. Apakah PSD anda pas di resolusi 960px? Hal terbaik ketika mendesain web adalah memiliki pola pikir bagaimana desain anda dapat beradaptasi dengan lebar yang berbeda, atau biasa disebut desain yang responsif.
Gunakan foto/icon berlisensi. Pencarian gambar pada Google bukanlah sebuah resource dimana gambar yang ditampilkan sewaktu-waktu bisa anda unduh dan pasang. Orang-orang bekerja keras untuk menghasilkan konten yang bagus. Anda hanya perlu sedikit merogoh kocek (jika berbayar).
Bekerja dengan penuh ketelitian. Sangat mudah untuk melewatkan beberapa kesalahan mencolok. Makanya, anda perlu usaha ekstra untuk memberikan jaminan kualitas 100%.
Koreksi bacaan. Periksa kembali desain anda, siapa tahu anda temukan kesalahan tata bahasa. Sangat mudah mengabaikan hal-hal seperti salah eja judul ketika sedang fokus pada kreatifitas.
Perjanjian yang jelas dengan klien. Kadang atas inisiatif sendiri, anda sudah mendesain logo sebagus mungkin. Namun ketika dipresentasikan, klien justru menanyakan, Mana logo asli saya? . Inisiatif anda tidak 100% benar. Makanya, anda perlu kesepakatan yang jelas di awal.
Hindari gambar yang mencantumkan watermark. Jangan sampai gambar pada desain anda masih meninggalkan jejak berupa watermark (biasanya jika anda ambil dari Google Images). Makanya, daripada menantang hukum, belilah lisensi gambar yang anda inginkan.
http://dppka-sergaikab.com/news.php?item.130 Page 5/5
Ketahui kompatibilitas browser. Setiap jenis browser punya cara tersendiri dalam memperlakukan desain anda. Ada beberapa yang tidak familiar dengan CSS3, atau sekedar transparansi PNG.
Konsisten. Apakah Anda tidak sengaja menggunakan 3 warna biru yang berbeda? Apakah merah yang anda gunakan sama seperti yang digunakan logo klien? Hal-hal sepele seperti ini penting untuk diperhatikan agar desain anda tetap konsisten.
Luangkan waktu anda. Jika tugas terakhir Anda adalah ekspor gambar dari PSD, maka hal ini adalah sesuatu yang cukup sekali saja ingin anda lakukan. Jadi jangan sampai melangkahi proses-prosesnya. Lakukan selangkah demi selangkah dengan teliti.
Save for Web. Jika anda pilih Save As > JPEG ketika menyimpan, anda akan mendapat file dengan ukuran lebih besar, masalah warna, dan sejumlah hal yang tidak sesuai ekspektasi awal desain anda. Makanya, gunakan opsi Save for Web (& Devices) saja ketika menyimpan.
Menghemat ukuran file. Negosiasikan kualitas / warna anda, bisakah dikurangi? Begitu pula dengan dimensi panjang x lebarnya. Semakin kecil ukuran file, semakin baik untuk bandwidth website anda.
Namai file sesuai fungsinya. Nama seperti blue_square3.jpg tidak memberikan indikasi apa-apa pada developer kecuali membuangnya ke tempat sampah. Beri nama sejelas dan sesingkat mungkin. Misalnya home-front-banner-640×250.jpg
Hapus ruang kosong yang tidak perlu. Anda tidak boleh secara sengaja menambahkan ruang kosong pada gambar hanya untuk mengatur layout seperti margin dan padding. Itulah gunanya CSS. Dengan demikian, anda dapat menghemat beberapa kilobyte.
Ciptakan versi retinanya. Perangkat iOS hadir dan mengenalkan tampilan Retina yang menawan. Diprediksikan akan lebih banyak device yang mengikutinya. Maka jika memungkinkan, pastikan desain anda telah memenuhi kebutuhan layar hi-dpi yang fantastis tersebut.
Terus Belajar. Bukan berarti semua pedoman di atas secara otomatis akan membuat Anda menjadi seorang master desainer, tetapi kami harap mereka dapat membantu pendekatan Anda ketika bekerja di area Photoshop.
Selamat bekerja ;-)
via V Log & Media Bisnis
