Øvelse i lave baggrunde til webdesign.


 

Generelle ting om baggrunde!
Nogle gange skal man bruge en baggrund som er helt speciel i farve eller stil. Så er det lettere at lave det selv, end at bruge timer på at finde baggrunde i clipart eller på Internettet.

Hvis du vil "shoppe" lidt i færdige baggrunde, så har jeg lagt et stort lager af dem her i dette link.

Selvgjort er velgjort.
Jeg vil dog anbefale dig at lave dine baggrunde selv. Det kan gøres enkelt, og det kan gøres avanceret. Jeg vil i denne toturial gennemgå begge typer

Billedet her er også et link til baggrunde.


1

En enkelt pixel.

Hvis du vil være sikker på at din baggrundsfarve er i harmoni med de øvrige farver du bruger, er du nødt til at indsætte en grafik som baggrund. Også selv om du kun skal bruge én farve på siden. Dette gøres ved at lave et billede som måler 1 x 1 pixel.

Vælg: Filer / new - og opret et nyt billede med disse indstillinger.


2

Nu skal vi ind i de små størrelser:

Brug nu navigator til at zoome så langt ind som muligt. Det vil sige en forstørrelse på 1.600 %

Nu kan du se den ene pixel som vi skal fylde en passende farve i - altså den farve som du vil bruge som baggrundsfarve i dit web-design.

Husk at 1 pixel kan indeholde én og kun én farve. Til gengæld har du 16 millioner farver at vælge blandt. Når du bruger denne teknik, er dun nemlig ikke begrænset til at anvende Websikre farver, hvis du være sikker på den korrekte farvegengivelse af grafik og baggrund.


3

Vælg en farve:

Vælg den farve du ønsker som baggrund
i dit design. Det gør du ved at dobbeltklikke
i feltet forgrundsfarve i bunden af
værktøjskassen.

Brug "malerspanden" eller tryk på genvejs-
tasten [CTRL] + [Backspace] for at fyld
forgrundsfarven i den lille pixel.

 


4

Gem til web:

Nu skal det gemmes til brug for web. Det vil sige at det skal fylde så lidt som overhovedet muligt, men stadig være til at holde ud at se på.

Vælg: file / save for web eller brug genvejstasterne til det formål: [CTRL] + [ALT] + [SHIFT] + S

Da der kun er én enkelt farve i denne pixel, skal den gemmes som en gif, så er der ingen "tab" af kvalitet, og stadig fylder det ikke ret meget.

Sæt indstillingerne som på dette billede, kald den nye grafik for bg.gif - og tryk på OK.


5

Sådan sættes grafikke ind på hjemmesiden:

Metode 1:

<body background="bg.gif">

 

Metode 2:

<head>
<style>
body {background-image:url("bg.gif")}
</style>
</head>

Retur til forsiden