Fungsi sebuah blog sudah bergeser dari yang tadinya hanya sebatas tempat curhatan sang penulis, sekarang menjadi media publikasi bagi orang banyak (istilah keren nya, Citizen Journalism). Pada posting ini kita akan membahas beberapa elemen visual yang menjadikan desain sebuah blog menjadi efektif.

Sinergi Desain & Konten

Inti dari blog memang ada pada konten blog itu sendiri, tetapi seperti diskusi kita terdahulu, konten yang bagus jika tidak didukung dengan desain yang efektif maka tidak akan berhasil. Sebagian mungkin bisa bertahan karena faktor senioritas atau konten yang tidak dapat di temukan di blog lain. Tapi bagaimana dengan blogger junior yang walaupun mempunyai konten yang bagus tetapi kurang/belum memperhatikan desain blognya sendiri?

Lagipula, apa salahnya memanjakan pembaca dengan presentasi desain yang nikmat di mata? Selain membuat pembaca lebih betah berlama-lama di blog kita, manfaat lain tentu membuat pesan yang ingin kita sampaikan lebih mudah di tangkap.

Berikut adalah beberapa poin/tips yang bisa di gunakan untuk membuat desain blog menjadi lebih efektif.

Tata Letak Kolom Konten

Dari hasil pengamatan saya, ada 5 macam jenis tata letak kolom yang sering digunakan pada desain blog. Masing-masing tata letak mempunyai kelebihan dan kekurangan, namun kita bisa menentukan yang terbaik bagi keperluan blog yang akan kita desain.

1. Menurun Single (1 kolom)

Jenis ini merupakan tata letak yang standard dan hampir semua blog menggunakan metode ini. Dikarenakan sistem dokumentasi dan penanggalan blog yang berdasarkan hari, maka posting terbaru akan di letakkan di paling atas.

Kelebihan :

• Pembaca sudah familiar dengan tata letak ini
• Mudah menemukan posting terbaru
• Ruang untuk konten lumayan luas

Kekurangan :

• Dari segi visual terlihat biasa saja
• Pembaca akan mengalami sedikit kesulitan bila ingin melihat posting terdahulu

2. Menurun Paralel (2 kolom)

Sama dengan tipe menurun yang pertama, perbedaannya hanya pada kolom konten yang di bagi menjadi 2, sehingga dapat memuat lebih banyak konten di dalam satu halaman.

Kelebihan :

• Pembaca dapat dengan mudah melihat beberapa posting terbaru
• Memberikan pilihan kepada pembaca
• Blog terasa lebih kaya akan konten

Kekurangan :

• Layout secara keseluruhan akan terlihat penuh
• Kalau pengaturan masing-masing kolom tidak di perhatikan (tinggi kolom), akan terlihat berantakan
• Beberapa pembaca akan bingung mana yang mau di baca terlebih dulu

3. Grid (4-6 kolom)

Sesuai dengan namanya, tata letak ini menggunakan sistem grid untuk mengatur tata letak kolom kontennya. Desainer bebas menentukan akan menggunakan berapa kolom, tergantung dengan kebutuhan dan jenis konten (lebih banyak gambar atau tulisan).

Kelebihan :

• Secara visual terlihat menarik
• Semua posting dapat tampil dalam satu halaman

Kekurangan :

• Akan membingungkan pembaca
• Dari sisi layout ada kemungkinan akan terlihat berantakan

4. Full Width

Tipe yang satu ini tidak menggunakan kolom, tetapi menggunakan seluruh lebar halaman yang ada. Bahkan bagian sidebar kanan atau kiri tidak di gunakan, namun ada juga beberapa yang tetap menggunakan sidebar tetapi dengan porsi yang sangat minim.

Kelebihan :

• Konten menjadi sorotan utama
• Terlihat unik karena belum banyak yang menggunakan
• Lebih nyaman di baca
• Pembaca akan fokus kepada posting tanpa ada gangguan banner atau widget lain

Kekurangan :

• Terlihat “sepi”
• Agak sulit menampilkan posting-posting sebelumnya
• Butuh strategi khusus untuk menempatkan banner iklan atau widget lain

5. Custom Posting

Kalau kamu mempunyai keahlian di bidang coding, pilihan ini mungkin bisa kamu pertimbangkan. Tipe ini merupakan tipe “break the rules” karena sama sekali tidak menggunakan template yang sama pada setiap posting. Melainkan menyesuaikan desain dengan konten dalam arti yang sebenarnya. Konsep nya sama seperti majalah yang melayout setiap artikel nya secara personal.

