Startsiden

Lage Webgrafikk, Eksempel 1

Grafikk for web kan utformes på mange måter ved hjelp av de fleste funksjonene i Gimp. Det som kan være vanskelig er å beholde kvaliteten på bildene når de skal vises i en webside.

Lage gode utvalg
Når webgrafikk lages ved å klippe ut objekter fra fotografi er det beste utgangspunktet å lage nøyaktige utvalg, og det som gir best reultater er å bruke «Opprett og rediger baner»-verktøyet til å tegne opp en bezier-bane, som finjusteres slik at den slutter helt tett rundt om det som skal klippes ut (1).

«Opprett og rediger baner»-verktøyet kan virke komplisert å arbeide med til å begynne med, men med litt trening vil en oppdage at det er et lett og effektivt verktøy å bruke. Ved å skifte mellom valgene «Rediger» (for å endre formen på selve linjen), og «Design» (for å flytte på bezierpunktene) i verktøykassens «Alternativer»-vindu, kan en få bezier-banen til å følge grafikkens ytterlinjer nøyaktig.

Når banen gjøres om til et utvalg (Velg -> Fra bane) vil kanten rundt utvalget alltid bli hakkete. For å gi utvalget en pen jevn ytterlinje må en derfor gi utvalget en fjærkant (Velg -> Fjær).

Å gi utvalget fjærkant, fører i mange tilfeller til at det blir stående igjen en «dunete» kant rundt grafikken (2), og derfor må utvalget som regel også minskes med 1 piksel (Velg -> Krymp) før det klippes ut. Ofte er det praktisk å invertére utvalget (Velg -> Invertér) etter at det har fått fjærkant, slik at områdene som ikke skal brukes til webgrafikk klippes bort. I såfall må utvalget økes med 1 piksel (Velg -> Øk) før det klippes ut.

Tekst
Bearbeidet tekst er et viktig grafisk element. Ved å bruke «Kurvebøy»-filteret (Filter -> Forvrengninger -> Curve Bends) og «Iwarp»-filteret (Filter -> Forvrengninger -> Iwarp) kan du endre formen på teksten, på samme måte som all annen grafikk.

Bruk av disse filterene fører ofte til at teksten får hakkete kanter, men dette fjernes lett ved å gjøre teksten om til et utvalg (Lag -> Gjennomsiktighet -> Alfa til utvalg), og bearbeide utvalget på samme måte som ved fotografier. I tillegg kan en også gjøre utvalget om til en bezierbane (Velg -> Til bane), og streke opp ytterlinjene til bokstavene (Rediger -> Strek opp bane) for å gjøre dem mer markerte (3.1).

En annen måte å bruke tekst som grafikk på er å gi den dybde. Dette kan gjøres ved å bruke filterene «Bump map» (Filter -> Kart -> Bump map) eller «Add Bevel» (Script-Fu -> Decor -> Add Bevel).
Fremgangsmåten for de to filterene er ulik. «Add Bevel»-filteret legges direkte på tekstlaget (3.2), men for å bruke Bump map filteret velger du laget som skal påføres 3d-teksten, og bruker teksten som bump map (3.3).
Før et tekstlag kan brukes som bump map, må en huske på å skalére opp tekstlagets størrelse (Lag -> Laggrensestørrelse), for å få plass til 3d-kanten som legges rundt bokstavene.

Hooverknapper
Knapper som skifter farge når musepekeren føres over dem er en annen måte å bruke webbilder på. Slike bilder lages ved å duplisere en ferdig utformet webgrafikk, og endre kopien. Kopien kan f.eks. gis en annen farge ved å endre fargebalansen (Lag -> Farger -> Fargebalanse) (4).

Indekserte bilder
Grafikk hvor deler av bildet skal være transparente må indekseres og lagres i gif-formatet. Dette fører til en hakkete overgang mellom den ugjennomsiktige og gjennomsiktige delen av bildet, fordi indekserte bilder bare kan inneholde piksler som er 100% transparente og 100% ugjennomsiktige, og antialiasingen forsvinner.

Antialiasing er en funksjon som gir piksel-utvalg myke kanter: Et digitalt bilde består av rektangulære piksler. Når et område markeres i et bilde blir alle pikslene i området valgt, men dersom det markerte området ikke er rektangulært vil utvalgets markeringslinje bare velge deler av pikslene i ytterkanten av det markerte området (5).

Dersom f.eks. bare under halvparten av en piksel blir valgt, blir den ikke tatt med i utvalget. Selv om denne løsningen er matematisk korrekt, gir det som oftest et estetisk uønsket resultat, fordi kanten på utvalget får et stygt trappetrinn-utseende (aliasing). Funksjonen antialiasing forsøker å rette på dette ved å gi de delvis valgte pikslene prosentvis gjennomsiktighet etter hvor stor del av dem som er tatt med i utvalget av markeringens ytterlinje. Dersom nå f.eks. halvparten av en piksel er valgt vil den bli 50% transparent. Dette gir en mykere og penere kant på utvalget (5).

For å unngå et ujevnt omriss kan en bruke filteret «Semi-flatten» (Filter -> Farger -> Semi-flatten). Dette filteret bruker websidens bakgrunnsfarge til å jevne ut overgangen ved å fylle de halvtransparente pikslene med fargeverdier fra bildet og bakgrunnsfargen (4). Når filteret skal legges på bildet må websidens bakgrunnsfarge være lagt inn som den aktive bakgrunnsfargen i verktøykassens fargedialog, ved å skrive inn html notasjonen til websidens bakgrunnsfarge i «Endre bakgrunnsfarge»-vinduet. Semi-flatten filteret fungerer også godt dersom websiden har bakgrunnsbilde med fargetoning.

I de fleste tilfeller er standardinnstillingene for konvertering til indeksert bilde god nok, men en kan også foreta konverteringen selv (Bilde -> Modus -> Indeksert). Å indeksere et bilde ved hjelp av «Bruk egendefinert palett» kan f.eks. lage spennende effekter. I tillegg til alle palettene som følger med Gimp, kan en lage sine egne paletter (Menyer -> Paletter), dersom en ønsker å indeksere et bilde med egne farger.

Lage bakgrunnsbilde
Gimp har et eget filter for å lage bakgrunnsbilder til websider, dersom en ønsker mer enn bare ensfarget bakgrunn.

Når et bilde brukes som bakgrunnsbilde i en webside legges det etter hverandre, og det er viktig at bildet er komponert slik at det danner en pen bakgrunn med et sammenhengende mønster. Ved å bruke filteret «Make Seamless» ( Filter->Kart-> Make Seamless) justeres bildet automatisk slik at det danner et mønster når det brukes som bakgrunnsbilde (6).

Lagre som jpeg
Ved eksport til jpeg-formatet bør kvaliteten justeres til 100 % ved å bruke «Quality»-hendelen i «Lagre som JPEG»-vinduet. Det er bedre å lage bilder med liten pikselstørrelse istede for å gå ned i bildekvalitet, dersom en behøver webgrafikk med liten filstørrelse.

En kan også forbedre kvaliteten betydelig ved å velge liten «Undersampling» (1x1,1x1,1x1) i valget for «Force baseline JPEG». Dette går også på bekostning av filstørrelsen, noe som er en vurderingssak i hvert tilfelle.

Lage Webgrafikk, Eksempel 2