Membuat Design Banner Untuk Web Dan Toko Dengan Photoshop

Membuat Design Banner untuk Web dan Toko dengan Photoshop - Membuat desain banner yang menarikdanunik untuk dipasang pada media online ibarat web akan membuat presentase atau kemungkinan iklan kita di klik atau di kunjungi oleh pembaca semakin meningkat.

Untuk itu, membuat iklan banner yang menarikdanunik, 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 jadwal yang saya pakai yakni CorelDRAW.

Dan kali ini, saya akan mengulas wacana Teknik Membuat Design Banner untuk Web dan Toko dengan Photoshop. Makara teman akrab yang tidak terbiasa memakai jadwal CorelDRAW dapat berguru membuat desain banner dengan memakai Photoshop.

Baca Disini : Teknik Membuat Banner Iklan dengan CorelDRAW

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

Membuat Design Banner untuk Web dan Toko dengan Photoshop Membuat Design Banner untuk Web dan Toko dengan Photoshop

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

Langkah ke - 1

Buka jadwal Photoshop teman akrab 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. Sesudah itu buat pengaruh 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 hidangan Window > Brush. Sesudah kotak settingan brush tersebut muncul, silahkan atur brushnya ibarat diberikut.

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.

Sesudah pengaruh 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 ibarat langkah diatas, namun kali ini buat variasi lingkaran yang tidak sama. 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 teman akrab pilih Text Tool (T), ketikkan teks yang ada di tulis dalam bguar 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 tidak sama.

Langkah ke - 9

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

Baca Disini : Fungsi dan Teknik 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 teman dekat. Sesudah itu ubah warna teks Beli Sekarang! menjadi putih. Perhatikan gambar dibawah.

Langkah ke - 11

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

Desain banner ini dapat teman akrab gunakan untuk banner iklan di web ibarat gambar dibawah. Untuk memakai desain banner ini pada media online sebaiknya kompres terlebih lampau ukurannya supaya tidak membuat loading web/blog menjadi berat.

Baca Disini : Teknik Mengecilkan Size Foto Online Tanpa Mengurangi Kualitas

Atau juga untuk banner toko.

Baca Disini : Teknik Membuat Mockup di Photoshop

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

Tag : menciptakan desain banner di photoshop, cara desain banner, membuat banner, bikin banner, cara membuat iklan dengan photoshop, desain banner, membuat 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 membuat background banner dan spanduk, cara membuat background bokeh, cara membuat background sendiri di photoshop, banner design, cara membuat backdrop, bikin banner sendiri, aplikasi membuat spanduk dan banner, cara membuat banner dengan photoshop cs3.