Kelebihan :

• Sudah pasti terlihat unik
• Sinergi konten dan desain sangat dapat dirasakan
• Pembaca akan melihat seluruh posting karena penasaran akan tampilan visualnya

Kekurangan :

• Butuh waktu yang lumayan lama untuk membuat 1 posting saja
• Tidak semua orang menguasai coding

Pengaturan Font

Konten adalah jiwa dari sebuah blog karenanya kita harus memperhatikan cara kita menggunakan dan menampilkan text dengan baik. Tujuannya tak lain adalah agar nyaman di baca. Berikut ini beberapa hal yang harus di perhatikan,

1. Jenis Font

Di dalam blog pasti ada 2 jenis font yang harus di gunakan, yang satu sebagai heading, dan yang lain sebagai body text. Untuk bagian heading kita bisa menggunakan font yang jarang di pakai oleh desainer lain atau disesuaikan dengan kebutuhan dasar headline itu sendiri, yaitu untuk menjadi pusat perhatian.

Pada bagian heading kamu bisa menggunakan font yang tebal atau mencari font dengan bentuk yang unik (namun tetap terbaca). Penggunaan font yang tidak biasa pada heading juga bisa menjadi pembetukan karakter desain sebuah blog.

Yang kedua adalah font untuk body text. Di bagian ini sebaiknya kita menggunakan font standard yang memang di fungsikan untuk body text, alasan utamanya adalah agar text dapat di tampilkan dengan baik di semua monitor pembaca.

2. Ukuran Font

Yang akan lebih di bahas di sini adalah ukuran font pada body text. Karena perkembangan resolusi monitor saat ini, ukuran 12 point adalah ukuran standard. Tapi kalau kamu mau lebih meningkatkan kenyamanan dalam membaca bisa menggunakan 14 – 16 point, ukuran ini tergantung kepada jenis font yang kamu gunakan.

3. Line Spacing

Bagian ini sangat kecil, namun penting untuk menjaga kenyamanan saat kita membaca artikel. Rumus yang biasa di gunakan adalah besar font yang di gunakan, di tambah 4 point. Misalnya, kamu menggunakan font 14 point, maka line spacing yang ideal adalah 18 point.

Namun pengaturan line spacing harus di coba secara langsung, terkadang bisa juga line spacing 20 point (dengan besar font 14 point) lebih nyaman di baca karena bentuk dan jenis font juga mempengaruhi.

Desain Header & Logo

Sesimpel apapun desain header dan logo yang kamu buat haruslah menarik. Ibaratnya, header dan logo adalah wajah seseorang. Karena ini desain untuk blog, maka logo mungkin tidak menjadi keharusan, tetapi akan lebih baik jika kamu mempunyai logo walaupun hanya berbentuk tipografi (logotype). Desain logo yang unik akan menjadi identitas blog.

Desain header dapat disesuaikan dengan “feel” keseluruhan blog yang ingin kamu dapatkan. Kamu bisa bereksplorasi dengan ilustrasi, texture, atau bahkan bermain dengan white space.

Inspirasi Desain Header Blog

Styling Image

Sebenarnya trik ini sangat simpel, hanya menambahkan border di sekitar image/photo yang kita gunakan pada posting. Dengan cara ini image akan tampil lebih menarik walaupun efek nya tidak terlalu terlihat. Akan terasa perbedaanya antara yang menggunakan dan tidak menggunakan styling image.

Contoh Penerapan Border Pada Gambar

Optimasi Sidebar

Mayoritas blog mempunyai sidebar, tapi terkadang kita suka bingung ingin menaruh fitur/widget apa di bagian ini. Sebelum kamu menambahkan widget dengan membabi buta, lebih baik pikirkan dulu hal selain konten yang ingin kamu sampaikan kepada pembaca.

Untuk optimasi sidebar ini tidak ada tips yang baku, semuanya kembali lagi kepada kamu. Dari hasil pengamatan saya, sidebar pada blog biasanya di gunakan untuk,

• Komentar Terkini
• Posting Pilihan (Featured)
• Posting Terpopuler
• Banner Iklan
• Twitter / Facebook Page stream
• Icon Social Media
• Flickr Gallery
• Kategori Posting
• Archives
• Voting Widget (menampilkan voting atau hasil voting)
• Peringkat Komentator
• ( Kemungkinan lain, silakan beritahu saya melalui kolom komentar )

