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