Chng 18: To hnh ng cho trang web

Photoshop CS

Ni dung ca trang ny thuc bn quyn ca B tc Monte Cristo - Final Fantasy v www.vietphotoshop.com. Nhng bi vit
trong ny c th c in ra dng vi mc ch c nhn v phi thng mi. Nu bn mun pht hnh li trong trang web ca bn lm
n lin lc vi ti hoc t nht phi trch dn li ngun l: B tc Monte Cristo - Final Fantasy v www.vietphotoshop.com

cho ni dung trang web ca bn c sinh ng hn, bn c th dng ImageReady to nhng

hnh Gif ng t mt hnh n. Vi kch thc tp tin c nn, hnh Gif ng c th hin th trn hu
ht cc trnh duyt web. ImageReady cho php bn to nhng hnh ng rt sng to vi nhng cng
c d s dng v tin li.
Trong bi hc ny bn s hc c nhng iu sau:

M mt hnh gm nhiu layer s dng lm hnh c bn cho hiu ng ng

S dng cng mt lc Layer Palette v Animation Palette to ra nhng chui ng.

Thay i mt frame n, nhiu frame hoc ton b cc frame ca hnh.

S dng lnh Tween to ra nhng bc chuyn hnh mn mng vi thng s ca Layer

Opacity v v tr ca n.

Xem trc mt tm hnh ng trong ImageReady v trong trnh duyt web.

Lu li hnh ng bng cch s dng Optimize Palette.

To hnh ng trong ImageReady

Trong Adobe ImageReady, bn to hnh ng t mt tm hnh ng bng cch s dng file ng c
nh dng GIF. Mt hnh GIF ng l mt chui hnh nh hoc cc Frame. Mi frame hi khc vi

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

frame trc n mt cht v vy to ra mt o gic ca chuyn ng cho mt khi nhng frame c

xem vi mt tc di chuyn nhanh. Bn c th to ra hnh ng bng nhng cch sau:

S dng nt Duplicate Current Frame trong Animation Palette to ra frame, sau s dng
Layer Palette xc nh nhng hnh no s hin ra trn nhng Frame tng ng.

Bng cch s dng lnh Tween t to ra nhng chui hnh ca nhiu layer c Opacity,
v tr hoc nhng hiu ng khc nhau. Bng cch ny ImageReady s gip bn to nhng "giai
on" gia qu trnh t lc u n lc cui. Nhng giai on ny chnh l phn s to ra o
gic chuyn ng ca mt trong mt frame hoc to ra cm gic hnh ang m dn hoc r
dn.

Bng cch m mt hnh gm nhiu layer trong Photoshop hoc ImageReady to hnh ng
vi mi layer s thnh mt Frame.

Khi to mt chui cc hnh ng, bn nn chn th Original trong ca s hnh nh bi v hnh ny

khng yu cu ImageReady phi ti ti u ho tm hnh khi bn chnh sa ni dung ca frame. Mt file
hnh ng phi c phn m rng bt buc l .GIF hoc Quicktime. Bn khng th to hnh ng c
phn m rng l .JPEG hoc .PNG
Thng tin thm khi lm vic vi layer trong hnh ng
Lm vic vi layer l mt phn rt quan trng trong vic to hnh ng trong ImageReady. Bi v khi
bn t mi thnh phn trn mt layer ring bit cho php bn thay i v tr cng nh hnh thc ca
mi mt thnh phn thng qua mt chui cc frames.
Thay i mt frame ring c nh ngha l "Nhng thay i bn to ra cho layer s ch tc ng
n frame ang c chn. Bi mc nh, thay i bn tao ra cho layer s dng lnh trn Layer
Palette v tu chn, bao gm c mc Opacity ca layer, ch ho trn, tnh n hin, v tr v layer
style c gi chung l frame ring. Tuy nhin bn c th p dng nhng thay i ca layer cho tt c
cc frame trong mt hnh ng bng cch s dng nhng nt c trn Layer Palette.
Thay i ton cc: Nhng thay i tc ng n tt c cc frame m trong bao gm c layer.
Nhng thao tc gy ra nhng thay i cho cc n v pixel ca mt tm hnh nh t v, lnh chnh sa
tng mu v sng ti, b lc, g ch v cc lnh chnh sa nh khc c gi l thay i ton cc.
Mi mt frame mi khi c to ra l mt bn copy ca frame trc n, bn c th chnh sa frame
ny bng cch chnh sa layer ca n. Bn c th p dng nhng thay i trn tng frame mt, trn
mt nhm cc frame v trn ton b hnh ng.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

Bt u
Trong bi hc ny bn s lm vic vi mt tp hp cc hnh nh c thit k xut hin trn trang
web ca mt cng ty nc gii kht.
1. Tm n th mc Lesson18 v nhp p vo th mc 18End.html m n ra trong trnh duyt
web.
Trang web bao gm 4 vng c hnh ng: Ch "Making Waves", ui con c voi hin ln v chui xung
bin, cng thc ho hc ca nc di chuyn vo trong tm hnh v mt con c heo ang bi ng thi
nh bong bng ra pha trc. Ch v nt trn trang web ch "lm cnh" thi.
2. Khi bn xem xong, ng trnh duyt li lm vic trong Photoshop.
3. Khi ng Adobe ImageReady bn khng cn dng Photoshop trong bi hc ny.
Thit lp mi trng lm vic cho bi hc
Trc khi bn bt u vi bi hc ny, bn s thit lp vng lm vic mi c bit cho nhng cng
vic lin quan n hnh ng. Nu bn c mt vng lm vic ph hp vi cng vic ca bn, bn s
thy thoi mi hn v tit kim c nhiu thi gian hn.
ImageReady c mi trng lm vic c thit lp sn l Interactivity Palette Locations, chc hn bn
bit v tnh nng ny nu bn hc nhng chng trc c lin quan n ImageReady. Bi v
giao din trong bi hc ny ch trong phm vi hnh ng, cho nn bn c th gim s lng nhng
Palette c m ra bi mc nh ca ImageReady.
1. Chn File > Open v chn DoLayer Palettehin.psd trong th mc Lesson18. (Mi th hu nh
c chun b cho bn, cho nn bn khng cn phi phng to hoc m rng ca s lm vic trong bi
ny).
2. Chn Color, Web Content v Slice Palette.
4. Chn Window > Animation m Animation Palette. Ko gc pha di bn phi ca Animation
Palette m rng n cho nn bn c th tn dng c khong trng trong vng lm vic .
(Tu chn) Bn cng c th di chuyn Animation Palette vo gn hn ca s hnh nh gi nhng
ca s bn phi lm vic gn nhau hn th thao tc ca bn s nhanh hn.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

