Cara Mudah Membuat Theme Tumblr : (web design)

Pada tulisan sebelumnya Cara mudah membuat theme tumblr : struktur kode saya sudah menjelaskan bagaimana bentuk struktur kode yang dipakai di theme tumblr, sangat simple & mudah dipahami kan?

Selanjutnya mari kita masuk pada tahap desain layout untuk tampilan theme tumblr tersebut. Nah, kali ini kita akan membuat desain seperti dibawah ini :

Tampilan desain theme tumblr yang akan kita buat

Persiapan sebelum mendesain tampilan theme tumblr

Untuk mempercepat proses kerja dalam membuat desain ini, saya disini menggunakan CSS Framework yaitu 960gs, dan untuk bagian patternnya saya download di subtlepatterns Anda bisa mendownloadnya untuk bahan latihan pada tutorial kali ini.

Buka file Photoshop yang disediakan oleh 960gs, saya disini menggunakan yang grid 12, sekedar info, pada 960gs itu terdapat pilihan grid12, grid16 dan grid24.

Tampilan awal membuka file grid12

Pada tampilan diatas terdapat garis-garis panduan itu grid yang memudahkan kita dalam mendasai, kita bisa menghilangkan garis-garis tersebut dengan menekan tombol CTRL + H tekan sekali lagi untuk memunculkan gridnya. dan untuk menghilangkan garis-garis warna pink, kita hilangkan tanda mata di bagian layer sebalah kanan.

Sekarang kita akan membuat pattern untuk bagian background. kita klik create new layer, ketika layer terbentuk dia masih belum ada backgroundnya, kita kasih background warna putih saja dengan menekan tombol ALT + DELETE tapi pastikan dulu foregroundnya berwarna putih.

Create new layer

Double klik pada layer baru tersebut, atau klik kanan -> pilih Blending Option, centang pattern overlay dan pilih pattern yang tersedia, saya disini menggunakan random grey variation, (lihat gambar)

Tambahkan pattern untuk background

Selanjutnya kita akan membuat background untuk konten dan sidebar (lihat gambar)

layout kontent & sidebar

Pada bagian konten saya menggunakan pattern subtle freckles & pada bagian sidebar background putih saja.

Baca Juga:  Membuat Golden Ratio Grid System

Selanjutnya mari kita buat shape kemudian kita bentuk seperti pita ditekuk

Rounded Rectangle Tool dengan Radius 10 px

Ketika shape sudah terbentuk seperti gambar yg ke-3 klik kanan pada layer dan klik Blending Option dan atur seperti yang dibawah ini :

Drop Shadow : Blend Mode = normal, warna #000000, opacity = 25%, angle = 90 derajad, distance = 4px, size = 4px
Inner Shadow : blend mode = normal, warna = #ffffff, opacity = 35%, angel = 140 derajad, distance = 1px, size = 0px
Inner Glow : blend mode = soft light, opacity = 20%, noise = 0, color = #ffffff, size = 1px
Gradient Overlay : blend mode = normal, opacity = 78%, gradient : lihat gambar dibawah, style = linear, angle = 0 derajad
Pattern Overlay : silakan cari pattern yg loreng-loreng garis samping 😀
Stroke : size = 1px , color = #c11717

Gradient

Setelah jadi, kita atur penempatan pita seakan-akan diselipin diantara pemisah konten dan sidebar

penempatan pita

Membuat Logo : untuk membuat logo saya menggunakan font Pacifico dapat anda peroleh di google font sedangkan untuk menu saya menggunakan Myrad Pro.

logo & menu

Oke, dalam tahap ini, desain yang kita buat sudah selesai, untuk penambahan elemen-elemen lain yang sederhana tinggal disesuaikan dengan screenshot desain akhir.

Anda bisa Download file PSD ini : Download

Apa Selanjutnya?

Pada langkah selanjutnya kita kan mempelajari bagaimana proses slicing, menjadikan desain PSD dikonversi ke kode XHTML/CSS

Tulisan Sebelumnya : Cara Mudah Membuat Theme Tumblr : (Struktur Kode)

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage steel silo grain bins