meyerweb_ekasivu.png
Avaa selaimeen sivu osoitteesta:
http://meyerweb.com/eric/css/edge/complexspiral/demo.html
Web-sivua varten simpukka-kuvasta tarvitaan neljä erilaista versiota
1
Katso esitys nuolinäppäimillä edeten…
shell-bg.jpg
shell-bg.jpg
shell-blue.jpg
shell-blue.jpg
shell-bg_black.jpg
Shell-black.jpg
shell-bg_white.jpg
Shell-white.jpg
Tee kuvista neljä versiota seuraavasti:
1.Tallenna Meyerweb-sivun taustakuva shell-bg.jpg harjoituskansioosi
2.Avaa kuva Photoshopiin
3.Lisää kuvaan uusi taso  Layer  New Fill Layer  Solid color
4.Muuta tason täyttöväriksi musta
5.Säädä läpinäkyvyys (opacity) sopivaksi
6.Tallenna kuva uudella nimellä File  Save for Web & Devices
7.Muiden kuvien kohdalla toista vaiheet 2-6
Tee kuvista neljä versiota seuraavasti:
1.Tallenna Meyerweb-sivun taustakuva shell-bg.jpg harjoituskansioosi
2.Avaa kuva Photoshopiin
3.Lisää kuvaan uusi taso  Layer  New Fill Layer  Solid color
4.Muuta tason täyttöväriksi musta
5.Säädä läpinäkyvyys (opacity) sopivaksi
6.Tallenna kuva uudella nimellä File  Save for Web & Devices
7.Muiden kuvien kohdalla toista vaiheet 2-6
2
shell-bg.jpg
shell-bg.jpg
Body-osan taustana on kuva shell-bg.jpg
body_background.gif
3
shell-bg.jpg
shell-blue.jpg
body_background.gif
Content-osan taustana on kuva shell-blue.jpg
Kuva määritellään samaan kohtaan kuin body-osan kuva
Kun kuva on sijoitettu content-osan taustakuvaksi, siitänäkyy vain Content-osan alla oleva osa
4
shell-bg.jpg
shell-black.jpg
body_background.gif
Links a-osien taustana on kuva shell-black.jpg
Kuva määritellään samaan kohtaan kuin body-osan kuva
Kun kuva on sijoitettu Links a-osien taustakuvaksi, siitänäkyy vain Links a-osien alla olevat osat
5
shell-bg.jpg
shell-white.jpg
body_background.gif
Links a hover-osien taustana on kuva shell-white.jpg
Kuva määritellään samaan kohtaan kuin body-osan kuva
Kun kuva on sijoitettu Links a hover-osien taustakuvaksi, siitänäkyy vain Links a hover-osien alla olevat osat ja ainoastaansilloin kun hiiri viedään linkin päälle
6