Instagram

Monday, May 28, 2012

# tutorial design blog- part 1

lama dah ayu tak buat tutorial kan...
tapi oleh kerana ramai yang tanya macam mana ayu design blog...
hari ni... dalam suasana pagi yang boleh buat ayu tido..
# semalam tak cukup tido...(^_^)...
 ayu ajar sikit-sikit apa yang ayu tau... yep...!

mula-mula kena ada adobe photoshop...
sebab ayu gunakan photoshop sepenuhnya untuk kerja-kerja design ni...
kalau tak ada boleh dapatkan dari WAN HAZEL....
download semudah 1,2 dan 3!

#1 bukak adobe photoshop masing-masing dulu...
set kan width mengikut width blog...
kalau width blog 1000px... setkan width dia 1000px jgk...
height tu ikut suka hati la...
biasanya ayu buat 800px... cukup tinggi untuk orang kecik cam ayu... heheheh:p
pastikan background dia TRANSPARENT...!
 

#2 then...gunakan tool rouded rectangular tool mcm dlm gambar kat bawah ni...
tool ni sikit lebih kurang untuk body dia la...
background ikut suka hati la...hehehe...
 

#3 sekarang kita buat header n footer dia lak...
ayu suka buat header n footer yang bentuk awan gitu...
tapi kalau tak nak boleh ignore je yang ni...

gunakan tool yang macam bentuk bunga dekat tool rectangular td... right klik ...
lepas tu dekat atas tu...amik bentuk awan...
macam kat bawah...

#4 lepas tu ikut kesesuaian sendiri nak header sahaja bentuk awan atau footer sahaja atau kedua-duanya sekali... kalau tak nak tak payah...:p


#5 skang kita nak bagi ada border sikit dekat keliling blog nih...
kalau yang buat bentuk awan tu... kena combine dulu dua2 bentuk tadi... 
CTRL + ALT dekat dua2 layer...
right klik... merge visible... mcm dalam gambar kat atas ni...
bila dah combina tu... tekan dekat layer... right klik... pergi dekat BLENDING OPTIONS

#6 dekat blending options tu.. tekan dekat STROKE bawah sekali...
amik la warna ikut suka hati...
setkan ketebalan stroke tu ikut suka hati...tekan OK!

#7 adjust width dia mengikut kesesuaian blog...

#8 skang hias lah header n footer tu ikut suka hati nak letak macam-macam pun...
ni contoh yg ayu tibai je...:p

#9 skang sampai part nak pecahkan header...body dan footer...
merge visible kan dulu design korang...
tekan mana-mana layer...right klik... merge visible...:p
lepas tu...pergi dekat tool RECTANGULAR MARQUEE TOOL macam kat atas tu...
select bahagian atas design tadi... ini untuk header... agak-agak je la... jangan besar sgt..:p
lepas tu...right klik... tekan LAYER VIA COPY...

#10 Then... open new file... set width 1000px... height dia lebih kurang 400px... bergantung pada ketinggian untuk header yang dah select tadi... pastikan transparent...
drag je header yg dah select tadi... masukkan dekat new file...
ketinggian tu boleh adjust ikut kesesuaian yep!
kalau dah ok dengan header tu.... save kan bahagian header tu..
FILE---->SAVE AS----> HEADER.PNG
save dalam format .PNG



#11 file header tadi dah boleh close...
dekat design asal tadi boleh BACKSPACE atau DELETE je untuk header yg select tadi sbb dah save...
skang untuk body dan footer dia... buat yang sama je... ulang langkah macam buat header tadi...
refer gambar kat bawah...

 


ok...!!!!
skang dah siap bahagian design dan bahagian crop-crop dia...
part 2 nanti ayu akan ajar macam mana nak guna coding pulaksssss...
tunggu...!!!!:p


nota kaki: ayu tak tahu la korang paham ke tak apa yang ayu membebel kat atas ni...
kalau tak paham...pelase komen atau pun refer ayu dekat FB yep!

4 comments:

::CIK LYNN:: said...

paham! tp kalu org buta IT cm lynn ni, mmg tkedek2 la buat suma ni...hehehe...

bgus tuto ni..bleh jd pnduan ntk org yg nk try design sndiri...=)

-✿Ayu✿- said...

@::CIK LYNN::
hahaha...ayu pn tgh merangkak lg la cik lynn... hihihhi...
nt cik lynn leh try design sendiri...lg cantik...:)

Unknown said...

Ayu kalau dah ade part 2 tlong bgi link kat fb sy
http://www.facebook.com/profile.php?id=100003035500116

-✿Ayu✿- said...

@AimanAziz
ok...insyaAllah...tp lama lg kot... hihihi...:p

2leep.com