Walaupun secara visual kehadirannya sering terabaikan, tetapi bagi desainer yang teliti dan mengejar detail pada karyanya, 1 pixel itu kegunaannya sangat penting sekali. Terkadang pengunaan garis 1 pixel secara tepat bisa menjadi salah satu hal yang membedakan desainer baik dan desainer terbaik.

Desain website modern sekarang ini banyak menggunakan trik 1 pixel. Kegunaannya bisa bermacam-macam, selain untuk memberikan detail visual yang tidak terlalu berlebihan, garis 1 pixel juga bisa menambah faktor kenyamanan pengguna. Berikut beberapa contoh penggunaan garis 1 pixel pada desain website.

Memperjelas Batas

Yang ini sudah jelas fungsinya, yaitu untuk memberikan jarak antar konten satu dengan yang lain supaya pengguna mendapat ruang yang lebih nyaman dalam membaca.  Biasanya di gunakan untuk memisahkan beberapa kelompok text/paragraf (contoh: Twitter Stream, News Feed, dll).

Trik untuk membuat efek pembatas seperti gambar di atas adalah dengan menggunakan 2 garis masing-masing berukuran 1 pixel. Lalu buat warna garis yang satu lebih terang dari warna yang lainnya, dan tempatkan keduanya saling berdempetan.

Mempertajam Bidang

Garis tipis 1 pixel juga bisa di gunakan untuk memoles garis luar bidang, sehingga hasil akhirnya akan terlihat lebih tajam dan berbeda. Efek ini memang tidak terlalu jelas kelihatan, tetapi bila di bedakan antara yang memakai dan yang tidak, baru akan terlihat mana yang lebih nyaman di mata.

Memberikan Detail Visual

Tombol yang simpel dapat terlihat menarik kalau kita menggunakan outline 1 pixel dengan warna yang tepat. Dan tentu saja tombol yang efektif adalah tombol yang lebih ‘mengundang’ pengguna untuk mengklik.

Contoh & Inspirasi

Kesimpulan

1 pixel memang kecil, namun memegang peranan penting terhadap hasil akhir suatu desain website. Dengan penggunaan dan trik yang tepat kita bisa menciptakan detail yang akan memberikan dampak signifikan.

Jadi, kalau sekarang kamu sudah selesai mendesain website, coba cermati kembali supaya hasilnya adalah sebuah desain website yang ‘matang’.

Apakah kamu sering menggunakan trik ini juga? Atau ada trik detail yang lain? Silakan berbagi di kolom komentar

Jangan lupa bergabung di Grup Flickr Jurus Grafis untuk memamerkan karya kamu, temui juga Jurus Grafis di Twitter dan Facebook. Mari berlangganan Jurus Grafis melalui Email atau RSS.

Tipografi merupakan unsur penting di dalam desain, karena tipografi adalah inti. Tipografi adalah salah satu elemen yang menyampaikan isi dan maksud dari sebuah karya desain. Tidak jarang, desain yang efektif adalah desain yang hanya menggunakan tipografi yang baik tanpa menggunakan elemen visual sama sekali.

Sebegitu pentingnya peran tipografi pada desain yang kita hasilkan, jadi biarpun desain visual kita “wah”, tetapi kalau tipografi nya tidak mudah di baca dan susah di mengerti, maka desain tersebut termasuk gagal. Untuk menghindari itu, berikut 6 tips dasar untuk membuat tipografi lebih menarik, nyaman dan mudah terbaca.

Kerning

Kerning adalah jarak antar huruf. Dan ini merupakan favorit saya, kalau sudah bingung bagaimana membuat judul/kalimat tertentu menjadi lebih menarik, saya biasanya mendempetkan kerning pada judul/kalimat tersebut.

Namun harap di perhatikan, jangan sampai terlalu mendempetkan kerning karena hasilnya judul/tulisan akan susah terbaca dan terasa ‘penuh’. Jadi, gunakanlah teknik ini secukupnya.

Pemilihan Font

Pemakaian jenis font yang tepat dapat membantu desain menjadi lebih menyatu dan lebih cepat mengkomunikasikan maksud dari desain. Misalnya, pada desain brosur kecantikan, kita tidak mungkin menggunakan font yang ‘keras’, berbentuk kaku dan tebal. Akan lebih tepat jika kita menggunakan font yang tipis dan luwes, sesuai dengan kepribadian target market yang di tuju, yaitu wanita.

Jenis font bisa di ibaratkan jenis ’suara’ yang berbicara pada desain. Font dengan gaya tebal akan terasa seperti suara laki-laki dan bersuara berat. Font berbentuk kaku dan kotak-kotak, akan terasa seperti robot atau mesin yang berbicara, dan seterusnya. Masing-masing jenis font mempunyai jenis suara tersendiri.

Berat dan Ukuran

Kita bisa memainkan berat (tebal tipis) dan ukuran (besar kecil) font, untuk memberikan emphasis (elemen mana yang akan di baca atau di tampilkan terlebih dahulu). Sehingga secara tidak langsung pembaca akan di tuntun sesuai dengan flow yang kita mau.

Cara ini juga untuk mencegah pembaca pusing akan bagian mana yang seharusnya di lihat terlebih dahulu. Salah urutan dalam membaca akan mengakibatkan informasi yang kita sebarkan susah di mengerti.

Leading

Leading adalah jarak spasi antara kalimat atas dan bawah dalam satu paragraf. Biasanya elemen ini jarang di utak-atik oleh kebanyakan desainer. Padahal leading yang di atur dengan baik akan membuat pembaca tidak merasa lelah jika mereka membaca suatu artikel yang panjang.

Jarak yang di hasilkan jika kita memainkan leading akan memberikan kesan ruang kosong (whitespace). Yang tentu saja membuat mata tidak cepat lelah saat melihat teks yang begitu banyak.

Warna

Warna pada font biasanya di sesuaikan dengan background. Jika background berwarna (foto) maka lebih baik menggunakan 1 warna font yang netral (putih misalnya). Yang pasti harus menghasilkan kontras yang cukup, sehingga tetap nyaman di baca dan tidak ‘menusuk’ mata.

Teman-teman desainer kebanyakan pasti menyukai warna background hitam, namun masalahnya kalau di website, kombinasi background hitam dan teks putih itu akan menghasilkan ‘efek negatif film’ pada mata saat kita selesai membaca.

Akan lebih baik jika warna background di buat tetap gelap, namun tidak hitam 100%, dan berikan warna abu-abu muda pada font. Dengan begitu maka mata tidak akan terlalu lelah dan ‘efek negatif film’ tidak akan ada lagi.

Lebar Paragraf

Hal ini sangat penting, karena sangat mempengaruhi kenyamanan membaca. Coba bayangkan paragraf yang lebar di halaman website dengan artikel yang panjang. Kita sampai harus perlu memutar kepala sedikit (dari kiri ke kanan) untuk membaca artikel tersebut. Saya jamin kita hanya akan bertahan 1-2 paragraf saja!

Idealnya paragraf tidak terlalu lebar (dan tidak terlalu pendek), harus di sesuaikan dengan besar font juga. Untuk ini memang kita harus mencoba langsung membaca paragraf yang kita desain untuk menemukan lebar yang ideal. Jika kita masih menggerakan kepala lumayan sering, itu artinya kita harus mengatur kembali lebar paragraf tersebut.

Kesimpulan

Dengan ke 6 tips di atas semoga kita bisa lebih peka dalam mengatur tipografi (terlebih jika teks nya banyak!). Percayalah, dengan tipografi yang mudah terbaca maka orang juga akan lebih menyukai desain kita. Mulai sekarang anggaplah tipografi sebagai bagian penting dalam desain (atau yang lebih ekstrim, tipografi sebagai visual juga).

Apakah kamu mempunyai tips tambahan lain? Ayo di bagikan dengan teman-teman yang lain di kolom komentar

Tautan Terkait
Merancang Tipografi Gaya Bebas

Temui Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis. Kalau tidak ingin ketinggalan posting berikutnya, kamu bisa berlangganan melalui Email atau RSS.

Tahun ini Twitter sepertinya akan jadi ‘mainan’ baru bagi kita. Selain fungsinya untuk membangun jaringan pertemanan, Twitter juga sudah menjadi sumber berita dan informasi terbaru. Jadi, sebagai desainer grafis kita mempunyai satu media baru lagi yang bisa kita pakai untuk mem-branding diri kita di dunia maya.

Saya yakin sebagian besar kita mempunyai akun Twitter, tapi berapa banyak yang masih menggunakan desain background standar dari Twitter? Kita harus bisa menampilkan citra kita sebagai desainer walaupun di dunia maya. Dalam kasus Twitter ini, tentu background menjadi salah satu cara yang efektif (selain tweets yang kita update).

Pengenalan Ukuran Background Twitter

Mari kita analisa sedikit tentang background Twitter ini. Bidang putih di tengah (area konten berukuran lebar 764 Pixel) akan selalu tetap di tengah dan berwarna putih berapapun besar resolusi monitor yang kita pakai. Dan karena sekarang sudah banyak yang memakai monitor widescreen, maka akan ada ruang kosong (sebesar 250 – 300 Pixel) di samping kiri dan kanan.

Cara Kerja Background

Kalau kita menggunakan desain sendiri, Twitter akan otomatis meletakkan desain kita mulai dari pojok kiri atas. Sehingga akan ada sisa space yang tidak bisa tertutup dengan desain kita. Solusinya, kita menyamakan warna background desain kita dengan warna background Twitter yang bisa kita atur sendiri di menu “Settings” pada website Twitter.

Solusi yang kedua adalah menggunakan background yang bisa di ulang (Repeated Pattern). Dengan ini di jamin akan aman di resolusi monitor apapun. Namun kelemahannya adalah kita agak sulit untuk menempatkan info tambahan pada pattern, karena akan terlihat aneh jika “alamat web” kita terlihat berulang-ulang.

Ukuran Ideal Background Twitter

Monitor dengan resolusi 1024 x 768 Pixel sudah menjadi standar (semua orang pasti memakainya). Tapi mulai banyak juga yang menggunakan resolusi di atas itu, saya sendiri menggunakan widescreen 1360 x 768 Pixel.

Karena begitu variatif nya ukuran monitor saat ini, maka lebih baik kita mendesain dengan ukuran yang agak besar, yaitu dengan dokumen lebar 1600 Pixel dan tinggi 1024 Pixel. dengan begini background Twitter kita akan nyaman di lihat sampai resolusi 1600 widescreen, bila masih ada sisa space yang tidak bisa tertutup, kita bisa menggunakan trik menyamakan warna background (di buat fade out di bagian tertentu).

Contoh Desain Background Twitter

Berikut beberapa conton desain background Twitter yang dapat menginspirasi kamu untuk mendesain background kamu sendiri. Selamat menikmati

Chrisspooner

WebDesignerDepot

Oridusartic

Frenden

Hallisar

Elite Styles

Rogie King

Zam Design

iCreativeLabs

Kesimpulan

Jadi manakah yang lebih baik? menggunakan Pattern atau background berukuran ideal/besar seperti di atas?

Semuanya tergantung kebutuhan kamu, jika perlu menampilkan info tertentu, solusi terbaik adalah dengan menggunakan background ukuran ideal. Tapi bila kamu tidak perlu menampilkan info apapun, kamu bisa menggunakan Pattern untuk hasil yang terbaik di segala resolusi monitor.

Yang pasti tidak ada batasan, gunakan kreativitas kamu setinggi mungkin! Tunggu tutorial mendesain background Twitter pada posting selanjutnya.

Tautan Terkait:
Membuat Background Twitter: Hal-hal yang perlu di ketahui
40 Beautiful Twitter Theme Backgrounds
42 Twitter Backgrounds
Effective Twitter Backgrounds: Examples and Current Practices

Jangan lupa bergabung di Grup Flickr Jurus Grafis untuk memamerkan karya kamu, temui juga Jurus Grafis di Twitter dan Facebook. Mari berlangganan Jurus Grafis melalui Email atau RSS.

Banyak yang bilang kalau kartunama itu merupakan impresi pertama, pandangan pertama, selanjutnya kalau bisa jangan sampai terlupakan.

Dan memang sebagai desainer, kita harus bisa membuat impresi pertama yang positif. Rasanya kreatifitas seorang desainer pertama kali di ukur dari kartunama kita. Well, memang tidak hanya desainer saja, semua profesi dan pribadi pun seperti itu.

Jadi bagaimana cara mendesain kartunama yang unik dan menarik? Berikut tips-tips beserta inspirasi yang bisa kamu gunakan ketika kamu ingin mendesain kartunama untuk pribadi atau klien.

1. Langsung kepada Intinya

Saat orang menerima kartunama, tentu waktu baca nya hanya sebentar (mungkin 5-10 detik). Setelah itu, orang biasanya akan melanjutkan mengobrol dengan kita atau memuji kartumana kita. Jadi sebisa mungkin, informasi yang di tampilkan harus langsung. Orang harus mudah dan cepat mengetahui profesi,nama lengkap dan nomor kontak kita.

Bisa juga menggunakan copywriting (tata penulisan) yang menarik. Dengan kata-kata yang provokatif atau lucu, intinya “make it memorable from the first time”.

Styles Webbin

Michael But

2. Hindari Pemakaian Font yang Berlebihan

Aturan dasar ini sebenarnya berlaku bagi semua desain, tidak hanya kartunama saja. Jangan sampai kartunama kita terlihat sedang berpesta font. Selain tidak nyaman di baca, secara visual juga tidak terlihat indah. Maksimal gunakan 2 font, untuk nama/logo dan untuk konten (nomor telepon, alamat website dan lainnya).

Bake Lab

Eden Design

3. Tidak Perlu Menampilkan Semua Layanan

Kartunama bukan brosur, jadi jika ada 10 layanan, jangan semua di masukkan ke kartunama. Jujur saja, akan terlihat murahan dan seperti tidak mau rugi.

Lebih baik masukkan layanan utama saja, setiap bisnis pasti punya layanan utama bukan? Misalnya, perusahaan percetakan, cukup gunakan “Printing” atau “Percetakan” sebagai layanan, sisanya seperti flyer, brosur, umbul-umbul, mug dan lain nya lagi tidak perlu di masukkan ke dalam kartunama. Yakinlah, dengan mengedepankan salah satu layanan/kelebihan kita, pasti akan terlihat lebih profesional.

Rich Mcnabb

Tom Mayes

4. Pilih Antara Minimalis atau Maksimalis

Jangan sampai berada di antara keduanya, minimal tidak, maksimal juga tidak. Kalau mau minimalis, jangan pernah berpikiran sayang membuang-buang kertas (karena banyak ruang kosong), pertajam desain minimalis dengan menggunakan material kertas yang tidak biasa. Atau jika mau maksimalis, jangan setengah-setengah (tidak berarti mengisi ruang kosong sampai penuh).

Vevia

Chuck Tingley

5. Berikan Elemen Interaktif

Coba gunakan konsep baru di luar selembar kartunama biasa. Sebagai contoh, saya pernah melihat kartunama yang bisa berubah jadi bentuk mobil. Atau yang simpel, sewaktu di buka ada pop-up muncul (seperti kartu ucapan).

Kekurangan cara ini adalah bentuk kartunama yang tidak biasa, itu artinya kemungkinan orang akan susah menyimpannya di tempat kartunama yang biasa. Tetapi masih bisa ditutup kelemahan ini dengan faktor kejutannya, orang pasti akan langsung ingat siapa yang membuat kartunama dengan konsep seperti itu.

Egil Paulsen

Nation Builder

6. Gunakan Material Kertas dan Finishing yang Berbeda

Mungkin menyablon sendiri kartunama di atas kain, lalu di jahitkan secara manual ke sepotong karton akan terlihat lebih menarik. Atau gunakan tipe kertas yang bertekstur, yang tidak bisa sobek, dan lainnya.

Untuk tahap finishing, bisa menggunakan teknik emboss, deboss, spot UV, laser cutting, foil, apa saja. Tentu di sesuaikan dengan kebutuhan desain yang kamu buat.

Berkeley

Net Plus

Blackver (material nya sangat unik, silakan di baca di sini)

Punya desain atau foto kartunama kamu sendiri? Ayo di masukkan ke Grup Flickr Jurus Grafis! Ya Betul! kamu berkesempatan mempromosikan diri kamu

Tautan Terkait :
Card Observer – Business Card Design Gallery
Creattica – Business Card Gallery

Jangan lupa selalu ikuti Twitter Jurus Grafis dan bergabung di Facebook Page Jurus Grafis untuk mendapatkan berita dan artikel tambahan yang menarik!

Bagi kamu yang suka mendesain gambar untuk tshirt, mempunyai usaha clothing sendiri, atau mungkin ada projek mendesain tshirt, terkadang kamu ingin mempresentasikan atau melakukan promosi sebelum tshirt itu selesai di produksi. Trik ini berguna untuk mensimulasikan dengan realistis bagaimana kira-kira hasil akhir produksi tshirt kamu.

Jika mungkin sebelum nya kamu hanya menaruh artwork kamu di atas template suatu tshirt kosong, maka sekarang ada cara lebih baik yang akan sangat membantu menambah nilai karya yang telah kamu hasilkan.

