Digital painting adalah suatu bentuk seni yang muncul dimana teknik melukis tradisional seperti cat air, minyak, impasto, dll diterapkan secara digital dengan komputer, tablet dan stylus (Pen tablet), dan software. Sebaliknya traditional painting adalah lukisan dengan media fisik.

Sekilas Tentang Digital Painting

Digital painting berkembang pesat terutama di production art. Sering digunakan dalam desain konseptual untuk film, game, dan video. Ada berbagai software yang dapat digunakan, seperti Corel Painter, Adobe Photoshop, ArtRage, GIMP, dan openCanvas. Tapi kali ini kita akan belajar painting menggunakan Adobe Photoshop.

Langkah 1

Pertama-tama, kita buat file baru berukuran 1500 x 1500px dengan resolusi 300ppi. Saya menggunakan 300ppi, karena digital painting merupakan image raster. Apabila suatu saat akan diperlukan dalam ukuran besar, akan sangat membantu.

Langkah 2

Digital painting membutuhkan pen tablet, seperti wacom, genius, dsb. Dan kita akan menggunakan brush tool dari tahap sketch sampai akhir.

Di photoshop ada yang namanya Tablet pressure controls opacity (tekanan pen tablet mengatur opacity) dan Tablet pressure controls size (tekanan pen tablet mengatur ukuran brush) yang akan sangat berguna dalam proses ini. Klik saja iconnya (red marks) untuk mengaktifkan.

Kemudian set brush size menjadi 3px dan hardness 100%. (blue marks)

Langkah 3

Oke, kita akan mulai dari sketsa. Sketch tidak harus dilakukan di kertas, selain mempermudahkan kita ke tahap selanjutnya, juga lebih eco-friendly B)

Buat layer baru, dan mulai buat sketsa. Gunakan pen pressure kamu untuk mengatur tebal tipisnya yang dihasilkan dari brush (tidak perlu takut jelek, karena ini hanya sketsa).

Langkah 4

Setelah kamu sudah yakin dengan sketsa awal tadi, mulai tebalkan sketsa untuk menjadi panduan outline kedepannya di layer baru (saya sarankan setiap langkah yang berbeda, dipisahkan dalam layer yang berbeda juga).

Langkah 5

Mulai warnai sketsa untuk panduan warna dasar. Dan kasih garis-garis tipis untuk panduan alur bulu-bulu.

Langkah 6

Sekarang kita akan melakukan tahap shading (bayangan). Set brush size menjadi 28px dan hardness 100%. Kemudian set opacity menjadi 20%.

Langkah 7

Mulai berikan bayangan ke spot-spot tertentu. Tips: Kalau opacity kurang dari 100%, jangan gosok brush berkali-kali karena akan menambah ketebalan. Kalau mau mempertahankan ketebalan, jangan lepas brush saat menggosok.

Langkah 8

Set brush size menjadi 60px dan turunkan hardness menjadi 0%. Karena kita akan menambah bayangan yang lebih halus dari sebelumnya.

Langkah 9

Sekarang kita akan memberi bulu. Set brush size menjadi 2px dan naikkan hardness menjadi 100%. Pertebal panduan alur bulu yang sudah dibuat.

Langkah 10

Dalam setting opacity yang masih 20%, ubah warna brush menjadi putih. Ikuti alur bulu yang sudah dipertebal (jauhkan dari bayangan, agar terlihat realistis).

Langkah 11

Seperti yang sudah saya katakan dari awal, sketsa hanya untuk panduan outline. Sekarang kita hide layer sketsa, sampai tersisa seperti yang digambar.

Langkah 12

Karena layer sketsa sudah di hide, maka setiap garis tepi terlihat sangat berantakan (tenang saja, ini wajar kok). Di tahap ini, kita akan merapihkan bagian-bagian yang berantakan.

Eye dropper tool akan membantu kita dalam tahap ini. Tetap gunakan brush tool, lalu tahan alt untuk menukar secara sementara ke Eye dropper tool dan klik untuk mengambil sample warna.

