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 Bt u

Photoshop CS

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

Photoshop CS

2. Trong Layer Comps Palette, nhp chut chn nt Create New Layer Comp c ang c chn khng trc khi bn nhn OK.

3. Trong hp thoi New Layer Comp g DoLayer Palettehin 1 v sau kim tra xem la chn Visibility 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 chn. xut hin trong vung cho bn bit rng y l Layer Comp ang c

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 Palettehin 1 b n i v layer DoLayer Palettehine 2 ang c hin th.

cho

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

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 F: Nt Tween. G: To mt frame mi. H: Xo frame

Photoshop CS

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 Thit lp v xem trc thi gian ca hnh ng

Photoshop CS

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 Thit lp v tr ca layer v trong sut

Photoshop CS

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 Tweening v tr v mc Opacity ca cc layer

Photoshop CS

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

Photoshop CS

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

21

Chng 18: To hnh ng cho trang web Tweening frames

Photoshop CS

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

Photoshop CS

Cho la chn Tween With, chn Next Frame Frame to Add, g vo l 2 Di Layer, chn All Layers Di Parameters, chn Effects.

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 Xem hnh Gif c ti u ho

Photoshop CS

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 To hiu ng ng bng cch thay i v tr trong mt layer vector mask

Photoshop CS

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

Photoshop CS

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

30

Chng 18: To hnh ng cho trang web 2. Trong Animation Palette, chn Forever trong menu x xung.

Photoshop CS

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 3. Chn layer Gradient v chn Layer > Add Layer Mask > From Transparency.

Photoshop CS

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 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

Photoshop CS

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