Pertama-tama kita mencari sumber tshirt kosong nya terlebih dahulu, kebetulan saya mencari nya melalui Flickr Group, Threadless blank tees, yang menyediakan foto-foto tshirt kosong yang kreatif, kamu tinggal memilih mana yang kamu suka. Untuk sekarang ini saya akan menggunakan foto ini sebagai template saya. Ok, jika semua sudah siap, buka Photoshop kamu dan kita mulai!

Langkah 1

Buka foto tshirt yang sudah kamu unduh tadi di Photoshop.

Langkah 2

Pilih Pen tool dan ubah setting nya menjadi “Paths”, karena kita akan men-Trace area tshirt yang ada di foto tersebut.

Langkah 3

Mulailah men-Trace area tshirt, sampai semua area terpilih

Langkah 4

Jika sudah semua area di Trace, maka selanjutnya adalah menseleksi area tersebut. Jangan lupa tekan “A” (Path Selection Tool) terlebih dulu, lalu klik kanan, akan muncul dialog box seperti di bawah ini. Pilih “Make Selection”, ubah Feather Radius ke “0″ dan tekan Ok.

Langkah 5

Setelah area tersebut terseleksi, kita akan merubah warna kuning tshirt tersebut menjadi putih (langsung lompat saja ke langkah 6 , kalau foto yang kamu pakai adalah foto tshirt berwarna putih). Ikuti cara berikut ini, Image > Adjustments > Hue/Saturation > Saturation -100 > Ok. Kamu akan mendapatkan hasil seperti di bawah ini.

Langkah 6

Pada tahap ini, kita akan berusaha mengeluarkan bayangan yang ada di tshirt tersebut, supaya lipatan-lipatan tshirtnya lebih terlihat. Caranya adalah kita menaikan Contrast dan Levels foto tersebut. Untuk Contrast langkahnya adalah, Image > Adjustments > Brightness/Contrast > Contrast +100 > Ok

Dan untuk Levels, Image > Adjustments > Levels > Ok (ikuti setting Levels seperti gambar di bawah, atau sesuaikan dengan kebutuhan kamu)

Langkah 7

Setelah Levels sudah di setting jangan klik area lain, karena kita akan menduplikasi layer tshirt tersebut. Caranya mudah, selagi terseleksi tekan Ctrl + C , lalu Ctrl + V. Itu akan membuat layer baru (layer 1) di atas layer background lalu ubah nama “Layer 1″ menjadi “shadow atas”.

Langkah 8

Sekarang kita akan membuat warna tshirt nya, tetapi pada layer yang baru lagi, ini supaya kita bisa dengan mudah mengganti-ganti warna tshirt tanpa merubah elemen lain. Pilih lah tab Paths, lalu klik Path tshirt yang sudah kita buat sebelum nya (hasil trace). Setelah itu klik tabs Layers dan buat layer baru.

Langkah 9

Setelah itu, klik kanan pada Path yang sudah terseleksi, pilih “Fill Path” lalu tekan Ok. Ini akan menghasilkan warna merah berbentuk tshirt yang sudah kita trace sebelumnya pada layer baru. (untuk warna, tergantung palet Foreground kamu sedang berwarna apa, kamu bisa merubah warna nya terlebih dahulu sebelum melakukan langkah ini).

Langkah 10

Namakan Layer warna baju tersebut menjadi “warna baju” untuk memudah kan pemilihan layer di lain waktu. Dan ubah blending mode layer “shadow atas” menjadi Multiply. Ya, sampai disini kamu sudah selesai! tinggal memasukan artwork, di antara layer “shadow atas” dan “warna baju”.

Selanjutnya kamu tinggal bereksperimen, karena tiap artwork dan warna baju akan menghasilkan settingan layer yang berbeda. Seperti contoh di atas, layer “shadow atas” saya sampai 3 kali untuk menghasilkan efek yang saya mau dan juga karena warna baju yang saya gunakan hitam.

Hasil Akhir

Selamat mencoba! Jika kamu memerlukan file PSD tutorial ini (2,2 Mb) silakan di unduh melalui tombol di bawah ini (beritahu saya di kolom komentar jika download speed nya terlalu lama, karena mungkin akan saya upload juga di server Indonesia). Last but not least, jangan lupa tunjukkan karya kamu dengan bergabung di Grup Flickr Jurus Grafis!