Salam 1 Malaysia, dan Salam Perpaduan. Untuk pengguna Windows (ehem, saya triple boot OK) yang membeli Adobe Photoshop original (kalau tak original pun tak pa), boleh lah follow tutorial ni. Didalam tutorial ni, korang akan belajar cara-cara untuk membuat grafik yang sungguh kreatif sekali dalam Adobe Photoshop ini.
Pertama sekali – Fikir apa yang korang nak buat. 😉
Sebagai contoh, untuk membuat banner dengan grafik, pastikan berapa lebar kah yang korang mahukan. Sebagai contoh, untuk design banner yang saya buat kt atas ni, saiznya adalah 600 (lebar) x 216 (tinggi). (Sejak itu, si Syahril membikin banner dengan saiz ni untuk post2 baru dia kihkihkih sebenarnya mamat tu pun otai gak grafik2 ni :-[) ).
Tutorial Bisnes Fotografi Untuk Produk Anda. Dapatkan sekarang sementara masih ada!
Tekan File > New. Dan Kekotak “New” akan terpapar.
Masukkan width: 600 dan height: 216
Seterusnya, korang akan nampak kertas kosong. Bermulalah titik permulaan seorang jurugrafik daripada kertas kosong. 😐
Ok, terdapatnya layer pada sebelah kanan tu. Kita akan menggunakan beberapa layer pada tutorial ni.
Layers pada sebelah kanan skirn
Sekarang, buat satu lagi layer sebagai background nya. Pergi ke menu “Layer” > New > Layer dan namakan Layer tu “Gambar Latar”.
Dapatkan banyak sumber psd files kat http://downloadpsd.com/
Sekarang, pergi ke File > Place dan cari latar belakang yang korang suka. Contohnya,
Pilih gambar latar yang bersesuaian dengan tema
Ok, sekarang kita dah dapat latar belakang yang cantik. Seterusnya, korang perlu pikir tulisan yang sesuai dengan tema pulak. Contohnya, Helvetica Neue LT Pro. Untuk memasukkan text, tekan papan kekunci huruf “T” dan klik dimana2 dalam gambar latar tu. Suaikan saiznya dan masukkan teks yang lebih besar untuk tajuk. Contohnya:
Memasukkan teks
Ataupun, untuk membuat dia lebih menonjol, buat satu lagi layer. Dan Klik pada Rectangle tool atau tekan pada papan kekunci huruf “U”. Drag pada teks korang, contohnya
Drag rectangle tool tu meliputi teks mcm ni
Seterusnya, drag layer tu ke belakang layer teks korang, contoh
Tarik layer kekotak tu ke belakang layer teks korang
Klik pada “Vector Mask Thumbnail”
Klik pada Vector Mask Thumbnail
Kemudiannya, kita rendahkan opacity kekotak tu. Caranya
Setkan opacity kepada 30% ++
Tambahkan teks jika korang mahu, dan juga masukkan butang yang kalau orang nampak diorang jadik excited, seperti join now! etc etc. Dapatkan sumber psd file untuk butang-butang tu di sini, sbg contoh
Contohnya, korang boleh letak “Sertai Sekarang” sebagai kontra/membuatkan pengunjung rasa nak klik je
Kemudian ada boleh save dan muat naik ke laman web korang, semoga berjaya
Muaturun Sumber Tutorial dalam format psd
Easy Design says
February 8, 2016 at 11:20 pmOhhh macam tu je rupanya.
Selama ni susah-susah je buat.
Huhuh teirma kasih atas tunjuk ajar 😀
Syahril Hafiz says
February 15, 2016 at 3:49 pmTerima kasih. Design cantik2 🙂
azizi says
February 28, 2015 at 10:25 amada kawan2 yg pandai photoshop x yg nak berkerja boleh hubungi saya 018-3137937
Foredi says
May 21, 2012 at 3:34 amMantap saya coba dulu bos….
Mohd Isa says
February 26, 2011 at 8:32 ampergh…mantop…nak kena belajar gak ni..hehe
PakarBuahPinggang says
February 20, 2011 at 3:56 amSalam bro,
Terima kasih sebab berkongsi artikel di atas.Bolehlah belajar-belajar untuk buat banner sendiri lepas ni.
Ali ridha says
February 19, 2011 at 11:36 pmSekarang ni aku masih biasa
guna PS 7.cs3 tu aku pernah guna.
tapi hilang dah.huuu..
Ali ridha says
February 19, 2011 at 11:28 pmGuna photoshop juga senang.
harga photoshop je tak adil langsung.
mana la aku nak cari duit.
Ali ridha says
February 19, 2011 at 11:24 pmsama la aku tak faham guna
Gimp lagi…kena la guna
windows dan Photoshop juga.
bukan guna selalu.sebab dalam
windows senang nak kena virus.huuu.. :[
Syahril Hafiz says
February 20, 2011 at 8:07 amhehe, betul tu bro
GIMP aku tak berapa expert sangat
tak pasti la yang si Fariz ni boleh tunjuk kan ke tidak lepas ni *peace*
informationaboutX says
February 19, 2011 at 1:57 pmtutorial yang berguna..terima kasih banyak..
MDHAFiZ.NET says
February 18, 2011 at 10:54 pmmasih lg tengah nak belajar cs5 nih…
info menarik bro.. 🙂
madlut says
February 18, 2011 at 4:39 pmweyhhhh..mana button like nie..aku nak like…haha, link ko share tu pun aku suka..thanks…:)
Syahril Hafiz says
February 19, 2011 at 9:37 pmshare je..terima kasih bro..
fikryn says
February 18, 2011 at 3:40 pmOh terima kasih.. tapi aku masih guna CS3 jer.. eheks
Fariz Luqman says
February 18, 2011 at 3:54 pmsama je.. boleh jugak
Fariz Luqman says
February 18, 2011 at 1:13 pmto everybody – hehehehe thanks semua!! nantikan lebih banyak tutorial untuk GIMP, Photoshop etc etc.. hihihi 😀
aried says
February 18, 2011 at 12:14 pmterima kasih bro… penjelasan yg mnarik.. lagi satu, aried suka cara bro komen di blog2 lain.. telus dan ada yg luar pndangan orang lain.. so, aried amik peluang ni datang ke blog bro n ucapkan tahniah… like the way u ar…
Syahril Hafiz says
February 19, 2011 at 9:42 pmsama2 aried.
kena ikhlas nak komen ni walaupun pelik bunyinya
biar ikut gaya kita tersendiri
make fun with comment~ yeah!!
Pejuang Kesenian Extreme says
February 18, 2011 at 3:43 amBiasa guna cs3 je…
Tutorial ni senang dan ringkas…
mudah untuk diikuti….terima kasih ya…
faizal says
February 18, 2011 at 12:37 amterbaek la tip2 nye, ble di tiru he2, yg pntg kne kreatif, keep it up bro thanks….
Syahril Hafiz says
February 19, 2011 at 9:41 pmsetuju tu
kena kreatif~
akubiomed says
February 17, 2011 at 10:22 pmTangan perlu dilembut untuk guna PhotoShope kalau keras tak jadi nanti 🙂
suffer8zine says
February 17, 2011 at 6:21 pmbookmark entri ni bro
Terkini : 700 Ribu Kondom Hilang
Syahril Hafiz says
February 19, 2011 at 9:36 pmthanks!!
RozaniGhani says
February 17, 2011 at 2:23 pmgunalah font lain bro. kan google font ada banyak font boleh download. 🙂
suri says
February 17, 2011 at 2:22 pmps/:baner kt ats tu blogspot punya huu..skrg blog cahayacinta.dah ok .tq sb ada baner 🙂 mmg ctik heee :8
Syahril Hafiz says
February 19, 2011 at 9:32 pmhehe, banner biasa je tu
suri says
February 17, 2011 at 2:20 pmmenarik utk di pejari..pasni klu ada masa free mau kesini lagi heee..
terima kasih atas ilmu yg d beri..blog cinta pun blum ada baner lagu ..alahai.. :p 🙂
azizan4444 says
February 17, 2011 at 12:27 pmaku x bpe power photoshop ni..setakat edit skit2 bole la..hehe
Syahril Hafiz says
February 19, 2011 at 9:31 pmsama la kita bro
sikit2 je
tapi kalau banyak belajar mudah la
Ismail N says
February 17, 2011 at 9:23 amtips yang amat berguna. bukan senang pakai photoshop ni kalau tak biasa.
Anip says
February 17, 2011 at 1:10 amhuh! boleh buat kat aku satu nie, aku langsung tk pandai gune..sikit boleh la
Syahril Hafiz says
February 19, 2011 at 9:28 pmhaha, memang terbaik kan? aku pun gagap nak cuba benda ni
arrizz says
February 17, 2011 at 1:01 amwaa bro terbaik punya sharing nie..boleh praktik nanti,,thanks alot..kongsi lagi banyak nanti ye..
Syahril Hafiz says
February 19, 2011 at 9:27 pmabang kita ni buat tutor kan
mesti menarik punya.
wazy says
February 17, 2011 at 12:00 amperghhhh
lagi satu tutorial yang mantap
zuar says
February 17, 2011 at 12:00 amwahhh!!!tutorial lengkap nak buat header ni..i loike…Thank tuan rumah..hehe
zik says
February 16, 2011 at 11:57 pmhuyyo.. memang cantik lah… aku kana cuba praktikkan…
Fazreen says
February 16, 2011 at 11:29 pmtuts budak2 but nice try…aku impress dgn screenshot… software apa guna untuk capture screenshot ni? or sekadar printscreen?
kulanz says
February 16, 2011 at 11:01 pmmenarik tutorial ni..
tapi akupun belum pakai cs5.. masih setia dengan cs3..
tak tau bila dapat pakai cs5 ni
Wan Perlis says
February 16, 2011 at 10:42 pmaku x blh guna cs5 lagi
coz grafik kad build in ja..x support
still cs3
Fariz Luqman says
February 16, 2011 at 10:58 pmsama je bro.. cs3 ke.. paling teruk 7.0 pon still boleh ahhahaha
syahrilhafiz says
February 16, 2011 at 10:27 pmaku still pakai version 7 tuh.. =( =(
tool baru tak sempat nak merasa :aie: