Set skuggen i skuggen

Et hugsar godt fyrste gong skygge­ef­fekten kom til ombrek­kings­pro­grammet InDesign tidleg på 2000-talet. Photoshop hadde hatt det ei stund allereie etter det eg hugsar. Diverre gjekk folk over styr då dei skulle lage ein «3D»-effekt i trykk­sakene sine. Slagskuggar i hist, pist og heilt bak mål — sjølvsagt med origi­nal­in­stil­lingane. Under har eg tatt inn nokre eksempel på dette, og korleis eg meiner det ikkje bør gjerast.

Framhev teksten/​elementet — ikkje skuggen

Ikkje akkurat heilt fint, nei...

Ein kan med enkle grep dempe denne groteske legginga av skugge. Dersom ein nyttar nokre verdiar nær desse eg har sett i InDesign vert resul­tatet meir spiseleg:

Meir riktig legging av skugge (innstil­linger for InDesign).

Eit lite tips i InDesign for å la dette vere standard­inn­stilling for alle nye dokument er å setje verdian utan å ha nokon dokument opne. Gå inn i menyen Object > Effects > Drop Shadow og endre det til det som du måtte sjå på som perfekt for dine framtidige design...

Dersom du stiller skuggen inn som dette under i Photoshop så har du eit godt utgongs­punkt til å få eit lekrare design i bileter som treng skugge som effekt også:

Kjekke innstil­lingar også i PhotoShop.

For å få skugge må ein ha lys

Det er av og til nok med ein subtil skugge­leg­gjing i ditt design, men av og til fengjar det med litt piff på sjølve lysset­tinga også. Grafisia har ein liten veiledning på korleis ein kan løyse dette. Kanskje ikkje standard innan lyssetting, men likevel artig effekt.

Er dette noko for veven?

Ja, det er det. Ved hjelp av CSS3 er det mange dørar som opnar seg for skugge­leg­gjaren der ute. Saman med HTML5 er det nesten uendelege marker å pløya. Her er eit eksempel på skuggar på boksar og bileter (lik den som kjem på bileta mine når du held musa over dei) og på tekst:

#skugge-paa-boks {
 -moz-box-shadow: 0 0 5px #888; /* [horisontalt] [vertikalt] [storleik] [farge] */
 -webkit-box-shadow: 0 0 5px #888; /* [horisontalt] [vertikalt] [storleik] [farge] */
 box-shadow: 0 0 5px #888;
 }

#skugge-pa-tekst p {
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);; /* [horisontalt] [vertikalt] [storleik] [RGB-farge] */
 }

Denne katten viser deg nokre eksempler på korleis ein kan kode vakker typografi.

Sjølvsagt kan ein ha skugge på bileter på veven også. Anten ein lett skugge rundt heile, eller leggje til effekter som på denne lokale nettsida i hjørnene ved hjelp av CSS og bileter:

Jaha...

Det eg har vist her er ikkje malen for korleis det skal gjerast, men heller retnings­linjer for korleis det kan gjerast — og kva som er min føretrukne måte. Kom gjerne med dine favoritt­måtar å nytte skugger på!