Membuat Design Banner Untuk Web Dan Toko Dengan Photoshop

Membuat Design Banner untuk Web dan Toko dengan Photoshop - Membuat desain banner yang menarik untuk dipasang pada media online ibarat 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 yaitu CorelDRAW.

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

Baca Disini : Cara Membuat Banner Iklan dengan CorelDRAW

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

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

Langkah ke - 1

Buka aktivitas Photoshop teman 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 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 sajian Window > Brush. Setelah kotak settingan brush tersebut muncul, silahkan atur brushnya ibarat 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 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 berbeda. Seperti pola 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 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 teman sisipkan logo toko diatas lembar kerja. Di daerah objek setengah lingkaran tadi.

Desain banner ini dapat teman gunakan untuk banner iklan di web ibarat gambar dibawah. Untuk memakai desain banner ini pada media online sebaiknya kompres terlebih dahulu ukurannya supaya 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 teman download pada link dibawah.
Segala bentuk pertanyaan dapat teman tanyakan pada kolom komentar dibawah. Dan akan saya respon secepatnya. Terimakasih....

Tag : membuat 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, pola 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/