5. Chn Window > Workspace > Save Workspace.

6.G ch 18_Animation trong hp thoi Save Workspace v nhn OK.
By gi bn c th nhanh chng quay li kch thc ban u v v tr ca cc Palette bt c lc no
bng cch chn Window > Workspace >18_Animation.
To hnh ng bng cch n hoc hin layer
C l cch thc n gin nht to hnh ng trong 2 bc l cho ln lt n hoc hin biu tng
con mt ca 2 layer trong Layer Palette. V d, bn c th to ra mt hnh ng ca i tng thay i
t th hoc cho i tng di chuyn ln pha trc v quay li.
Hnh DoLayer Palettehin.psd bao gm 5 layer, bn c th b t giy xem qua Layer Palette. Bn s
tin hnh vi hiu ng ng n gin vi hai layer ca DoLayer Palettehin
Chun b Layer Comp
Bn lm vic vi Layer Comp phn trc ca cun sch ny ri. ImageReady cng c tnh nng
tng t v lm cho cng vic to hnh ng tr nn rt d dng.
1. Trong Layer Palette, kim tra xem biu tng con mt c xut hin gn layer Bacground v
DoLayer Palettehin 1 khng v nhng vung cn li khng c con mt.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

2. Trong Layer Comps Palette, nhp chut chn nt Create New Layer Comp

Photoshop CS

3. Trong hp thoi New Layer Comp g DoLayer Palettehin 1 v sau kim tra xem la chn Visibility
c ang c chn khng trc khi bn nhn OK.
Mt Layer Comp mi, DoLayer Palettehin 1, xut hin trong Layer Comps Palette.

4. Trong Layer Palette, nhp vo biu tng con mt ca layer DoLayer Palettehin 1 n n i v
sau cho hin con mt ca layer DoLayer Palettehin 2

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

5. To mt Layer Comp mi, DoLayer Palettehin 2, s dng cch c ch ra bc 2 v 3.

6. Nhp vo vung bn cnh Layer Comp DoLayer Palettehin 1 p dng tnh trng hin ti trn
Layer Palette. Mt th tn

xut hin trong vung cho bn bit rng y l Layer Comp ang c

chn.

By gi bn c 2 Layer Comps m bn c th s dng lm im bt u cho nhng frame bn s

to trong hiu ng ng ny.
Bt u qu trnh to hnh ng
Khi bn bt u, ch mt frame mc nh xut hin trong Animation Palette. Frame ny hin th nhng
thit lp n hin ca cc layer trn Layer Palette, trng hp ny bn s thy ch c 2 layer c
hin th l DoLayer Palettehin 1 v Background. Frame c chn, biu hin bng ng vin mu

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

xanh bao xung quanh, cho bn bit rng bn c th chnh sa ni dung ca n bng cch chnh sa
hnh nh.

1. Trong Animation Palette, nhp vo nt Duplicate Current Frame to frame 2

2. Trong LCP, nhp vo vung cho hin th th tn Animation Paletteply This Layer Comp

cho

Layer Comp DoLayer Palettehin 2. Bn hy ch n Layer Palette v bn s thy layer DoLayer

Palettehin 1 b n i v layer DoLayer Palettehine 2 ang c hin th.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

3. Trong Animation Palette, chn frame 1. Trong ca s hnh nh, con c heo quay li tnh trng ban
u khi ch c Layer 1 c hin th.
4. Chn Frame 2 v sau frame 1 t bn xem trc hiu ng ng trn hnh nh.
Tm n frame v xem trc hiu ng ng
Bn c th s dng rt nhiu cch xem trc v ko qua cc frame ca hiu ng ng. Hiu c
nhng chc nng iu khin trn Animation v Layer Palette l iu rt quan trng nm bt c
qu trnh to nh ng.
Bn th xem hiu ng ng bng cch t chn ln lt frame 1 v frame 2. Trong phn ny, bn
s th vi cch khc xem trc hiu ng hnh ng trong ImageReady. Bn cng c th xem trc
hiu ng ng trong trnh duyt web.

A: Looping Menu
B: Chn frame u tin
C: Chn frame trc .
D: Xem/ Dng hiu ng ng.
E: Chn frame k tip.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

F: Nt Tween.
G: To mt frame mi.
H: Xo frame
1. Trong Animation Palette, bn hy chn tu chn Forever trong menu x ra Looping pha bn tri
ca palette.
2. Nhn vo nt Select Previous Frame di chuyn sang frame khc. (Bn hy th lp li nhiu ln
thao tc ny tht nhanh xem hiu ng ng xut hin trn ca s hnh nh)
3. Trong Layer Palette, nhp vo nt Backward hoc Forward gc pha di bn tri ca palette, v
bn cng c kt qu tng t nh bc trn.

A. Nt quay li trn Layer Palette.

B. Nt tin ti trn Layer Palette.
4. Nhn vo nt Play

trong Animation Palette xem trc hiu ng ng. Nt Play s bin thnh

nt Stop m bn c th nhn vo dng li.

5. Chn File > Preview In > v chn trnh duyt web trong menu ph Preview In. Khi bn xem xong,
thot khi trnh duyt v quay li ImageReady.
Mo nh: bn cng c th dng phm tt Ctrl-Alt-P m nhanh trnh duyt hoc nhn vo nt trnh
duyt trong hp cng c.
6. Chn file > Save Optimized As.
7. Trong hp thoi Save As, m th mc Lesson 18 v nhn vo biu tng Create New Folder. G
My_gifs cho tn ca th mc, sau m n ra. Vn trong hp thoi Save As, g ch DoLayer
Palettehin.gif t tn cho file v nhn Save.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Chng 18: To hnh ng cho trang web

