Startsiden

Lage Webgrafikk, Eksempel 2

Webgrafikk er fortrinnsvis bilder i jpg eller gif-formatet som kan vises i alle nettlesere. I dette eksemplet skal vi bruke en av Gimps standardmaler for webgrafikk; «web banner common» (468 x 60 piksler), som utgangspunkt for et bilde som skal brukes i en webside.

Web bannerets bakgrunn
Mens bakgrunnslaget er aktivt tegner du opp en gradient i vertikal retning, ved å holde inne Ctrl-tasten mens gradienten dras ut (1). Bruk gradienten som heter «rounded egde» for å gi web banneret en avrundet form (2). Lag en firkantig markering nede i høyre hjørne, med fjærradius 10 (3).

Gjør dette utvalget til en bane, ved å velge 'Velg -> Til bane' fra bildevinduets meny. Velg så bort utvalget ved trykke Ctrl+Shift+A på tastaturet. I 'Lag'-vinduet, høyreklikker du på bakgrunn-laget, og velger 'Legg til alfakanal'.

Åpne 'Baner'-vinduet, og gjør bezierbanen synlig ved å klikke på øyeikonet foran den. Klikk på 'Bane til utvalg'-knappen. Åpne 'Lag'-vinduet igjen, og gjør bakgrunn-laget aktiv ved å klikke på det. Klikk på bildevinduets vinduspynt for å gjøre det aktivt, og klipp bort området inni utvalget ved trykke Ctrl+X på tastaturet.

Velg 'vendeverktøyet' i verktøykassen, og vend bakgrunns-laget horisontalt ved å klikke på det i bildevinduet. Åpne 'Baner'-vinduet igjen, og klikk på banen for å gjøre den aktiv. Klikk så på 'Bane til utvalg'-knappen. Åpne 'Lag'-vinduet, og gjør bakgrunn-laget aktivt. Klikk så på bildevinduets vinduspynt for å gjøre det aktivt, og klipp bort området inni utvalget igjen (4).

Tekst
Opprett et tekstlag med teksten «Gimp Webgrafikk» med sort farge. I dette eksemplet er det brukt skrifttypen «Ikarus Vulture Italic» str. 21. Plassér teksten midt på web banneret ved hjelp av flytteverktøyet. Med bakgrunn-laget aktivt i 'Lag'-vinduet, velg 'Filter -> Kart -> Bump Map' fra bildevinduets meny.

Velg tekst-laget (Gimp Webgrafikk) som Bump map, og bruk innstillingene i illustrasjonen (5). Bump map-laget vises ikke alltid i forhåndsvisningen. Sett derfor verdiene for x og y offset til 0 (null) til å begynne med, for å få bump mapp-laget inn i forhåndsvisnings-bildet. Klikk på 'OK', og åpne 'Lag'-vinduet. Klikk på øyeikonet foran tekstlaget for å skjule dette.

Opprett et nytt tekst-lag med teksten «galleri» i sort farge. I eksemplet her er det brukt skrifttypen «DejaVu Sans Bold», str. 21. Høyreklikk det nye tekstlaget, og velg 'Alfa til utvalg'.

Velg bakgrunn-laget, og klipp ut det aktive utvalget. Velg deretter bort utvalget (Ctrl+Shift+A). Med bakgrunn-laget aktivt, velger du 'Script-fu -> Decor -> Add bevel' fra bildevinduets meny.

Velg tykkhet 5, og 'work on copy'. Lagre den nye kopien i xcf-formatet, og hold dette vinduet åpent (6). Lukk det gamle bildet, men husk å lagre dette også først!

Knapper
Åpne 'Baner'-vinduet, og klikk på 'Bane til utvalg'. Velg 'Velg -> Krymp...' fra bildevinduets meny, og krymp utvalget med 2 piksler. Opprett et nytt lag, og gi det navnet «venstre knapp».

Med dette laget aktivt fyller du utvalget med gradienten 'Rounded egde' i vertikal rettning ved å holde inne Ctrl-tasten mens gradienten dras ut (se ill.1). Velg bort utvalget, og bruk flytteverktøyet til å flytte den nye formen litt til venstre: klikk to ganger med venstre piltast på tastaturet for å lage et passelig mellomrom.

Ta igjen å åpne 'Baner'-vinduet, og klikk 'Bane til utvalg'-knappen. Åpne 'Lag'-vinduet, og velg «venstre knapp»- laget. I bildevinduets meny velger du 'Velg -> Inverter', og klipp bort den overflødige venstre delen av formen (Ctrl+X).

Dette er viktig når du senere skal legge på Bevel-filteret på formen. Opprett nå en bane som ser ut som en pil (dra ut vertikal og horisontale guider til hjelp for å lage formen) ved hjelp av penneverktøyet, og plasser den nye banen over venstre knapp (7).

