Saat ini, desain web bergaya vintage dan retro sedang naik daun. Salah satu ciri khas desain ini adalah penggunaan tekstur kain atau kertas yang memberi kesan tua. Di tutorial ini, kita akan membuat logo situs dari kain. Tutorial ini bisa diaplikasikan dalam sebagian projek desain web Anda.
Preview
Detail Tutorial
- Tingkat Kesulitan: Dasar
- Lama Pengerjaan: 15 menit
- Program: Photoshop
- Materi yang Dibahas: Penggunaan tekstur, setting brush, blending mode.
Resource yang Dibutuhkan
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
Tutorial
Langkah 1: Latar
Buat file baru berukuran 400 x 300 px. Isi latar depan dengan salah satu tekstur buku dari Lost and Taken.
Langkah 2: Bentuk Dasar Pita
Buat persegi menggunakan tool rectangle. Beri layer style berikut. Warna persegi dan di dalam Color Overlay akan mempengaruhi warna pita yang dihasilkan.
Langkah 3
Aktifkan tool poligon. Di baris pilihan, isikan Side: 3 untuk menghasilkan bentuk segi tiga. Tahan Shift lalu geser untuk menambahkan segitiga ke dalam shape persegi sebelumnya.
Langkah 4
Seleksi shape segitiga dengan tool panah hitam. Geser sambil manahan Alt untuk menduplikasi bentuk segitiga.
Langkah 5
Ulangi proses ini hingga bagian bawah pita seluruhnya tertutupi segitiga.
Langkah 6: Menambah Tekstur dan Pencahayaan
Simpan tekstur kain ke atas shape pita. Ubah blend mode layer menjadi Screen. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan memasukkan tekstur kain ke dalam shape pita.
Langkah 7
Buat layer baru di antara tekstur kain dan pita. Lukis beberapa garis hitam dengan tool brush lembut (Hardness: 0%) berukuran besar. Turunkan Opacity layer ke 10%.
Langkah 8
Ulangi proses tadi. Kali ini, lukis putih dan turunkan Opacity ke 38%.
Di bawah adalah susunan layer yang dihasilkan.
Langkah 9: Memperkuat Bayangan Pita
Saat ini pita sudah terlihat memiliki bayangan namun tidak realistis. Jika sudah lama bekerja dengan Photoshop, suatu saat Anda akan menyadari bahwa Drop Shadow tidak pernah cukup untuk menghasilkan bayangan yang realistis.
Aktifkan tool lasso poligon dan buat seleksi di sekeliling pita. Buat layer baru, simpan di bawah pita, dan isi seleksi dengan hitam. Haluskan bayangan dengan memberi filter Gaussian Blur (Filter > Blur > Gaussian Blur). Turunkan Opacity layer hingga 10%.
Langkah 10: Memberi Highlight dan Shadow
Buat layer baru dan simpan di atas pita. Ctrl-klik layer pita. Lukis garis hitam di bagian atas pita dan turunkan opacity layer ke 15%.
Langkah 11
Ulangi proses tadi, kali ini gunakan warna putih untuk highlight.
Langkah 12: Efek Jahitan
Tidak cukup dengan tekstur, kita harus memberi efek jahitan agar hasilnya terlihat realistis. Aktifkan tool pencil, buka panel Brush dan gunakan setting seperti di bawah.
Langkah 13
Buat garis vertikal di salah satu sisi pita. Beri Drop Shadow dengan setting seperti di bawah.
Langkah 14
Ulangi proses ini untuk membuat garis di sisi lainnya.
Langkah 15: Logo Situs
Tulis nama situs lalu beri Layer Style berikut.
Langkah 16
Saya tambahkan logo yang diperoleh dari pilihan di tool Custom Shape. Shape saya beri Layer Style yang sama dengan teks.
Hasil Akhir
Di bawah adalah hasil akhir pita kain yang kita peroleh. Perhatikan bahwa di sini kita sangat memperhatikan detail, misalnya bayangan 1 pixel pada jahitan atau bayangan tambahan pada pita. Perhatian pada detail sangat penting karena itulah yang membedakan desain biasa dan luar biasa.
