Cara Membuat Banner Web di Photoshop

Punya website atau blog dan ingin mempercantik tampilan dengan aneka gambar banner ?
Ingin membuat gambar banner web untuk berpromosi di situs lain ? Semua bisa Anda lakukan
sendiri secara cepat dan mudah. Tutorial kali ini akan menuntun Anda membuat banner web
sendiri dengan Adobe Photoshop.

Format Banner Web
Jika Anda perhatikan, gambar-gambar banner web dan iklan di berbagai situs yang Anda kunjungi memiliki
ukuran yang rata-rata seragam. Meskipun tidak ada standar atau aturan mutlak, namun ada baiknya Anda menggunakan format atau ukuran banner yang paling banyak diterima dan bisa dipasang oleh situs-situs lain.
• Banner: 468 x 60 px (pixel)
• Leaderboard: 728 x 90 px
• Skyscraper: 120 x 600 px
• Wide Skyscraper: 160 x 600 px
• Square: 250 x 250 pixel
• Square Small: 200 x 200 px
• Medium Rectangle: 300 x 250 px
• Large Rectangle: 336 x 280 px

Dari berbagai format tersebut, format gambar banner yang paling populer adalah :
• Leaderboard: format memanjang horisontal. Cocok dipasang di bagian atas halaman web, misalnya di 

  atas atau di bawah menu utama atau navigasi.
• Wide Skyscraper: format memanjang vertikal. Cocok dipasang di samping (dalam blog lazim disebut 

   Sidebar), misalnya di bawah daftar menu vertikal atau di samping halaman utama.
• Medium Rectangle: format kotak. Cocok dipasang di sela-sela halaman utama/posting, atau diletakkan 

  di sudut sidebar. Situs-situs berita lazim menempatkannya di sudut kanan atas.

Membuat File Gambar Banner Baru
Untuk membuat banner baru di Photoshop, Anda dapat memanfaatkan Preset banner yang telah tersedia.
1. File > New atau tekan Ctrl+N.

2. Pada kotak New, pilih Preset = Web dan Size = Medium Rectangle (atau ukuran lain sesuai selera).
3. Jika ingin membuat banner berukuran di luar standar yang ada di Preset, isikan nilainya pada Width dan
    Height.
4. Background Contents dapat Anda pilih transparan atau lainnya. Ini bisa Anda sesuaikan lebih lanjut saat
    merancang.
5. Klik OK. Banner siap dibuat.

Mendesain Banner dalam Layer-layer
Biasanya sebuah banner terdiri dari gabungan teks, gambar, dan efek-efek tertentu.
Layer adalah lapisan penyusun gambar. Agar perancangan banner menjadi mudah, selalu buat layer baru untuk setiap komponen.Misalnya, biarkan Layer 1 tetap kosong untuk dijadikan latar, tempatkan teks judul di Layer 2, teks pendukung di Layer 3, gambar utama di Layer 4, dan seterusnya.
Untuk membuat layer baru, klik Layer > New > Layer, atau tekan Shift+Ctrl+N, lalu klik OK. Anda tinggal memilih layer mana yang akan diisi gambar atau teks di palet layer pada sisi kanan jendela Photoshop Anda.
Layer-layer ini nantinya bisa diatur urutan tampilannya, dihapus, disalin, atau digabungkan agar dapat diberi efek tertentu. Menata Warna Latar Banner Buat warna latar banner. Anda bisa menerapkan warna dominan dengan Paint Bucket Tool atau membuat warna gradasi dengan Gradient Tool.

Menata Warna Latar Banner
Buat warna latar banner. Anda bisa menerapkan warna dominan dengan Paint Bucket Tool atau membuat warna gradasi dengan Gradient Tool.
1. Sebagai contoh, untuk membuat warna latar bergradasi, tentukan warna foreground dan background. Klik
    ikon Set foreground color lalu pilih warnanya, demikian juga pada ikon Set background color.

2. Untuk menerapkan warna gradasi, pada toolbox klik ikon Gradient Tool. Jika ikon tidak tersedia di
    toolbox, klik dan tahan ikon Paint Bucket Tool lalu pilih Gradient Tool.

3. Cobalah drag dari titik awal ke titik akhir gradasi, misalnya dari atas ke bawah atau dari kiri ke kanan,    
    lihat hasilnya. Jika kurang puas, klik menu Edit > Step Backward, lalu ulangi kembali hingga memperoleh
    warna gradasi yang Anda inginkan.
 

