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…

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

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.

Saiz adalah seperti di atas ya.
Bina garisan keliling banner

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.

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

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

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

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

Hasilnya…

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

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.

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

Kesannya, tulisan anda akan memiliki bebayang berwarna kelabu yang nipis seperti di atas.
Warnakan canvas anda HIJAU BUMI!

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

Hasilnya…
Texture awan pada latar belakang

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.

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

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

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.

Masukkan juga imej vector yang lain. Peralatan melukis!

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.

15 Susun kesemua peralatan melukis mengikut kreativiti anda.

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.

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.

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’

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.

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

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

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

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.

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.

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

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

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

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~

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

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

Tambah satu layer baru di bawah layer instrument.

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.

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.

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.

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

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.








Salam joe, aku tgk dah pun dah pening.. hehehe..
contest tu ko srh wat design ker?? tapi design joe mmg gempak lar..
oit..
aku kat UTP ni..
turun ipoh kang ko bg skit tutorial grafik direct kat aku..
hehe..
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~
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”
GREAT + NICE TUTORIAL. Thanks
Yeah. Thanks bro!
cantikla bro…huhu..tp my book xdak ps laa….huhu..-;(
leh cari di internet pasal software ps ni.. byk kt internet yg free.. hehehe..
Tahniah Joe………Nanti bagi banyak lagi ek….Biar ilmu tu terus berkembang
Tutorial yang best!
tahniah…bleh mggugat k’imanan ni…hehe…lepas ni bleh buat baner animasi lak…hehe..apa pun tahniah!!!
Mmg pro ler brader. Saya boleh berlajar skit2 kalau camni.
Boleh~
Insyallah lepas ni lah. Kita da siap dengan banner, blh masukkan animasi. Pun guna adobe photoshop jg.
Makasih..
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.
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.
knape xde file .psd utk didownload?
ada tak software free untuk buat banner format gif??