33. En ramme med runde kanter - Grafikken

Du er her: StartIndholdsfortegnelse → En ramme med runde kanter - Grafikken
Indhold

Indledning

Mange hjemmesider bruger små bokse med afrundede hjørne til forskellige funktioner, f.eks. menu'er mm. Se f.eks. www.jubii.dk

Afrundede hjørne kan (indtil videre dvs. april 2007) kun laves ved hjælp af grafik. Denne grafik sættes ind i en tabel, for at få en fleksibel boks

Et overblik

Denne første del handler om grafikken. Her er et kort overblik over de (små stykker) grafik du skal fremstille:

Små stykker grafik

Resultat:

Menu

www.jubii.dk www.fundamentalist.dk www.altavista.com

Lav et billede på 100 x 100

Denne version er lavet til Photoshop Elements 4.0. Det samme kan selvfølgelig laves i mange andre billedbehandlingsprogrammer. Noget af det endda meget nemmere.

  1. Start Elements og opret et billede (Start from Scratch) på 100 x 100 pixels, hvid baggrund og 72 ppi.
  2. Klik på Zoom-værktøjet
  3. Klik derefter på Fit Screen, for at få billedet til at fylde hele skærmen (så er det nemmere at tegne præcist)
  4. Vælg: Rectangle Tool (Rektangel værktøj). Dette værktøj tegner (desværre) kun firkanter (eller andre former) der er udfyldt, så du kommer til at lave det lidt mere omstændeligt, end det burde være.
  5. Vælg derefter: Rounded Rectangle Tool (Firkant med runde hjørne)
  6. Indstil radius til 5 px (hvor meget hjørnerne skal bue)
  7. Indstil farven til sort. Således:

Tegn en firkant

  1. Nu kommer en del præcisions-arbejde:
    Tegn en firkant, der starter 4 pixels inde og 4 pixels nede (brug liniealerne for oven og til venstre), og slutter 96 pixels nede og 96 pixels inde.
  2. Klik derefter på knappen Simplify for oven, for lave figuren om til et lag.
  3. Nu skal du tegne en ny firkant. Den skal være hvid og starte 6 pixels inde og 6 pixels nede og slutte 94 pixels inde og 94 pixels nede. (Husk at klikke på Simplify).
  4. Nu kan du se, at der er 3 lag i billedet. Du skal nu sætte skygge på:
    Aktiver det midterste lag (det sorte).
  5. Vælg: Layer Styles og Drop Shadows under Styles and Effects
  6. Vælg den skygge, der hedder Low og træk den ind på billedet. Du burde nu få et resultat nogenlunde som dette:
  7. Nu skal du lægge de tre lag sammen, så det fungerer som ét sammenhængende billede:
    Vælg: Layers -> Flatten image

Så skal der klippes

Vi skal nu have klippet små stykker ud af billedet. Jeg har markeret hvordan herunder:

Når man skal markere et område med samme størrelse flere forskellige steder, så har Elements en genial funktion. Man kan nemlig indstille præcist hvor stort det markerede område skal være:

  1. Vælg det firkantede markeringsværktøj
  2. Indtil således:
  3. Klik i øverste venstre højre af billedet. Du får nu en markering, der er nøjagtig 10 x 10 pixels.
    Hvis du ikke har markeret helt præcist i hjørnet (helt ud til kanten), så kan du flytte markering, ved at trække med musen inde i det markerede.
    Hvis du kommer til at markere helt forkert, kan du fjerne markeringen med Ctrl-D og starte forfra med at markere.
  4. Tag en kopi af det markerede ved at taste Ctrl-C
  5. Indsæt kopien som et nyt billede sådan:
  6. Vælg: File -> New -> Image from Clipboard
  7. Gem billedet i gif-formatet
  8. Giv det navnet top_venstre.gif
  9. Luk derefter det lille billede du lige har gemt og vend tilbage til det store. Du skal nu markere som jeg har angivet højre oppe i teksten. Kopiere og sætte ind og gemme. Jeg vil foreslå du bruger disse navne (læg mærke til at jeg undgår at bruge æ, ø og å):

top_venstre.gif

top_midt.gif

top_hojre.gif

midt_venstre.gif
 
midt_hojre.gif

bund_venstre.gif

bund_midt.gif

bund_hojre.gif

Afslutning

Du har nu oprettet al den grafik, der skal bruges til at lave en tabel med afrundede hjørner og skygge. I Kapitel 34 skal du sætte det hele sammen:

God fornøjelse