Siapa yang tidak kenal banner web ??? sebuah banner minimalis yang tampil di dalam sebuah website. Banner web di desain seindah mungkin untuk menarik perhatian pengunjung web. Biasanya dalam sebuah banner web ada gambar dan content teks. Namun tanpa gambar pun kita bisa buat banner web dengan menarik hanya dengan content teks tanpa gambar. Nah disini saya akan berbagi tutorial tentang Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek.

Agar tidak bingung kita akan coba langsung praktikan. Buka adobe photoshopnya di komputer atau laptop, Ikuti langkah-langkah Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek dibawah ini secara berurutan :

1.Buat lembar kerja baru ukuran 1200 x 500 px dengan resolusi 72 dan color mode RGB. Caranya ke menu file isi kolom width 720px dan height 300px > resolusi 72 > color mode RGB > ok.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-1

2. Buat background berwarna menggunakan rectangle tool.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-2

3. Buat layer baru (new layer) > ketik teks “Diskon 50%” menggunakan type tool > Untuk ukuran dan jenis font bebas, teman-teman bisa sesuaikan dengan font yang tersedia di komputer atau laptop ( usahakan menggunakan jenis font yang menarik karena kita hanya bermain dengan teks saja tanpa gambar ).

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-3

4. Pilih layer diskon 50% > tekan Ctrl+T > klik kanan > skew > miringkan kekanan sekitar 300 >  enter.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-4

5. Duplikat layer tersebut dengan cara tekan ctrl+J.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-5

6. Pilih layer “diskon 50%” > Free transform (tekan ctrl+T) > klik kanan > free transform > flip vertical > geser kebawah hingga saling bertemu dibagian bawah teks.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-6

7. Seleksi layer “diskon 50%” (yang menghadap kebawah) > convert teks dengan cara klik kanan pada layer > resterize type > tekan Ctrl+T > klik kanan distort > Tarik keatas ( diatur tingkat kemiringan).

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-7

8. Masih dilayer “diskon 50%” > tambahkan layer masking (add layer mask) > buat bayangan menggunakan gradient tool.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-8

9. Pilih layer “diskon 50% copy” > menu layer > layer style > Bevel & Embos > muncul jendela pengaturan layer style > atur sesuai gambar dibawah ini > ok. Maka teks akan mempunyai efek emboss.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-9

10. Tambahkan kembali *teks stock terbatas dan letakan dibagian kanan bawah.

Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek-10

Demikian pula tips and trik dari saya tentang Cara Membuat Baner Web Teks Sederhana Dengan Sentuhan Efek. Mudah-mudahan bisa bermanfaat. Teman-teman bisa kembangkan lagi dengan berbagai macam ide kreatifnya Karena contoh diatas hanyalah contoh sederhana. Sampai ketemu lagi di tutorial selanjutnya dengan pembahasan materi yang menarik dan ter update. Terima kasih …