Inspirasi Sidebar

Kolom Komentar

Bagian yang ini memang sudah menjadi default dari semua blog engine yang ada dan tujuan nya semua sama, yaitu untuk menciptakan komunikasi 2 arah antara penulis dan pembaca.

Banyak cara untuk menjadikan kolom komentar menjadi menarik, selain dari segi visual, penggunaan kata-kata yang unik juga menjadi faktor tambahan supaya pembaca mau menulis komentarnya. Agar pembaca nyaman menulis komentar, sebaiknya bagian field komentar di buat lebih lebar dan agak tinggi, ini akan berguna bagi pembaca yang ingin menulis komentar yang lumayan panjang.

Inspirasi Kolom Komentar

Optimasi Footer

Trend Big Footer sepertinya masih akan berlangsung lama karena fungsinya sebagai area pemberhentian kedua setelah area konten yang berada di paling atas.

Ada 2 tujuan dasar mendesain big footer pada blog,

1. Untuk meletakan fitur tambahan yang tidak cocok (tidak muat) di letakan di sidebar atas.
2. Membuat pembaca lebih mendalami konten blog (misalnya, dengan menaruh widget “Most Discussed Articles”)

Yang pasti footer bukan lagi ruang yang di anak-tiri kan lagi, malah bisa mendukung keseluruhan konten blog.

Inspirasi Footer Efektif

Kesimpulan

Blog dengan konten yang bagus akan menjadi lebih bagus lagi jika menggunakan desain yang efektif dan cantik. Konten dan desain tidak lagi menjadi hal yang terpisah, melainkan bersinergi menghasilkan suatu blog yang memukau dan berguna bagi banyak orang.

Sudah siap mendesain (atau me-redesain) kamu? Atau ada elemen yang tertinggal? Mari berkomentar!

Efek embun sangat mudah di buat di Photoshop, hanya perlu menggunakan satu teknik (yaitu teknik masking) dan kesabaran untuk mendapatkan hasil yang mendekati realistis.

Sebelum memulai saya mau meminta maaf karena tidak sempat menulis artikel baru selama bulan April kemarin di karenakan kesibukan pekerjaan (cliche but true! ). Tapi mulai sekarang saya berkomitmen untuk menjadikan Jurus Grafis sebagai projek juga sehingga frekuensi posting tetap dapat terpenuhi.

Ok, cukup basa basi nya, kita akan mulai membuat efek embun di Photoshop. Materi yang di perlukan adalah gambar kaleng minuman bersoda (atau gambar apa saja yang kamu mau), bisa di unduh di tautan ini.

Langkah 1

Buka gambar kaleng yang sudah di unduh tadi di Photoshop.

Langkah 2

Gunakan Pen Tool (P) berwarna putih untuk menggambar embun. Bentuk embun tidak beraturan tetapi tetap ada unsur lingkaran, jadi kamu bisa bebas menentukan bentuk embun yang kamu inginkan.

Langkah 3

Di tahap inilah efek embun akan di hasilkan. Gunakan teknik masking pada bentuk embun yang baru kita buat tadi.

Langkah 4

Gunakan Soft Brush pada bagian tengah bentuk embun, sehingga akan di hasilkan efek transparan, jangan lupa juga untuk menurunkan Opacity Brush nya supaya efek transparan yang di hasilkan lebih lembut.

Kunci langkah ini adalah eksperimen, sekaligus melatih feeling kita untuk menghasilkan efek yang sesuai seperti embun asli.

hasil sementara akan seperti gambar di bawah ini,

Hasil Akhir

Ulangi langkah 2 sampai langkah 4 untuk membuat embun yang lain. Atau kamu bisa menduplikasi embun yang sudah ada dan merubah bentuk nya dengan Transform Tool (Ctrl + T).

Kesimpulan

Membuat efek embun sangat mudah sekali bukan? dengan cara ini kamu bisa membuat efek lain selain embun, seperti bola kristal atau bola transparan, dan lainnya. File photoshop tutorial ini bisa kamu unduh di akhir posting (507 Kb). Selamat mencoba dan jangan pernah berhenti bereksperimen!

Rasanya kita sebagai desainer tidak akan pernah bosan untuk belajar dari Apple. Selalu ada saja ide baru yang di keluarkan, di tambah lagi dengan didukung visual yang menarik. Dan kali ini kita akan belajar membuat tampilan aplikasi iBooks yang ada di iPad.

Sedikit Tentang iBooks

iBooks adalah sebuah aplikasi E-Reader keluaran Apple, yang otomatis terdapat pada iPad. Selain fungsi nya untuk membaca, tampilan aplikasi ini sangat unik, yaitu menyerupai rak buku. Jadi kita tinggal meng-klik cover buku yang ada dan kita bisa langsung membaca isinya, bahkan bisa membalik halaman seperti buku asli!

Ok, cukup pengenalan mengenai iBooks, sekarang kita akan belajar membuat desain interface ala iBooks! Mari kita mulai!

File Yang di Perlukan

Sebelum mulai, sebaiknya kamu mengunduh tekstur kayu di tautan ini. Atau kamu bisa mencari gambar tekstur kayu yang sesuai dengan selera kamu.

Langkah 1

Buka dokumen baru di Photoshop seperti gambar di bawah ini.

Langkah 2 (Background)

Kita akan membuat bagian backgroundnya terlebih dulu. Gunakan Rectangle Tool (U) untuk membuat persegi yang menutupi semua dokumen tersebut. Pilih warna coklat sebagai warna dasar.

Langkah 3

Buka file tekstur kayu yang sudah kamu unduh tadi di Photoshop. Lalu ubah ukurannya menjadi 200 x 200 pixel.

Setelah itu Edit > Define Pattern lalu namakan tekstur tersebut. Sekarang kita sudah mempunyai pattern bergambar kayu yang bisa di ulang (repeated pattern) tanpa putus.

Selanjutnya, buat layer baru dan Fill (isi) dengan pattern kayu tersebut. Caranya, Edit > Fill > Custom Pattern.

Langkah 4

Setelah layer 1 terisi dengan pattern kayu, maka kita akan mengubah Layer Blending Mode nya menjadi Multiply dengan Opacity 85%.

Langkah 5 (Manajemen Layer)

Ok, kita sekarang sudah selesai membuat background nya. Supaya dokumen Photoshop kita rapih dan mudah untuk di edit di kemudian hari. Kita akan membuat Folder “Background”. Cara ini sama seperti mengelompokkan beberapa layer yang berhubungan dekat.

Cara ini harus di lakukan karena kita akan bekerja dengan lumayan banyak layer nantinya. Jadi lebih baik stay organized daripada nanti kita kebingungan sendiri

Sebelum kita lanjut, buat Folder baru dan namakan “Rak”.

Langkah 6 (Pembuatan Rak)

Kita akan membuat Rak nya terlebih dulu. Gunakan Rectangle Tool (U) untuk membuat persegi panjang.

Sedikit info tentang kenapa saya memilih menggunakan Smart Object (vektor) daripada Rasterized Layer (pixel) adalah, untuk memudahkan kita mengubah bentuk (tanpa pecah) dan merubah warna (dengan patokan nilai yang sama dengan yang lain). Karena terkadang pada saat tahap sentuhan akhir kita ingin mengubah warna atau merubah ukuran, hal ini akan sedikit sulit di lakukan apabila semua bentuk yang kita buat bersifat Rasterized Layer.

Langkah 7

Berikan Layer Style dengan cara dobel klik layer persegi tersebut. Atau kamu bisa ke main menu > Layer > Layer Style. Gunakan efek Drop Shadow dan Gradient Overlay pada bentuk persegi ini.

Langkah 8

Selanjutnya, kita akan membuat efek 3 dimensi atau perspektif pada rak. Cara nya sangat mudah, kita hanya perlu memberikan shape tambahan di bawah layer rak ini.

Setelah posisi sudah tepat, sekarang kita akan memberikan efek bayangan pada bagian perspektif ini. Caranya masih sama dengan yang tadi, yaitu gunakan Layer Style Drop Shadow dan Gradient Overlay (ikuti setting seperti gambar di bawah).

Langkah 9

Untuk menambah kesan realistis, kita akan membuat penyangga rak buku. Gunakan Rounded Rectangle Tool (U) dan ubah setting roundness / radius nya menjadi 8 pixel.

Berikan efek Drop Shadow dan Gradient Overlay dengan menggunakan Layer Style.

Jangan lupa pada detil yang penting. Pada kasus ini kita akan menambakan mur/skrup pada penyangga. Gunakan Ellipse Tool (U) dan sesuaikan warnanya dengan penyangga tersebut.

Duplikasi mur/skrup ini untuk mengisi sisi sebelah dari rak. Ada banyak cara menduplikasi layer, cara paling mudah adalah seperti gambar di bawah ini.

Langkah 10 (Detil Rak)

Karena rak yang kita buat ini adalah rak kayu, maka kita harus memberikan tekstur kayu juga pada sisi luar rak. Untuk tahap ini kita akan menggunakan teknik Layer Masking, kalau kamu belum familiar dengan teknik ini silakan pelajari tutorial nya di posting terdahulu.

Langkah 11 (Detil Rak – Lagi)

Seperti yang kita tahu, garis sebesar 1 pixel bisa memberikan perbedaan yang signifikan pada suatu desain. Untuk itu kita akan memberikan juga detil “halus” pada desain kita kali ini.

Gunakan Pencil Tool (B) dengan besar 1 pixel berwarna putih, dan ubah Layer Blending Mode nya menjadi Overlay.

Berikan efek cahaya pada sisi luar rak dengan menggunakan Brush berwarna putih dan teknik Layer Masking.

Langkah 12

Buat folder baru dan namakan “Sisi Dalam Lemari”. Ya, kita sudah setengah jalan

Langkah 13 (Sisi Dalam Lemari)

Selanjutnya kita membuat sisi samping bagian dalam dari rak buku ini. Sangat mudah sekali, karena hanya menggunakan Rectangle Tool (U) dan Layer Blending mode seperti gambar di bawah.

Untuk menyelesaikan bagian ini, kamu tinggal meng-copy paste sisi kiri yang sudah di buat. Lalu tinggal di balik dan di tempatkan di sisi sebelah kanan.

Langkah 14

Buat folder baru dan namakan “Buku”. Kita akan mulai menata rak buku ini!

Langkah 15 (Template Tampilan Cover Buku)

Di tahap ini kita akan membuat semacam template untuk cover buku yang akan kita tampilkan. Gunakan Rectangle Tool (U) untuk menmbuat bentuk standar buku. Dan berikan Layer Style Drop Shadow.

Langkah 16

Supaya cover buku kita tidak terkesan “flat”/datar, maka kita akan memberikan efek ketebalan yang halus. Caranya adalah dengan menggunakan Brush – soft (B) berwarna hitam lalu di masking ke dalam template cover buku tersebut.

Gunakan teknik yang sama untuk memberikan efek cahaya pada buku. Saya sedikit menggelapkan warna dasar buku agar terlihat efek yang diinginkan.

Langkah 17

Masukkan cover buku yang kamu inginkan ke dalam template tersebut. Cara memasukkan cover ini masih menggunakan teknik Layer Masking. Untuk lebih jelasnya kamu bisa mengunduh file photoshop yang di buat khusus untuk tutorial ini di akhir posting.

Duplikasi dan lanjutkan menata rak buku kamu . Desain cover buku yang keren-keren ini bisa kamu dapatkan di CoverBookArchive.

Yeah! kita sudah selesai!. Selanjutnya kamu tinggal terus menduplikasi dan mengganti masing-masing cover bukunya.

Hasil Akhir

File Photoshop seperti di atas ini bisa kamu unduh di akhir posting (4Mb – Zip), dengan begitu kamu akan lebih jelas melihat bagaimana cara menyusun layer dan teknik yang di gunakan untuk mendesain tampilan seperti aplikasi iBooks.

Kesimpulan

Untuk membuat desain seperti ini tidak di butuhkan teknik dan trik yang rumit. Sejauh ini saya hanya menggunakan teknik masking dan layer blending. Yang terpenting adalah kesabaran dan perhatian terhadap detil-detil yang kecil. Selamat mencoba!

Sekedar Informasi

Ternyata Apple di duga ‘mengikuti’ desain aplikasi E-Reader bernama Classics (yang sedikit banyak mempengaruhi saya dalam mendesain interface tutorial iBooks ini). Classics sudah lebih dulu beredar di iPhone jauh sebelum iPad di umumkan. Saya pribadi lebih menyukai desain interface milik Classics. Namun sayangnya saya belum bisa mencoba menggunakannya langsung!

