Set skuggen i skuggen

Et hugsar godt fyrste gong skyggeeffekten kom til ombrekkingsprogrammet 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 trykksakene sine. Slagskuggar i hist, pist og heilt bak mål — sjølvsagt med originalinstillingane. Under har eg tatt inn nokre eksempel på dette, og korleis eg meiner det ikkje bør gjerast.

Framhev teksten/elementet — ikkje skuggen

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 resultatet meir spiseleg:

Eit lite tips i InDesign for å la dette vere standardinnstilling 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 utgongspunkt til å få eit lekrare design i bileter som treng skugge som effekt også:

For å få skugge må ein ha lys

Det er av og til nok med ein subtil skuggeleggjing i ditt design, men av og til fengjar det med litt piff på sjølve lyssettinga 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 skuggeleggjaren 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 retningslinjer for korleis det kan gjerast — og kva som er min føretrukne måte. Kom gjerne med dine favorittmåtar å nytte skugger på!