Runde hjørner til brug for webdesign
  Problemstilling:

At lave et design med runde hjørner til et website, er ikke sådan lige til. Web er jo firkantet, og runde hjørner kræver at du kan arbejde med tabeller i web-design, men det kræver også lidt forståelse for grafisk arbejde her i PhotoShop.

Denne øvelse beskriver kun, hvordan du laver grafikken til et design med runde hjørner, ikke hvordan du sætter det ind på siden, det er en anden øvelse, i et andet program ( Dreamweaver, Stones Webwriter, Homesite eller Notepad........).
 

Målet:

Målet er at kunne lave en webside som ser ud som på dette screendump.

Klik på billedet for at se designet i fuld størrelse...

Bemærk specielt at størrelsen ændre sig dynamisk. Dette skyldes at en del af grafikken bruges som baggrund i de enkelte celler i tabellen.

Tabellen består af 9 celler.
1

Lav et nyt billede:

Til denne øvelse skal der bruges en forholdsvis lille grafik. Men da vi gerne vil lave pæne runde hjørner, vælger jeg at leve billedet i en relativ høj opløsning.

Vælg 50 x 50 pixel med en opløsning på 600 dpi
2

En fast markering:
Vælg rektangel-tool, og sæt option til Fixed Size på 40 x 40 pixel.

Feather skal være 0 Pixel.

Zoom ind i billedet til 500% eller mere, og placer dit rektangel cirka i midten.

 
3

Vi centrere markeringen:
Fyld sort farve i markeringen.

  1. Vælg CTRL + D
  2. Vælg CTRL + A
  3. Vælg CTRL + X
  4. Vælg CTRL + V

Denne lille klippe klistre øvelse, får objektet til at være præcis i midten af arbejdsområdet.
4

Nu runder vi - gør vi

Hold CTRL tasten nede og klik på laget, hvor firkanten er:

Derved laver du en markering omkring objektet.
5

Opret nu en lagmaske ud fra denne markering, ved at trykke på iconet nederst på lagmenuen.

Tryk på CTRL + D

Klik på den nye kanal, mens du holder ALT tasten nede. På den måde bliver alphakanalen aktiv på dit skrivebord, og vi kan lave ting og sager med den.
6

Vælg: Filter > Blur > Gausian Blur

Sæt værdien til 7 pixel.
7 Tryk på CTRL + L, og sæt håndtagene som vist på denne illustration:
8

Klik igen på laget med det oprindelige billede, og zoom ud til 100% visning, ved at dobbeltklikke på forstørrelsesglasset.

For at få fine runde hjørner, skal du fylde billedet helt op med sort farve ( eller en anden farve ).
9 Opret et nyt lag, og fyld dette lag med farven CC3333.
10

Hold CTRL nede, og klik på masken

  1. Vælg: hvid forgrundsfarve
  2. vælg: Edit > Stroke

Sæt indstillingerne som vist på denne illustration:

11

Vælg CTRL + D

Klik på ImageReady for at starte det program op, nu skal billedet deles op i stykker ( Slices ).

Du finder "knappen" til Image Ready nederst i værktøjskassen:

Når programmet er åbnet, så forstør billedet til 500% for at kunne se detaljer bedre.
12 Vælg: Slices > Devide Slices, og sæt indstillinger som jeg har sat dem her:
13

Juster stregerne, så hele rundingen er med i hver af de fire hjørne-slices !!

Det gør du ved at trække i stregerne med Select Slices Tool, som du finder i værktøjskassen.

Vælg Slices i Options-Paletten, og giv hver enkelt slice et navn som vist herunder. Du vælger hvert slice med slice-select-tool.

  1. tv (top venstre side)
  2. top
  3. th (Top Højre side)
  4. venstre
  5. bg1 (Baggrundsfarve i cellen)
  6. Hojre (du må ikke bruge ø eller mellemrum i navne)
  7. bv ( Bund venstre side )
  8. Bund
  9. bh ( Bund højre side )
14

Check kvaliteten af hvert billede (slice), i paletten Optimize. Sæt indstillingen som jeg har vist det her:

Husk at denne indstilling skal sættes for hvert slice du har lavet. Man kan nemlig gemme slices i forskellige kvaliteter, afhængig af antallet af farver, og anvendelse.
15

Vælg: File > Save Optimized As, og sæt de indstillinger som jeg har sat her.

Bemærk at alle billederne vil blive gemt i et underbibliotek der har navnet slices.
16 Her er så de færdige elementer til det endelige webdesign, blot mangler der en enkelt grafik, nemlig den der skal bruges til baggrund i selve websiden. Det kan du se hvordan du gør i en anden af mine toturials.

OBS:
For at få glæde af denne øvelse, skal du også ha' styr på HTML programmering !!!!!

Du kan låne den færdige PSD-Fil her.
Retur til forsiden