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:  Cara Mudah Membuat Theme Tumblr : (Struktur Kode)

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 :)

16 Responses

  1. Fansi says:

    Pengen coba ๐Ÿ™‚
    Makasih tutorialnya mas Zul.

  2. fan says:

    Thanks Mas Zul, tutorialnya. Saat saya mencoba design tersebut, saya memakai Adobe Fireworks CS4. Dan berhasil juga, karena saya tidak begitu bisa photoshop. Makanya saya pake Fireworks.

  3. Edso WebID says:

    nyobain aaakh… :p

  4. manik says:

    makasih dah sharing ilmunya…ngomong2 kelanjutannya mana?

  5. uch_ups says:

    saya dah donlot, trus (Buka file Photoshop yang disediakan oleh 960gs, saya disini menggunakan yang grid 12, sekedar info, pada 960gs itu terdapat pilihan grid12, grid16 dan grid24.)
    1.saya ga bisa masuk terus ketampilan awal photoshopnya. kira2 salah nya dmn ya? soalnya ada beberapa file photoshop. apakah saya salah klik?

    2. To install the Photoshop action, go to…[Photoshop Directory] > Presets > Actions Copy the 960_GRIDS.atn file there. You will now be able to create templates on the fly, by using the Actions panel.
    maksudnya ini gmn ya pak?

    maaf merepotkan soalnya saya baru belajar dan gak terlalu faham juga soal photoshop
    trims sbelumnya

  6. Gustri says:

    mohon dibuat juga tutorial buat blogspot them.. terima kasih

  7. phora says:

    ditunggu artikel selanjutnya ๐Ÿ˜€

  8. Salma says:

    Admin, ijin share yaa. ^^

  9. pia says:

    mas lanjutannya setelah ini apa yaaa?? bagus banget tutorialnya ๐Ÿ™‚

  10. bhelhel says:

    terusannya manaa inii maz,, d tunggu

  11. Yulian says:

    Tenkyuuuu infonya

  12. Stella says:

    masih gantung ๐Ÿ™‚

  13. Dina says:

    Terimakasih mas, tutorialnya sangat membantu saya buat belajar desain website. Sukses buat karya karyanya

  1. November 29, 2011

    […] Cara Mudah Membuat Theme Tumblr : (web design) […]

Leave a Reply

Your email address will not be published. Required fields are marked *

grain storage steel silo grain bins