Blog Z.r.a

Harini aku nak share tutorial bagaimana membuat satu banner yang sangat simple. Banner ini dihasilkan dengan menggunakan perisian Adobe Photoshop. Konsep yang digunakan adalah teknik tulisan sahaja.  Jom mulakan…

1. Buka satu satu file baru dengan width 300 , height 120 ,  resolution 100 dan Background Content adalah Transparent. Ini merupakan contoh saiz standard banner seperti korang lihat di Side BarSudubesi.

2. Oleh kerana tutorial ni menggunakan Background Content jenis Transparent. Jadi paparan kerja korang hendaklah seperti dibawah ini.

3. Pilih Horizontal Type Tool dan tulis perkataan pertama yang korang mahu di paparan kerja.

4. Selesai menulis perkataan pertama. Hide-kan perkataan pertama dengan untick button Indicate Layer Visibility

5. Ulang semula langkah ke-3 untuk perkataan kedua. Layer baru akan automatic terhasil.

6. Ulang langkah ke-3 sekiranya korang mahu perkataan lagi. Saya hanya menggunakan tiga perkataan dalam tutorial ni sebagai contoh.

7. Langkah seterusnya adalah proses mengeluarkan Animation Frames. Pilih Window–> Animation.

8. Sebelum memulakan penyusunan frame animation. Hide-kan semua layer ayat dahulu kecualilayer pertama.

9. Selesai untuk frame pertama. Click Duplicates Selected Frame untuk hasilkan frame kedua.

10. Untuk animasi Frames kedua, pastikan Frames Kedua Active dan tick Indicate Layer Visibilitypada Layer Kedua(Rauna Luriahk). Pastikan Layer 1(perghh) dan Layer 3(story) dalam keadaanHiden. Lihat gambar untuk lebih faham.

11. Duplicate lagi frame untuk hasilkan frame ketiga. Untuk animasi Frames Ketiga, pastikan Frames Ketiga Active dan tick Indicate Layer Visibility pada Layer Ketiga(Story). Pastikan Layer 1(perghh)dan Layer 2(Rauna Luriahk) dalam keadaan Hiden. Lihat gambar untuk lebih faham.

12. Seterusnya set timing animation korang. Ikut kesesuain. Cuba play untuk preview.

12. Sudah puashati dengan animasi korang?. Seterusnya proses convert jadi animasi dalam formatgif. Pilih –>Safe for  Web & Devices. Paparan dibawah akan keluar.

13. Last step, tekan save dan siap.

Contoh Banner yang dah siap.

Kayyea Amacam ok tak? banner ko ni

Info Tambahan.
1. Buat Banner dengan size fail yang kecil. Besar-besar nanti lambat load pulak page
2. Transparent bagus untuk banner hanya ada tulisan. Background dia match nanti.

Kalau korang takde software photoshop boleh download daripada blog RojakStory

Dekat 2 jam aku menulis tutorial ni. Second time menulis tutorial, bukan mudah rasanya. Harap-harap korang paham . Kalau tak paham tinggalkan komen. Mungkin aku boleh jawab dekat situ. Anyway selamat mencuba.

Sumber: Fendidahada