Chng 17: To hiu ng Rollover 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

Hiu ng Rollover lm thay i mt vng ca tm hnh trn trang web thnh mt hnh khc, mu khc
hoc dng khc khi ngi dng di chut qua vng . Hiu ng Rollover lm cho trang web ca bn
thn thin hn v do gip bn t c mc tiu cho trang web ca mnh bng cch thm nhng
hiu ng sinh ng vo ng lin kt hoc nhng thnh phn khc ca trang.
Trong chng ny bn s hc c nhng iu sau:

Chia mt Slice thnh nhiu slice nh hn v bng nhau

Nhm cc Slice c chn vo mt bng

p dng hiu ng Wrap Text cho mt layer ch.

Xc nh trng thi Rollover cho cc layer, layer style v layer ch c Wrap.

To ra cc trng thi Over, Down v Selected

Xc nh nhng s kt hp khc nhau gia nhng layer c n v hin ca tng tri thi
Rollover.

To ra trang HTML cha nhng hnh c Slice trong mt bng.

Chng ny s ko di khong 60 pht v phi c lm trong Adobe ImageReady.

V hiu ng Rollover.
Rollover l mt dng hiu ng kh ph bin hin nay, n c th thay i giao din ca mt trang web

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

m khng cn phi a ngi c sang m trang web khc. Khi ngi dng di chut qua mt im
c xc nh trc trn trang web, th im s thay i sang mt trng thi hon ton khc.
Thng th hiu ng ny m ch rng vng c thay i l mt dng lnh, khi nhp chut vo
s c mt iu g xy ra k tip nh l m mt trang mi, vo mt form v.v..
Hin nay c mt vi hiu ng Rollover ph bin, nh l khi bn di chut qua mt nt no n s thay
i hoc khi bn nhn vo nt , nt s thay i hnh dng ca n.
Hiu ng R hoc cc trng thi biu th nhng iu kin khc nhau trong Layer Palette. Nhng iu
kin ny c th bao hm s n hin ca mt layer, v tr layer, Layer Style v mt vi nh dng khc.
Bi hc ny s hng dn cho bn thy, R c th gip bn nh th no.
Ch : theo c bi hc ny bn phi c kin thc c bn v Slice m bn hc c t chng
15 hoc do bn bit cch s dng Slice theo kinh nghim ca mnh.
Bt u
Bn s bt u bi hc bng cch xem mt v d ca mt trang HTML m bn s to da trn mt
hnh .psd. Mt vi vng ca tm hnh phn ng li vi nhng di chuyn chut ca bn. Vid mt vi
vng ca tm hnh thay i giao din khi bn ch con tr qua n hoc khi bn nhn vo nhng im .
1. Tm n th mc Lesson 17 v nhp p vo file 17End.html m n ra trong trnh duyt web ca
bn.
2. Di chuyn con tr qua trang web , c bit l qua vng bn tri. Ch quan st:

Nhng thay i ca tm hnh

Thay i hnh con tr (t mi tn thnh hnh bn tay)

3. Nhn vo tng nut trn menu pha bn tay tri ca tm hnh, ch n nhng phn ng xy ra
trn trang web.
Ch : Trang ny ch mang ngha tng trng do vy khng c ng link tht s, nn khi bn nhn
vo cc nt s khng m ra trang khc. Tuy nhin, mt vi nt trong c th to ra nhng thay i
trn trang web. bit thm thng tin v Slice v lin kt n mt a ch URL cho mt trang web, c
thm chng 15.
4. ng trnh duyt li khi bn xem xong trang web.
To trng thi Rollover
Trng thi Rollover c t tn theo s kin, v d nh l khi bn di hoc nhn chut vo mt vng

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

ca mt tm hnh, n s to ra nhng thay i trn tm hnh hoc mt phn ca tm hnh. Tt c

nhng trng thi Rollover ca ImageReady c miu t phn di y "Cc trng thi Rollover
trong ImageReady".
Dng R t xa (remote R) s to ra thay i mt vng khc khi mt vng no b kch hot. V d
nh khi bn di chut qua mt nt no trn trang web, v trn banner c ch hin ra. Ni nm na,
n to ra thay i khng trn bn thn nt m trn mt i tng khc. Ch c User Slice mi c
trng thi Rollover. Tuy nhin, bn c th chn Slices > Promote bin mt slice t ng thnh mt
User Slice, v sau thm hiu ng R vo slice .
Cc trng thi Rollover trong ImageReady
ImageReady t ng ch nh mt trong nhng trng thi R sau y v mt slice bn to:
Over Activates s lm thay i hnh khi ngi dng di chut qua mt slice hoc mt bn nh
(image map) nhng cha nhn chut.
Down Activates lm thay i hnh nh khi ngi dng nhn chut trn mt nt ca mt slice hoc mt
vng bn nh. Trng thi ny xut hin ngay sau khi ngi dng nhn vo nt .
Click Activates lm thay i hnh nh khi ngi dng nhp chut vo mt slice hoc mt vng bn
nh. Trng thi s xut hin cho n khi ngi dng di chut ra khi vng R.
Ch : nhng trnh duyt web khc nhau, hoc phin bn khc nhau, c th x l chut tri v nhp
p khc nhau.
Custom Activate lm thay i tn c th ca mt tm hnh khi m nhng tc ng ca ngi dng
c nh dng trong on m JavaScript km tho. (Bn phi to ra on m JavaScript v thm n
vo trang HTML ca bn to ra hiu ng Custome Rollover)
None Preserve gi li trng thi hin ti ca hnh dng sau ny, nhng li khng cung cp kt qu
u ra khi ti liu c lu li di dng trang web.
Selected Activates kch hot trng thi R khi ngi dng nhp chut ln slice hoc vng bn nh.
Trng thi s xut hin cho n khi ngi dng kch hot mt trng thi R khc v mt trng thi R c
th xut hin trong khi trng thi Selected ang c kch hot.
Out Activate kch hot mt tm hnh khi ngi dng di chut ra khi mt slice hoc mt vng bn
nh. (y chnh l trng thi Normal State)
Up Activate kch hot thay i mt tm hnh khi ngi dng th chut trn mt slice hoc mt vng
bn nh.
Thit lp khng gian lm vic cho bi hc ny
Nu bn hon thnh nhng chng khc trong cun sch ny, th bn hn c nhiu kinh nghim
trong vic thit lp khng gian lm vic. ImageReady c mt vi mi trng lm vic c thit lp sn

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

m bn c th s dng chng cho tng cng vic c th ca mnh, v chc chn bn c th dng mt
trong s bt u bi hc ny. Nhng bn cng c th to ra nhng mi trng lm vic ph hp
vi bn v lu li di dng "mi trng lm vic tu bin", v cng l nhng g chng ta chun b
lm.
1. Khi ng ImageReady. Nu nhng Palette khng nm nhng v tr nh mc nh, chn Window
> Workspace > Default Palette Location.
2. Ko nhm pallete Web Content sang pha bn tri ca Info Palette, trn cng ca vng lm vic.
3. ng Info Palette v Color Palette li. Hoc bn c th ng chng bng cch chn Info v Color
trong menu View.
4. Ko nhm Layer Palette ln pha trn bn phi ca vng lm vic t n ngay bn cnh nhm
palette Web Content (ni m bn va ng Info Palette li)
5. Trong nhm Slice Palette, chn th Talbe mang n ra pha trc v sau nhp vo mi tn hai
u th m rng ton b Palette. Sau ko xung pha di, bn phi ca vng lm vic.

6. Ko gc pha di bn phi ca Web Content v Layer Palette tn dng ht nhng khong trng
nm di n.

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

7. Chn Window > Workspace > Save Workspace v t tn n l 17_Rollover trong hp thoi Save
Workspace.
Thit lp tu bin vng lm vic cho bi hc
Mt cng on chun b quan trong khc na l bn phi thit lp ng cch vng lm vic ca
ImageReady. Mt vi trong s khng th thit lp tr khi ti liu phi c m ra, cho nn bn s
bt u vi vic m ti liu trc.
1. Chn File > Open
2. Trong hp thoi Open bn tm n th mc Lesson17
3. Chn file 17Start.psd v nhp Open.
4. Nu cn, nh li kch thc ca s anh v phong to hoc thu nh bn c th nhn thy ton b
tm hnh.
5. M View Menu v menu ph ca n v chc chn nhng lnh sau c chn hoc chn chng nu
cha:

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

Chng 17: To hiu ng Rollover cho trang web

Extras

Snap

Guides v Slices trong menu ph Snap To

Guides v Slices trong menu ph Show

Photoshop CS

To hiu Rollover vi ch c un cong

Mt iu kh th v m ImageReady c th lm vi ch l kh nng un cong ch. V d, bn c th
lm cho ch nhn ging nh n c to ra bi hiu ng khng gian 3 chiu.
Bn s kt hp ch c un cong vi mt trng thi Rollover. V kt qu, ch c un cong
s xut hin trong ti liu HTML khi ngi dng tin hnh mt thao tc no .
1. Chn cng c Slice

v ko mt ng hnh vung bao quanh ch "Museo Arte" s dng ng

guide lm ch dn cho ng bin ca Slice dnh vo n.

2. Trong Web Content Palette, nhp p vo tn c t ng t ca User Slice (17Start_02)

chn n. G ch Museo Arte t li tn cho n v nhn Enter.

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

Chng 17: To hiu ng Rollover cho trang web

3. Chn nt Creat Rollover State

Photoshop CS

. Mt trng thi Over s xut hin bn di Slice Museo Arte trong

Web Content Palette.

4. Trong Layer Palette, chn layer Museo Arte.

5. Trong hp cng c, chn Type Tool hin th tu chn text trn thnh tu bin cng c v chn nt
Create Warrped Text

Ch : Bn khng cn phi s dng cng c Type hoc chn ch. Hiu ng un cong lun lun p
dng cho ton b layer ch ch khng cho tng t hoc ch n l.
6. Chn Fisheye trong menu x ra Style v ko thanh trt Bend n 30%. hai thanh trt cn li l
Vertical v Horizontal Distortion l 0%, nhn OK. Bn s thy ch Museo Arte c un cong i.

7. Trong Web Content Palette, nhn Normal b chn trng thi R hin th trn ca s hnh nh.

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Ch : Un cng ch khng ging nh vit ch theo path - l mt tnh nng ca Photoshop. bit
thm thng tin v vit ch theo qu o nh sn xem Photoshop HeLayer Palette. Tnh nng ny
khng c trong ImageReady.
Xem trc hiu ng Rollover
Mc d kt qu cui cng ca bi hc ny l mt trang web, bn c th kim tra nhng tng tc ca
Slice trong ImageReady. Bn s thot ra khi ch lm vic v vo ch xem trc. Trong khi bn
xem trc, mt vi palette, nh l Layer palette b n bi v bn khng th chn layer hoc to ra
nhng chnh sa trong nhng Palette ny khi cn ang trong ch xem trc.
1. Trong Layer Palette, nhn vo mt khong trng b chn layer Meseo Art.
2. Trong hp cng c, u tin chn nt Toggle Slices Visibility hoc nhn nt Q n ng bin ca
slice v loi b nhng ng "ngon ngho" ca tm hnh.
3. Chn nt Preview Document

hoc nhn Y kch hot ch Preview.

Ch : Nhng ng guide vn ng hin th trong ca s hnh nh. Bn c th n hoc hin n

bng cch chn View > Show > Guides, hoc vi t hp phm Ctrl+;. Nu bn mun n chng, th bn
phi hin th chng sau khi bn xem xong bi v bn s cn n trong phn tip theo.
4. Di chuyn con tr qua ch Museo Arte trong ca s hnh nh, v sau di chuyn n ra ngoi
bn c th thy c hiu ng R ca ch b un cong. Bn hy ch n hiu ng m v tr ca con
tr c trong vng c t sng Web Content Palette. Khi bn di chuyn con tr qua v ra ngoi slice
Museo Arte ca ca s hnh, la chn Slice trong Web Conntent Palette thay i t Normal thnh
Meseo Arte Over state.
5. Nhp vo nt Preview Document and Toggle Slices Visibility ln na b chn chng, hoc nhn
Q v Y nu bn mun s dng phm tt.
ng bin ca slice v nhng ng ngon ngho xut hin li trn ca s hnh nh.
6. Trong Web Content Palette, chn Normal v nhp vo mi tn trn slice Museo Arte n danh
sch R.

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Bn hy c gng t chc Web Content v layer Palette cng gn gng cng tt khi bn lm vic
vi cc hiu ng R. Bng cch bn s mc t li hn, bn khng phi ko ln ko xung nhiu ln
v bn c th tm v tp trung vo nhng phn cn nhiu s ch hn. Trong bi hc ny, chng ti
s thng xuyn nhc bn ng nhng thnh phn c nhm vi nhau khi bn hon thnh mt tc
v vi chng, cho d n khng nh hng g n kt qu cui cng ca bi hc.
Trong bi hc ny, bn s khng cn thm ng lin kt vo cho slice Museo Arte bi v vic bn
c th t lm sau ny, nu bn mun. Hn na, cch lm ny c ch ra rt r rng trong chng
15 "To ng lin kt trong mt tm hnh"
To v chia mt slice xy dng mt bng
Slice sau ny s tr thnh ct ca bng HTML. Bn c th s dng tnh nng ci tin ca bng v mt
Table Palette mi c trong ImageReady CS to bng nm trong bng HTML ca trang web. N s
xut ra nhng bng c code HTML gn hn v d qun l hn v tt nhin s d dng hn cho bn khi
lm vic vi slice.
1. Chn cng c Slice

trong hp cng c.

2. Ko to mt slice mi, bt u t vng giao nhau ca hai ng guide dc v ngang ngay bn

