Set skuggen i skuggen

Et hugsar godt fyrste gong skygge­ef­fek­ten kom til ombrekking­spro­gram­met InDe­sign tid­leg på 2000-talet. Pho­to­shop hadde hatt det ei stund allereie etter det eg hugsar. Diverre gjekk folk over styr då dei skulle lage ein «3D»-effekt i trykksak­ene sine. Slagskug­gar i hist, pist og heilt bak mål — sjølvsagt med orig­i­nalin­still­ingane. Under har eg tatt inn nokre eksem­pel på dette, og kor­leis eg mein­er det ikkje bør gjerast.

Framhev teksten/elementet — ikkje skuggen

Ikkje akku­rat heilt fint, nei…

Ein kan med enkle grep dempe denne groteske leg­gin­ga av skugge. Der­som ein nyt­tar nokre ver­diar nær desse eg har sett i InDe­sign vert resul­tatet meir spise­leg:

Meir rik­tig leg­ging av skugge (innstill­inger for InDe­sign).

Eit lite tips i InDe­sign for å la dette vere stan­dard­innstill­ing for alle nye doku­ment er å set­je ver­dian utan å ha nokon doku­ment opne. Gå inn i menyen Object > Effects > Drop Shad­ow og endre det til det som du måtte sjå på som per­fekt for dine fram­tidi­ge design…

Der­som du stiller skuggen inn som dette under i Pho­to­shop så har du eit godt utgongspunkt til å få eit lekrare design i bileter som treng skugge som effekt også:

Kjekke innstill­ingar også i Pho­to­Shop.

For å få skugge må ein ha lys

Det er av og til nok med ein sub­til skugge­leg­gjing i ditt design, men av og til feng­jar det med litt piff på sjølve lys­set­tin­ga også. Grafisia har ein liten veiled­ning på kor­leis ein kan løyse dette. Kan­skje ikkje stan­dard innan lys­set­ting, men likev­el 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­g­jaren der ute. Saman med HTML5 er det nesten uen­delege mark­er å pløya. Her er eit eksem­pel på skug­gar på bok­sar og bileter (lik den som kjem på bile­ta 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 kat­ten vis­er deg nokre eksem­pler på kor­leis ein kan kode vakker typografi.

Sjølvsagt kan ein ha skugge på bileter på veven også. Anten ein lett skugge rundt heile, eller leg­gje til effek­ter som på denne lokale nettsi­da i hjørnene ved hjelp av CSS og bileter:

Jaha…

Det eg har vist her er ikkje malen for kor­leis det skal gjerast, men heller ret­ningslin­jer for kor­leis det kan gjerast — og kva som er min føretrukne måte. Kom gjerne med dine favorittmå­tar å nytte skug­ger på!

Published by Espen Morten Kvalheim

Ein liten kar frå sommarøya Stord som likar det meste innan design, typografi og det som rørar seg på nettet. Nynorsk er min ven!

%d bloggers like this: