Tumblr / Posted 3 years ago / 16 Komentar
cara-mudah-membuat-theme-tumblr2

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.

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

Tags

cara menggunakan tumblr,cara membuat tumblr,cara memakai tumblr,cara design tumblr,cara membuat background tumblr,html yang sudah jadi,mendesain tumblr,cara design web,desain tumblr,cara membuat tumblr theme,tutorial untuk tumblr,cara membuat tumblr menjadi keren,cara mengedit tumblr,membuat sidebar dengan css,cara mendesign tumblr,cara mengubah background tumblr,tumblr,cara belajar web design,cara edit tema tumblr,membuat background php Tags: , , , , , , , ,
cToko Toko Online

Administrator dari @belajar_web yang tidak bosan untuk selalu mengajak para pelaku web development untuk bergabung menuliskan pengetahuannya untuk disharing ke teman-teman yang lain, Sharing is sexy

http://belajarwebdesign.com


15 Comments

  1. Posted October 31, 2011 at 4:57 pm | Permalink

    Pengen coba :)
    Makasih tutorialnya mas Zul.

  2. Posted November 14, 2011 at 4:37 pm | Permalink

    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. Posted December 8, 2011 at 5:15 am | Permalink

    nyobain aaakh… :p

  4. Posted January 5, 2012 at 12:58 pm | Permalink

    makasih dah sharing ilmunya…ngomong2 kelanjutannya mana?

  5. uch_ups
    Posted April 19, 2012 at 7:01 am | Permalink

    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. Posted May 18, 2012 at 2:44 am | Permalink

    mohon dibuat juga tutorial buat blogspot them.. terima kasih

  7. Posted May 23, 2012 at 7:18 pm | Permalink

    ditunggu artikel selanjutnya :D

  8. Posted July 16, 2012 at 12:05 pm | Permalink

    Admin, ijin share yaa. ^^

  9. pia
    Posted July 22, 2012 at 11:04 pm | Permalink

    mas lanjutannya setelah ini apa yaaa?? bagus banget tutorialnya :)

    • Posted July 24, 2012 at 3:18 pm | Permalink

      iya nih, belum sempat melanjutkan tulisan ini :)

      • syifa
        Posted December 25, 2012 at 9:30 pm | Permalink

        lanjutan nya mana? ._.

  10. bhelhel
    Posted October 18, 2012 at 7:17 am | Permalink

    terusannya manaa inii maz,, d tunggu

  11. Yulian
    Posted January 27, 2013 at 9:38 pm | Permalink

    Tenkyuuuu infonya

  12. Stella
    Posted February 21, 2013 at 7:16 pm | Permalink

    masih gantung :)

  13. Posted May 21, 2013 at 11:15 pm | Permalink

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

One Trackback

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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign