Membuat Logo Situs Bergaya Vintage dari Kain

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


tutorial-photoshop-pita-logo-situs-dari-kain-26.jpg

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.
tutorial-photoshop-pita-logo-situs-dari-kain-01.jpg

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.

tutorial-photoshop-pita-logo-situs-dari-kain-02tutorial-photoshop-pita-logo-situs-dari-kain-03tutorial-photoshop-pita-logo-situs-dari-kain-04tutorial-photoshop-pita-logo-situs-dari-kain-05

tutorial-photoshop-pita-logo-situs-dari-kain-06

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.

tutorial-photoshop-pita-logo-situs-dari-kain-07.jpg

Langkah 4


Seleksi shape segitiga dengan tool panah hitam. Geser sambil manahan Alt untuk menduplikasi bentuk segitiga.
tutorial-photoshop-pita-logo-situs-dari-kain-08.jpg

Langkah 5


Ulangi proses ini hingga bagian bawah pita seluruhnya tertutupi segitiga.

tutorial-photoshop-pita-logo-situs-dari-kain-09.jpg

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.
tutorial-photoshop-pita-logo-situs-dari-kain-10.jpg

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%.
tutorial-photoshop-pita-logo-situs-dari-kain-11.jpg

Langkah 8


Ulangi proses tadi. Kali ini, lukis putih dan turunkan Opacity ke 38%.
tutorial-photoshop-pita-logo-situs-dari-kain-12.jpg

Di bawah adalah susunan layer yang dihasilkan.
tutorial-photoshop-pita-logo-situs-dari-kain-13.jpg

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%.
tutorial-photoshop-pita-logo-situs-dari-kain-14.jpg

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%.
tutorial-photoshop-pita-logo-situs-dari-kain-15.jpg

Langkah 11


Ulangi proses tadi, kali ini gunakan warna putih untuk highlight.
tutorial-photoshop-pita-logo-situs-dari-kain-16.jpg

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.
tutorial-photoshop-pita-logo-situs-dari-kain-17.jpg

Langkah 13


Buat garis vertikal di salah satu sisi pita. Beri Drop Shadow dengan setting seperti di bawah.
tutorial-photoshop-pita-logo-situs-dari-kain-18tutorial-photoshop-pita-logo-situs-dari-kain-19tutorial-photoshop-pita-logo-situs-dari-kain-20

Langkah 14


Ulangi proses ini untuk membuat garis di sisi lainnya.
tutorial-photoshop-pita-logo-situs-dari-kain-21.jpg

Langkah 15: Logo Situs


Tulis nama situs lalu beri Layer Style berikut.
tutorial-photoshop-pita-logo-situs-dari-kain-24tutorial-photoshop-pita-logo-situs-dari-kain-22tutorial-photoshop-pita-logo-situs-dari-kain-23

Langkah 16


Saya tambahkan logo yang diperoleh dari pilihan di tool Custom Shape. Shape saya beri Layer Style yang sama dengan teks.
tutorial-photoshop-pita-logo-situs-dari-kain-25.jpg

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.
tutorial-photoshop-pita-logo-situs-dari-kain-26.jpg

Download Link


Download File PSD