Photoshop CS

Chun b nhng bn copy ca layer cho hiu ng ng

By gi bn s lm ng mt thnh phn khc ca tm hnh con c heo, v thm vo hiu ng ng
ang c. Trong phn ny, bn s s dng cng k nng c bn l n v hin layer cho nhng frame
khc nhau to ra hiu ng ng, nhng ln ny bn cng s to nhng layer khc nhau bng cch
copy v bin chuyn mt layer.
Trc khi thm mt layer vo tm hnh c cha hiu ng ng, th bn nn to mt frame mi.
Bc ny gip bn bo v nhng frame c khi b nh hng bi nhng thay i khng nh mong
i.
1. Trong Animation Palette, chn frame 2 v nhp vo nt Duplicate Current Frame to mt frame
mi (Frame 3) nm k ngay sau frame 2. Vn chn frame 3
2. M menu ca Animation Palette v chn lnh New Layer Visible in All States/Frame b chn n
(b du kim).

www.vietphotoshop.com - Dch bi B tc Monte Cristo

10

Chng 18: To hnh ng cho trang web

Photoshop CS

3. Trong Layer Palette, chn layer Bubble v nhn vo biu tng con mt hin th layer . Vn
chn layer Bubble.
Trong ca s hnh nh v trong biu tng thu nh ca frame 3, bn s thy xut hin mt qu bong
bng gn "mi" ca con c heo.

4. Chn View > SnAnimation Palette v nh vo du kim b chn lnh ny.

5. Chn cng c Move trong hp cng c
6. Gi phm Alt v ko qu bong bng ln pha trn bn phi ca tm hnh, v mt layer mi chnh l
layer copy ca layer Bubble xut hin trong Layer Palette.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

11

Chng 18: To hnh ng cho trang web

Photoshop CS

7. Gi phm Alt xung ln na v ko to ra qu bong bng th 3 xa hn mt cht v pha trn bn

phi ca qu bong bng th nht.
By gi bn c 3 layer bong bng trong ca s hnh nh v trong Layer Palette bn c: Bubble,
Bubble copy v Bubble copy 2.
Ch : Tt c nhng layer va c nhn i c th c hin th trn cc frame ca Animation
Palette nu New
Layers Visible in All States/Frames vn c chn trong menu Animation Palette.
By gi bn chun b xong cc bc copy layer trong file DoLayer Palettehin.psd, by gi bn s
p dng lnh Transform lm cho qu bong bng ln dn v bay v pha sau con c heo.
1. Chn cng c Move v cng c Layer Select

c chn trn thanh tu bin cng c.

2. Trong ca s hnh nh, chn qu bong bng gia l layer Bubble copy trn Layer Palette.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

12

Chng 18: To hnh ng cho trang web

Photoshop CS

3. Chn Edit > Transform > Scale.

Trong ca s hnh nh, mt ng vin mu en c cc im iu khin xut hin bao quanh layer
Bubble copy.
4. Trong thanh tu bin cng c, chn biu tng Constrain Aspect Ration v g gi tr l 24 Px vo
Width (W). Nhp vo mt vng bt k bn ngoi hp vn bn Width v bn s thy qu bong bng
s to ln nhng ng bin mu en vn xut hin xung quanh layer Bubble copy.
5. Nhn Enter chp nhn lnh Transform.
6. Chn qu bong bng th 3 v lp li bc 3-5, nhng ln ny g vo l 26 Px c hai Width v
Height.
7. Vn s dng cng c Move va la chn Layer Select trn thanh tu bin, chnh sa v tr ca 3 qu
bong bng bng cch ko n trong ca s hnh nh nu bn thy cn phi chnh sa.
Bn khng nn qu bng th 3 ng sau ui ca con c heo v khong cch gia 3 qu bng nn
c chia u nhau. Xem hnh sau bn d hnh dung ra v tr ca chng.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

13

Chng 18: To hnh ng cho trang web

Photoshop CS

8. Chn File > Save.

To ra nhng hiu ng ng cng mt lc
By gi bn s to ra hiu ng qu bng i t di ln trn bng cch ln lt n v hin cc layer
ca ti liu DoLayer Palettehin.psd. Bn s kt hp hai hiu ng ng l s di chuyn ca con c heo
vi s ln dn ca nhng qu bong bng bng cch nhn i frame kt hp vi nhng thit lp trn
Layer v Animation Palette.
1. Trong Animation Palette, chn frame 3.
2. Trong Layer Palette, nhn vo biu tng con mt n n i, do vy trn Layer Palette ca bn s
cn layer Background, DoLayer Palettehin 1 v layer Bubble vn c hin th v nhng layer khc
c n

www.vietphotoshop.com - Dch bi B tc Monte Cristo

14

Chng 18: To hnh ng cho trang web

Photoshop CS

Ch : khi bn n hoc hin mt layer trong mt frame th s thay i ch tc ng n frame m

thi.
3. Trong Animation Palette, nhn vo nt Duplicate Current Frame to frame 4. Vn chn frame
4
4. Trong Layer Comps Palette, chn DoLayer Palettehin 2. Sau Layer Palette cho hin th con mt
layer Bubble Coppy.

5. Nhn vo nt Duplicate Current Frame 2 ln na v sau s dng Layer Comps v Layer Palette
nh sau:

Cho frame 5, chn DoLayer Palettehin 1 layer comp v cho hin th layer Bubble Copy 2.

Cho frame 6, chn DoLayer Palettehin 2 layer comp v cho hin th layer Pop.

6. Chn nt Play trn Animation Palette xem trc kt qu. Khi xem xong bn nht nt Stop
dng li.
Khi hiu ng ng di chuyn t frame ny sang frame khc, th ui ca con c heo di chuyn ln
xung. Nu bn xem c mt vng th qu bong bng hin ra t con c, to ln dn v cui cng n ra
bc th 4.
Nu kt qu ca bn khc vi ca chng ti, hy xem li nhng thit lp layer trn Layer Palette n v
hin c ng khng cho tng frame mt v chnh sa nu cn.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

15

Chng 18: To hnh ng cho trang web

Photoshop CS

Thit lp v xem trc thi gian ca hnh ng

phn trn, khi bn xem trc hnh ng ca bn trong trnh duyt, c th bn nhn ra rng ui con
c heo di chuyn ln xung "nh in". Bn c th lm chm li bng cch t thi gian gia mi
frame trong hiu ng ng. Sau bn s xem li hnh ng ln na xem tc ca n.
Trong nhng d n ca bn, bn c th t nhng khong dng cho tt c cc frame hoc nhng
khong dng c thi gian di ngn khc nhau cho tng frame mt. Trong hnh ny, bn c th p dng
thi gian ging nhau cho tng frame cho c tm hnh.
1. T menu Animation Palette, chn Select All Frames.

2. Nhn vo nt thi gian (0 seconds, l mc nh) nm di mi frame m menu hin ra Frame

Delay, sau chn 0.2 Seconds.
Gi tr mi xut hin di mi frame, ch cho bn bit rng thi gian c p dng cho tt c cc
frame trong Palette.

3. Nhn vo nt Play trong Animation Palette xem hiu ng ng v sau nhn vo nt Stop
dng li.
4. Chn File > Preview In v chn trnh duyt xem hiu ng ng vi thi gian bn va thit lp.
5. Chn File > Save Optimize As.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

16

Chng 18: To hnh ng cho trang web

Photoshop CS

6. Trong hp thoi Save As, t tn cho hnh l DoLayer Palettehin.gif v t trong th mc My_Gif.
Nhn Save v chn Replace thay th file c.
Trong lnh Save Optimized As c th lu file di cc nh dng l Gif, JPEG hoc PNG s dng
cho web. Nhng ch c nh dng Gif l h tr hnh ng, cho nn l nh dng bn s dng trong
chng ny.
7. Chn File > Close ng hnh gc li m khng cn lu li thay i.
Bn hon thnh hnh ng cho con c heo. phn ti, bn s tip tc lm vic vi mt loi hnh
ng khc.
To hnh ng vi trong sut v v tr ca layer
Bn s s dng mt phng php khc to hnh ng trong phn tip theo ca bi hc. Trong phn
ny, bn s to hnh ng cho mt on ch bay vo, s dng hnh nhiu layer ca Photoshop. Nhng
bn s khng phi t to ra nhiu layer cho mi mt thay i v v tr v bn cng khng phi iu
chnh cho tng frame mt. Mt khi bn to c frame u v frame kt thc cho mi hnh, bn c
th ImageReady t to tt c nhng frame cn li.
M mt hnh v bt u qu trnh to hnh ng
bt u, bn s m mt ti liu mi v xem nhng thit lp hin ti ca n.
1. Trong ImageReady, chn File > Open v chn H2O.psd t th mc Lesson18.
Logo bao gm 4 thnh phn khc nhau c t nhng layer ring bit. Bn s to ra hnh ng ca
cc frame sao cho ch xut hin v di chuyn vo v tr trung tm t nhng vng khc nhau. Trng
thi ban u ca tm hnh s l hnh bn mun hin th cui qu trnh.
2. Cho hin th hai Animation Palette v Layer Palette bng cch chn Window > Workspace >
8_Animation.
3. Trong Animation Palette, chn nt Duplicate Current Frame to mt frame mi.
By gi bn s c hai frame v bn to ng i cho hiu ng hnh ng. Nhim v ti ca bn s
l thay i tnh trng ca nhiu layer cho nhng frame khc nhau.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

17

Chng 18: To hnh ng cho trang web

Photoshop CS

Thit lp v tr ca layer v trong sut

Trong phn ny ca bi hc, bn s iu chnh v tr v trong sut ca layer trong mt tm hnh
to ra frame u v frame kt thc cho hnh ca bn. thay i th t ca cc frame cng rt n
gin, bn ch cn ko frame trong Animation Palette.
1. Trong Animation Palette, chn frame 2 sau trong Layer Palette chn layer H.

2. Chn cng c Move, gi phm Shift p di chuyn, v ko ch "H" v pha bn tri ca tm hnh
sao cho ch mt phn ca n c nhn thy.

3. Trong Layer Palette, chn layer ch "O", sau gi phm shift v ko v cng v tr bn tay phi ca
ca s hnh nh.
4. Lp li bc 3, nhng ln ny chn layer s "2" v ko n ln ng bin pha trn ca ca s hnh
nh. 3 layer ca bn s c v tr ging nh hnh sau.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

18

Chng 18: To hnh ng cho trang web

Photoshop CS

5. Trong Layer Palette, chn layer ch "H" v ko thanh trt Opacity xung cn 20%. Lp li qu trnh
ny t gi tr Opacity ca layer ch "O" v s "2" cng l 20%.

Trong Animation Palette, bn s thy frame 2 c cp nht vi thay i ca cc v tr mi m bn

va to. cho frame 2 l trng thi bt u ca hnh ng, bn s thay i li th t ca hai frame.
6. Trong Animation Palette, ko frame 2 sang bn tri, nh chut khi mt ng vin mu en xut
hin bn tri ca frame 1.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

19

Chng 18: To hnh ng cho trang web

Photoshop CS

Tweening v tr v mc Opacity ca cc layer

Tip theo, bn s thm nhng frame nm gia hai frame va to, nhng frame s chnh l nhng
frame to ra s bin i gia frame 1 v frame 2. Khi bn thay i v tr, mc Opacity hoc hiu ng
ca bt c layer no nm trong hai frame ca hnh ng, bn c th hng dn ImageReady Tween
n, v lnh ny s t ng to ra nhng frame trung gian vi s lng do bn quyt nh.
1. Trong Animation Palette, chn frame 1 v sau chn Tween trn menu Animation Palette.
2. Trong hp thoi Tween, t nhng thng s sau:

trong menu x ra Tween With chn Next Frame.

Frames to Add, g 4.

di Layers, chn All Layers.

Di Parameters, chn Position v Opacity bng cch nh du kim vo trng nm cnh

n. (bn cng c th chn Effects nu bn mun thay i nhng thng s ca layer tc
ng n tt c nhng frame nm gia hai frame u v frame cui. Nhng trong phn ny,
bn s khng chn la chn ny, v bn cha p dng Layer Style cho frame no c)

Nhn OK ng hp thoi li

ImageReady to ra 4 frame bin i, da trn thng s trong sut v v tr ca layer trong hai frame
gc ban u.

3. menu x ra Looping, chn Once.

Ch : v d trong ti liu End ca bi hc ny, thng s ca n hi khc vi nhng g bn c
yu cu trong phn trn. ti liu End, la chn Forever c chn cho Looping nhng gia hai
hiu ng ng l mt khong thi gian dng rt di m bn cha to c cho ti thi im ny.
4. Trong Animation Palette, nhn vo nt Play xem trc hiu ng ng trong ImageReady.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

20

Chng 18: To hnh ng cho trang web

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Photoshop CS

21

Chng 18: To hnh ng cho trang web

Photoshop CS

Tweening frames
Bn s dng lnh Tween t ng thm vo hoc sa i mt lot cc frame nm gia hai frame c
sn - thay i thuc tnh (v tr, trong sut hoc hiu ng) - to ra hiu ng di chuyn cho i
tng. V d, nu bn mun lm m mt layer, t mc Opacity ca layer ti frame u l 100%,
sau t mc Opacity cho cng mt layer nhng frame th 2 - frame cui - l 0%. Khi bn Tween
gia 2 frame, mc Opacity ca layer s gim u qua cc frame mi.
Thut ng Tweening c ly t ch "In Betweening" ( gia), mt thut ng c in dng miu t
qu trnh ny. Tweening gip bn tit kim rt rt nhiu thi gian khi phi to ra hiu ng ng dng
nh m i, nht dn hoc di chuyn mt i tng no . Bn c th chnh sa nhng frame c
to ra bi lnh Tween sau khi chng c to.
Nu bn chn mt frame n, bn c th chn Tween n vi frame nm trc hay nm sau n. Nu
bn chn hai frame k nahu, nhng frame mi s c thm vo gia hai frame . Nu bn chn
hn hai frame, nhng frame c nm gia frame u v frame cui s b thay i bi lnh Tween.
Nu bn chn frame u v frame cui (ch u v cui, khng bao gm nhng frame nm gia chng)
th hai frame ny c coi nh hai frame nm k nhau v nhng frame c to ra bi lnh Tween s
c thm vo sau frame cui cng. (cch ny rt hu ch khi hnh ng ca bn c nhiu on Loop
khc nhau)
Ch : Bn khng th chn hai frame khng k nhau Tween.
To hnh ng cho mt Layer Style
Khi bn Tween to ra 4 frame mi trong phn trn, bn khng nh du vo hp kim Effect
trong hp thoi Tween. Trong phn ny, bn s to hiu ng ng cho mt hiu ng Layer hoc mt
Layer Style.
Kt qu cui cng s l mt hiu ng lo sng xut hin v bin mt ng sau s "2".
1. Trong Animation Palette, chn frame 6, v sau nhp chut vo nt Duplicate Current Frame
to mt frame mi vi thng s ca frame th 6.
2. Trong Layer Palette, chn layer s "2" v sau chn Outer Gl t menu Layer Style di cui
ca Layer Palette.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

22

Chng 18: To hnh ng cho trang web

Photoshop CS

Bn hy ch n ng vin mu sng bao quanh layer s "2".

3. Khi hp thoi Layer Style m ra, nhn OK chp nhn gi tr mc nh.
4. Nhn i layer 7 bng cch nhn vo nt Duplicate Current Frame
5. Trong Layer Palette, nhp p vo hiu ng Outer Glow cho layer s "2" m hp thoi Layer
Style. nh du vo hp kim Preview sau thit lp nhng tu chn sau:

Spread, ko thanh trt n gi tr l 20%

Size, ko thanh trt xung cn 49 Pixel

6. Nhn OK v sau chn File > Save.

Tweening frame cho nhng thay i v Layer Style
Nh bn thy trong bi hc ny, tnh nng Tween c th gip bn tit kim rt nhiu thi gian bn
c th phi dng lm nhng cng vic bun t v yu cu chnh xc cao. Ln ny bn s s
dng li lnh Tween to hiu ng ng cho nhng thay i Layer Style.
Bn cng s hon thin hiu ng vng sng bng cch nhn i thm mt frame na v di chuyn n
n pha cui ca hnh ng. Kt qu ca hnh ng s cho cm gic mt vng sng hin ra ng sau
hnh s "2".
1. Trong Animation Palette, chn frame 7.
2. Chn Tween t menu Animation Palette.
3. Trong hpt hoi Tween, thit lp nhng thng s sau:

www.vietphotoshop.com - Dch bi B tc Monte Cristo

23

Chng 18: To hnh ng cho trang web

Cho la chn Tween With, chn Next Frame

Frame to Add, g vo l 2

Di Layer, chn All Layers

Di Parameters, chn Effects.

Photoshop CS

4. Nhn OK ng hp thoi li.

5. Trong Animation Palette, chn frame 6, sau chn nt Duplicate Current Frame to frame 7.
6. Ko frame 7 v phia cui ca Animation Palette sao cho n pha bn phi ca Frame 11.
7. Chn File > Save
Gi vng trong sut v chun b ti u ho
Tip theo bn s ti u ho hnh H20 nh dng Gif vi hnh nn l trong sut v xem trc hiu ng
ng trn trnh duyt web. Bn nn nh l ch c nh dng Gif mi h tr hnh ng.
Chng ti thm mt layer Backdrop trong hnh H2O.psd cho bn quan st kt qu d dng hn.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

24

Chng 18: To hnh ng cho trang web

Photoshop CS

Layer khng cn thit cho trang web bi v bn s ti u ho hnh ny vi nn trong sut. Do vy

vic u tin m bn phi lm l n layer Backdrop i.
1. Trong menu Animation Palette, chn Select All Frames.
2. Trong Layer Palette, nhp vo biu tng con mt ca layer Backdrop n n i trong tt c cc
frame.
3. Trong Optimize Palette, thit lp thng s sau:

nh dng file chn Gif.

Di Color Talbe, chn Perceptual cho Reduction v 256 cho Colors.

Di Transparency, nh du hp kim Transparency ( gi vng trong sut cho hnh gc)

Cho Matte, chn mu trng t palette hin ra.

4. Vi tt c cc frame vn c chn trong Animation Palette, nhp chut phi vo mt trong cc

frame trong Animation Palette m menu ch Disposal Method v chn Restore to Background.
5. Vi tt c cc frame c chn, s dng menu hin ra pha di ca bt c frame no v chn
0.1 Sec.
6. Menu ca Animation Palette, chn Optimize Animation.
7. Trong hpt hoi Optimize Animation, nh du hai hp kim Bounding Box v Redundant Pixel
Removal v nhn OK.
La chn Disposal - Restore to Background

v Automatic - s xo frame c chn trc khi frame

th 2 c hin th. V nh vy s loi b kh nng s hin th nhng "tn d ca ch c" frame

mi. La chn Do Not Dispose

gi li cc frame. La chn Automatic ph hp vi hu ht cc hnh

ng. Tu bin ny s la chn phng php loi b da trn s c hoc vng mt trong sut ca
frame k tip v loi b frame c chn nu frame k tip c cha layer trong sut.
Thit lp phng php frame disposal (loi b frame)
Phng php Frame Disposal s xem xt c nn xo frame hin ti hay khng trc khi cho hin th
frame k tip. Bn chn mt phng php loi b khi bn lm vic vi hnh ng bao gm c nn trong
sut xc nh c nn cho hin th layer hin ti thng qua vng trong sut ca frame k tip hay
khng.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

25

Chng 18: To hnh ng cho trang web

Photoshop CS

Biu tng Disposal Method ch ra cho bn bit l frame c chn phng php Do Not Dispose
hoc Restore to Background. (Khng c biu tng xut hin khi phng php loi b c t l
Automatic).

Chn la chn Automatic xc nh mt phng php loi tr t ng cho frame hin ti,
loi b frame hin ti nu frame k tip c cha layer trong sut. Hu ht cc hnh ng, la
chn Automatic u ph hp vi kt qu v do vy n l thit lp mc nh.

Chn Do not Dispose bo v frame hin ti v frame tip theo s c thm vo v cng
hin th mt lc. Frame hin ti (v frame trc ) c th c hin th xuyn qua vng trong
sut ca layer k tip.

Chn Restore to Background loi b frame hin ti t hnh ang c hin th trc khi cho
hin frame tip theo. Ch c tng frame c hin th ln lt (v frame hin ti s khng c
hin th xuyn qua vng trong sut ca frame k tip)

Ngoi nhng cch ti u ho c p dng cho nhng hnh Gif chun, mt vi nhng cch khc c
th c dng cho hnh Gif ng. Nu bn ti u ho mt hnh Gif ng s dng Palette AdAnimation
Palettetive (thch hp), Perceptual (Cm ng) v Selective (La chn), ImageReady s to ra mt
palette cho hnh da trn tt c nhng frame trong hnh ng. Mt k nng phi mu c bit c
p dng m bo rng nhng mu phi mu c ng nht trong tt c cc frame, trnh
trng hp nhy "nh co co" khi xem kt qu. Hn na, frame c ti u ho ch nhng vng
m thay i t frame ny sang frame khc mi c bao gm, bng cch c th gim dung lng
ca hnh Gif ng rt nhiu. Do vy, ImageReady phi mt nhiu thi gian hn ti u ho mt hnh
Gif ng hn l mt hnh Gif tiu chun.
La chn Bounding Box hng dn ImageReady ct tng frame ch bo v nhng vng c thay
i t frame trc . Nhng hnh ng c to ra s dng la chn ny th c dung lng nh hn
nhng li khng tng thch vi nhng trnh chnh sa hnh Gif ng no khng h tr la chn ny.
La chn Optimize bi Redundant Pixel Removal s lm cho tt c nhng n v pixel frame m c
khng thay i g so vi frame trc tr thnh trong sut. Khi bn chn la chn Redundant Pixel
Removal th Disposal Method phi c t l Automatic.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

26

Chng 18: To hnh ng cho trang web

Photoshop CS

Xem hnh Gif c ti u ho

Bn gn hon thin ti liu H2O.psd ri v by gi bn s s dng lnh Save As lu n li thnh
mt hnh Gif ng.
1. Trong ca s hnh nh, nhp vo th Optimized.

ImageReady s xy dng li tm hnh da trn nhng ty chn m bn chn.

2. Trong ca s hnh nh, nhp vo th 2-up v so snh thng tin ca 2 phin bn gc v phin bn
c ti u ho.
3. Chn File > Save Optimized As, t tn cho n l H2O.gif, chn th mc My_gif v lu vo .
Nu bn mun xem trc hnh ng ca mnh trong trnh duyt, bn c th nhn vo nt Preview In
Default Browser trong hp cng c.
4. Trong ImageReady, chn File > Close ng hnh gc li.
Bn hon thin vi logo ch H2O.
S dng Vector Mask to hnh ng
Phn cn li ca bi hc s lm vic vi mt n khi m n c p dng cho hnh ng. Bn s lm
vic vi hai bi tp ring bit vi 2 kiu mt n khc nhau, u tin l Vector Mask sau s l Layer
Mask. u tin, bn s to mt hiu ng ca mt bin ni sng ln xung hin ra trong ch Waves.
Bn s tin hnh bng cch to ra Vector Mask che i mt phn layer Wave sao cho hnh mt bin
ch xut hin bn trong ch v sau s thay i v tr to ra hnh ng.
1. Chn File > Open v m hnh Waves.psd t th mc Lesson18.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