Ambil sample warna yang paling dekat dengan tepian, lalu gunakan brush untuk merapihkan. Ikuti alur dan berikan ujung dari bulu-bulu tersebut sebagai finishing. Lakukan terus sampai seperti yang di gambar (sabar ya ). Saya sarankan dalam tahap ini, sering-sering zoom ke bagian yang akan dirapihkan. Seperti digambar, saya fokuskan ke-tepian yang akan dirapihkan.

Langkah 13

Zoom out, and Boom!! Just like that

Kalau masih terlalu polos, mungkin kita bisa kasih sesuatu seperti bayangan dan background gradient (maklum, saya gak bisa bikin background ).

Atau mungkin ditambah sedikit retakan, atau bulu-bulu yang beterbangan.

Hasil Akhir

Bagi teman-teman yang masih kesusahan, tenang saja, kamu dapat mengunduh file psd tutorial ini. Tetap mencoba dan jangan menyerah Cheers!

Dalam bidang desain website (interface), memang ada beberapa hal yang akan ditemui dan berbeda dari desain print. Jika kita desainer grafis yang terbiasa dengan desain print lalu ingin mencoba di bidang desain website atau interface, kemungkinan akan menemukan hal-hal teknis yang tidak biasa. Salah satunya adalah teknik slicing pada desain interface.

Pengerjaannya masih sama-sama dikerjakan pada software grafis, bisa dari Adobe Illustrator, Corel Draw atau software kesayangan kita Adobe Photoshop. Dalam hal ini saya akan membahas slicing dengan Photoshop saja karena itulah yang selalu saya gunakan.

Apa itu slicing?

Slicing adalah sebuah teknik pemotongan gambar/desain pada website, memecahnya jadi beberapa bagian untuk kemudian disatukan kembali menggunakan kode CSS dan HTML. Mengapa harus dipecah? Website yang kita lihat ini bisa muncul terlihat utuh tidak seperti jika kita melihat sebuah brosur yang benar-benar mencetak hasil utuh dari sebuah desain.

Ini semua muncul dari hasil potongan-potongan image saat slicing. Bisa dilihat jika kita save as Web Complete akan ada folder yang isinya potongan-potongan image. Itulah hasil slicing. Teknik slicing tentu dapat mempercepat proses downloading website secara paralel namun jangan terlalu banyak juga bagian potongannya karena justru dapat memperlambat downloading karena keterbatasan jumlah download paralel pada browser.

1. Crop tool atau Slice tool

Setiap desainer punya cara dan jurus tersendiri dan berbeda-beda dalam mengerjakan proyeknya. Itu sah-sah sja, yang penting kerjaan beres dengan tepat waktu. Teknik slicing pada Photoshop bisa menggunakan Slice tool atau manual dengan Crop tool. Saya sendiri lebih menyukai crop tool. Jika menggunakan slice tool, kita memang bisa secara otomatis memotong beberapa bagian sekaligus dalam sekali ‘slice’ dan langsung save for web sekaligus dalam satu folder untuk semua file hasil potongan tersebut.

Namun ini akan menyulitkan kita jika filenya transparan dan menimpa sebuah background. Well, bisa saja itu tetap dikerjakan, namun akan lebih mempermudah programmer menyusun gambar  jika kita memisahkan file transparan tersebut dengan backgroundnya.

2. Slicing ujung dan tengah pada sebuah bidang

Pada bidang-bidang kotak, persegi panjang dan juga background ada teknik khusus dalam memotongnya. Kecuali jika background berupa foto atau image. Untuk menslicing sebuah bidang, misal pada background atau sebuah kotak yang ujungnya melengkung (dengan rounded rectangle) tentu ada caranya bagaimana memotong bidang –bidang tersebut. Jika yang akan kita potong adalah sebah bidang kotak, misal untuk background tulisan paragraf, namun ujungnya lancip maka kita cukup memotong tipis 1 bagian saja.

Sedangkan jika bidang yang dipotong berujung lengkung, kita akan memotong pada bagian ujung kiri-kanan atau atas bawah (tergantung arah efek gradasi jika ada) dan bagian tengah.

Mengapa kita hanya memotong tipis seperti itu saja dan atau hanya 3 bagian itu saja? Karena ketika nanti dibuat kode, jika tekstur bidangnya sama dan atau tanpa tekstur, proses kode akan menyatukannya dengan me-repeat hasil potongan bagian tengah tersebut entah itu arah vertical atau horizontal  Berbeda jika image nya berupa gambar atau tekstur yang tidak merata, tentu tidak bisa menggunakan kode ‘repeat’, yang ada hasilnya berantakan.

3. Menslicing bidang bergradasi

Seperti sempat dibahas di atas teknik slicing untuk bidang bergradasi tergantung seperti apa arah gradasinya. Horizontal atau Vertikal. Jika horizontal dengan ujung melengkung, maka yang kita potong bagian ujung kiri, tengah dan ujung kanan.

Tapi jika vertical dengan ujung melengkung yang kita potong adalah bagian ujung atas, tengah dan ujung bawah. Biarlah programmer me-repeat bagian tengahnya saja. Gambar di bawah ini contoh yang ujungnya lancip, jadi hanya sekali potong saja, programer akan me-repeatnya nanti.

4. Penamaan Folder

Untuk penamaan folder file-file slicing yang telah kita potong, tidak bisa menggunakan spasi, misal kita akan menamakan image 05, kita harus menamainya dengan image05 atau image_05. Karena kode HTML tidak bisa membaca file dengan nama yang menggunakan spasi. Dan sebaiknya jika file tersebut sejenis atau berurutan gunakan penomeran atau urutan abjad agar memudahkan programmer saat membuka file. Semua pasti ada dalam 1 folder saja, tidak terpisah atau tidak berupa folder dalam folder.

Kesimpulan

Pada awalnya bagi desainer yang belum terbiasa slicing mungkin akan bingung mulai darimana atau apa saja yang harus dislicing. Namun untuk membiasakannya tidak akan memakan waktu lama asalkan bisa Photoshop atau software grafis lainnya tentu saja.

Jika ada kesulitan menentukan bagian slicing sebaiknya didiskusikan dengan programernya atau yang bagian codernya, karena dialah yang nanti menerima hasil slicing untuk disatukan jadi  halaman website utuh.

Silahkan para desainer interface dan programmer berkomentar, jika ada masukan atau ada yang kurang, dengan senang hati bisa ditambahkan di kolom komentar di bawah.

Pada bagian ke 2 ini kita akan menyelesaikan 3 elemen dari BlogFolio tersebut, yaitu “posting terbaru” , “shelf portfolio” dan “footer”.

Bagi yang baru mengikuti tutorial ini, silakan lihat bagian 1 terlebih dulu. Ok, mari kita lanjut!

Langkah 9

Kita masuk ke “posting terbaru”. Buat area konten dengan menggunakan Rounded Rectangular Tool, atur roundness nya menjadi 2 pixel.

Langkah 10

Selanjutnya kita membuat icon tipe posting, untuk stock icon nya silakan gunakan Free Tool Bar icons dari Gentleface (gratis untuk kepentingan personal). Buat lingkaran dengan menggunakan Ellipse Tool, tetapi rubah settingnya menjadi “Paths” sehingga tidak langsung terisi warna. Setelah itu Klik Kanan dan pilih Stroke Path.

* sebelum memilih Stroke Path, ubah dulu jenis Brush yang akan kita gunakan untuk lingkaran ini.

Langkah 11

Tempatkan icon pencil yang sudah di unduh tadi ke dalam lingkaran. Dan setelah itu samakan warnanya antara lingkaran dan icon pencil dengan menggunakan Layer Styles > Color Overlay.

Atur besar icon dengan menggunakan Transform Tool (Ctrl + T) dan tempatkan di kiri atas area konten.

Berikan efek grunge pada icon dengan menggunakan Layer Masking. Caranya persis sama saat kita membuat garis grunge di navigasi utama.

Langkah 12

Ketik juduli posting, info dan paragraf deskripsi. Gunakan Bebas Neue untuk judul post, Arial untuk info dan Georgia untuk paragraf. Atur layoutnya hingga menjadi seperti gambar di bawah ini,

Langkah 13

Buat frame foto (post image frame) dengan menggunakan Rounded Rectangular Tool dan letakkan di sebelah kiri paragraf.

Buat lagi persegi dengan menggunakan Rectangular Tool, kali ini untuk tempat menaruh foto (post image). Saya merubah warna frame foto menjadi agak kekuningan dan memberikan sedikit efek Drop Shadow.

Langkah 14

Kita akan membuat kesan foto yang berkilap dengan menggunakan Pen Tool. Gambar segitiga berwarna putih di atas area foto.

Selagi shape segitiga yang baru kita buat itu terseleksi, tekan icon masking pada window layers (sama dengan metode masking). Setelah itu gunakan Gradient Tool berwarna hitam putih, dan drag dari atas ke bawah sehingga ada bagian yang hilang secara halus.

Hasilnya akan terlihat seperti gambar di bawah ini. Saya sudah menambahkan foto juga.

Langkah 15

Gunakan Pencil Tool (B) berwarna biru sebesar 1 pixel untuk membuat garis. Duplikasi dan posisikan sehingga berada di antara baris paragraf.

Hide dulu sementara foto beserta frame yang telah kita buat tadi. Dan lanjutkan dengan garis merah vertikal.

Langkah 16

Buat efek ujung pita pada konten area dengan menggunakan Polygon Tool 3 sisi. Caranya sama saat kita membuat status aktif pada navigasi utama.

Hasilnya akan terlihat seperti gambar di bawah ini,

Langkah 17

Kita akan membuat link “Read More” dengan garis seperti efek coretan tangan. Ketik “Read More”, letakkan di kanan bawah. Gunakan Splatter Brush berukuran kecil (4-6 point) dan coret brushnya (cara ini memang agak sedikit manual ).

Langkah 18

Supaya tidak polos, kita akan menambahkan tekstur pada area konten. Unduh gambar kertas dari Flickr dan masukkan kedalam dokumen. Atur Brightness/Contrast dan Hue/Saturation kertas tersebut.

Setelah itu Clipping Mask tekstur kertas ke dalam area konten dan berikan efek Noise.

Supaya grafik ini bisa di coding, maka kita hanya akan menggunakan bagian atas saja dari tekstur. Dengan begitu tidak akan ada masalah nanti jika kontennya (area text) menjadi panjang ke bawah. Gunakan Layer Masking dan Gradient Tool.

Hasil sementara akan terlihat seperti di bawah ini, saya merubah warna judul posting menjadi merah pastel agar terlihat lebih menonjol di banding elemen lain.

Langkah 19

Selanjutnya kita membuat shelf/rak untuk portfolio terbaru. Gunakan Rounded Rectangle Tool dengan roundness 2 pixel.

Berikan Layer Styles Inner Shadow dan Gradient Overlay dengan setting seperti gambar di bawah,

Hasilnya akan seperti di bawah ini,

Langkah 20

Gunakan Pen Tool untuk membuat efek 3d (dudukan rak). Nyalakan guide supaya ujungnya pas dan gunakan warna yang lebih gelap dari shelf yang pertama.

Berikan Layer Styles Gradient Overlay pada dudukan rak tersebut.

Hasilnya akan seperti gambar di bawah ini,

Langkah 21

Supaya lebih realistis, kita akan memberikan bayangan dan sedikit cahaya pada shelf ini. Caranya sangat mudah, hanya dengan Soft Brush dan Transform Tool untuk mengatur posisi dan besarnya. Atur juga Opacity layer brush tersebut supaya tidak terlalu ‘keras’.

Langkah 22

Untuk area thumbnail portfolio kita menggunakan Rectangle Tool.

Supaya thumbnail ini tidak terlalu polos nantinya, kita akan menggunakan efek Inner Shadow sebesar 1 pixel dan Gradient Overlay.

Langkah 23

Berikan efek bayangan thumbnail dengan menggunakan Soft Brush. Saya tidak menggunakan Layer Styles Drop Shadow karena kebutuhannya tidak cocok, kalau di paksakan maka bayangannya tidak akan terlihat natural.

Hasilnya akan terlihat seperti di bawah ini,

Untuk menyelesaikan bagian ini, gabungkan dulu semua layer thumbnail (thumb dan bayangan thumb) kedalam 1 folder dan duplikasi sebanyak 2 kali. Lalu atur posisinya hingga terlihat rapih.

Langkah 24

Tambahkan heading “Latest Works” dan gunakan garis yang sama pada main menu (copy paste). Namun kamu boleh saja membuat garis baru lagi untuk bagian ini.

Langkah 25

Gunakan logo yang sama pada bagian footer, tambahkan sedikit tulisan “All Rights Reserved” (opsional). Untuk thumbnail portfolio saya menggunakan 3 karya dari pool Jurus Grafis di Flickr (ini hanya untuk mensimulasikan saja). Ketiga karya yang saya pakai adalah karya Nur Cholis, Ilham Sul Putra dan Pramono Streetatmoshphere (ijin ya teman ).

Untuk mempermanis dan tetap 1 gaya secara keseluruhan, maka saya memutuskan untuk menambahkan efek kilapan di thumbnail. Dan kita sudah selesai!

Hasil Akhir

Untuk melihat versi yang lebih besar (ukuran sebenarnya), silakan klik tautan ini atau klik gambar di atas.

Kesimpulan

Hal terpenting dalam mendesain web adalah perencanaan (Sitemap dan Wireframe), setelah itu kita baru masuk ke hal yang bersifat visual. Desain website pada dasarnya adalah pengaturan informasi (Information Architecture), visual hanyalah elemen pendukung agar user lebih mudah, nyaman dan betah mengkonsumsi website kita.

Untuk mempelajari tutorial ini lebih dalam, kamu bisa mengunduh dokumen Photoshop BlogFolio (2,7 Mb) melalui tombol di bawah ini. Sekarang, ayo giliran kamu yang mulai mendesain Selamat mencoba!

Setiap desainer tentu harus mempunyai portfolio. Namun selain mempunyai portfolio, kita juga harus mempunyai tempat untuk memamerkannya. Dan untuk saat ini jalan yang paling efektif adalah mempunyai blog yang sekaligus berfungsi sebagai portfolio.

Kenapa Blog-Portfolio (BlogFolio) ?

Alasan yang paling umum adalah karena membuat blog sangat mudah. Kamu bisa mendaftar di Blogspot atau WordPress, lalu langsung menggunakan template yang ada. Selain karena kemudahannya, ada beberapa faktor yang saya anggap penting yaitu,

• Tempat mencurahkan ide & pemikiran. Dengan cara ini kita bisa lebih memposisikan personal brand kita dan tidak hanya berperan hanya sebagai desainer grafis saja.
• Memperlihatkan hasil karya. Ini salah satu syarat yang sangat dasar, klien akan menggunakan jasa desain kita berdasarkan apa yang telah mereka lihat dari portfolio kita sebelumnya.
• Mendapatkan koneksi baru. Website tipe BlogFolio adalah cara yang tepat karena biasanya mempunyai sistem komentar agar kita bisa berinteraksi dengan pengunjung.

Template Gratis Tidak Akan Cukup

Inilah yang menjadi permasalahan. Kalau kita mau tampil unik maka kita harus mengubah template yang ada, bisa dari warna, layout, tipografi dan lainnya. Tetapi sebaiknya kita mendesain website BlogFolio kita dari nol. Dengan begitu kita akan memegang kontrol penuh atas semua elemen desainnya. Sudah siap? mari mulai!

Semua Berawal dari Sitemap

Setiap website, se-simple apapun tetap membutuhkan sitemap. Ini di perlukan untuk mengetahui halaman yang kita perlukan dan tidak kita perlukan. Biasanya fitur-fitur website (seperti latest comment, popular posts, dll) juga akan kita pikirkan disini. Sebagai contoh, saya membuat sitemap BlogFolio seperti di bawah ini,

Perancangan Wireframe

Tahap selanjutnya adalah wireframe. Wireframe bisa di bilang sketsa/gambaran kasar dari website yang akan kita desain. Biasanya saya hanya menggunakan kertas dan bolpen untuk menggambar cepat letak-letak elemen website. Setelah kita dapat sketsa kasarnya, selanjutnya kita mencoba di Photoshop. Wireframe yang saya rancang terlihat seperti di bawah ini,