Menata Teks
Buat layer baru untuk teks utama banner.
1. Pada toolbox klik Horizontal Type Tool.

  

2. Klik pada posisi sembarang, lalu ketikkan beberapa kata, misalnya Buletindo Digital Media. Biarkan teks
    dengan warna dan posisi apa adanya dulu.
3. Klik pada ikon Move Tool atau klik layer lain untuk mengakhiri pembuatan teks.
4. Untuk mengatur ulang warna, jenis, atau ukuran huruf, klik layer teks tersebut lalu pastikan klik kembali
    Horizontal Type Tool. Kini pilih jenis huruf, ukuran, dan warnanya melalui toolbar pengaturan teks di
    bagian atas jendela.
 5. Ulangi langkah ini untuk membuat layer teks baru, misalnya untuk teks pendukung seperti gambar hasil
     berikut.


Menata Gambar
Sebagai pemanis, Anda dapat menyisipkan gambar pendukung ke dalam banner. Anda bisa memakai file gambar yang sudah ada di komputer, atau mengcapture tampilan layar.

Mengcapture Gambar 
Sebagai contoh, untuk menyisipkan gambar dari sebuah capture tampilan, lakukan :
1. Buka tampilan yang ingin Anda capture
2. Tekan tombol Print Screen / Sysrq pada keyboard Anda.
3. Kembali ke Photoshop Anda, lalu klik File > New, langsung OK tanpa perlu diatur.
4. Klik Edit > Paste atau tekan Ctrl+V, hasilnya gambar satu layar penuh akandihasilkan.
5. Potong bagian yang ingin Anda jadikan sebagai gambar pendukung menggunakan Crop Tool. Seleksi
    potongan Anda dan tekan Enter.
6. Untuk mempermanis, Anda bisa memutar gambar menggunakan Image > Rotate Canvas > Arbitrary.
    Tentukan sudut perputaran dan klik OK.
7. Jika perlu, sesuaikan ukuran gambar dengan cara klik Image > Image Size.

Menempatkan Gambar ke Banner
Kini, Anda bisa saja menyalin gambar ke banner Anda dengan cara drag gambar ke jendela banner. Namun, hasil penyisipan gambar biasanya kurang manis. Anda bisa menggunakan teknik seleksi Feather.
1. Pada gambar hasil capture, seleksi bidang yang ingin Anda salin menggunakan Marquee Tool atau Lasso  
    Tool. Pilih Select > Modify > Feather. Isikan Feather Radius dengan mencoba angka tertentu. Klik OK.
2. Klik Edit > Copy, lalu pindah ke jendela banner dan klik Edit > Paste.
3. Klik Move Tool lalu atur letak gambar hasil penyisipan. Jika perlu atur posisi layer dengan cara klik Layer
    > Arrange > Send Backward.

Finishing Banner
Setelah semua komponen banner tersusun dalam layerlayer, kini lakukan perbaikan dan penyesuaian.
• Atur ulang komposisi warna dan ukuran teks agar menjadi lebih menarik.
• Atur ulang letak masing-masing layer agar menjadi proporsional.
• Tambahkan efek pada salah satu layer dengan cara klik layer tujuan, klik Filter > pilih jenis efek yang sesuai.
• Jika perlu, atur tampilan setiap layer secara mendalam dengan Blending Options. Klik kanan nama layer,
   lalu pilih Blending Options. Lakukan percobaan menerapkan Layer Style tertentu, misalnya memberi Drop
   shadow, Outer Glow, Gradient Overlay, Stroke, dan sebagainya.
• Simpan file banner dalam format file .PSD agar nantinya tetap dapat diedit lagi.

Mengoptimalkan Gambar untuk Web
Ingat, file gambar ukurannya sangat besar, sehingga jika dipasang di web akan memberatkan loading dan menyita bandwidth pengunjung. Untuk itu, optimalkan gambar banner untuk dipasang di web.
1. Buka lagi file banner hasil rancangan Anda.
2. Klik menu File > Save for Web & Devices.
3. Pada kotak Preset, atur output file yang akan Anda pakai. Jika mengandung warna transparan, maka
    gunakan format .png atau gif. Jika tidak ada warna transparan, pilih .jpg.
4. Klik Save, tentukan nama file, klik Save kembali. Periksa hasilnya, file kini berukuran sangat kecil, dari
    ratusan KB menjadi puluhan KB saja, sehingga ringan diakses nantinya.

Posted in: Coretan