Mendesain Theme Tumblr Minimalis

Dalam tutorial desain web ini, kita akan belajar mendesain theme tumblr bergaya retro minimalis yang memiliki tekstur pixel dan warna-warna lembut.

Preview

Sebelum memulai tutorial ini, silakan lihat terlebih dahulu desain tumblr yang akan kita buat. Klik gambar untuk melihatnya di perbesaran 100%.

final-large.jpg

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Grid 960, Penggunaan Tekstur, Layer Style
  • Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Tutorial

Langkah 1: Menyiapkan File

Ambil file 960 dari 960.gs. Klik ganda file action Photoshop yang tersedia. Di Photoshop, klik ganda action 12 Column Grid untuk membuat file dengan lebar 960 px dan 12 kolom.

tutorial-desain-web-tumblr-01.jpg

tutorial-desain-web-tumblr-02.jpg

Langkah 2

Perbesar ukuran kanvas menjadi 1280 px x 1280 px dengan perintah Canvas Size (Ctrl + Alt + C).

tutorial-desain-web-tumblr-03.jpg

Langkah 3: Membuat Latar Bertekstur

Buat layer baru dan isi dengan warna #f0f0f0. Beri Layer Style Pattern Overlay menggunakan pola pixel dari PSDfreemium.

tutorial-desain-web-tumblr-04.jpg

Seperti inilah hasil tekstur yang Anda peroleh.

tutorial-desain-web-tumblr-05.jpg

Langkah 4

Buat lagi layer baru dan isi dengan putih. Klik Filter > Noise > Add Noise. Turunkan opacity layer hingga 30% dan ubah blend mode ke Multiply.

tutorial-desain-web-tumblr-06.jpg

Seperti inilah hasil tekstur yang kita peroleh.

tutorial-desain-web-tumblr-07.jpg

Langkah 5: Area Sidebar

Buat shape di samping untuk area sidebar. Gunakan warna #d8d8d8.

tutorial-desain-web-tumblr-08.jpg

Beri Inner Shadow dengan sudut 0 derajat untuk memberi kesan shape ini berada di bawah area isi utama.

tutorial-desain-web-tumblr-09.jpg

Beri Pattern Overlay dengan pola pixel dari PSDfreemium.

tutorial-desain-web-tumblr-10.jpg

Inilah bentuk yang kita peroleh. Di bawah Anda bisa melihat juga detail tekstur yang diperoleh di perbesaran 100%.

tutorial-desain-web-tumblr-11.jpg

Langkah 6

Gandakan shape area latar. Turunkan Fill ke 0%. Beri Layer Style Pattern Overlay.

tutorial-desain-web-tumblr-12.jpg

Inilah hasil tekstur yang diperoleh.

tutorial-desain-web-tumblr-13.jpg

Langkah 7

Tambahkan layer mask. Isi bagian atas shape dengan gradasi dari putih ke hitam. Langkah ini akan menyisakan sedikit pola di bagian atas sidebar.

tutorial-desain-web-tumblr-14.jpg

Langkah 8

Aktifkan tool marquee kolom. Tool ini berguna untuk membuat seleksi dengan lebar 1 px.

tutorial-desain-web-tumblr-15.jpg

Langkah 9

Buat layer baru, buat seleksi 1 px dan isi dengan putih. Ulangi lagi, kali ini isi dengan putih. Simpan kedua garis ini di tepat di ujund area utama situs.

Di bawah Anda bisa melihat garis yang diperoleh pada perbesaran 100% dan 700%. Kedua ini memperkuat kontras antara bidang area utama dan sidebar.

tutorial-desain-web-tumblr-16.jpg

Langkah 10: Logo

Untuk logo, kita gunakan saja logo kain dari PSDfreemium.

tutorial-desain-web-tumblr-17.jpg

Ubah warna dalam Layer Style Color Overlay untuk mengganti logo.

tutorial-desain-web-tumblr-18.jpg

Langkah 11: Isi Sidebar

Buat kotak teks di area sidebar dan isi dengan data sidebar. Untuk header widget sidebar, gunakan Font Lobster. Widget pertama kita akan berupa perkenalan tentang pemilik situs.

tutorial-desain-web-tumblr-19.jpg

Beri efek letterpress dengan memberi Drop Shadow seperti berikut.

tutorial-desain-web-tumblr-20.jpg

Langkah 12

Buat seleksi persegi di samping teks perkenalan dan isi dengan putih. Di tengah kotak beri gambar avatar.

tutorial-desain-web-tumblr-21.jpg

Langkah 13

Buat dua garis 1 px di bawah judul widget sidebar. Beri juga efek letterpress.

