Del II 4 Webgrafikk
WEBDESIGN STEG FOR STEG I dette kapittelet skal du lære å finne materiale som du kan bruke i form av figurer og grafikk på websiden din. Du skal lære å redigere grafikken ved hjelp av Paint Shop Pro, og tilegne deg ferdigheter og teknikker du kan bruke for å gjøre at figurene og grafikken egner seg til publisering på Internett. Du skal også lære forskjellen på de mest vanlige grafikkfilformatene brukt på websider, og forstå hvilke ulike bruksområder de har. N ÅR DU BEGYNNER å planlegge utformingen av en webside, går en viktig del av arbeidet ut på å finne passende figurer og illustrasjoner. Det finnes en rekke kilder til grafikk som du kan publisere på Internett. Vi skal snart se nærmere på noen av dem, samtidig som vi ser på noen nyttige grafiske teknikker i Paint Shop. Først skal vi imidlertid behandle et av de viktigste prinsippene du må kjenne til når du skal arbeide med grafikk beregnet til visning på en dataskjerm (som er hva vi viser websider på). Skjermoppløsningen brukt på figurene gjengitt i dette kapittelet er 1024x768 punkter. Antialias Et nøkkelbegrep for å forstå grafikk er oppløsning. Oppløsningstallet forteller oss noe om hvor detaljert vi gjengir tekst, grafikk eller bilder. Vanlige skrivere skriver ut med en oppløsning på 600 dpi. Dpi står for dots per inch (punkter per tomme). Når vi sier at vi skriver ut med 600 dpi, betyr det altså at skriveren er i stand til å skrive med en nøyaktighet på 600 punkter per tomme. Trykte bøker og materiale i farger har gjerne en oppløsning på 1200-2400 dpi. Problemet blir når vi overfører tekst eller bilder fra papir til skjerm, eller motsatt. En vanlig skjerm har nemlig bare en oppløsning på 72 punkter per tomme. Det betyr at vi alltid må forminske bilder som skal vises på skjermen. Dette går selvsagt på bekostning av kvaliteten. For å bøte på kvalitetstapet som oppstår på grunn av forminskningen, benytter vi en teknikk som kalles antialias. Prinsippet bak antialias forklares trolig best ved hjelp av en figur [4.1]. Illustrasjonen er overdrevet og forstørret, men viser tydelig forskjellen på figurer med og uten antialias. Fordi den begrensede oppløsningen på skjermen gir et «legolignende» utseende, fyller vi ut store kontraster (i dette tilfellet rød sirkel på hvit bakgrunn) med fargetoner som er en mellomting av de to ytterlighetene. Resultatet er et bilde som er mykere og mer behagelig for øyet, og avgjørende for god webdesign. Effekten av [4.1 A] og [4.2 A] kalles halo og er en av webdesignerens største fiender. [4.2] er eksempler på et bilde i riktig størrelse som tydelig viser virkningen av antialias. All grafikk på websider skal ha antialias. Det sier seg selv at å bruke et grafikkredigeringsprogram for å glatte ut kontrastfylte overganger punkt for punkt ville vært en enormt stor jobb. Vi slipper heldigvis å antialiasere manuelt. Paint Shop er et av mange programmer som vi kan bruke til automatisk antialiasering. Det skyldes først og fremst at grafikk til bruk i nettopp websider har blitt så utbredt at mange av 64
KAPITTEL 4: WEBGRAFIKK programmene nå er tilpasset webgrafikk og antialiasering. Antialias-funksjonen i Paint Shop kan imidlertid skrus av og på etter behov, og det er veldig viktig at du har full kontroll over når du bruker antialias-funksjonen og når du ikke ønsker å bruke den. Grafikk som skal skrives ut på en skriver skal for eksempel i de aller færreste tilfeller antialiaseres. Antialias kan gjøre bilder verre. [4.3] viser resultatet av at et bilde som er antialisert for en hvit bakgrunn settes inn i en grønn bakgrunn. Overgangsfargene mellom figuren og hvit gjør det antialiasede bildet til et eksempel på et lite flatterende halo. Dette illustrerer tydelig hvor viktig det er å antialiasere ethvert bilde separat for den sammenhengen det skal settes inn i. Konsekvensen av dette er at vi alltid må oppbevare originalen av det bildet vi skal bearbeide i høy oppløsning. I eksempelet i [4.3] vil dette si at vi kunne ha påført den grønne bakgrunnen i en høy oppløsning av bildet (uten antialias), og deretter forminsket bildet og samtidig påført antialias. For å unngå problemene som oppstår når man går mellom medier med forskjellig oppløsning, eller noen så typisk som skjermer med forskjellige oppløsninger (i dag alt i fra 640x480 punkter og oppover, som oftest 1024x768), benytter dataprogrammer stadig oftere såkalt vektorgrafikk. Vektorgrafikk er uavhengig av oppløsning fordi den er basert på matematiske formler for linjer, rektangler, sirkler (og nær sagt alle slags figurer). Den ideelle løsningen for grafikkprogrammer er en kombinasjon av vektorgrafikk og antialiasering. Det innebærer at programmet husker informasjonen som har definert de enkelte komponentene i et bilde, og automatisk sørger for at komponentene tar seg best mulig ut på skjermen, uansett oppløsning, ved hjelp av automatisk antialiasering. Paint Shop har innebygd muligheten for å benytte vektorgrafikk, og som vi skal se senere i denne boken, er det denne teknikken som ligger bak animasjoner på websider med Flash. Paint Shop Pro Hvis du aldri har brukt grafikkredigeringsprogrammer før, bør du absolutt sette av tid til å lære deg de grunnleggende funksjonene i Paint Shop. Jeg anbefaler deg å besøke noen av de nettstedene som er angitt i kapittel 2 som har opplæring og brukertips for Paint Shop, fordi det følgende kun er en gjennomgang av de viktigste funksjonene du må kjenne til eller får bruk for i PaintShop når du skal lage grafikk til websider. En av de viktigste funksjonene du må ha full kontroll over er markering (selection). Markering av objekter er grunnlag for all redigering i Paint Shop. På verktøypaletten finner du tre A B 4.1 I B er det benyttet antialias for å oppveie for sirkelens lave oppløsning. A B 4.2 A er et eksempel på et bilde uten antialias. I B er det samme bildet gjengitt med antialias. Forskjellen er av avgjørende visuell betydning. 4.3 Manglende kontroll eller feil bruk av antialiasteknikken, for eksempel å sette et bilde som er antialiasert for hvit bakgrunn inn i en grønn bakgrunn, kan gjøre bildene enda verre enn om de ikke hadde blitt antialiasert i det hele tatt. 65
WEBDESIGN STEG FOR STEG 2 3 4 1 5 markeringsverktøy: Selection, Freehand og Magic Wand. Du bør sørge for at du forstår bruken av disse (se egen tekstboks). Sørg for å fjerne standardangivelsen av antialias for markering i Tools Optionsvinduet, da antialias i de aller fleste tilfeller ikke egner seg brukt sammen markeringsverktøyet. Å opprette figurer 66 6 4.4 Alle nyopprettede bilder vises i et eget vindu (1), i dette eksempelet et bilde på 400x400 punkter med 16.7 millioner farger, som vist i informasjonsfeltet (7). I knappene på hovedverktøylinjen markert i (2) velger du hvilke sekundærverktøy du vil vise på skjermen. Disse er Tool Optionsvinduet (4), som har forskjellige funksjoner avhengig av hvilket primærverktøy du har valgt på verktøy-palletten (3), fargepaletten (5) og lag-paletten (6). Det er veldig viktig at du oppgir riktige innstillinger i Tool Options-vinduet (4) for den komponenten du vil opprette, i dette tilfellet for eksempel hva slags figur du vil opprette, om figuren skal opprettes med antialias, linjetykkelse osv, og at du spesifiserer linjefarge og fyllfarge på fargepaletten (5). 1 2 Umulig å gjøre feil! 4.5 A viser en forstørrelse av palettvinduet gjengitt til høyre i figur 4.4. Felt (1) og (2) under «Styles» bestemmer linjefargen (stroke color), altså fargen Jo, det er faktisk umulig å gjøre ugjenopprettelige feil i Paint Shop. Du for omrisset av figuren du oppretter, mens felt (3) og (4) bestemmer kan du alltid angre på handlinger du ikke ønsker, og angringene går trinnvis helt tilbake til den tilstanden bildet opprinnelig var i. Trykk simpelt- fyllfargen (fill color). Et klikk på (2) eller (4) utløser dialogboksen vist i B. Her må hen på Undo-knappen på hovedverktøylinjen øverst i programvinduet til A 3 4 du velge om linjefargen eller fyllfargen du er tilbake der du var før du gjorde noe feil. Du kan også angre angringer ved å trykke på Redo-knappen. skal være én farge (a), en forløpning (gradient) (b), et mønster (c) eller ingenting (d). Valgene mellom a, b, c abcd eller d avgjør deretter hvilken dialogboks Undo Redo B du får opp når du klikker på (1) eller (3). 7 Du oppretter et nytt bilde ved hjelp av File og New. Her oppgir du hvor mange piksler bredt og høyt bildet skal være. Ikke bry deg om Resolution, som har en standardverdi på 72 dpi. Image Type skal som regel være med 16.7 millioner farger (fordi vi kan endre det senere, er det bedre med for mye enn for lite). På verktøy-paletten, som ligger langs venstre marg på skjermbildet [4.4], kan du velge hvilke verktøy du vil bruke for å tegne på det nye bildet. Her har du alle standardverktøyer i et tegne-
KAPITTEL 4: WEBGRAFIKK program, som frihåndstegning, malekost, linjer, ellipser og rektangler, fyllfunksjon og tekstverktøy, Et svært viktig forhold å kjenne til for bruken av disse verktøyene er at du alltid må foreta mer spesifikke valg etter at du har valgt det hovedverktøyet du ønsker å bruke. Disse valgene er viktige fordi de påvirker hvordan komponenten opprettes i bildet ditt. Velger du for eksempel verktøyet Preset Shapes [4.4], som brukes for å opprette rektangler, sirkler og andre figurer (3), må du også angi om figuren skal opprettes som vektor eller punktgrafikk, om den skal lages med antialias og hvor brede linjene skal være i Tool Optionsvinduet (4), før du oppretter objektet ved hjelp av dra-og-slippmetoden på bildet (1). Observer at Tool Optionsvinduet og Layer Palette-vinduene bare vises når du flytter musepekeren over tittelfeltet i vinduene. Ellers er de minimert. Hvordan kan du så vite om du vil opprette figurer som vektorgrafikk eller med antialias? Med illustrasjon [4.3] friskt i minne for leseren kan jeg bare si at dette må baseres på skjønn og personlige preferanser. Jeg bruker svært sjelden figurer med vektorgrafikk fordi jeg foretrekker å se resultatet av oppløsningen umiddelbart på skjermbildet. Når det gjelder bruk av antialias, er budskapet at sluttresultatet av grafikkredigeringen skal være antialiasert, og at bruk av antialias for tidlig i redigeringen kan komplisere arbeidet i for stor grad. Jeg foretrekker å bearbeide figurer i høy oppløsning uten antialias, og deretter bruke Resize-funksjonen for å tilpasse bildet til ønsket størrelse med automatisk antialiasering, som vi skal se eksempler på senere i dette kapittelet. Hver gang du velger et verktøy må du dessuten velge hva slags farge eller mønster figuren skal ha før du oppretter den. Etter min mening er dette en dårlig utformet funksjon i Paint Shop og en av de største ulempene med programmet, fordi det er dårlig til å forutsi hva brukeren ønsker å gjøre. Problemet oppstår fordi du alltid må spesifisere fyll- og linjefarge for de objektene du vil opprette. La oss si at jeg vil opprette en rød sirkel. Jeg velger da først Preset Shapes-verktøyet fra verktøy-paletten og angir i Tool Options-vinduet at det skal være en ellipse med antialias, men ikke at figuren skal opprettes som vektorgrafikk. Så må jeg spesifisere hvilken farge jeg vil bruke rundt sirkelen (stroke color) og hvilken farge jeg vil fylle den med (fill color). Dette området er en kilde til mye forvirring, fordi et klikk på pilen inne i feltet for fargevalg har den spesielle funksjonen at du velger om linjen eller fyllet skal være ensfarget, satt sammen av en forløpning (gradient) eller et mønster, eller blank. Det er fort gjort å klikke feil eller å ikke skjønne hva som foregår i denne delen av programmet. Se nærmere på [4.5], som er en forstørrelse av fargepaletten i [4.4], og som forhåpentligvis kan bidra til å avklare misforståelser. Jeg klikker først på pilen inne i feltet for linje og velger Solid. Oppgave 4.1 1. 2. 3. 4. 5. 6. 7. 8. Opprett et nytt bilde i Paint Shop med 200x200 punkter og 16.7 millioner farger. Bruk fyll-funksjonen og gi bildet en fiolett bakgrunnsfarge. Opprett et hvitt rektangel (hvit linje, hvitt fyll) uten antialias og koordinatene (10,10,190,20). Opprett en hvit sirkel (hvit linje, hvitt fyll) med antialias som vist på figuren. Opprett figuren Arrow 3D 8 med Preset Shapes-verktøyet i Tools Options-vinduet. Gjør dette ved å merke av alternativet Retain Style, og bruk dra-og-slipp-metoden for å opprette pilen som vist på figuren. Velg fyll-funksjonen igjen og velg en mørk blåfarge. Bruk fyll-funksjonen på rektangelet og sirkelen. Angre fyll-handlingene, da disse ga et dårlig resultat på sirkelen. Lagre figuren som antialias.psp (Paint Shops eget filformat). Hvorfor ga fyllingen av rektangelet og sirkelen forskjellig resultat? Hva kunne du ha gjort for å gi sirkelen en mørk blåfarge med bedre resultat? 4.6 Resultatet av oppgave 4.1 67
1 2 WEBDESIGN STEG FOR STEG 3 4.7 Layer Palette-vinduet er viktig fordi du bruker det til å bestemme hvilket lag du ønsker å legge grafikkobjektene dine i (før du oppretter dem). Vinduet lar deg også opprette nye lag (1), slette eksisterende lag (2) eller skjule/vise bestemte lag (3). På figuren er visningen av laget Firkant skjult. Høyreklikk på et av lagnavnene i dette vinduet lar deg endre lagegenskapene hvis du velger Properties. Oppgave 4.2 1. Opprett et nytt bilde i Paint Shop med 200x200 punkter og 16.7 millioner farger. 2. Opprett laget Firkant og lag en blå firkant med antialias som vist på figuren i dette laget. 3. Opprett laget Sirkel og lag en rød sirkel med antialias i dette laget. 4. Opprett laget Stjerne og lag en fiolett stjerne (Star 3) med antialias i dette laget. 5. Opprett laget Smaastjerner og lag tre små gule stjerner, også med antialias, i dette laget. 6. Gi laget Stjerne en opacity på 70% med Blend Mode Normal. 7. Flytt laget Stjerne øverst. 8. Lagre bildet som flerelag.psp 9. Lagre en kopi av bildet som flerelag.png 4.8 Resultatet av oppgave 4.2 Deretter klikker jeg på feltet for linje og får opp vinduet Color, hvor jeg kan velge en rødfarge. Legg også merke til at jeg ikke er begrenset til fargene i dette vinduet, men her kan klikke hvor som helst i de åpne bildene i Paint Shop for å angi farge. Deretter klikker jeg på pilen for fyll og velger Solid, og gjentar samme prosedyre for å angi en rød fyllfarge i Color-vinduet. Den raskeste måten å velge en farge på er å bruke Dropperverktøyet på verktøypaletten. Du kan da klikke på en hvilken som helst farge i bildene for å angi farge uten å gå veien om noen palett. Et klikk med venstre museknapp angir linjefarge. Et klikk med høyre museknapp angir fyllfarge. PS. Med Preset Shapes-verktøyet valgt, gir ctrl-tasten gir deg umiddelbart dropper-verktøyet. Dropper Når både Tool Options har blitt valgt og for- og bakgrunnsfargene er bestemt, kan jeg bruke dra-ogslipp-metoden for å opprette sirkelen. Fordi jeg ønsker en sirkel og ikke en ellipse, kan jeg holde inne shift-knappen på tastaturet mens jeg gjør det. Å holde inne shift-knappen mens du foretar en operasjon er forøvrig et generelt prinsipp som gjelder i mange programmer dersom du ønsker å beholde riktig forhold mellom bredde og høyde. Paint Shop husker fargeinnstillingene separat for hvert enkelt tegneverktøy du bruker. De røde fargene for figurer gjelder ikke dersom jeg for eksempel ønsker å opprette en linje. Da må jeg velge rødfargen på nytt. Lag på lag Du bør ha en fullgod forståelse av at Paint Shop Pro 7, etter inspirasjon fra Adobe PhotoShop, bruker laginndeling for å lette arbeidet med grafikkredigering og øke fleksibiliteten for endringer. En laginndeling innebærer at et bilde består av et bakgrunnslag, og at komponentene i bildet kan legges i flere uavhengige lag slik at de ikke påvirker hverandre når du flytter, sletter eller redigerer dem. Lagvinduet (moment (6) i [4.4] brukes for å velge hvilket lag du ønsker å opprette en komponent i. Som vist på [4.7], kan du her også opprette nye lag (1), slette lag (2) eller maskere visningen av bestemte lag (3). Den største fordelen med å bruke laginndeling er at Paint Shop automatisk genererer antialias mellom objekter i lagene dersom objektene er i kontakt med eller overlapper hverandre. Laginndelingen gir deg flere muligheter enn å kunne redigere komponenter i samme bilde uavhengig av hverandre. Objekter i ett lag kan for eksempel formørke eller lyse opp komponenter i underliggende lag. Du angir 68
KAPITTEL 4: WEBGRAFIKK Hvordan opprette webgrafikk i Paint Shop Opprettelsen av bilder som brukes på websider følger gjerne en bestemt fremgangsmåte i PaintShop: 1. 2. 3. 4. 5. 6. 7. Opprett et nytt bilde med File > New. Gi deg selv et rimelig godt arbeidsområde for grafikken (for eksempel 1000x1000 piksler). Opprett objekter og effekter, gjerne i flere lag, i arbeidsområdet, og prøv deg frem med flere eksemplarer av objektene of effektene. Når du er ferdig med opprettelsen av figurene lagrer du arbeidsområdet i Paint Shops eget filformat (*.psp). Dette bevarer laginndelingen og gjør at du senere kan flytte objektene i de forskjellige lagene uavhengig av hverandre. Deretter flater du ut bildet til ett lag (Layers > Merge > Merge All (Flatten)). (Du kan alternativt velge Copy > As Merged etter å ha merket utsnittet for å bevare laginndelingen i bildet). Marker det utsnittet du ønsker å bruke som en figur på websiden (se egen tekstboks om markering), og kopier det til utklippstavlen (Ctrl-C eller Edit > Copy). Vær nøye med markeringen slik at du ikke tar med noen unødvendige piksler rundt objektet, men heller ikke mister noen. Lim inn det markerte objektet som et nytt bilde (Ctrl-V eller Edit > Paste As New Image). Lagre det nye bildet som JPEG, GIF eller PNG, avhengig av hvilket format som passer best for det enkelte bildet. Optimaliser bildet som beskrevet senere i dette kapittelet slik at det tar opp minst mulig plass med minst mulig kvalitetssvinn. Gjør eventuelt også bakgrunnen transparent. 1 2 4.9 Med verktøyet Preset Shapes får du, ved å klikke på listepilen (1) og bla nedover, tilgang til et stort antall figurer som knapper, piler og symboler, som plasseres på bildet med dra-og-slipp-metoden. Husk å merke alternativet Retain Style (2). Bruksområdene for disse figurene er nærmest ubegrenset i webgrafikksammenheng. 4.10 Her har jeg brukt figuren Button 028 ved hjelp av draog-slipp-metoden og kopiert figuren to ganger. Deretter har jeg opprettet et eget lag for tekst og satt inn tekstene, som jeg har brukt en skygge-effekt på for å gjøre mer lettleste. Legg merke til at skyggen faller på samme måte fra teksten på figuren som fra figuren på den gule bakgrunnen (ovenfra og litt fra venstre) for å gi et så riktig visuelt inntrykk som mulig. Når menyen skal brukes på en webside defineres bildet i HTML ved hjelp av imagemaps, som beskrevet i kapittel 3. egenskapene til et bestemt lag ved å høyreklikke på lagnavnet i lagvinduet. Velg Properties og under folderen General kan du sette Blend Mode til for eksempel Darken. Verdien for Opacity bestemmer styrken for effekten du har valgt. For Darken gir 0 ingen formørkelse, 100 maksimal formørkelse. Blend Mode-effekten av et bestemt lag påvirker kun de underliggende lagene, og lagene ligger i den rekkefølgen som du kan se i Layer Options-vinduet. Du kan endre rekkefølgen ved å bruke dra-og-slipp-metoden i dette vinduet. I billedvinduet i Paint Shop ser du bare alle lagene lagt sammen, og det kan være forvirrende. Det er spesielt tilfelle hvis du for eksempel prøver å markere et objekt som du ser i billedvinduet, men som i virkeligheten befinner seg i et annet lag. Du må da først 4.11 Her er det satt inn figurer hvor hver figur kan fungere som en link ved hjelp av definerte imagemaps i HTML. Disse figurene finnes i Paint Shops Preset Shapes. Hver figur er satt inn i sitt eget lag, og teksten ligger i et lag over figurene med en skyggeleggingseffekt for å gjøre den lettere å lese. 69