Mendesain Blog Elegan dengan Photoshop

Dalam tutorial ini, kita akan membuat desain web bergaya elegan di Photoshop. Tidak ada banyak elemen yang digunakan di sini. Anda akan belajar banyak teknik, mulai dari membuat efek letterpress, membuat efek 3 dimensi pada bentuk, hingga membuat garis inset.

Preview


Sebelum mulai, lihat terlebih desain web yang akan kita buat. Klik gambar untuk melihatnya pada ukuran penuh.

Mendesain Blog Elegan dengan Photoshop

Resource Yang Dibutuhkan




Langkah 1: Mempersiapkan File


Kita akan menggunakan grid standar 960. Download terlebih dahulu grid 960 dari 960.gs lalu buka template file Photoshop. Sebelumnya perhatikan hasil akhir beserta guide di bawah. Semua elemen harus berada dalam grid untuk mempermudah proses coding CSS.

Mendesain Blog Elegan dengan Photoshop

Langkah 2


Secara default, ukuran template Photoshop terlalu sempit. Perbesar dengan perintah Canvas Size (Ctrl + Alt + C). Width: 400 px, Relative, Anchor: tengah.

Mendesain Blog Elegan dengan Photoshop

Langkah 3: Membuat Latar Bertekstur


Buat layer baru dan isi dengan warna #cdcdcd. Buat lagi layer baru dan isi dengan putih. Klik Filter > Noise > Add Noise, ubah blend mode ke Multiply dengan Opacity layer 50%. Langkah ini akan memberikan tekstur pada latar. Anda bisa melihat tahapan pembuatan latar di bawah.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 4: Membuat Header


Buat sebuah persegi berwarna hitam di bagian atas halaman.


Mendesain Blog Elegan dengan Photoshop

Langkah 5


Ambil pola metal dari WeGraphics. Di dalam file zip, tersedia file pattern Photoshop. Anda tinggal klik ganda file itu untuk memasukkannya ke Photoshop. Beri Pattern Overlay dan pilih salah satu pola metal yang tersedia dan ubah blend mode ke Multiply.

Mendesain Blog Elegan dengan Photoshop

Langkah 6


Buat layer baru di atas shape hitam. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask. Buat gradasi radial dari putih hitam dan ubah blend mode ke Screen.


Mendesain Blog Elegan dengan Photoshop

Langkah 7


Di paling atas, buat persegi lebih kecil untuk menyimpan daftar halaman situs. Beri Gradient Overlay. Tulis nama-nama halaman di atasnya.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 8: Membuat Logo Situs


Ambil logo situs, saya mengambil ikon gratis dari iconfinder. Di sebelah ikon, tuliskan nama situs. Beri Drop Shadow dan Gradient Overlay pada teks.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 9


Tulis tagline di bawah nama situs.

Mendesain Blog Elegan dengan Photoshop

Langkah 10: Baris Kategori


Gunakan rounded rectangle untuk membuat persegi dengan radius 3 px. Beri Drop Shadow, Gradient Overlay, dan Stroke.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 11


Anda bisa melihat pengaruh layer styles di bawah.

Mendesain Blog Elegan dengan Photoshop

Langkah 12


Tulis kategori blog di atas shape. Kita tambahkan efek letterpress pada teks dengan memberi layer styles berikut.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 13


Anda bisa melihat dalam perbesaran 500%, efek letterpress sebetulnya sederhana, menambahkan bayangan putih pada teks sehingga teks terlihat terangkat.

Mendesain Blog Elegan dengan Photoshop

Langkah 14


Buat layer baru. Buat garis 1 px memisahkan kategori. Turunkan Fill layer ke 0% dan beri layer style Gradient Overlay dengan Blend Mode Screen. Screen akan mempertahankan pixel terang dan menyembunyikan pixel gelap.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 15


Sama seperti tadi, buat layer baru dan gambar garis 1 px. Kali ini beri Gradient Overlay dengan Blend Mode Multiply. Ini akan mempertahankan warna gelap.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 16


Simpan kedua garis tadi ke dalam group dengan memilihnya lalu tekan Ctrl + G. Gandakan group dengan menggesernya sambil menahan Alt. Buat pemisah pada kategori yang lain.