Dengan membuat wireframe, maka pemikiran kita akan di fokuskan kepada fungsi terlebih dulu. Lupakan sejenak gaya visual, karena di tahap inilah kita bisa memikirkan elemen mana yang paling penting, dimana kita akan meletakkan elemen itu dan bagaimana mempresentasikan konten.

Saatnya Mendesain!

Ok, kita sudah merencanakan semuanya. Sekaranglah saatnya bergulat dengan photoshop. Kita bisa mulai memikirkan elemen yang benar-benar visual. Mulai dari warna, font, finishing, gaya desain dan lainnya.

Seperti biasa kita akan menggunakan 960 Grid System, silakan diunduh. Sedangkan font Bebas Neue akan menjadi pilihan yang tepat untuk Logo dan Headline.

Langkah 1

Buka template 960 Grid 12 kolom yang sudah di unduh tadi di Photoshop.

Untuk menyesuaikan dengan resolusi monitor mayoritas saat ini (widescreen) maka sebaiknya kita juga mendesain dalam bentuk widescreen.

Langkah 2

Kita mulai dengan membuat background terlebih dulu dengan menggunakan Rectangle Tool.

Gunakan warna coklat (agak pucat) untuk background BlogFolio ini. Setelah itu tambahkan tekstur dengan menggunakan efek filter Noise.

Supaya efek noisenya tidak terlalu berlebihan, gunakan maksimum 2 % saja. Sekarang ini saya menggunakan 1.2 %.

Langkah 3

Gunakan font Bebas Neue untuk logo. Font ini sangat cocok untuk headline dan memberikan kesan bold yang elegan. Atur posisinya sehingga berada di tengah-tengah dokumen. Gunakan guide ( Ctrl + ; ) supaya pas dengan grid yang kita gunakan.

Langkah 4

Berikan efek Letterpress pada logo ini. Tutorial Letterpress pernah di tulis Jurus Grafis sebelumnya. Atau beri layer style dengan mengikuti setting seperti gambar di bawah ini,

Selanjutnya tambahkan tagline di bawah logo. Langkah ini opsional, tetapi biasanya setiap website mempunyai tagline . Saya menggunakan font Georgia Italic untuk tagline ini.

Langkah 5

Kita akan membuat navigasi utama yang terdiri dari Home, Blog, Portfolio dan Contact. Gunakan font Bebas Neue untuk navigasi agar tetap satu irama dengan keseluruhan website nantinya.

Buat garis yang agak tebal dengan menggunakan Rectangle Tool dan letakkan di atas dan di bawah navigasi utama.

Langkah 6

Supaya tidak terlalu polos, maka kita akan memberikan sedikit efek grunge pada garis tersebut. Pilih salah satu layer garis, lalu tekan icon masking yang ada di bawah window layer.

Setelah itu pilih splatter brush (ada di default brush) dan mulailah “menghapus” garis tersebut. Maka akan tercipta efek “rusak” atau “grunge” tanpa merubah bentuk asli layer garis tersebut. Lebih jelas tentang teknik masking dasar.

Hasilnya akan terlihat seperti di bawah ini,

Langkah 7

Supaya lebih jelas user sedang berada di halaman tertentu, kita akan membuat status halaman yang aktif pada navigasi utama. Gunakan Rectangle Tool lagi, dan posisikan di bawah Home.

Buat kesan seperti pita dengan menggunakan bentuk segitiga yang di atur secara berderet.

Hasil sementara bentuk pita terlihat seperti gambar di bawah ini,

Langkah 8

Selanjutnya kita akan menambahkan beberapa efek layer styles pada pita tersebut agar tidak terlalu “datar”.

Khusus untuk efek Pattern Overlay, saya sudah mempunyai bentuk pattern seperti gambar di bawah ini. Kamu juga bisa bereksperimen dengan pattern yang lain.

Inilah hasil efek pada pita setelah semua efek layer styles di gunakan.

Bersambung

Supaya tidak terlalu panjang, tutorial ini saya bagi menjadi 2. Lihat kelanjutannya.

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 (1003)

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.