BlogRSS: News Maker

Design Banner Ads mudah ringkas profesional

Posted on January 22, 2010 in: Blog, Design Tutorials

Wah, katanya ingn yang ringkas-ringkas aja. Ini ringkas apa kompleks ini kok! Berkokok! Waduh.. yang penting walau sekompleks mana pun tutorial design kali ini ia bukanlah sekompleks Kompleks Sukan Bukit Jalil.
Jadi bagi saya, anda masih boleh mengikuti sesi tutorial kali ini. Di sini anda akan diuji dengan beberapa kemahiran rekaan design dan memerlukan bantuan gambar [...]

Wah, katanya ingn yang ringkas-ringkas aja. Ini ringkas apa kompleks ini kok! Berkokok! Waduh.. yang penting walau sekompleks mana pun tutorial design kali ini ia bukanlah sekompleks Kompleks Sukan Bukit Jalil.

Jadi bagi saya, anda masih boleh mengikuti sesi tutorial kali ini. Di sini anda akan diuji dengan beberapa kemahiran rekaan design dan memerlukan bantuan gambar tambahan (pilihan anda) dan sejenis aplikasi Brush yang akan saya berikan link downloadnya.

Untuk mendapatkan hasil akhir sebegini…

design banner ads images

Semamangnya satu perkara yang mudah. KERANA tutorial untuk menyiapkan design keseluruhan banner iklan ini sudah sedia di sini.

Bina canvas design banner ads

design banner ads images

Saiz banner iklan yang akan kita pelajari pada hari ini adalah saiz 250 x 250 pixel. Memandangkan ia adalah saiz standard dan juga saiz banner iklan yang mudah untuk kita lihat detail design di akhir rancangan nanti.

design banner ads images

Saiz adalah seperti di atas ya.

Bina garisan keliling banner

design banner ads images

01 Klik Ctrl + A untuk melakukannya. Anda akan memilih keseluruhan canvas seperti di atas. Lihat garisan putus-putus. Ini menandakan kawasan tersebut berada dalam pilihan.

design banner ads images

02 Bina layer baru (line) dan klik Menu >> Stroke untuk membina garisan.

design banner ads images

03 Saiz garisan cukup pada 1 px dan lokasinya adalah di dalam (inside) canvas anda.

Footer untuk banner ads anda

design banner ads images

Saiz ketinggian boleh anda adjust sendiri. Bagi saya, cukup sekecil ini (imej) pada bahagian bawah canvas banner ads ini.

design banner ads images

04 Fill (Shift + F5) dengan warna hitam #000000.

design banner ads images

Hasilnya…

design banner ads images

05 Kurangkan opacity kepada 45% sahaja. Ini akan menjadikan layer berwarna hitam menjadi lutsinar dan memiliki ketelapan sehingga 45% sahaja.

design banner ads images

06 Taip ayat anda di bahagian bawah. Biasanya ayat-ayat yang memudahkan pengunjung melayari laman web anda. Jadi saya menulis "layari www.grafik.my". Saya setkan ia berwarna putih #ffffff.

Dengan ini, andaikata banner ads saya ini tidak aktif pun (tidak membawa anda ke link tertentu walaupun diklik) namun pengunjung sudah tahu laman web manakah yang dipromosikan banner ads ini.

design banner ads images

07 Tambahkan kesan khas pada layer tulisan tadi seperti di atas.

design banner ads images

Kesannya, tulisan anda akan memiliki bebayang berwarna kelabu yang nipis seperti di atas.

Warnakan canvas anda HIJAU BUMI!

design banner ads images

08 Warnakan canvas (latar belakang) dengan warna hijau muda #abdf0b. Aktifkan fungsi Fill dengan klik kekunci Shift + F5.

design banner ads images

Hasilnya…

Texture awan pada latar belakang

design banner ads images

09 Buka apa sahaja texture pilihan anda. Ia akan kita jadikan latar belakang. Saya tak berapa minat dengan latar belakang yang terlalu kosong. Jadi kita akan menjadikannya sedikit bertompok-tompok dengan menggunakan texture langit dan awan ini.

design banner ads images

10 Masukkan texture tadi ke dalam canvas banner ads anda. pastikan ia berada betul-betul di atas layer background (telah dikunci).

design banner ads images

11 Masih pada layer cloud, ubah fungsi layer cloud daripada normal kepada Linear Burn.

Selepas fungsi ini diaktifkan, anda boleh lihat bagaimana texture cloud diblend menyamai warna latar belakang berwarna hijau.

12 Kita tak mahu latar belakang ini terlalu keras jadi kita akan blurkan / kaburkan latar belakang ini sedikit. Menu >> Filter >> Blur >> Gaussion Blur. Setkan Radius kepada 3.0 pixels. Cukup untuk mengaburi mata anda! Hahaha…

Memulakan proses blending images

design banner ads images

13 Pindah masuk vector Adobe Photoshop ke dalam canvas banner ads anda. Kita akan mulakan proses blending images.

Blending Images Process:

Satu proses mencantumkan lebih dari satu imej menjadi satu imej yang menarik dan kadang
kala mampu mengubah fungsi dan
maksud
gambar
tersebut.

design banner ads images

Masukkan juga imej vector yang lain. Peralatan melukis!

design banner ads images

14 Groupkan kesemua peralatan melukis ini di dalam satu folder yang diberi nama "instrument". Jika anda tidak tahu bagaimana saya melakukannya, mudah sahaja.

Pilih kesemua layer vector peralatan ini, kemudian klik sahaja kekunci Ctrl + G. Kesemua layer akan digroupkan serta merta.

design banner ads images

15 Susun kesemua peralatan melukis mengikut kreativiti anda.

design banner ads images

16 Buat backup! Always rmember bak kata omputih yang pernah menjajah kita dahulu.

Copy folder instrument di bawah folder asal instrument itu. Dan kemudian, hilangkan / hide folder copy ini sebagai asas backup.

design banner ads images

17 Convert folder instrument yang dapat anda lihat (ada ikon mata) kepada Smart Object. Ini akan terus mencantumkan kesemua imej peralatan-peralatan melukis tadi tanpa boleh diedit semula kelak.

design banner ads images

18 Tambah Layer Mask pada objek "instrument". Hasilnya apabila ia telah ditambah adalah seperti di atas. Adanya sebuah tetingkap putih di sebelah ikon instrument.

Memasukkan imej di dalam ‘kocek’

design banner ads images

19 Sebagaimana imej di atas, buat satu bentuk vector bujur berwarna putih (set warna foreground kepada warna putih #FFFFFF) di atas objek instrument. layer peralatan melukis akan berada di belakang bentuk bujur berwarna putih ini.

design banner ads images

20 Select area shape 1 (bujur) dengan klik kekunci V dan klik pada kotak kedua (kanan) pada layer Shape 1.

design banner ads images

Disable / hilangkan layer Shape 1 dengan klik pada ikon mata pada bahagian kiri layer tersebut.

design banner ads images

Aktifkan mask bagi layer instrument denan klik pada kotak kedua (kanan) pada layer itu.

design banner ads images

21 Untuk menghilangkan bahagian bawah layer instrument seperti di atas, aktifkan Brush tool (B) dan pilih warna foreground >> hitam #000000 dan warnakan semua bahagian di dalam pilihan bujur seperti di atas.

design banner ads images

22 Aktifkan semula layer Shape 1 (bujur) dan klik 2 kali padanya untuk aktifkan tetingkap Layer Style. Tetapkan blending options anda seperti di atas. Setkan Fill Opacity pada bahagian Advanced Blending kepada 0%.

Ini akan menghilangkan keseluruhan warna putih layer Shape 1 namun ia masih mengekalkan mana-mana layer style yang diaplikasikan terhadapnya.

design banner ads images

23 Setkan Drop Shadow seperti di atas. Anak panah menunjukkan bahagian mana yang perlu anda lakukan pengubahsuaian.

design banner ads images

Inilah hasilnya! Cantik ke? Tak cukup lagi~ Kita ada banyak benda lagi nak dilakukan.

design banner ads images

24 Setelah layer Shape 1 diberikan style sebegini sebentar tadi, convertkan ia kepada LAYERS. Ini akan menjadikan kesemua Layer Style akan melekat secara permanent pada layer Shape 1.

Kemudian tambahkan layer mask padanya dengan klik ikon Add Layer Mask di bahagian bawah tetingkap layer.

Menghilangkan bebayang kiri & kanan

design banner ads images

25 Dengan mengaktifkan Brush Tool (B) dan menetapkan Hardness >> 0% dan Master Diameter mengikut kesukaan anda, warnakan bahagian tepi (di dalam Mask layer ini!) seperti dalam imej.

Kesannya, anda akan dapati sebahagian lengkungan bebayang ini akan hilang. Cantik~

design banner ads images

Lakukan yang sama tetapi kali ini adalah pada bahagian KIRI layer Shape 1 pula. dan kesannya pada bahagian kiri juga akan hilang. Lagi cantik~

design banner ads images

Adjust kedudukan imej anda supaya ke bawah sedikit untuk memberi ruang di bahagian atas. Nak tulis la ayat puji dan syukur pada Ilahi~. Hee…

Highlight logo & peralatan melukis

design banner ads images

Tambah satu layer baru di bawah layer instrument.

design banner ads images

26 Aktifkan Brush Tool (B) dan kali ini masih mengekalkan Hardness >> 0% tetapi memilih saiz Master Diameter yang lebih besar sedikit. Tetapkan warna foreground >> putih #FFF.

Warnakan pada bahagian tengah (di belakang layer peralatan melukis untuk highlight logo Ps anda. Klik beberapa kali (saya klik 2 kali) untuk dapatkan kesan seperti di atas.

design banner ads images

27 Kali ini, anda akan mempelajari satu ilmu baru! Ilmu penggunaan BRUSH luar biasa. Bagaimana? Mudah sahaja.

Aktifkan Brush Tool (B) dan klik kanan pada mana-mana bahagian canvas. Dan anda akan mendapat paparan seperti di atas. Tetapi anda mungkin tidak memiliki jenis brush sebegini. Maka saya telah menyertakannya di sini.

Download >> Unzip >> Klik 2 kali pada fail .abr yang ada (satu je pun~). Dan sekali lagi anda buka tetingkap brush ini, ia akan terpapar sama seperti apa yang anda boleh lihat di atas.

Jadi, pilihlah brush yang anda suka. Lihat imej di bawah, bentuk sebegini yang mahu kita miliki. Selepas memilih jenis brush yang anda mahu, klik sekali sahaja dan sambil-sambil tu, adjustlah saiznya supaya sesuai dengan saiz canvas anda.

design banner ads images

28 Oh ya! Pastikan anda aplikasikannya pada layer baru DI BAWAH layer warna putih melepak tadi. Dan selepas beberapa kali cubaan, anda akan mendapat paparan / hasil seperti di atas.

design banner ads images

29 Adjust opacity layer Rays of light ini kepada 25%. Hasilnya layer ini akan menjadi lutsinar. Lebih cantik dari biasa!

design banner ads images

Voila! Saya telah menambahkan kata-kata hikmat di bahagian atas banner ads ini "Pelajari ilmu mereka grafik percuma versi bahasa melayu". Hah! Dah mula la tu. Ada yang petik jari dah.. "Ala… kacang je ni bro! Gua ingat susah sangat~".

Lolz… kalau itu jawapan anda. GOOD! Saya ingin anda terus mencubanya. Contest beb… contest~. Saya nak bagi hadiah best punya! Untuk pemenang nanti. Baik berlatih dari sekarang. hahaha…

Cheers! Suggest me more what to design after this! Thanks Bro Ekstrim as to suggest me this tutorial.


  1. Posted January 22, 2010 at 9:37 pm

    Salam joe, aku tgk dah pun dah pening.. hehehe..
    contest tu ko srh wat design ker?? tapi design joe mmg gempak lar..

  2. Posted January 22, 2010 at 9:51 pm

    oit..
    aku kat UTP ni..
    turun ipoh kang ko bg skit tutorial grafik direct kat aku..
    hehe..

  3. Posted January 22, 2010 at 10:23 pm

    Hahaha.. salah satunya adalah!

    Aktiviti DESIGN. Aku ada la hadiah kecil saja nak belanja korang~ hehehe..

    Aku akan design, then aku mintak kome design lebih kurang cam aku pny. Siapa plg cantik, dia akan menang.

    Design yg mana? Tunggu~

  4. Posted January 22, 2010 at 10:25 pm

    wahahaha.. jgn ler.

    Aku da penah bg talk dowh..

    Aku bg 2 sesi kat MRSM Taiping. that time mak aku pen pengetua situ. Jadi aku diberi peluang la.

    wakakaka.. giler! Pening + gelak2 (kena gelak ye) siot ajar offline. haha.. gini lg baik. bak kata pepatah, “berdua dgnmu pasti lebih baik”

  5. Posted January 23, 2010 at 2:45 am

    GREAT + NICE TUTORIAL. Thanks

  6. Posted January 23, 2010 at 10:33 am

    Yeah. Thanks bro!

  7. Nurul
    Posted January 23, 2010 at 10:58 am

    cantikla bro…huhu..tp my book xdak ps laa….huhu..-;(

  8. Posted January 23, 2010 at 11:46 am

    leh cari di internet pasal software ps ni.. byk kt internet yg free.. hehehe..

  9. Nor azliana
    Posted January 23, 2010 at 4:39 pm

    Tahniah Joe………Nanti bagi banyak lagi ek….Biar ilmu tu terus berkembang :)

  10. HiSYaMuDDiN
    Posted January 23, 2010 at 6:24 pm

    Tutorial yang best!

  11. Posted January 25, 2010 at 9:55 am

    tahniah…bleh mggugat k’imanan ni…hehe…lepas ni bleh buat baner animasi lak…hehe..apa pun tahniah!!!

  12. Posted January 25, 2010 at 2:29 pm

    Mmg pro ler brader. Saya boleh berlajar skit2 kalau camni.

  13. Posted January 25, 2010 at 4:30 pm

    Boleh~

    Insyallah lepas ni lah. Kita da siap dengan banner, blh masukkan animasi. Pun guna adobe photoshop jg.

  14. Posted January 25, 2010 at 4:50 pm

    Makasih..

  15. Posted January 27, 2010 at 3:08 pm

    salam….
    wahhhhh…syoknya klu sy pandai buat g2. sy mmg minat bak2 mencipta ni tapi skg ni sy dh pening. baca je tapi xbuat mana nk faham…kena try & error dulu la baru faham…harap dpt belajar byk lagi.
    tq so much for the info.

  16. Posted January 27, 2010 at 6:18 pm

    Jangan takut!

    Sebab insyallah by tonight! Sy akan releasekan software Adobe Photoshop untuk semua.

    Moga2.. amin..

    P.S. Sebab saiz besar sgt. Ambil masa jg nak upload kesemuanya.

  17. silent reader
    Posted February 11, 2010 at 12:29 pm

    knape xde file .psd utk didownload?

    :(

  18. burnallica
    Posted February 17, 2010 at 3:17 pm

    ada tak software free untuk buat banner format gif??

Post Comment

About Joe

M. Jauhari Iskandar b Jaafar (Joe) telah mula berkhidmat dalam dunia reka grafik kepada peniaga internet sejak awal tahun 2008. Beliau amat meminati teknologi design menjadikan sehingga kini reka grafik laman web beliau dilengkapi skrip dan sistem canggih dan profesional.

Copyright © 2010 Grafik Artwork Inc.|WordPress Theme Design by Rubiqube.com