I 'Baner'-vinduet dobbelklikker du på den nye banen og gir den navnet «pil». Med «pil»-banen aktiv klikker du så på 'Bane til utvalg'-knappen, og med laget «venstre knapp» aktivt, klipper du ut utvalget.

Kopier nå laget «venstre knapp», og gi det nye laget navnet «høyre knapp». Bruk 'vende'-verktøyet til å vende «høyre knapp»- laget horisontalt, og bruk deretter 'flytte'-verktøyet og piltastene på tastaturet til å få den nye formen i nøyaktig samme respektive posisjon til høyre i banneret. Med «høyre knapp»- laget aktivt, velg 'Script-Fu -> Decor -> Add bevel' fra bildevinduets meny. Velg tykkelse 5, og velg bort 'work on copy'. Gjør det samme med «venstre knapp»-laget.

Gjør bildet større
Endre nå størrelse på selve bilde-lerretet: Velg 'Bilde -> Størrelse på lerret' i bildevindu-menyen (8). Ta først å endre forgrunnsfargen i verktøykassens fargevalg (h:195, s:40, v:53, r:80, g:121, b:134, html-notasjon: 507986).

Opprett så et nytt lag, og velg «forgrunnsfarge» i «Nytt lag»-vinduet. Gi det nye laget navnet «bakgrunnsfarge», og flytt det nederst i lagrekken. Dette laget får samme farge som websiden bildet senere skal settes inn i. Velg 'Bilde -> Kopier' i bildevindu-menyen for å kopiere bildet, og arbeid videre på kopien etter at du har lagret den.

Åpne 'Lag'-vinduet, og klikk på øyeikonet foran «bakgrunnsfarge»-laget for å gjøre det usynlig. Høyreklikk bakgrunn-laget, og velg 'Flett sammen synlige lag'. Velg 'Utvides etter behov' i 'Alternativer for fletting av lag'-vinduet som åpnes, og klikk 'ok'.

Farge og dekorlinjer
Med bakgrunn-laget aktivt, velg 'Filter -> Farger -> Filterpack' fra bildevindu-menyen. Hak av valget for 'glød' i «Filterpakke simulering»-vinduet (9) for å åpne «Variasjoner i glød»- vinduet, og velg 'blå'.

Klikk på 'ok'. Opprett så et nytt gjennomsiktig lag, og gi det navnet «linjer». Opprett deretter en bezier-bane på venstre side av banneret i form av en linje (10).

10.

Endre nå forgrunnsfargen til (h:240, s:40, v:61, r:94, g:94, b:156), og gjør «linjer»-laget i 'Lag'-vinduet aktivt. Velg så 'bezier-sti'- verktøyet i verktøyskassen («penneverktøyet»), og klikk på bezierstien i bildevinduet.

Velg 'Rediger -> Strek opp bane' fra bildevinduets meny. I «Strøkbane»-vinduet velger du 'Strek opp med et tegneverktøy', og velger 'Blyant'-verktøyet. I verktøykassen velger du strekstørrelsen på blyanten til 'circle 01', og klikker på 'Strek'-knappen i «Strøkbane»-vinduet. Velg 'flytte'-verktøy i verktøykassen, og klikk i bildevinduet for å velge bort bezier-stien.

Med «linjer»-laget fortsatt aktivt velger du 'Script-Fu -> Decor -> Add bevel' i bildevindu-menyen, Velg en tykkelse på 1 i «Script-Fu: Add Bevel»-vinduet. Ta nå å kopier «linjer»-laget, og gi det nye laget navnet «linje2».

Bruk 'vende'-verktøyet for å vende den nye linjen horisontalt. Flytt så den nye linjen på plass på høyre side av grafikken ved å bruke 'flytte'-verktøyet og piltastene. (Piltastene brukes til å flytte med for å at den nye linjen skal holde nøyaktig samme høyde som linjen på venstre side).

Eksporter til webformat
Lagre og eksporter bildet i jpg-format. Velg en kvalitet som gir godt resutat med minst mulig filstørrelse (11). Ved å hake av for «Show Preview in image window» i «Lagre som JPEG»-vinduet kan du se kvaliteten på bildet samtidig som du justerer kvaliteten med «Quality»-hendelen.

Her får du også se filstørrelsen på bildet, slik at du lett kan aveie mellom filstørrelse og bildekvalitet. Bildet i ill. 11 har lav filstørrelse, men har til gjenngjeld fått en dårlig bildekvalitet.

11.

Når bildet skal legges ut på en webside er det nyttig at du noterte deg html-notasjonen til fargen på «bakgrunnsfarge»-laget. Bruk den samme fargen som bakgrunnsfarge på websiden slik at webgrafikken blir pent integrert på websiden (12).

Ved hjelp av javascript eller ved å lage et bildekart av bildet med Gimps bildekart-plug-in, kan du nå også gjøre knappene til linker slik at du kan bruke webgrafikken til å navigere med.

12.

Lage Webgrafikk, Eksempel 1