Membuat Desain Template Blog

Tutorial kali ini saya akan membahas bagaimana kita membuat sebuah desain untuk template blog atau website agar lebih mudah dibuat ke template html. Kali ini saya akan menggunakan Adobe Fireworks dan png template dari Less Framework agar hasil akhir bisa lebih mudah di slice ke html5 dan css3.

Mengapa fireworks? di Fireworks lebih mudah design untuk komponen web seperti drop shadow, bordering, dan lain-lain. Dan juga di fireworks lebih mudah untuk slicing untuk elemen web yang menggunakan transparansi (.png atau .gif) walaupun untuk final nya memang dibutuhkan compressor lagi agar lebih hemat di web browser.

Download disini untuk memulai : LessGuides-Template.png

Pertama buat background dengan warna solid atau image yang di repeater dari template Less Framework yang telah anda download.

Kita akan menggunakan 10 kolom saja dari grid. Karena ini adalah template untuk blog kita akan membaginya ke dalam 4 block. Yaitu header, content, sidebar, dan footer.

Penting untuk anda ketahui block2 ini, agar lebih rapih dalam mendisain dan mempermudah juga dalam templating ke html.

Lalu kemudian buat logo terlebih dahulu, dan simpan di tengah dari block header.

Untuk block2 yang telah di terangkan tadi optional di gambarkan di workspace anda agar tidak lupa. Boleh juga dengan memisahkan group layer mereka seperti ini.

Disini saya menggunakan background dengan solid color #F6F6F6. 

Logo dari text yang diberikan sedikit efek dari Bevel and Emboss -> Outer Bevel. Gunakan konfigurasi bevel 8, tipe Sloped dengan mode Highlighted.

Masih bekerja di block header, buat deretan menu di bawah logo. Lalu buat rata tengah.

Buatlah container untuk setiap menu item, disini saya menggunakan Rounded Rectangle Auto Shape dengan menggunakan efek Inner Shadow warna #CC0000, width 3, dan softness 8.

Baiklah, sekarang kita mulai masuk ke bagian yang agak rumit. Perlu di ingat untuk bagian konten, di frontpage kita hanya akan menampilkan list artikel yang nantinya setiap artikel bisa di read more ke single page artikel tsb.

Komponen penting di artikel untuk frontpage adalah title, meta artikel, gambar thumbnail artikel, excerpt atau ringkasan artikel, link komentar, link read more. Buat kesemuanya dalam satu group.

Pertama buat meta artikel tanggal pembuatan artikel berukuran 53×53 px. Lalu simpan di pojok kiri atas blok konten.

Masukkan di pinggirnya title ukuran font 24 dengan style bold, warna #FF6600. Masukan juga tepat di bawah title sisa meta artikel yang akan dimasukkan.

Lalu buat dibawahnya kolom untuk image 150×150 px dan pinggirnya untuk ringkasan artikel.

Terakhir anda boleh membuat link komentar dan read more tepat di bawah ringkasan artikel.

Group menjadi satu group (Ctrl+G) semuanya, duplikat (Ctrl+Alt+D) menjadi tiga artikel. Seperti ini:

Kemudian kita mengisi sidebar dengan widget sesuai dengan kehendak anda. Disini saya mengisi dengan widget search, widget archive, widget text dengan isi about me.

Aturan block setiap widget adalah antara widget title dan konten. Lihat gambar di bawah ini:

Disini anda juga bisa menggunakan custom style widget. Saya akan implementasikan di widget search. Pertama buat Rounded Rectangle 180×30 px dan 40x30px.

Box pertama berikan fill Linear dari #FFFFFF ke #CCCCCC, dan berikan border 3px warna #FF6600.

Box kedua berikan fill Linear dari #FF9900 ke #CC0000, dan berikan border 3px warna #FFFFFF.

Isi box pertama dengan tet “Search…” dan box kedua dengan icon search 26x26px.

Penuhi blok sidebar sedemikian rupa dengan widget default terlebih dahulu.

Masuk ke blok footer. Simple saja footer kita akan isi dengan custom menu link dan copyright info.

Semua blok sudah terisi. Jika sebelumnya anda menggunakan rectangle box untuk membuat blok-blok utama seperti yang saya lakukan.

Anda boleh hide mereka atau hapus juga tidak apa-apa, karena kita sudah mempunya sebuah desain untuk blog dan siap untuk dibuatkan html nya. Mudah mudahan di artikel tutorial selanjutnya saya bisa membahasnya.