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.
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.
Langkah 2
Secara default, ukuran template Photoshop terlalu sempit. Perbesar
dengan perintah Canvas Size (Ctrl + Alt + C). Width: 400 px, Relative,
Anchor: tengah.
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.
Langkah 4: Membuat Header
Buat sebuah persegi berwarna hitam di bagian atas halaman.
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 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.
Langkah 9
Tulis tagline di bawah nama situs.
Langkah 10: Baris Kategori
Gunakan rounded rectangle untuk membuat persegi dengan radius 3 px. Beri Drop Shadow, Gradient Overlay, dan Stroke.
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 19: RSS dan Jaringan Sosial
Ambil
ikon jaringan sosial. Simpan ikon RSS, Facebook, dan Twitter sesuai dengan guide.
Langkah 20
Buat teks jumlah subscribers, fan, dan follower di samping ikon. Beri layer style berikut pada teks.
Langkah 21
Tambahkan tulisan Subscribers, Fans, dan Follower di samping nomor.
Langkah 22: Isi Blog
Buat rounded rectangle dengan radius 3 px untuk isi blog. Beri Layer Style Drop Shadow.
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 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.
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.
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.
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.
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.
