1. Aktifkan Adobe Photoshop CS3 ataupun CS4. Di bawah paparan yang dilihat setelah diaktifkan.

2. Bina file baru dengan pergi ke File > New.

3. Namakan file tersebut di bahagian Name. Letakkan width dan height banner yang ingin di bina. Pastikan ianya dalam ukuran yang betul. Selalunya kita menggunakan pixels. Untuk paparan website, kita menggunakan resolution 72 pixels/ inch.

Sekarang kita ingin meletakkan warna background di bahagian belakang banner. Pilih foreground color dahulu. 5. . Layout banner telah dibentuk dengan saiz yang diletakkan. Warna ini kita akan bina secara toning yang berlainan agar nampak lebih menarik.4.

Pilih warna yang agak gelap untuk foreground.6. . 7. Pilih warna untuk background color. 8. Pilih warna yang ingin diletakkan. Pilih warna untuk background pula.

9. Setelah melakukan gradient tool. . Guna Gradient tool untuk melakukan pewarnaan.. 11. kita akan mendapat warna seperti di bawah. 10. Klik mouse dan hold untuk point yang pertama ke point kedua di atas banner.

Pilih gambar yang ingin diletakkan di dalam banner. pilih rectangular Marquee Tool untuk membuat pilihan bahagian gambar untuk di copy. Pergi ke File > Open. . 13.12. Sekarang kita ingin masukkan gambar di bahagian hujung kanan banner tersebut. Setelah file gambar di buka. 14.

16. pergi ke Edit > Copy. Setelah memilih bahagian tersebut.15. Pilih bahagian yang mahu di copy. kembali ke paparan banner melalui Window > (nama file banner) . 17. Kemudian.

Gambar itu boleh diubah saiznya dengan pergi ke Edit > Transform > Scale. .18. 18. Klik kepada Edit>Paste untuk masukkan gambar ke dalam banner.

19. Gambar telah dikurangkan saiz di dalam contoh ini. Kita boleh kecilkan atau besarkan saiz mengikut kemahuan kita. 20. .

Apply the transformation. Masukkan tulisan yang dikehendaki. 23.21. klik kepada Move Tool. Ubah kedudukan gambar tersebut. boleh tukar jenis dan saiz tulisan. Setelah saiz telah dikecilkan. 22. satu dialog box akan dibuka. 24. 25. Selepas itu. . Untuk masukkan tulisan. klik kepada Horizontal Type Tool. Transformation telah di”apply”.

boleh klik kanan kepada layer yang dikehendaki dan pergi ke Blending options. . Untuk menukar bentuk tulisan agar lebih menarik.26.

27. Boleh masukkan satu lagi tulisan yang lain. . dan kali ini kita menjadikan tulisan itu senget. Kini. 29. Guna Free Transform > Skew. tulisan telah berubah bentuk kepada lebih menarik. 28. Boleh pilih style layer di blending options. Beberapa pilihan boleh diambil dan lihat perubahan pada tulisan.

Tulisan Join Now! telah berubah. 31. Kini . . kita ingin membuat tulisan itu mempunyai animation “berkelip – kelip” Pilih Window > Animation.30.

5 sec. 33. . Duplicate frame.32. 34.. Animation frame sudah terbuka. sebagai contoh 0. Letakkan delay pada animation ini.

37. . Kini. 36. Save file tersebut dengan Save for Web & Devices. anda boleh klik play simulasi untuk animation ini.35. Tanda “mata” di sebelah join now telah diklik untuk memadamkannya.

39.38. Satu paparan keluar menunjukkan optimized image. . Save gambar tersebut. Click save.

Boleh save sebagai . File PSD ini bolehlah diletakkan di dalam satu folder untuk photoshop file. 41. .40.psd. Untuk file template banner tersebut.

43. Selamat mencuba.42. Klik OK untuk maximize compatibility. Kita sudah mempunyai sebuah banner. .