Mendesain Blog Elegan dengan Photoshop

Langkah 17


Sebagian kategori memiliki anak menu. Kita tandai dengan membuat sebuah segitiga lalu beri efek letterpress seperti pada teks.

Mendesain Blog Elegan dengan Photoshop

Langkah 18


Sebelum maju lagi. Kita lihat dulu hasil yang kita peroleh saat ini, perhatikan bahwa semua elemen berada di dalam grid. Ini membuat desain lebih rapi dan teratur.

Mendesain Blog Elegan dengan Photoshop

Langkah 19: RSS dan Jaringan Sosial


Ambil ikon jaringan sosial. Simpan ikon RSS, Facebook, dan Twitter sesuai dengan guide.

Mendesain Blog Elegan dengan Photoshop

Langkah 20


Buat teks jumlah subscribers, fan, dan follower di samping ikon. Beri layer style berikut pada teks.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 21


Tambahkan tulisan Subscribers, Fans, dan Follower di samping nomor.

Mendesain Blog Elegan dengan Photoshop

Langkah 22: Isi Blog


Buat rounded rectangle dengan radius 3 px untuk isi blog. Beri Layer Style Drop Shadow.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 23


Buat judul post dan di bawahnya tambahkan sebuah persegi dengan ukuran 150 x 150 px. Beri Stroke.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 24


Beri excerpt artikel.

Mendesain Blog Elegan dengan Photoshop

Langkah 25


Di bawah teks, buat meta data artikel berisi nama penulis, tag, dan tanggal. Untuk mempercantik tambahkan ikon di sebelahnya. Saya menggunakan ikon gratis dari Set Office Icons.

Mendesain Blog Elegan dengan Photoshop

Langkah 26


Buat sebuah rounded rectangle, beri layer style Drop Shadow, Gradient Overlay, dan Stroke untuk memberi kesan 3D. Di atasnya beri tulisan "Read More".

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 27


Seleksi semua layer yang membentuk isi post dan simpan ke dalam group dengan menekan Ctrl + G. Klik kanan group dan pilih Convert to Smart Object. Geser layer sambil menahan Alt untuk menggandakan isi artikel.

Mendesain Blog Elegan dengan Photoshop

Langkah 28: Form Search


Buat sebuah rounded rectangle dengan radius 3 px di sidebar. Beri layer style di bawah. Tambahkan teks penanda dan beri ikon search.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 29: Widget Sidebar


Buat lagi rounded rectangle dengan radius 3 px untuk widget lainnya. Tambahkan Drop Shadow dengan setting sama seperti kotak isi post.

Mendesain Blog Elegan dengan Photoshop

Langkah 30


Di bagian bawah, buat sebuah persegi panjang. Beri sedikit Gradient Overlay dengan Opacity: 6-9%. Bisa Anda lihat di bawah perbedaannya sangat tipis (subtle) tapi cukup eye-catching. Ingat bahwa gradient yang terlalu berlebihan tidak bagus pada desain.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Langkah 31


Terakhir, tuliskan informasi copyright dan nama desainer pada footer. Beri efek letterpress dengan memberi layer style Drop Shadow.

Mendesain Blog Elegan dengan Photoshop

Mendesain Blog Elegan dengan Photoshop

Hasil Akhir


Inilah hasil akhir desain web yang kita peroleh. Perhatikan bahwa kita menggunakan banyak efek yang sangat minim di sini, seperti bayangan 1 px, gradasi minim, dan efek letterpress. Kesederhanaan inilah yang membuat desain terlihat elegan. Klik di sini atau klik pada gambar untuk melihat hasil akhir di ukuran lebih besar.

Mendesain Blog Elegan dengan Photoshop

Download Source File

Saya yakin sebagian dari Anda, pembaca DesainDigital, akan meminta tutorial ini dilanjutkan hingga ke tahap pemrograman. Sayangnya, saya tidak punya kemampuan untuk itu. Jika Anda mampu menulis tutorialnya dan punya skill yang diperlukan, silakan hubungi saya. Dengan senang hati saya akan menerima Anda sebagai penulis tamu di sini.