trn ch "About Museo Arte" v kt thc ng guide bn di ch "Contact" v gp ng bin
bn tri.

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

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

3. Chn View > Show > Guides loi b nhng im nh du v ng guide.

4. Chn Slices > Divide Slice m hp thoi Divide Slice.
5. Di Divide Slice Horizontally Into g 5 trong la chn Slices Down, Evenly Spaced. Nhn OK.

6. Vi nm slice va vn c chn, nhn vo nt Group Slices Into Table di cng ca Web

Content Palette.
Bn hy ch n 5 slice by gi c gp li di mt bng mi tn l Talbe 02 trong Web
Content Palette v do mu ca nhng ng bin thay i trong ca s hnh nh, ch ra rng n
l mt bng. Slice Museo Arte vn ngoi bng.
t li tn v ti sp xp slice
Nh bn c th oan ra c, bn c th thay i th t ca slice trong Web Content Palette ging
nh khi bn thay i th t ca cc layer trong Layer Palette vy. y bao gm vic ti sp xp slice
trong mt bng c nh dng, nh l bng bn va to cho Mune ca tm hnh.
1. Trong Web Content Palette, nhp p vo tn ca Table_02 chn n v g ch Menu Slice
t li tn cho n. Nhn Enter.
2. Chn ct u tin (slice) c gp di bng Menu Slice, v ch rng mt vng la chn c mu
sc khc xut hin xung quanh nt Contact

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

10

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

3. Nhp p vo tn ca slice c chn, g Contact t li tn cho n. Nhn Enter.

4. Lp li cc bc trn t li tn cho 4 slice cn li trong bng, g ch Member, Exhibits, Tour
hoc About cho tng slice mt.
5. Chn slice About trong bng v ko n ln trn cng ca bng nm di Nested Slice, bn phi cn
thn gi cho slice c chn, nu khng bn s xo slice khi bng.
6. Chn v ko mt slice khc th t ca n trong Web Content Palette ph hp vi th t bn thy
trong ca s hnh nh v theo th t sau: About, Tour, Exhibits, Members, v Contact.

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

11

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

7. Nhn Normal.
To hiu ng Rollover bng cch n hin layer
C l cch thng dng nht to hiu ng ng cho mt hnh l lun phin n hoc hin nhng layer
khc nhau.
Trong phn thit k ny, phin bn gc ca hnh chnh c bao ph bi mt mu c thay v phin
bn c bao ph bi mt mu xanh m nh bn thy trong trng thi Normal. Mt vi phn ca
phin bn gc c copy sang ti liu ny, nm trn layer Background ca phin bn mu xanh.
Nhng phn ca phin bn gc kt hp hon ho vi tm hnh mu xanh, cho nn hin thn n lm
sng vng ca tm hnh bng cch loi b vng mu xanh.
1. Trong Web Content Palette, chn Slice About, v nhn vo nt Create Rollover State di cng
ca Palette to mt trng thi Over mi cho slice .
2. Trong Layer palette, m tp hp layer Menu Color Bkgds, v nhp vo biu tng con mt

trn

layer Cell 1.
Hnh nn ng sau ch Museo Arte by gi nhn sng sa hn mt cht.

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

12

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

3. Trong Web Content Palette, nhp Normal v nhp vo mi tn bn cnh Slice About ng ni
dung ca n li.
Biu tng con mt bin mt t layer Cell 1, v nt About trong ca s hnh nh tr li trng thi mt
mu xanh n sc.
4. Lp li bc 1-2, to trng thi R cho nhng slice cn li:

Chn Slice Tour, to mt R mi, v hin th layer Cell 2.

Chn Slice Exhibits, to mt R mi, v hin th layer Cell 3

Chn Slice Member, to mt R mi, v hin th layer Cell 4

Chn Slice Contact, to mt R mi, v hin th layer Cell 5

5. n tt c nhng trng thi R ca slice bng cch nhn vo mi tn tng slice.

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

13

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

6. Trong Layer palette, ng tp hp layer Menu Colored Bkgds.

Xem trc hiu ng Rollover
By gi bn s kim tra hiu ng Rollover bng cch xem trc hnh nh.
1. Nhp vo mt vng trng bt k trong Layer Palette chc chn rng bn khng chn layer no.
Sau chn nt Preview Document

trong hp cng c.

Ch : ng chn nt Toggle Slices Visibility trong ln ny, do vy nhng ng bin ca slice v

nhng vung con vn c hin th khi bn xem trc.
2. Di con tr t t ln v xung nhng nt khc nhau trong bng v ch nhng im sau:

S thay i mu hnh nn khi con tr di chuy qua nhng nt khc nhau

Th Active Slice xut hin trong tp hp biu tng ca s hnh nh v danh sch cc slice
trong Web Content Palette, v c nhng vung gn vi biu tng con mt.

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

14

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

3. Nhn vo nt Preview Document ln na thot ra.

4. Chn File > Save.
V cc biu tng slice
Nhng biu tng ca slice hoc tn hiu ca n xut hin trong Web Content Palette v trong ca s
hnh nh c th l nhng du hiu nhc nh rt c ch nu bn hiu c chng. Mt slice c th c
bao nhiu tn hiu cng c nu ph hp. Nhng tn hiu sau y xut hin di mi mt trng thi.

S lng cc slice (S c m theo th t t tri sang v t trn xung).

Trng thi Rollover c kch hot ang nm trong trong slice ny.

Slice c cha hnh

Slice khng cha hnh

Slice da trn layer (n c to to t layer)

Slice bao gm t nht mt hiu ng Rollover.

Slice l mt tp hp bng.

Slice gy ra thay i mt slice khc

Slice l ch thay i ca mt slice khc. Ngc li ca ci trn l ngun, th ci ny l i

tng b thay i.

Slice c lin kt vi mt slice khc (cho mc ch ti u ho)

To mt trng thi Rollover bng cch s dng Layer Style

Tt c nhng hiu ng Rollover bn to cho n by gi u l Over State, n c nh hng n s

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

15

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

xut hin ca hnh nh khi con tr di qua mt slice. Mt vi s tc ng ca chut khc cng c th to
ra hiu ng Rollover. Bn c th ch nh hn mt trng thi Rollover cho mt slice, c nhiu hiu
ng xy ra trn mn hnh ph thuc vo nhng g ngi dng s lm, nh l nhp chut, chn mt
slice c th.
1. Trong Layer Palette, nhp vo mi tn m rng tp hp Button Text. Nu cn, nhp vo mi tn
m rng layer ch "About Museo Arte" nm trong tp hp , bn c th nhn thy hiu ng
nm trong layer .
2. Trong Web Content Palette, chn About slice trong bng Menu Slices.
3. Chn nt Create Rollover State pha di ca palette. Mt trng thi Rollover mi c tn l Down
c chn.
4. Nhp p vo trng thi Rollover Down m hp thoi Rollover State Options.
5. Chn tu chn Click v sau nhn Ok ng hp thoi li.

6. Trong Layer Palette, nhp vo vung c biu tng con mt cho Effects nm di layer ch
"About Moseo Arte".
Mt mu vng nht s xut hin bao quanh t About Museo Arte trong hnh.

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

16

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

7. Nhp vo trng thi Normal trn cng ca Web Content Palette v sau ng About Slice n
nhng trng thi Rollover i. Sau , trong Layer Palette, ng "About Museo Arte" layer n danh
sch cc hiu ng Effects.

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

17

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Hon thin v t li tn cho nt v xem trc hiu ng Rollover

Bn lun lun nn xem trc hiu ng Rollover trong ch Preview kim tra trc khi tip tc.
1. S dng nhng k nng hc trong phn trn "to mt trng thi Rollover khc bng cch s dng
Layer Style", to trng thi Click Rollover cho 4 slice cn li trong bng Menu Slice. Khi hon thnh,
ch Tour s to sng khi ngi dng nhp chut vo nt Tour, nt Exhibit cng vy v.v..
2. Trong Layer Palette, nhp vo mi tn ng tp hp layer Button Text li, sau nhp vo mt
khong trng trong Layer Palette br chn ton b layer.
3. Chn Normal trong Web Content Palette.
4. Trong hp cng c, chn nt Toggle Slices Visibility

v sau l nt Preview Document

5. Di chuyn con tr t t qua ca s hnh nh, tp trung ch vo nhng thay i v mu sc hnh

nn ca trng thi Over.
6. Nhp vo tng nt mt v ch hiu ng to sng vn c nhn thy trn ch cho n khi bn di
chuyn con chut ra ngoi vng nt.
Bn cng nn ch rng sau khi nhp chut, mu nn sng hn s bin mt, li mt nt vi tng
mu ti hn.
7. Nhp vo nt Toggle Slices Visibility v nt Preview Document tr li ch lm vic bnh
thng.
Bc chun b lm vic vi nhiu hiu ng Rollover
Bn c th to ra mt tp hp cho slice, nh l bn lm vi layer. Nhng tp hp slice s thu gn danh
sch trong Web Content Palette, gip bn tm nhanh hn v chnh xc hn trong mt dy phc tp cc
hiu ng Rollover v slice.
1. Trong Web Content Palette, chc chn rng trng thi Normal ang c chn hoc chn n by
gi, sau chn New Slice Set

pha di ca Palette.

2. Nhp p vo tn ca tp hp slice va to chn n v g ch Info Slice t li tn cho n.

Nhn Enter.
C gi nguyn tp hp slice Info Slices c chn trong Web Content Palette.
3. Trong Layer Palette, lm nhng vic sau:

Nhp vo mi tn trong tp hp layer Info Panelss m rng n

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

18

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Chn layer Exhibit_info.

Thm mt slice mi v mt tp hp Slice

Bn lun lun c th ko cc slice ra ngoi hoc vo trong mt tp hp slice trong Web Content
Palette, nh l bn ko layer ra hoc vo tp hp layer vy. Nhng nu bn c chun b t trc,
bn c th trnh c nhiu rc ri bng cch t ng t slice mi vo mt tp hp slice c th no
khi bn to chng. Phn ny s hng dn bn cch lm.
1. Trong Layer Palette, nhn vo biu tng con mt ca layer Exhibit_info trong tp hp layer Info
Panelss do hnh "Spanish Master" s c hin th trong ca s hnh nh.
Layer c hin th trong ca s hnh nh.
2. Chn Select > Load Selection > Exhibit_info Transparency.
Mt vng kin b s xut hin ch cho bn bit layer ang c chn.
3. Chn Select > Create Slice From Selection
Mt ng vin xut hin ch ra rng layer by gi cng l mt Slice, nhng vng la chn cng
vn c nhn thy.

4. Chn Select > Deselect hoc nhn Ctrl-D.

5. Trong Web Content Palette, m rng tp hp Info Slice bng cch nhn vo mi tn cch tn ca
n.
Bi v Info Slice c chn trong Web Content Palette khi bn to slice, cho nn slice mi s xut
hin trong tp hp slice.

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

19

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

6. Nhp p vo slice mi (17Start_11) v g Exhibit Info t tn cho n. Nhn Enter.

Sa cha sai st khi to hiu ng Rollover
Khi to ra cc hiu ng Rollover i hi s tp trung cao n cc chi tit trong mt mi trng c th
c rt nhiu nhng la chn. Mt li thng gp nht l khi bn thay i trng thi Normal khng nh
d nh.
1. Trong Web Content Palette, chn Normal
Bn s thy rng phn trc c mt vn l layer Exhibit_info by gi ang c hin th trng
thi Normal. Nhng ci ny c th sa cha rt d dng.
2. Vi trng thi Normal vn ang c chn, nhn vo biu tng con mt trong Layer Palette ca
layer Exhibit Info n n i.
3. Kim tra xem n sa c li trn chua bng cch chn mt trng thi Rollover trong bt c
slice no (bn s phi m rng tp hp slice ra thy nhng hiu ng Rollover n), v nhn vo
Normal ln na.
By gi hnh ca bn xut hin ng cch ri!
To mt slice t mt layer n
Trong phn ny, bn s to mt slice t layer Member_info, qu trnh lm ging nh khi bn lm vi
slice Exhibits Info - nhng cch sau y s hiu qu hn cch trc. Bn c th to mt slice t mt
layer n. Bi v n s khng thay i cch nhn trong trng thi Normal, do vy bn khng cn phi
quay li sa cha trng thi Normal khi bn hon thnh.
1. Trong Layer Palette, chn layer Member_Info nhng ng nhp vo con mt hin th n.

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

20

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

2. Trong Web Content Palette, chn tp hp slice Info Slices

3. Chn Select > Load Selection > Member_info Transparency

trung tm ca ca s hnh nh, ng vin kin b xut layer n cho bn bit rng layer ang
c chn, cho d bn khng thy thay i no hnh ht.
4. Chn Select > Create Slice From Selection.
5. Chn Select > Deselect hoc nhn Ctrl-D b chn.

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

21

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

6. Trong Web Content Palette, nhp p vo slice tn l (17Start_14) v g ch Member Info t li

tn cho slice. Nhn Enter.
7. Nhp chn Normal.
Bi v bn khng cho hin th layer Member_Info trong qu trnh lm, cho nn trng thi Normal vn
nhn nh c v tt nhin bn khng cn phi chnh sa n khi bn phi lm vi slice Exhibit Info.
To ra hiu ng Rollover t xa
Hiu ng Rollover t xa l s kt hp ca mt slice ny vi mt slice khc, do vy khi mt tc ng
no ca ngi dng vo slice ny s gy ra thay i v hnh nh hoc hiu ng slice kia. cho d
hiu hn ti t tn cho slice b thay i l slice ch v slice gy ra thay i da trn tc ng ca
ngi dng l slice Ngun.
Vi hiu ng Rollover t xa, bn khng th ch n gin thay i s n hin ca mt layer c. M
bn phi to ra mi lin h gia hai slice. Trong Photoshop CS tnh nng Pickwick vi kh nng d
s dng v trc quan c th gip bn d dng lm c vic ny.
1. Trong Web Content Palette, lm nhng iu sau:

Trong bng Menu Slices, m rng tp hp slice Exhibits v Members bn c th nhn thy
trng thi Rollover Over v Click c t nm di nhau mi mt slice.

Chn trng thi Rollover Click cho slice Exhibit.

2. Trong Layer Palette, chn layer Exhibit_info v nhp vo vung c biu tng con mt hin th
layer ny.

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

22

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

3. Trong Web Content Palette, ko Pickwick t trng thi Rollover Click ca slice Exhibits sang layer
Exhibit_info trong ca s hnh, do ng bin ca slice s c hin sng vi mt mu ti.

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

23

Chng 17: To hiu ng Rollover cho trang web

Khi bn th chut, ch n mt th tn mi

Photoshop CS

trong tp hp biu tng cho slice Exhibit ca s

hnh nh v trong Web Content Palette. Bn cng ti th tn

xut hin gn slice Exhibit Info.

Ch : Thay v ko Pickwick t slice ch trong ca s hnh nh, bn c th ko ti slice trong Web

Content Palette. C hai cch u c kt qu ging nhau.
4. Chn Normal trong Web Content Palette, v nhp vo mi tn trong slice Exhibits ng nhng
trng thi Rollover nm di n li.
5. Chn trng thi Rollover Click cho slice Member.
6. Lp li bc 2-4 nhng s dng slice Membes Info nh l ch cho hiu ng Rollover t xa.
Cho hin th layer v ko Pickwick t trng thi Click t hnh "Members Discount". V hy nh l
chn trng thi Normal sau cng.
7. Trong Layer Palette, nhp vo mi tn ng tp hp layer Info Panels.
Nu bn khng may th Pickwick vo mt slice khc hoc sau ny bn quyt nh khng mun s
dng hiu ng Rollover t xa na, bn c th loi b n. Bn chn trng thi Rollover no m mnh
mun chnh sa, v d l mt trng thi Over hoc Down nm di nhng layer Ngun. Sau tm th
tn Remote

gia biu tng con mt v tn ca slice ngun trong Web Content Palette. Nhp vo

th tn Remote xo n, sau khi xo bn xo i mi lin h gia n v hiu ng Rollover t xa.

Xem trc hiu ng Rollover tm kim sai st
Tm kim sai st cng khng hon ton phi l l do chnh bn kim tra hiu ng Rollover. i khi
nhng kt qu khng on trc xy ra i hi bn phi c thm nhng chnh sa hp l, c bit l
khi bn mi ch lm quen vi hiu ng Rollover.
1. Trong Web Content Palette, m rng slice Exhibts v Members trong Menu Button ca tp hp Slice
bn c th nhn thy nhng trng thi nm di n.
2. Mi ln chn 2 trng thi Rollover Click v xem kt qu ca n ca s hnh nh. c bit ch
n hnh hiu ng bn trong sut, vng qung ti xut hin xunh quanh layer Info Panels.
3. Nhp vo mt vng trng bt k trong Layer Palette b chn tt c layer v chn Normal trong
Web Content Palette.
4. Trong hp cng c, chn nt Toggle Slices Visibility v sau chn nt Preview Document.

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

24

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

5. Di chuyn con tr qua ca s hnh nh, v nhn vo nt Exhibit. con chut nm trong nt navi
mt lc bn c th xem thng tin ca n xut hin. V bn c th thy rng vng qung ti xung
quanh n s khng xut hin na.
6. Nhp vo nt Members thy hiu ng tng t xy ra.
7. Nhp vo nt Toggle Slices Visibility v Preview Document thot khi trng thi xem trc.

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

25

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Chnh li kch thc ca slice sa cha li v s n hin

sa cha cch xut hin ca thanh navi ngi dng c th thy c nhng Layer Style c
p dng, bn phi cho hin th nhng layer ny. Sau khi bn sa cha xong, bn cn phi hin th
li n bn khng thay i g n trng thi Normal.
1. Trong Web Content Palette, chn trng thi Click cho slice Exhibits
2. Trong hp cng c, chn cng c Slice Select

v nhp vo slice Exhibit Info trong ca s hnh

nh. (Nu bn n ng dn i ri th hy hin th n bng cch vo View > Show > Guides hin
th n)

3. Chn mt im neo bt k phn trn ca slice sau ko n ln pha trn cho n khi n hon
ton che ph vng bng en.

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

26

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Ch : Bn c th ko ng bin ca slice n ng dn nm ngang bn trn hoc bn di tm

khong 1/3, bi v trong vng khng c slice no ht. iu ny l khng thc s cn thit, nhng n
c th gim s lng slice bt buc bao ph hon ton tm hnh khi xut ra HTML. Nu trong cng
mt vng m c mt User Slice khc, th khi bn chng ng vin ca chng ln nhau n s to ra
nhng kt qu khng nh mong mun.
4. Chn mt im neo khc pha i din v ko xung di che ph hon ton bng en pha
di.

5. Trong Web Content Palette, chn trng thi Click ca slice Members. Sau , lp li bc 2-4
slice bao ph hon ton vng bng en xunh quanh.
6. Trong Web Content Palette, chn Normal. Trong Layer Palette, nhp vo mt im trong bt k
b chn cc layer.
7. S dng nt Toggle Slices Visibility v Preview Document xem trc hnh v kim tra xem vic
thay i ln ca slice c sa cha c vn hay khng. Khi lm xong chn hai nt trn ln
na thot khi ch xem trc.

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

27

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

To mt trang web t hnh nh

ImageReady s lm tt c nhng cng vic kh khn cho bn bt u t chuyn hnh nh thnh trang
web bao gm cc file HTML v cc th mc cha hnh nh. Nhng c mt bc rt quan trng m
bn phi lm cho trang web nhn dng c hiu ng Rollover v do n c th hin th ng
cch trn web. Bn s lm bc u tin
1. Nhp vo mi tn m Web Content Palette, v chn Find All Remote Slices.

2. Mt thng bo xut hin bo cho bn bit nhng thay i m ImageReady to ra cho ti liu.
Nhn OK.
3. Chn File > Save Optimized As.
4. Trong hp thoi Save Optimized As, tm n ni m bn mun lu li ti liu hoc lu n trc tip
vo th mc Lesson17.
5. C gi nguyn tn file nh th v thit lp nhng tu chn sau:

HTML And Images cho Save As Type

Default Settings cho tu chn Settings.

All Slices cho tu chn Slice

6. Nhn Save

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

28

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

7. Cui cng bn tm n file 17Start.html m bn va to ra v xem n vi trnh duyt ca mnh.

Vy l chng ta c th kt thc chng 17 y! Nhng cn rt nhiu iu m bn phi hc vi
Rollover, bng v cch s dng chng sao cho tht hiu qu tren trang web. Rollover khng phi ch
c to ra bng slice m bn cn c th to Rollover cho cc bn nh, nh l bn nh bn to
ra trong chng 15 "Thm ng lin kt vo mt tm hnh".

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

29

Chng 17: To hiu ng Rollover cho trang web

Photoshop CS

Cu hi n tp
1. K tn hai trng thi Rollover ph bin v nhng tc ng ca chut lin quan n n.
2. C bao nhiu trng thi Rollover mt slice c th c?
3. Bn c th to ra hiu ng Rollover cho image map (bn nh) thay v slice khng?
3. Rollover t xa l g?
4. Rollover ch c th thay i trng thi ca tm hnh thi hay cn g khc na?
p n
1. Normal v Over l hai trng thi ph bin nht ca hiu ng Rollover. Normal l trng thi mc nh
ca trang web, l khi n c m ra v cha c mt tc ng no ca ngi dng. Over l trng thi
khi ngi dng di chut qua mt vng c xc nh trc nhng khng nhp chut hay bt c mt
tc ng no khc ngoi di chut. C tt c 8 trng thi Rollover bn c th to ra trong ImageReady,
nu bn tnh c Custom v None. Tuy nhin, bi v bn c th to nhng trng thi ring cho bn vy
nn hiu ng Rollover l khng c gii hn.
2. Mt slice c th c nhiu trng thi Rollover, nhng ch mt hiu ng. V d, mt slice khng th c
hai trng thi Over khc nhau, nhng mt trng thi Over c th to ra nhiu thay i cho mt Slice v
mt hoc nhiu slice ch. Bi v nhng trng thi khc nhau c lin quan n nhng tc ng khc
nhau ca chut, do vy chng c l do g l chng khng th tn ti c.
3. C! xing lun! bn c th to ra nhng thay i v n hin layer, v tr layer hoc hiu ng nh bn
lm vi Slice.
4. Rollover t xa l khi ngi dng tc ng chut n mt slice ny s to ra s thay i slice khc.
N c i khi c gi l hiu ng Rollover th cp.
5. Bn c th s dng hiu ng Rollover lm nhiu vic khc, nh l chy mt chng trnh hoc
mt hnh ng.
www.vietphotoshop.com - Dch bi B tc Monte Cristo
|Trang ch| |Photoshop CS| |Chng 18|

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

30