giao trinh thiet ke banner bang photoshop

5
Giáo trình Thiết kế banner cho trang web bng Photoshop Người viết: Đỗ Mnh Hà Mc đích: - Tth i ết k ế được b nn !r "đ# $ đ%& ch o '!b(it ! "tr ng '! b& c) đ* n v+ ,ình tr n h. th/ng '!b(it! c) vio0!t1vn  Y êu cu: - Người th c hi.n đ2 n 3, đưc ,4t (/ ki ế n th5c c* b6 n v% 7h #n ,% , 8ho to( ho71 "c9 th tì, hi$ trn trng '!b: htt7:;;<oto1vio0!t1vn& Thao tác: - =ác b n kh>i đ 4ng 7h#n ,%, 8hoto(h o7 1 To ,4t tr ng gi ?@ ,Ai " Ctrl N&1 H47 thoi N!' hi.n r1 Bn c9 th đi%n tn trng nà@ 0à Cbnn!rD1 EFch thưAc bnn!r trong các trng '!b c) vio0!t1vn c9 chi%$ ngng "'i<th& 0à 7iI!0(J cKn chi%$ co thì tL@ 1 T$@ nhin bn khng nn đ chi%$ co O$á 0An 0à, cho bnn!r choán hết c6 ,àn hình ,á@ tFnh1 Bn nn đ > đ4 co "h!ight&: P 7iI!0( đến Q 7iI!0 thi1 Bn nh?n RE đ đSng to trng gi?@ ,Ai1 Trng gi?@ c9 kFch thưAc đng như bn đUt đ2 hi.n rJ và bV@ gibn (W thX thFch t vW 0n đ9 đ to nn bnn!r cho trng '!b c) ,ình1 T$@ nhinJ ,4t bnn!r cYng c9 nhZng @$ c#$ v% n4i <$ng và ,[ th$\t c) n9: Ni dung : ] Đ*n v+ ch) O$6n "nế$ c9&1 ] Tn đ*n v+ "0à tn trng '!b&1 ] Đ+ ch^ 0in 0c1 _`: Mthut : ] `Lng aont chZ < đcJ rd ràng: khng <Lng chZ O$á ho 0áJ $/n 0ượnJe h@ chZ c9 nft O$á ,6nh1 Nn <Lng chZ in ho vAi <Kng tn trng '!bJ chZ thường vAi <Kng đ+ ch^1 `Kng đ+ ch^ ch^ c#n nhXJ v đ) đ đc đượcJ khng nn O$á 0An và chiế, nhi%$ <i.n tFch1 M#$ c) chZ cYng nn ni b\t (o vAi n%n 8HNG GjR `l= _m ĐmR TR pqN Hj Bm TRƯỜNG THCS TÔ HONG Đ+ ch^: Q Đại =S _i.tJ Hi Bà TrưngJ Hà N4i1 Đi.n thoi: "u& wxQQyw

Upload: anhtenhung

Post on 07-Jul-2018

219 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Giao Trinh Thiet Ke Banner Bang Photoshop

8/18/2019 Giao Trinh Thiet Ke Banner Bang Photoshop

http://slidepdf.com/reader/full/giao-trinh-thiet-ke-banner-bang-photoshop 1/5

Giáo trình Thiết kế banner cho trang web bằng Photoshop

Người viết: Đỗ Mạnh Hà

Mục đích:

- Tự thiết kế được bnn!r "đ#$ đ%& cho '!b(it! "trng '!b& c) đ*n v+ ,ình trn h.th/ng '!b(it! c) vio0!t1vn

 Yêu cầu:- Người thực hi.n đ2 n3, được ,4t (/ kiến th5c c* b6n v% 7h#n ,%, 8hoto(ho71

"c9 th tì, hi$ trn trng '!b: htt7:;;<oto1vio0!t1vn&

Thao tác:- =ác bạn kh>i đ4ng 7h#n ,%, 8hoto(ho71 Tạo ,4t trng gi?@ ,Ai "Ctrl N&1 H47

thoại N!' hi.n r1 Bạn c9 th đi%n tn trng nà@ 0à Cbnn!rD1 EFch thưAc bnn!r trong các trng '!b c) vio0!t1vn c9 chi%$ ngng "'i<th& 0à 7iI!0(J cKn chi%$ co

thì tL@ 1 T$@ nhin bạn khng nn đ chi%$ co O$á 0An 0à, cho bnn!r choán hếtc6 ,àn hình ,á@ tFnh1 Bạn nn đ > đ4 co "h!ight&: P 7iI!0( đến Q 7iI!0 thi1

Bạn nh?n RE đ đSng tạo trng gi?@ ,Ai1 Trng gi?@ c9 kFch thưAc đng như bạnđUt đ2 hi.n rJ và bV@ giờ bạn (W thX thFch t vW 0n đ9 đ tạo nn bnn!r cho trng'!b c) ,ình1

T$@ nhinJ ,4t bnn!r cYng c9 nhZng @$ c#$ v% n4i <$ng và ,[ th$\t c) n9:• Nội dung :] Đ*n v+ ch) O$6n "nế$ c9&1] Tn đ*n v+ "0à tn trng '!b&1] Đ+ ch^ 0in 0ạc1_`:

• Mỹ thuật :] `Lng aont chZ < đcJ rd ràng: khng <Lng chZ O$á ho 0áJ $/n 0ượnJe h@ chZc9 nft O$á ,6nh1 Nn <Lng chZ in ho vAi <Kng tn trng '!bJ chZ thường vAi<Kng đ+ ch^1 `Kng đ+ ch^ ch^ c#n nhXJ v đ) đ đc đượcJ khng nn O$á 0An vàchiế, nhi%$ <i.n tFch1 M#$ c) chZ cYng nn ni b\t (o vAi n%n

8HNG GjR `l= _m ĐmR TR pqN Hj Bm

TRƯỜNG THCS TÔ HONG

Đ+ ch^: Q Đại =S _i.tJ Hi Bà TrưngJ Hà N4i1 Đi.n thoại: "u& wxQQyw

Page 2: Giao Trinh Thiet Ke Banner Bang Photoshop

8/18/2019 Giao Trinh Thiet Ke Banner Bang Photoshop

http://slidepdf.com/reader/full/giao-trinh-thiet-ke-banner-bang-photoshop 2/5

] 8h#n n%n trng trF nn c9 tng ,à$ thFch hợ7J khng O$á 0K! 0ozt khiến người I!,nh5c ,3t như ,à$ hSng tư*iJ ,à$ Inh ndn ch$/i (áng rựcJ v11ve Bạn c9 th th,0 g { bi$ trưng c) đ*n v+J 6nh ,inh hJe |g 7h6i rd ràng và chFnh Iác1 }nh,inh h: đ2 0à ,inh h thì ch^ > ,4t 7h#n c) bnn!r1 Nế$ choán c6 bnn!r thìch^ nn ,ờ nhạt đ~ng ($ chZ 0à, n%n1

_`:

!" T# $%& n'n(- Bạn (W tạo ,4t ,#$ n%n cho bnn!r như ($:

=hn cng c• tạo vLng chn nhìn chZ nh\t: s!ctng$0r MrO$!! Too0 "M&khonh 0?@ toàn b4 7h#n bnn!r1 |c nà@ bạn đng chn trn |@!r bckgro$n<1

- Bạn chn ,#$ đ đ 0n vLng chn nà@ b~ng cách nh?n vào €!t or!gron$n<

co0or 1 B6ng =o0or 8ick!r hi.n r1 Bạn chn 0?@ ,4t ,#$ như ,ong ,$/n vành?n RE1 Tr> 0ại vLng chnJ bạn nh?n 0t ] `!0!t! đ đ ,à$ 0n vLng chn1 "‚&

)" T*o thanh +,& trang -hea.er/:- Mỗi '!b(it! th$4c h. th/ng '!b(it! c) vio0!t1vn khi thành vin đƒng nh\7 vào thì

(W hin th+ 0ời chào và tn thành vin đ9 7hF trn cLng bn 7h6i '!b(it!1_`:

„in chào th#@ giáo: Đỗ Mạnh Hà

Page 3: Giao Trinh Thiet Ke Banner Bang Photoshop

8/18/2019 Giao Trinh Thiet Ke Banner Bang Photoshop

http://slidepdf.com/reader/full/giao-trinh-thiet-ke-banner-bang-photoshop 3/5

„in chào c giáo: Ng Th+ =hinh- _ì v\@ bạn c#n tạo ,4t ,6ng ,#$ n~, ngng 7hF trn c9 đ4 co kho6ng y 7iI!01

M6ng ,#$ nà@ c9 ,#$ (áng vì 0ời chào hin th+ chZ ,à$ đ!n1- Bạn tạo ,4t 0@!r ,Ai ch5 ,6ng ,#$ nà@: trn thnh ,!n$ chn: |@!r … |@!re

"=tr0 ] €hit ] N&1 B6ng N!' 0@!r hi.n r1 Bạn đi%n tn cho 0@!r nà@ vào ,•c N,!đ < O$6n 01 _F <• ti đUt tn 0à Cđ#$ trngD: <$ trng

€$ đ9 nh?n RE đ tạo 0@!r ,Ai1"‚‚&

- Trn |@!r đ#$ trng bạn 0ại tạo ,4t vLng chn b~ng cng c• s!ctng$0r MrO$!! Too0 "M&1 Trn thnh tL@ chn c) cng c• nà@J ,•c €t@0!J chn aiI!< (i†!1‡ ˆi<th "chi%$ r4ng& bạn chn b~ng nhi%$ ngng c) bnn!r: 7iI!0‡ H!itgh "chi%$ co& bạn chn kho6ng y 7iI!0

Nh?n ch$4t 0n trng gi?@J bạn (W th?@ vLng chn hi.n r c9 kFch thưAc đng nhưbạn đ2 đUt1 Bạn <i ch$@n vLng chn 0n 7hF trn cLng c) bnn!r1 =hn ,#$ vàđ 0n vLng chn1 "như mục (*)&

0" 1iết ch2:- =hn cng c• T@7! Too0 "T&J c0ick ch$4t vào ,àn hình khi hi.n r con thnh t@7!

nh?7 nhá@ thì bạn gd chZ1 Gd Iong bạn chn cng c• Mov! Too0 "_& đ thoát khXicng c• T@7! Too0 "T&

- Đ th@ đi ont chZJ c‰ chZJ ki$ chZJ cƒn 0%J ,#$ chZJ veve bạn chn trn thnhtL@ chn:

- Bạn tạo hi.$ 5ng cho chZ như: b9ng đJ tX (ángJ ni b9ngJ vevenhư ($: Trongb6ng 0@!rJ bạn chn đến 0@!r chZ đ9 và chn vào << 0@!r (t@0!1 B6ng|@!r (t@0! hi.n r và bạn chn hi.$ 5ng ,à ,ình ,ong ,$/n:

Page 4: Giao Trinh Thiet Ke Banner Bang Photoshop

8/18/2019 Giao Trinh Thiet Ke Banner Bang Photoshop

http://slidepdf.com/reader/full/giao-trinh-thiet-ke-banner-bang-photoshop 4/5

- B0!n<ing R7tion(: 0ự chn ch$ng1- `ro7 €h<o': b9ng đ- jnn!r €h<o': b9ng đ vào trong- R$t!r G0o': tX (áng r I$ng O$nh- jnn!r G0o': tX (áng vào trong- B!v!0 n< Š,bo((: tạo kh/i ni- =onto$r: vi%n I$ng O$nh- T!It$r!: tạo b% ,Ut- €tin: 0à, b9ng b% ,Ut- =o0or Rv!r0@: 7h) ,#$ 0n b% ,Ut- Gr<i!nt Rv!r0@: tạo ch$@n ,#$ b% ,Ut- 8tt!rn Rv!r0@: tạo ch?t 0i.$ trn b% ,Ut- €trok!: Nft bo O$nh

|c nà@ bạn đ2 hoàn thành được ‹Œ cng đoạn thiết kế bnn!r c) ,ình1

BV@ giờ t cKn ,4t vi.c nZ 0à 0à, cho n9 đz7 h*nJ th, 0ogoJ th, hình ,inh hJveve

3" Trang tr4(- Đ th, 0ogo vào bnn!rJ bạn kfo i0! 6nh 0ogo t ,á@ tFnh vào gio <i.n 7h#n ,%,

7hoto(ho71 |c nà@ hình 0ogo đ2 n~, trong 7h#n ,%, 7hoto(ho7 nhưng đng >c ( khác c ( bnn!r ,à t đng thiết kế1 Bạn <Lng cng c• Mov! Too0 "_&Jchn và giZ ch$4t hình 0ogoJ kfo (ng c ( t đng thiết kế bnn!r1

- Nế$ 0ogo b+ to O$áJ bạn chn 0@!r ch5 0ogoJ nh?n =tr0 ] T1 „$ng O$nh hình 0@!r I$?t hi.n các nt v$ng1 Đư ch$4t đến nt > g9cJ khi I$?t hi.n ,Yi tn chfo Qchi%$J t giZ vào nt đ9 và 7hF, €hitJ kfo cho nhX 0ại hợ7 01 Nh?n Šnt!r1 `Lngcng c• Mov! Too0 "_& đ <i ch$@n 0ogoJ đUt n9 vào v+ trF ,à bạn ,$/n1

- Trong ,4t (/ trường hợ7J vì 0ogo c) bạn 0à hình trKnJ h@ hình thoiJ veve1 nnI$ng O$nh c9 7h#n tr3ng th1 Bạn <Lng cng c• Mgic ˆn< Too0 "ˆ& chn 0?@vLng đ9J nh?n 7hF, `!0!t! đ I9 đi 0à IongŽ

- Đ th, hình 6nh như 6nh đ*n v+ c) bạnJ 6nh hc (inhJ bng hoJ veve1 BạncYng kfo 6nh vào ,àn hình (oạn th6o như đ2 kfo 0ogo vào1

Page 5: Giao Trinh Thiet Ke Banner Bang Photoshop

8/18/2019 Giao Trinh Thiet Ke Banner Bang Photoshop

http://slidepdf.com/reader/full/giao-trinh-thiet-ke-banner-bang-photoshop 5/5

- B5c 6nh cYng c9 th O$á toJ bạn c9 th th$ nhX 0ại b~ng cách nh?n =tr0 ] T như th$nhX 0ogo1

- Bạn c9 th <Lng cng c• t@: Šr(! Too0 "Š& đ t@ nft cạnh c) t?, 6nh đ 0à,,%, b5c 6nh1 =h chn t@ nft to "tƒng Br$(h&J và chn đ4 t@ nhz "gi6, R7cit@và a0o'&1

|c nà@ bạn đ2 hoàn thành bnn!r c) ,ình:

5" „$?t r <ạng 6nh:- BưAc c$/i cLng 0à bạn (W I$?t i0! 8hoto(ho7 nà@ r thành ,4t i0! 6nh đ đư 0n

trng '!b1

- }nh đ đư 0n ˆ!b c#n 7h6i nhz đến ,5c t/i đ đ trng '!b khng b+ ch\,1 Bạnvào ai0! … €v! or '!b "0t ] €hit ] =tr0 ] €&1- Trong b6ng €v! or '!bJ bạn chn 6nh <ạng 8ŠGJ ch?t 0ượng "$0it@& 0à w1

Nh?n €v!1 = ( €v! ( hi.n rJ bạn chn n*i 0ư$ b5c 6nh 0ại trong ,á@ tFnhc) ,ình và nh?n RE1

Ghi chú - Thủ thuật:- Bạn c9 th 0?@ ,4t b5c 6nh ho 0á nào đ9 0à, n%n th@ vì c6 ,4t ,6ng ,#$1 Nế$

b5c 6nh O$á rdJ bạn c9 th 0à, ,ờ đi b~ng cách gi6, R7cit@ c) 0@!r 6nh n%nnà@ đi trong b6ng |@!r1

Ghi nhớ :- =ng vi.c thiết kế c9 nhZng O$@ t3c ch$ng v% ,[ th$\t đ (o cho đz71 T$@ nhin

cYng 0$n c#n c9 (ự (áng tạo đ c9 nhZng cách nhìn ,Ai đz7 h*n1 _ì v\@ khi thiếtkếJ các bạn khng c5 7h6i đUt 0ogo > v+ trF đ9J khng c5 7h6i đUt chZ > v+ trF cVn đ/ivà 6nh > g9c như thế1 Mỗi người c9 nhZng cách th hi.nJ c9 nhZng tư>ng khácnh$ nn bạn c5 thX (5c (áng tạoJ ,in (o n4i <$ng đ#@ đ)J bnn!r ,#$ (3c đz7

 { 7hL hợ7J rd ràngJ veve

Bài tập:- Thiết kế ,4t bnn!r kFch thưAc I P 7iI!01- N4i <$ng ,ng tn c) đ*n v+ ,ình- =9 0ogo "hoUc khng&- =9 6nh ,inh h- B/ c•c khác vAi vF <• c) giáo trình1