Cara Membuat Banner Web di 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 200px
• 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 disudut 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 diluar 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.
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 pendukungseperti 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, sebagai contoh tampilan halaman web buletindo.com.
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 akan dihasilkan.
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 menjadilebih 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s