4
1 | Buletindo Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com Buletindo Buletindo Cara Membuat Banner Web di Photoshop Oleh : Zaenal Arifin 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 di- pasang 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 me- manfaatkan Preset banner yang telah tersedia. 1. File > New atau tekan Ctrl+N. Edisi 038 | Desain Grafis | Senin, 23 November 2009 BULETIN KOMPUTER Jurnal Pembelajaran Komputer www.buletindo.com

38 Cara Membuat Banner Web Di Photoshop

Embed Size (px)

Citation preview

Page 1: 38 Cara Membuat Banner Web Di Photoshop

1 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com

Buletindo

Buletindo

Cara Membuat Banner Web di Photoshop Oleh : Zaenal Arifin

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 di-pasang 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 me-manfaatkan Preset banner yang telah tersedia.

1. File > New atau tekan Ctrl+N.

Edisi 038 | Desain Grafis | Senin, 23 November 2009

BULETIN KOMPUTER ● Jurnal Pembelajaran Komputer ● www.buletindo.com

Page 2: 38 Cara Membuat Banner Web Di Photoshop

2 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com

BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL

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 digabung-kan agar dapat diberi efek tertentu.

Menata Warna Latar Banner

Buat warna latar banner. Anda bisa menerap-kan warna dominan dengan Paint Bucket Tool atau membuat warna gradasi dengan Gradient Tool.

1. Sebagai contoh, untuk membuat warna latar bergradasi, tentukan warna fore-ground 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.

Page 3: 38 Cara Membuat Banner Web Di Photoshop

Cara Membuat Banner Web di Photoshop | 3

DILARANG MENGUBAH SEBAGIAN ATAU SELURUH ISI BULETIN TANPA IJIN TERTULIS DARI BULETINDO

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 peng-aturan teks di bagian atas jendela.

5. Ulangi langkah ini untuk membuat layer teks baru, misalnya untuk teks pen-dukung 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, 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.

Page 4: 38 Cara Membuat Banner Web Di Photoshop

4 | Buletindo ● Download Gratis Buletin Komputer Terbaru di : http://komputer.buletindo.com

BULETIN BEBAS DIGANDAKAN DAN DIDISTRIBUSIKAN KEMBALI UNTUK KEPENTINGAN NON KOMERSIAL

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 meng-gunakan 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 layer-layer, kini lakukan perbaikan dan penyesuaian.

• Atur ulang komposisi warna dan ukuran teks agar men-jadi lebih menarik.

• Atur ulang letak masing-masing layer agar menjadi pro-porsional.

• 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 nanti-nya tetap dapat diedit lagi.

Mengoptimalkan Gambar untuk Web

Ingat, file gambar ukurannya sangat besar, sehingga jika di-pasang di web akan mem-beratkan 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.

Buletindo www.buletindo.com

Kontak: Jl. Abimanyu VI / 22

Semarang - 50131 Telp. (024) 3560597