Membuat Desain Banner Untuk Web Dan Toko Dengan Photoshop

Membuat Desain Banner untuk Web dan Toko dengan Photoshop - Membuat desain banner yang menarik untuk dipasang pada media online menyerupai web akan menciptakan presentase atau kemungkinan iklan kita di klik atau di kunjungi oleh pembaca semakin meningkat.

Untuk itu, menciptakan iklan banner yang menarik, unik dan elegan sangat penting untuk meningkatkan penjualan dari sebuah produk.

Membuat desain banner iklan untk dipasang di web sebelumnya juga sudah saya share. Namun pada tutorial sebelumnya aktivitas yang saya pakai ialah CorelDRAW.

Dan kali ini, saya akan membahas wacana Cara Membuat Design Banner untuk Web dan Toko dengan Photoshop. Makara sahabat yang tidak terbiasa memakai aktivitas CorelDRAW dapat berguru menciptakan desain banner dengan memakai Photoshop.

Baca Disini : Cara Membuat Banner Iklan dengan CorelDRAW

Jika sahabat ingin memakai desain banner tersebut pada situs jejaring sosial juga akan lebih menarik lagi kalau sahabat mengemas desain tersebut dalam bentuk Mockup.

Desain dan Mockup banner ini dapat sahabat download pada artikel ini. Makara pastikan sahabat download dengan benar desain dan mockup bannernya. Oke! pribadi saja kita mulai tutorialnya....

Langkah ke - 1

Buka aktivitas Photoshop sahabat lalu buat dokumen baru. Sesuaikan ukuran dokumen atau lembar kerjanya sesuai dengan kebutuhan. Disini saya memakai ukuran 1000 x 1500 pixels.

Langkah ke - 2

Kemudian pilih Gradient Tool (G) > atur warna forground dengan warna biru maritim atau R: 163 G: 214 B: 249. Setelah itu buat efek warna gradient dengan memakai settingan tool tersebut, lihat gambar dibawah.

Langkah ke - 3

Buat layer gres (CTRL + SHIFT + N), buat nama layer tersebut dengan nama "Bokeh". Kemudian Pilih Brush Tool (B).

Pilih sajian Window > Brush. Setelah kotak settingan brush tersebut muncul, silahkan atur brushnya menyerupai berikut.

Pada kolom Brush Preset, silahkan pilih tipe brushnya dengan nomor "13". 

Brush Tip Shape : Spacing "100%"

Shape Dynamics : Size Jitter "50%", Minimun Diameter "15%"

Scattering : Scatter "500%"

Lebih jelasnya lihat gambar dibawah.

Langkah ke - 4

Selanjutnya sapukan pointer mouse ke kanvas.

Setelah efek bulatan-bulatan sudah tercipta, turunkan opacity layer tersebut menjadi "25%"

Langkah ke - 5

Buat layer gres lagi (CTRL + SHIFT + N) dengan nama Bokeh 2. Lakukan cara yang sama menyerupai langkah diatas, namun kali ini buat variasi lingkaran yang berbeda. Seperti teladan objek bokeh yang lebih besar.

Turunkan Opacity Layer tersebut menjadi "15%"

Langkah ke - 6

Berikutnya buat layer gres dengan nama Setengah Lingkaran. Pilih Ellipse Tool (U) > pada Options Bar pilih Fill Pixels > buat objek lingkaran di atas lembar kerja. Lihat gambar dibawah.

Langkah ke - 7

Langkah selanjutnya, import gambar yang akan dipakai pada desain banner ini. Disini saya memakai gambar handphone. Drag gambar tersebut ke lembar kerja pertama tadi.

Langkah ke - 8

Selanjutnya sahabat pilih Text Tool (T), ketikkan teks yang ada di tulis dalam baner tersebut.

Seperti contoh, "PROMO" (font Calibri) "SMARTPHONE SAMSUNG" (font Franklin Gothic Demi, warna : R: 0 G: 62 B: 145) "BELI SEKARANG" (font Franklin Gothic Demi).

Ketiga teks tersebut dibentuk dalam layer yang berbeda.

Langkah ke - 9

Kemudian pada layer Smaertphone Samsung, tambahkan Layer Style Stroke dan Drop Shadow.

Baca Disini : Fungsi dan Cara Menggunakan Layer Style Photoshop

Langkah ke - 10

Berikutnya buat layer gres dibawah layer teks Beli Sekarang!. Kemudian Pilih Rounded Rectangle Tool. Lalu buatlah objek persegi panjang dengan memakai warna pilihan sobat. Setelah itu ubah warna teks Beli Sekarang! menjadi putih. Perhatikan gambar dibawah.

Langkah ke - 11

Terakhir tinggal sahabat sisipkan logo toko diatas lembar kerja. Di daerah objek setengah lingkaran tadi.

Desain banner ini dapat sahabat gunakan untuk banner iklan di web menyerupai gambar dibawah. Untuk memakai desain banner ini pada media online sebaiknya kompres terlebih dahulu ukurannya biar tidak menciptakan loading web/blog menjadi berat.

Baca Disini : Cara Mengecilkan Size Foto Online Tanpa Mengurangi Kualitas

Atau juga untuk banner toko.

Baca Disini : Cara Membuat Mockup di Photoshop

Untuk file psd desain banner dan mock up desain bannernya dapat sahabat download pada link dibawah.
Segala bentuk pertanyaan dapat sahabat tanyakan pada kolom komentar dibawah. Dan akan saya respon secepatnya. Terimakasih....

Tag : menciptakan desain banner di photoshop, cara desain banner, menciptakan banner, bikin banner, cara menciptakan iklan dengan photoshop, desain banner, menciptakan desain banner, pembuatan banner, tutorial photoshop keren, teladan banner keren, banner handphone, download banner handphone psd, banner kere, download banner psd gratis, background spanduk, cara menciptakan background banner dan spanduk, cara menciptakan background bokeh, cara menciptakan background sendiri di photoshop, banner design, cara menciptakan backdrop, bikin banner sendiri, aplikasi menciptakan spanduk dan banner, cara menciptakan banner dengan photoshop cs3.

Download Desain dan Mock Up Banner untuk Web dan Toko

Size : 4.95MB

Sumber https://belajar-dotcom.blogspot.com/

Bagikan Artikel ini