Dalam tutorial ini, kita akan membuat desain web bergaya elegan di Photoshop. Tidak ada
banyak yang elemen 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.
Langkah 2
Secara default, ukuran template Photoshop terlalu sempit. Perbesar dengan perintah
Canvas Size (Ctrl + Alt + C). Width: 400 px, Relative, Anchor: tengah.
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.
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.
Langkah 7
Di paling atas, buat persegi lebih kecil untuk menyimpan daftar halaman situs. Beri Gradient
Overlay. Tulis nama-nama halaman di atasnya.
Langkah 9
Langkah 11
Anda bisa melihat pengaruh layer styles di bawah.
Langkah 12
Tulis kategori blog di atas shape. Kita tambahkan efek letterpress pada teks dengan
memberi layer styles berikut.
Langkah 13
Anda bisa melihat dalam perbesaran 500%, efek letterpress sebetulnya sederhana,
menambahkan bayangan putih pada teks sehingga teks terlihat terangkat.
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.
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.
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.
Langkah 17
Sebagian kategori memiliki anak menu. Kita tandai dengan membuat sebuah segitiga lalu
beri efek letterpress seperti pada teks.
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.
Langkah 20
Buat teks jumlah subscribers, fan, dan follower di samping ikon. Beri layer style berikut
pada teks.
Langkah 21
Langkah 23
Buat judul post dan di bawahnya tambahkan sebuah persegi dengan ukuran 150 x 150 px.
Beri Stroke.
Langkah 24
Beri excerpt artikel.
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.
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.
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.
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 eyecatching. Ingat bahwa gradient yang terlalu berlebihan tidak bagus pada desain.
Langkah 31
Terakhir, tuliskan informasi copyright dan nama desainer pada footer. Beri efek letterpress
dengan memberi layer style Drop Shadow.
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.