Dalam tutorial desain web ini, kita akan belajar mendesain theme tumblr bergaya retro minimalis yang memiliki tekstur pixel dan warna-warna lembut.
Sebelum memulai tutorial ini, silakan lihat terlebih dahulu desain tumblr yang akan kita buat. Klik gambar untuk melihatnya di perbesaran 100%.
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
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.
Perbesar ukuran kanvas menjadi 1280 px x 1280 px dengan perintah Canvas Size (Ctrl + Alt + C).
Buat layer baru dan isi dengan warna #f0f0f0. Beri Layer Style Pattern Overlay menggunakan pola pixel dari PSDfreemium.
Seperti inilah hasil tekstur yang Anda peroleh.
Buat lagi layer baru dan isi dengan putih. Klik Filter > Noise > Add Noise. Turunkan opacity layer hingga 30% dan ubah blend mode ke Multiply.
Seperti inilah hasil tekstur yang kita peroleh.
Buat shape di samping untuk area sidebar. Gunakan warna #d8d8d8.
Beri Inner Shadow dengan sudut 0 derajat untuk memberi kesan shape ini berada di bawah area isi utama.
Beri Pattern Overlay dengan pola pixel dari PSDfreemium.
Inilah bentuk yang kita peroleh. Di bawah Anda bisa melihat juga detail tekstur yang diperoleh di perbesaran 100%.
Gandakan shape area latar. Turunkan Fill ke 0%. Beri Layer Style Pattern Overlay.
Inilah hasil tekstur yang diperoleh.
Tambahkan layer mask. Isi bagian atas shape dengan gradasi dari putih ke hitam. Langkah ini akan menyisakan sedikit pola di bagian atas sidebar.
Aktifkan tool marquee kolom. Tool ini berguna untuk membuat seleksi dengan lebar 1 px.
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.
Untuk logo, kita gunakan saja logo kain dari PSDfreemium.
Ubah warna dalam Layer Style Color Overlay untuk mengganti logo.
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.
Beri efek letterpress dengan memberi Drop Shadow seperti berikut.
Buat seleksi persegi di samping teks perkenalan dan isi dengan putih. Di tengah kotak beri gambar avatar.
Buat dua garis 1 px di bawah judul widget sidebar. Beri juga efek letterpress.
Lakukan proses yang sama untuk membuat widget sidebar yang lain.
Mulai dengan menambahkan pita berisi informasi tipe artikel. Kita menggunakan pita .
Di sebelah pita, tuliskan judul artikel. Seperti teks di sidebar, beri efek letterpress.
Buat kotak dengan warna #d1d1d1. Isi dengan metadata artikel.
Buat kotak untuk area video. Beri Layer Style Stroke.
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.
Buat layer baru dan simpan di bawah video. Ctrl-klik kotak video. Isi seleksi dengan hitam. Klik Filter > Blur > Gaussian Blur.
Transformasi bayangan dengan menekan Ctrl + T. Perkecil bayangan lalu lakukan proses Warp hingga kedua ujung bayangan keluar. Turunkan Opacity layer bayangan ke 30%.
Buat lingkaran hitam dan segitiga putih di tengah area video. Turunkan Opacity keduanya ke 50% dan 70%.
Beri Outer Glow pada lingkaran untuk memberinya sedikit kilauan.
Buat kotak teks di bawah area video dan isi dengan berita singkat. Beri efek Letterpress.
Gandakan artikel yang tadi kita buat. Hapus area video dan ubah tipenya menjadi Article.
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.
Beri Drop Shadow dan Stroke.
Di sisi kiri, buat shape lebih gelap seperti terlihat di bawah.
Tumpukkan rounded rectangle dan lingkaran sehingga diperoleh ikon kaca pembesar sederhana.
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.
Terakhir, beri teks search di dalam kotak pencarian.
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.
Preview
Sebelum memulai tutorial ini, silakan lihat terlebih dahulu desain tumblr yang akan kita buat. Klik gambar untuk melihatnya di perbesaran 100%.
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:
- 26 Repeatable Pixel Patterns dari PSDfreemium
- Fabric Logo Site dari PSDfreemium
- Ribbon Rectangle dari PSDfreemium
- 26 Repeatable Pixel Patterns dari PSDfreemium
- Devil Avatar dari Oliver Scholtz
- Font Lobster dari Google Fonts
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.
Langkah 2
Perbesar ukuran kanvas menjadi 1280 px x 1280 px dengan perintah Canvas Size (Ctrl + Alt + C).
Langkah 3: Membuat Latar Bertekstur
Buat layer baru dan isi dengan warna #f0f0f0. Beri Layer Style Pattern Overlay menggunakan pola pixel dari PSDfreemium.
Seperti inilah hasil tekstur yang Anda peroleh.
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.
Seperti inilah hasil tekstur yang kita peroleh.
Langkah 5: Area Sidebar
Buat shape di samping untuk area sidebar. Gunakan warna #d8d8d8.
Beri Inner Shadow dengan sudut 0 derajat untuk memberi kesan shape ini berada di bawah area isi utama.
Beri Pattern Overlay dengan pola pixel dari PSDfreemium.
Inilah bentuk yang kita peroleh. Di bawah Anda bisa melihat juga detail tekstur yang diperoleh di perbesaran 100%.
Langkah 6
Gandakan shape area latar. Turunkan Fill ke 0%. Beri Layer Style Pattern Overlay.
Inilah hasil tekstur yang diperoleh.
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.
Langkah 8
Aktifkan tool marquee kolom. Tool ini berguna untuk membuat seleksi dengan lebar 1 px.
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.
Langkah 10: Logo
Untuk logo, kita gunakan saja logo kain dari PSDfreemium.
Ubah warna dalam Layer Style Color Overlay untuk mengganti logo.
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.
Beri efek letterpress dengan memberi Drop Shadow seperti berikut.
Langkah 12
Buat seleksi persegi di samping teks perkenalan dan isi dengan putih. Di tengah kotak beri gambar avatar.
Langkah 13
Buat dua garis 1 px di bawah judul widget sidebar. Beri juga efek letterpress.
Langkah 14
Lakukan proses yang sama untuk membuat widget sidebar yang lain.
Langkah 15: Isi Blog
Mulai dengan menambahkan pita berisi informasi tipe artikel. Kita menggunakan pita .
Langkah 16
Di sebelah pita, tuliskan judul artikel. Seperti teks di sidebar, beri efek letterpress.
Langkah 17
Buat kotak dengan warna #d1d1d1. Isi dengan metadata artikel.
Langkah 18
Buat kotak untuk area video. Beri Layer Style Stroke.
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.
Langkah 20
Buat layer baru dan simpan di bawah video. Ctrl-klik kotak video. Isi seleksi dengan hitam. Klik Filter > Blur > Gaussian Blur.
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%.
Langkah 22
Buat lingkaran hitam dan segitiga putih di tengah area video. Turunkan Opacity keduanya ke 50% dan 70%.
Beri Outer Glow pada lingkaran untuk memberinya sedikit kilauan.
Langkah 23
Buat kotak teks di bawah area video dan isi dengan berita singkat. Beri efek Letterpress.
Langkah 24
Gandakan artikel yang tadi kita buat. Hapus area video dan ubah tipenya menjadi Article.
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.
Beri Drop Shadow dan Stroke.
Langkah 26
Di sisi kiri, buat shape lebih gelap seperti terlihat di bawah.
Langkah 27
Tumpukkan rounded rectangle dan lingkaran sehingga diperoleh ikon kaca pembesar sederhana.
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.
Langkah 29
Terakhir, beri teks search di dalam kotak pencarian.
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.