Jangan sampai kamu ketinggalan tutorial seperti ini! Ayo berlangganan melalui Email atau RSS. Dan ikuti Jurus Grafis di Twitter dan Facebook.

Interface Ala iBook (237)

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.

Icon merupakan topik yang menarik. Biasanya icon digunakan untuk menjelaskan suatu fungsi/fitur pada sebuah website/produk tanpa kata-kata, atau untuk mendukung kata-kata yang di pakai pada fungsi/fitur tersebut.

Misalnya, untuk menjelaskan “Halaman Utama/Homepage” maka di gambarkan dengan bentuk “Rumah”. Waktu dulu bentuk icon memang sangat sederhana, dan mungkin memang itulah wujud icon yang sebenarnya. Namun karena perkembangan teknologi yang semakin canggih, ternyata tidak cukup bentuk yang simpel untuk menjelaskan suatu fungsi pada website/produk.

Faktor estetika juga mempengaruhi bentuk-bentuk icon masa kini. Dengan icon yang menarik, maka secara tidak langsung akan menambah nilai estetika pada keseluruhan website/produk.

Nah, kali ini kita akan belajar membuat icon dengan Photoshop. Saya memilih keyBCA karena ini merupakan produk buatan lokal dan saya juga sering memakainya, dibanding jika saya harus membuat icon website lainnya yang sepertinya sudah banyak beredar di internet. Ok, tanpa banyak basa-basi lagi, here we go!

Langkah 1

Buat dokumen baru berukuran 512 x 512 Pixel (ini merupakan ukuran standard icon yang terbesar). Jadi, kita akan mudah membuat versi ukuran kecil nya nanti bila di perlukan.

Setelah itu pindahkan hasil scan keyBCA ke dokumen baru tersebut. Hasil scan tersebut akan kita gunakan sebagai panduan dalam membuat icon ini.

Langkah 2

Kita mulai dengan men-tracing bentuk dasar keyBCA ini. Gunakan Pen Tool dan ganti settingnya menjadi Shape Layer. Supaya hasil tracing kita langsung berwarna dan berupa vektor.

Trace setengah bagian saja, karena kita akan menduplikasi sisi lainnya agar hasil nya simetris.

Tidak usah takut kalau hasilnya tidak terlalu sempurna, kita bisa menutup kekurangan itu dengan mudah

Gabung 3 layer shape yang kita buat tadi menjadi 1 layer. Caranya, pilih ke 3 layer shape tersebut, lalu tekan Ctrl + E (Merge Layer). Dan namakan layer gabungan tersebut sebagai “Bentuk Dasar”.

Lalu berikan efek “Gradient Overlay” pada layer “Bentuk Dasar” dengan pengaturan seperti gambar di bawah ini.

Langkah 3

Kita akan membuat layar keyBCA dengan menggunakan Rounded Rectangle Tool.

Untuk memberikan dimensi, gunakan efek (layer Effects, dengan cara dobel klik pada layer yang kita ingin beri efek) Inner Shadow, Gradient Overlay dan Stroke. Atur juga warnanya agar tampak seperti layar yang sesungguhnya.

Langkah 4

Kita akan membuat efek lekukan yang ada di sekitar layar. Tetap gunakan Rounded Rectangle Tool.

Dan kita berikan efek Stroke pada shape tersebut.

Langkah 5

Selanjutnya kita akan membuat bayangan nya. Sehingga seolah-olah layar keyBCA tersebut masuk kedalam (seperti aslinya). Gunakan Pen Tool untuk menggambar bentuk bayangannya, lalu Masking (Create Clipping Mask) ke dalam layer shape yang kedua.

Duplikasi bentuk bayangan yg di bawah dan tempatkan di atas. Lalu gunakan Burn Tool dan Dodge Tool untuk memberikan efek bayangan dan cahaya.

Langkah 6

Buat garis tipis sebesar 1 point dan berikan efek Motion Blur (Filter > Blur > Motion Blur). Lalu tempatkan pada posisi datangnya cahaya (dalam kasus ini, cahaya datang dari atas kiri). Selain memberikan kesan cahaya, garis ini juga akan mempertajam bentuk.

Langkah 7

Selanjutnya kita membuat tombol keyBCA dengan menggunakan Ellipse Tool.

Untuk memberikan kesan seperti tombol asli, kita menggunakan efek Bevel and Emboss, Drop Shadow dan Outer Glow. Ikuti pengaturan masing-masing efek sesuai gambar berikut.

Hasil ketiga efek tadi akan terlihat seperti di bawah ini.

Lanjutkan dengan menduplikasi dan memberikan nomor pada masing-masing tombol.

Langkah 8

Kita akan membuat detil yang ada pada tombol merah. Gunakan Ellipse Tool lalu hapus bagian yang tidak perlu sehingga bentuknya menyerupai bulan sabit yang tipis.

Berikan efek Bevel and Emboss dan Drop Shadow. Atur juga opacity layer bentuk detil tersebut agar terlihat natural.

Langkah 9

Bentuk keyBCA tidak flat, pada bagian samping ada bagian yang menurun/miring. Kita akan membuat efek itu dengan menggunakan Pen Tool. Gambar bagian tersebut dengan mengikuti hasil scan keyBCA yang asli.

Langkah 10

Tambahkan juga bintik-bintik (lubang kecil) yang ada di bagian samping bawah keyBCA. Gunakan Ellipse Tool dan efek Gradient Overlay (agar menghasilkan efek berlubang), lalu atur posisinya.

Langkah 11

Tambahkan sedikit tekstur pada “Bentuk Dasar” supaya lebih realistis. Berikan efek Noise, Filter > Noise > Add Noise.

Langkah 12

Final Touch! tambahkan logo keyBCA di atas. Dan kita sudah selesai!

Hasil Akhir

Saya menambahkan efek bayangan dengan menggunakan Soft Brush. Icon keyBCA ini sudah siap di pakai, tinggal di resize/di perkecil sesuai dengan kebutuhan kamu. Untuk ukuran icon yang kecil (misal: 32 x 32) akan ada beberapa detil yang di hilangkan, seperti nomor pada tombol dan logo keyBCA. Dokumen icon ini berupa PSD dan PNG, bisa kamu unduh melalui tombol di akhir posting (930Kb).

Yang terpenting dalam membuat icon seperti ini adalah kesabaran dan detil, semakin detil icon yang kamu buat, akan semakin “wow” terlihatnya. Kalau kamu mempunyai icon buatan kamu sendiri, ayo di tunjukkan kepada teman-teman yang lain dengan bergabung di Grup Flickr Jurus Grafis

Jangan sampai ketinggalan tutorial berikutnya, ayo berlangganan dengan RSS dan Email. Temui juga Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis.

Membuat_Icon_keyBCA (268)

Dengan teknik yang simpel dan mudah ini kita akan mengolah foto biasa menjadi sebuah karya yang memukau. Masking sangat berguna karena tidak bersifat merusak/merubah foto asli.

Dibandingkan dengan Eraser Tool, akan lebih bijak kalau kamu menggunakan teknik Masking. Foto asli tidak akan terganggu dan kita dapat menghapus efek masking dengan mudah (jika suatu saat akan ada perubahan/revisi).

Untuk memulai tutorial ini kamu bisa mengunduh tekstur kertas dan watercolor brush serta watercolor brush 2 yang akan kita pakai. Stok foto akan saya siapkan di dokumen yang bisa kamu unduh di akhir posting.

Jika sudah siap semua, mari kita mulai!

Langkah 1

Buka foto di Photoshop.

Lalu rubah layer “Background” yang terkunci menjadi “layer 0″ dengan cara Dobel Klik pada layer “Background” tersebut.

Langkah 2

Ini merupakan inti dari tutorial ini. Ubah nama “layer 0″ menjadi “foto”.

Buat layer baru (layer 1) di bawah layer “foto” lalu Klik Kanan pada layer “foto” dan pilih Create Clipping Mask.

Foto akan hilang. Tetap tenang karena memang begitu. Ikuti terus langkah selanjutnya.

Langkah 3

Saatnya bereksperimen! Klik layer 1, dan mulailah menggunakan brush yang sudah kamu unduh tadi. Dengan mengaplikasikan brush pada layer 1 maka foto akan mulai kelihatan (ini bisa dinamakan UnMask).

Jangan lupa untuk mengganti nama “layer 1″ menjadi “brush”.

Langkah 4

Gunakan tekstur kertas yang sudah kamu unduh sebagai background pada karya. Ini merupakan pilihan personal, kamu bisa menggunakan tekstur dan background yang lain sesuai selera kamu sendiri.

Ya, sampai disini kita sudah selesai! Cepat dan mudah bukan?

Hasil Akhir

Saya memainkan sedikit Brightness/Contrast pada tekstur kertas dan foto. Dan juga mengurangi Saturation pada foto, hasilnya terlihat seperti di bawah ini.

Sekarang kamu sudah mengerti dan bisa mengaplikasikan teknik masking dasar yang pasti akan sering di pakai. Jadi, jangan ragu lagi untuk bergabung dengan Grup Flickr Jurus Grafis, di sana kamu bisa memamerkan karya kamu!

Silakan unduh dokumen grafis ini (3,5Mb) melalui tombol di akhir posting supaya kamu lebih jelas melihat cara kerja teknik ini.

Ikuti Twitter Jurus Grafis dan temui Jurus Grafis di Facebook, kalau tidak ingin ketinggalan tutorial selanjutnya silakan berlangganan gratis dengan RSS dan Email.

Teknik_Masking_Dasar_Photoshop (840)

Tipografi tidak hanya sekedar elemen yang memberikan informasi saja. Jika kita bisa mengolahnya dengan baik, maka tipografi dapat berdiri sendiri sebagai informasi dan sebagai karya desain grafis.

Dalam video tutorial kali ini, kita akan belajar bagaimana membuat tipografi gaya bebas di Adobe Illustrator dan melakukan tahap penyelesaian di Adobe Photoshop. Karena terlalu panjang jika di gabung kedalam satu video, maka saya membaginya menjadi 2 bagian, yaitu tahap Illustrator dan tahap Photoshop.

Hasil akhir yang kita rancang akan terlihat seperti gambar di bawah ini.

Perancangan Bentuk Tipografi Dasar di Illustrator

Tahap Penyelesain Karya di Photoshop

Kamu bisa memakai teknik ini untuk di aplikasikan tidak hanya pada tipografi saja, tetapi bisa di gunakan pada ilustrasi, desain karakter, pembuatan logo dan lainnya.

Dokumen grafis tutorial ini (1,7Mb) dapat di unduh melalui tombol di akhir posting. Jangan lupa untuk bergabung dan memamerkan karya desain kamu di Grup Flickr Jurus Grafis.

Ikuti Twitter Jurus Grafis dan temui Jurus Grafis di Facebook. Kalau tidak ingin ketinggalan tutorial menarik lainnya, kamu bisa berlangganan dengan Email atau RSS.

Untuk mendesain kartunama sebenarnya tidak ada aturan khusus karena menyangkut kepribadian masing-masing individu dan citra apa yang ingin di tampilkan di kartunama.

Tetapi ada beberapa aturan dasar yang tidak boleh di langgar, seperti besar font (jangan terlalu besar/kecil) dan lainnya, kamu bisa melihat artikel 6 Tips Mendesain Kartunama Unik & Menarik untuk lebih jelasnya.

Pada tutorial kali ini, kita akan mendesain kartunama dengan ide yang simpel, yaitu seperti sedang di rancang di Photoshop. Dan pada kesempatan ini juga saya membuat video tutorial, karena akan lebih mudah bagi kamu yang baru belajar desain dan menggunakan Photoshop. Jadi, silakan menikmati video tutorial ini

Bagaimana? cukup mudah bukan? Karena ini video tutorial perdana, saya butuh masukan kalau ada yang kurang untuk di perbaiki selanjutnya. Atau mungkin lebih cepat dan mudah dengan tutorial seperti biasanya? (gambar diam dan text), silakan berkomentar.

Dokumen Photoshop desain kartunama ini bisa kamu unduh melalui tombol di akhir posting (476Kb) dan bisa kamu gunakan gratis untuk kepentingan kamu sendiri, atau untuk pembelajaran.

Kalau kamu ingin mencetak kartunama, saya merekomendasikan Kartunama.net. Hasil cetakan nya bagus, bisa 1 box saja, dan yang paling penting kita bisa memesan nya melalui internet tanpa harus pergi ke tempat percetakannya (hemat waktu). So, tunggu apalagi? mulailah mendesain dan cetak di Kartunama.net

Tautan Terkait :
Lihat Video Tutorial Mendesain Kartunama di Vimeo (HD Video)
6 Tips Mendesain Kartunama Unik dan Menarik

Jangan lupa bergabung dengan teman-teman yang lain di Facebook Page Jurus Grafis, dan ikuti Twitter Jurus Grafis.

Mendesain Kartunama Desainer Grafis (724)