27

Chng 18: To hnh ng cho trang web

Photoshop CS

2. Trong Layer Palette, kim tra xem tt c cc layer c c hin th khng. Nu khng nhn vo biu
tng con mt hin th n.

3. Trong Layer Palette, chn layer Wave

4. Gi phm Alt v di chuyn con tr (khng nhp chut) qua ng thng chia ct hai layer Wave v
Text trong Layer Palette cho n khi con tr bin thnh hai vng trn ln nhau. Sau nhn vo
ng chia ct gia hai layer lin kt hai layer li vi nhau.
Hoc bn c th c kt qu tng t bng cch chn Layer > Group With Previous.

Bn s nhn thy rng hnh sng by gi c che ph bi layer ch. Mt mi tn ch xung xut hin
bn cnh layer Wave v biu tng thu nh ca n trong Layer Palette ch ra cho bn bit rng layer
ny c nhm vi layer di.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

28

Chng 18: To hnh ng cho trang web

Photoshop CS

To hiu ng ng bng cch thay i v tr trong mt layer vector mask

Mc d hai layer Wave v Text c lin kt, bn vn c th thay i v tr cho tng layer mt.
1. Trong Animation Palette, nhp vo nt Duplicate Current Frame to frame mi.
2. Nu cn, chn frame 2 trong Animation Palette. Trong Layer Palette, b chn layer Text v ch
chn layer Wave.
3. Chn cng c Move trong hp cng c.
4. Gi phm Shift ( p di chuyn) v ko layer Wave trong ca s hnh nh, di chuyn n xung di
cho n khi nh ca hnh con sng nm ngay trn nh ca ch Text. (Khi bn ko, ton b layer
Wave c hin ra cho nn bn c th thy c v tr ca con sng khi bn di chuyn n).

5. Nhn vo nt Play xem hiu ng ng. Con sng di chuyn ln trn v xung di bn trong
Logo. Nhn vo Stop dng li.
Lm mm s di chuyn ca con sng
to cho s chuyn ng ca con sng c t nhin hn, bn s s dng tnh nng kh quen
thuc l Tweening to thm frame cho hnh ng.
Trc khi bn bt u, hy chn frame th 2 trong Animation Palette.
1. Trong menu ca Animation Palette, chn Tween m hp thoi Tween v sau thit lp thng s
nh hnh sau:

www.vietphotoshop.com - Dch bi B tc Monte Cristo

29

Chng 18: To hnh ng cho trang web

www.vietphotoshop.com - Dch bi B tc Monte Cristo

Photoshop CS

30

Chng 18: To hnh ng cho trang web

Photoshop CS

2. Trong Animation Palette, chn Forever trong menu x xung.

3.Chn Select > Deslect Layers, v sau d nhn vo nt Play trong Animation Palette xem trc
hiu ng ng.
Hnh ng vn hi "c tng" mt cht, cho nn bn s sa cha n vi nhng k nng bn hc
phn trn ca bi hc ny.
4. Chn frame 2 v sau Shift-click frame 3 ch c hai frame mi. Sau chn Copy Frames t
menu Animation Palette.

5. Chn frame 4 v chn Paste Frames trong menu Animation Palette m hp thoi Paste Frame v
chn Paste After Selection. Sau nhn OK

6. Nhn chut vo frame 5, n l frame duy nht c chn, ko n sang pha tay phi cho n
thnh frame cui cng.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

31

Chng 18: To hnh ng cho trang web

Photoshop CS

7. Vi frame 6 c chn, gi phm Shift v nhp vo frame 1 chn tt c cc frame v sau chn
0.2 t gi cho hnh. Chn File > Save

Xem trc v lu li hnh ng Vector Mask

Nu bn mun xem trc hnh ng hy dng nhng cch nh hc cc phn trn nh l dng nt
Play, Preview in Browser.
lu li hnh ng bn phi vo File > Save Optimized As v chn nh dng l Gif.
To hnh ng vi Layer Mask
Trong phn cui cng ca bi hc ny, bn s to ra hnh ui con c heo nh ln hp xung bin.
Hnh m bn s lm vic trong phn ny ch c 3 layer: mt layer mt bin nh l hnh nn trong cnh,
mt ci ui con c voi v mt layer gradient chng ti to cho bn trong Photoshop.
To v p dng Layer Mask
Trong bi hc ny, bn s to mt layer mask da trn s khc nhau v tnh trong sut ca gradient v
sau p dng mt n vo hnh ui con c voi. Bn thn Gradient khng c chc nng g trong kt
qu cui cng, nhng bn s s dng mt n m n to ra p dng cho mt layer khc.
Trc kh bt u, hy quan st tht k hnh ui con c voi trong ca s hnh nh sau ny bn c
th so sanh kt qu v hnh gc.
1. Chn File > Open v m ti liu Whale.psd trong th mc Lesson18
2. Trong Layer Palette, nhp chut vo biu tng con mt cho layer Gradient hin th n.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

32

Chng 18: To hnh ng cho trang web

Photoshop CS

3. Chn layer Gradient v chn Layer > Add Layer Mask > From Transparency.
Bn hy ch n biu tng thu nh ca layer mi va c to trn Layer Palette - Layer Gradient,
cho bn thy vng trong sut c th hin bng mu trng, v vng c che bi mt n l vng
mu en.
4. Nhp vo con mt ln na n Layer Gradient
5. Nhp vo biu tng mt xch gia hnh biu tng ca layer Gradient v mt n, do vy bn c th
s dng mt n ring r vi layer Gradient.

6. Chn biu tng thu nh ca mt n (bn tay phi) v ko n n layer Tail .

Nu bn vn cn nh ui con c voi khi hnh gc nh th no trc khi bn p dng mt n, by

gi bn c th nhn ra s khc bit trn ca s hnh nh. Phn di ca chic ui m dn nh l n
chm vo trong nc.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