tutorial-desain-web-tumblr-22.jpg

Langkah 14

Lakukan proses yang sama untuk membuat widget sidebar yang lain.

tutorial-desain-web-tumblr-23.jpg

Langkah 15: Isi Blog

Mulai dengan menambahkan pita berisi informasi tipe artikel. Kita menggunakan pita .

tutorial-desain-web-tumblr-24.jpg

Langkah 16

Di sebelah pita, tuliskan judul artikel. Seperti teks di sidebar, beri efek letterpress.

tutorial-desain-web-tumblr-25.jpg

Langkah 17

Buat kotak dengan warna #d1d1d1. Isi dengan metadata artikel.

tutorial-desain-web-tumblr-26.jpg

Langkah 18

Buat kotak untuk area video. Beri Layer Style Stroke.

tutorial-desain-web-tumblr-27.jpg

tutorial-desain-web-tumblr-28.jpg

Langkah 19

Ambil gambar dan simpan di atas kotak. Ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G agar gambar masuk ke dalam kotak. Di sini, saya menggunakan gambar dari Hevonens.

tutorial-desain-web-tumblr-29.jpg

Langkah 20

Buat layer baru dan simpan di bawah video. Ctrl-klik kotak video. Isi seleksi dengan hitam. Klik Filter > Blur > Gaussian Blur.

tutorial-desain-web-tumblr-30.jpg

Langkah 21

Transformasi bayangan dengan menekan Ctrl + T. Perkecil bayangan lalu lakukan proses Warp hingga kedua ujung bayangan keluar. Turunkan Opacity layer bayangan ke 30%.

tutorial-desain-web-tumblr-31.jpg

Langkah 22

Buat lingkaran hitam dan segitiga putih di tengah area video. Turunkan Opacity keduanya ke 50% dan 70%.

tutorial-desain-web-tumblr-32.jpg

Beri Outer Glow pada lingkaran untuk memberinya sedikit kilauan.

tutorial-desain-web-tumblr-33.jpg

tutorial-desain-web-tumblr-34.jpg

Langkah 23

Buat kotak teks di bawah area video dan isi dengan berita singkat. Beri efek Letterpress.

tutorial-desain-web-tumblr-35.jpg

Langkah 24

Gandakan artikel yang tadi kita buat. Hapus area video dan ubah tipenya menjadi Article.

tutorial-desain-web-tumblr-36.jpg

Langkah 25: Kotak Pencarian

Ada satu bagian terlupakan, kotak pencarian. Mulai dengan membuat sebuah rounded rectangle berwarna #efefef dengan radius sangat besar. Pastikan lebarnya harus sama dengan lebar widget lain.

tutorial-desain-web-tumblr-37.jpg

Beri Drop Shadow dan Stroke.

tutorial-desain-web-tumblr-38.jpg

tutorial-desain-web-tumblr-39.jpg

Langkah 26

Di sisi kiri, buat shape lebih gelap seperti terlihat di bawah.

tutorial-desain-web-tumblr-40.jpg

Langkah 27

Tumpukkan rounded rectangle dan lingkaran sehingga diperoleh ikon kaca pembesar sederhana.

tutorial-desain-web-tumblr-41.jpg

Langkah 28

Tahan Ctrl lalu klik kedua layer pembentuk ikon kaca pembesar. Isi seleksi dengan putih lalu geser ke bawah 1 px. Langkah ini akan memberikan efek letterpress pada ikon.

tutorial-desain-web-tumblr-42.jpg

Langkah 29

Terakhir, beri teks search di dalam kotak pencarian.

tutorial-desain-web-tumblr-43.jpg

Hasil Akhir

Berikut adalah hasil akhir desain web yang kita peroleh. Melalui tutorial desain sederhana ini, Anda sebetulnya belajar banyak teknik yang saat ini sedang populer seperti penggunaan tekstur lembut. Anda juga belajar teknik dasar penggunaan grid dalam desain.

final-large

Iklan

13 thoughts on “Mendesain Theme Tumblr Minimalis

  1. Maaf, mau nyanya bang jep…
    kalau menulis disini kan lewat file html.
    pertanyaanya, bagaimana penerapan file tutorial yg berformat html pada template desaindigital ?

  2. Yang dijelaskan di sini hanya proses desain di Photoshop. Proses berikutnya tergantung pada proses coding, bisa digunakan untuk wordpress, blogspot, tumblr, atau HTML biasa.

  3. Dalam format .doc, gambar akan masuk ke dalam dokumen dan turun kualitasnya. Selain itu, tidak ada kode HTML-nya. Proses editing jadi lebih lama.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s