33

Chng 18: To hnh ng cho trang web

Photoshop CS

To hnh ng ca mt tm hnh trong Layer Mask

Ci hay ca cch ny l cho d bn c thay i v tr ca i tng th mt n vn nm ch c.
phn ny, bn s bt u mt giai on mi ca qu trnh to hnh ng bng cch di chuyn hnh
chic ui con c voi. Khi bn di chuyn, mt n Gradient s khng thay i, cho nn n s c hiu
ng tng t cho ton b ui con c heo ngay c khi n tri ln hoc chm xung nc.
1. Trong Animation Palette, nhp vo nt Duplicate Current Frame.
2. Chn cng c Move v trn thanh tu bin chn Layer Selection

4. Trong ca s hnh nh, ko hnh chic ui xung di sao cho n gn nh bin mt khi mt
nc.

4. Trong Animation Palette, ko frame th 2 sang bn tri n tr thnh frame 1

iu chnh hiu ng ng ca Layer Mask
Tt c nhng g bn cn phi lm l lm cho chuyn ng ca n mn hn bng cch thm nhng
frame trung gian v thi gian gia cc frame. Chc by gi bn kh quen thuc vi qu trnh ny
ri, do vy bn c th t lm c. Nhng chng ti thm mt cht thay i mi m trong phn ny,
do vy bn cng nn xem qua bit thm.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

34

Chng 18: To hnh ng cho trang web

Photoshop CS

1. Trong Animation Palette, chn frame 1 v sau chn Tween trong menu ca Animation Palette.
Hoc chn nt Tween phia di ca Palette.
2. Trong hp thoi Tween, chn Next Frame v g 3 cho Frame To Add. nh du vo hp kim All
Layers v Position v sau nhn OK.
3. Trong Animation Palette, Shift-click vo frame 2, 3, v 4.
4. Trong menu Animation Palette, chn Copy Frames.
5. Chn frame 5 sau chn Paste Frames trong menu Animation Palette.
6. Trong hp thoi Paste Frame, chn Paste After Selection v nhn OK.
7. Trong menu Animation Palette, chn Reverse Frames.
By gi tt c cc frame cho bn thy chuyn ng ca chic ui kh l mn mng.
8. Chn tng cng 8 frame v chn 0.2 trong menu hn gi t thi gian cho tt c cc frame.
Bn kt thc bi hc v to hnh ng trong ImageReady.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

35

Chng 18: To hnh ng cho trang web

Photoshop CS

Cu hi n tp
1. Miu t mt cch n gin to hnh ng?
2. Trong hon cnh no bn c th Tween v khng th Tween frame?
3. Bn lm th no ti u ho mt tm hnh ng?
4. Ti u ho hnh ng bao gm nhng g?
5. Frame Disposal l g? phng php loi b frame no bn thng hay dng nht?
6. Bn lm cch g chnh sa mt frame hnh ng ang c?
7. nh dng file no bn c th dng cho hnh ng?
p n
1. Mt cch n gin to hnh ng l bt u vi mt hnh c nhiu layer trong Photoshop. S
dng nt Duplicate Current Frame trong Animation Palette to mt frame mi, sau s dng
Layer Palette thay i v tr, mc Opacity hoc hiu ng ca mt trong nhng frame c chn.
Sau , to ra nhng frame trung gian nm gia hai frame u v cui bng cch s dng nt
Duplicate Current Frame hoc s dng lnh Tween lm t ng.
2. Bn c th hng dn ImageReady Tween nhng frame trung gian nm gia hai layer k nhau.
Tweening c th thay i mc Opacity ca Layer hoc v tr gia hai frame, hoc thm layer mi vo
chui cc frame. Bn khng th Tween hai frame khng nm k nhau.
3. Nhp vo nt Show Option trong Optimize Palette, v sau chn File > Save
Optimized ti u ho hnh ng. Chn Optimized Animation t menu Animation Palette tin hnh
ti u ho cho nhng hnh ng c th bao gm loi b nhng Pixel d v ct frame da trn
Bounding Box.
4. Khi bn ti u ho hnh Gif, ImageReady cng to ra cc Palette l AdAnimation Palettetive,
Perceptual v Selective cho tm hnh, da trn tt c cc frame ca n. ImageReady p dng mt k
thut ho sc c bit m bo rng nhng mu mu ho sc c tnh nht qun trong tt c cc
frame trnh tnh trng b "c git" khi xem hnh. ImageReady cng ti u ho frame do vy ch
nhng vng thay i t frame ny sang frame khc c bao gm, n s gip gim dung lng ca
tm hnh ng rt nhiu.

www.vietphotoshop.com - Dch bi B tc Monte Cristo

36

Chng 18: To hnh ng cho trang web

Photoshop CS

5. Phng php loi b frame quyt nh khi no ti loi b mt frame c chn trc khi cho hin th
frame k tip khi tm hnh ng c nn trong sut. La chn ny xc nh khi no frame c chn
xut hin xuyn qua nhng vng trong sut ca frame k tip. Ni chung, la chn Automatic ph hp
vi hu ht cc hnh ng. Tu chn ny la chn phng php loi b frame da trn s c hoc
vng mt tnh trong sut ca frame k tip, v loi b frame hin ti nu frame k tip c cha layer
trong sut.
6. chnh sa mt frame ng ang c, bn u tin phi chn frame bng cch nhp chut vo
biu tng ca frame trong Animation Palette hoc tm n frame bng cch s dng nhng nt
FImageReadyst Frame, Select Previous Frame, hoc Select Next Frame trong Animation Palette hoc
Layer Palette. Sau chnh sa layer trong tm hnh cp nht ni dung cho frame c chn.
7. Hnh ng phi c lu li di nh dng Gif hoc QuickTime movie. Bn khng th to hnh
ng c nh dng l JPEG hoc PNG.
www.vietphotoshop.com - Dch bi B tc Monte Cristo
|Trang ch| |Photoshop CS| |Chng 19|

www.vietphotoshop.com - Dch bi B tc Monte Cristo

37