Webgrafik - lær det selv

Webgrafik - lær det selv Appendix til hæftet ISBN: 87-7843-510-2 Link: Http://idgforlag.dk/vp.asp?i=87-7843-510-2 I10 siders appendix - kun til hæftets læsere Copyright IDG Forlag IDG Forlag Carl Jacobsens Vej 25 2500 Valby Telefon: 77 300 300 Fax: 77 300 306 E-mail: idgforlag@idgforlag.dk Http://www.idgforlag.dk

W EB- APPENDIKS Løse ender I dette appendiks til hæftet Webgrafik lær det selv finder du en håndfuld mere løsrevne artikler af lidt teknisk karakter. Der er artikler om to vigtige områder inden for grafisk arbejde: arbejde med tekst og markeringer. Og så er der mere om forskellige filformater og endelig lidt om det meget svære begreb gamma-korrektion. 24. Arbejde med tekst Du kan arbejde med tekst på to måder på dine hjemmesider: Som tekst i HTML-dokumentet Som grafik. Når du arbejder med store tekstmængder, der skal kunne redigeres og opdateres, vil du selvfølgelig altid vælge almindelig tekst i HTMLformat. Men til mindre tekstmængder kan tekst skrevet i et billedbehandlingsprogram og gemt i en grafikfil være et udmærket alternativ. Tekst som grafik Fordelen ved tekst i grafik er bl.a., at du kan vælge lige præcis de skrifttyper, du har lyst til. Når teksten gemmes som grafik, kan alle se den, uanset hvilke skrifttyper de har installeret på deres pc. Se fx hjemmesiden i Figur 1; der er benyttet en skrifttype kaldet Bernhard Fashion. Den er der med garanti mange brugere, der ikke har på deres pc, men det betyder ikke noget, for teksten er indlejret i GIF- eller PNG-filer. Man kan se mange hjemmesider med tekst gemt som grafik. Det er typisk websites, hvor det designmæssige er meget afgørende, og hvor indholdet er begrænset. Hvis du selv vil prøve at lave sådan en totalt grafik-baseret site, så kan det sagtens lade sig gøre. Du skal bare være opmærksom på de ulemper, der er ved systemet. Teksterne er sværere at opdatere du kan fx ikke rette i teksten, når den står i en optimeret GIF- eller PNG-fil. Brugeren kan ikke markere og kopiere teksten, når den er indlejret i en grafikfil. Problematisk redigering Det er traditionelt et problem at arbejde med tekst inden for grafik. Fx kan du ikke åbne en JPG-fil og derefter rette lidt i teksten. Du arbejder på pixel-niveau, og det er totalt upraktisk i forhold til tekst. Programmet Fireworks har en stor fordel i denne sammenhæng. Du kan nemlig gemme redigerbar tekst i en Fireworks PNG-fil. Filen kan i princippet indeholde en hel hjemmeside med en del tekst. Filen kan ses både i browser og billedbehandlingsprogram mv. Den kan åbnes og rettes, hvorefter du eksporterer den til HTML, når rettelserne er færdige. Figur 1. Her ses et helt hjemmeside-projekt, der er konstrueret i Fireworks. Teksterne er integreret og kan redigeres i PNG-filen. I

Markering deluxe Tekstværktøjet med antialias Når du arbejder med tekst i programmer som Fireworks og Photoshop/ImageReady, så indsættes den som objekter, som du allerede har set eksempler på. I det primitive tegneprogram Paint skriver man direkte ind i bitmapbilledet, og så kan det være svært at rette teksten bagefter. Men så længe teksten befinder sig i et separat lag/objekt, kan den uden besvær redigeres. I Photoshop/ImageReady placeres teksten på separate lag, mens Fireworks kan blande tekst med andre objekter og bitmap på det samme lag: Antialias Det er en god ide at benytte funktionen antialias, som knytter sig til tekstværktøjet. Antialias udglatter bogstavernes kant. Hvis du har en sort tekst, så vil den let blive lidt kantet og pixeleret at se til. Med antialias kan vi blødgøre bogstavernes kanter ved at indskyde små gråtone-kanter omkring dem: Figur 4. Den højre tekst er antialias'et. Figur 2. Teksten er et objekt på lag 2. I begge tilfælde skrives teksten med tekstværktøjet, som man kan vælge med bogstavet t. I Fireworks indtaster man teksten i en lille boks (kaldet Text Editor). I Photoshop 6.0 og Image- Ready foregår det noget smartere, man skriver nemlig direkte ind i billedet. Du skal bare klikke med tekstværktøjet og så taste: I praksis fungerer funktionen antialias ved hjælp af interpolation. Den gætter sig frem til de nye farver, der skal indskydes, der hvor to forskellige farver mødes (se side 41). Selve ordet alias dækker over den skarpe afgrænsning mellem to pixels (af forskellig farve). Og denne grænse kan altså blødgøres ved hjælp af antialiasing, som det ses i Figur 4. Vær opmærksom på baggrundsfarven, hvis du benytter transparens i billedet. Hvis du antialias er en tekst, skal den have samme baggrundsfarve som på websiden. Ellers vil der opstå en tynd, misfarvet kontur omkring bogstaverne. 25. Markering deluxe Når man arbejder med billeder, er markering én af de allervigtigste teknikker. Med programmer som Fireworks, Paint Shop Pro, Corel PHOTO- PAINT og især Photoshop er der utallige måder at markere på. Så der er meget at lære! Her følger en kort introduktion til en del af metoderne. Figur 3. I Photoshop 6.0 kan du indtaste teksten direkte i billedet. II

Markering deluxe Markeringsværktøjer De mest indlysende værktøjer er markeringsrammerne, lassoerne og tryllestaven. De ses her fra Photoshop: Udvælg bitmap-områder på anden måde Du kan komme langt med markeringsværktøjerne. Men til visse opgaver findes der smartere værktøjer. Lad mig nævne en håndfuld fra Photoshop: Viskelæderne Farveområde Udtræk Viskelæderne. Der findes tre viskelædere i Photoshops værktøjskasse, og de er rigtig gode til at fjerne baggrunde med: Figur 5. De basale markeringsværktøjer i Photoshop. Husk, at disse værktøjer kan indstilles bl.a. med udtynding, som vi tidligere har set det (se siderne 45 og 49): Til brug for det øverste, almindelige, viskelæder vælger du en pensel, og så visker du løs; det er ret banalt. Figur 6. Indstilling af tryllestaven i Paint Shop Pro. Og husk, at du altid kan vende en markering om (invertere den) med &6+i i Fireworks og Photoshop. Det benytter man meget ofte. Figur 7. Markeringsværktøjer i Corel PHOTO-PAINT. Figur 8. Valg af pensel i Photoshop. Penslen benyttes til værktøjet viskelæder. De to øvrige viskelædere er mere avancerede. Baggrundsviskelæderet benytter også en pensel. Det bortvisker baggrunden op mod en figur. Efter min erfaring er det lidt svært at få til at virke godt, men prøv det selv! Magisk viskelæder er så klart min favorit. Det kan ofte fjerne en hel baggrund i et hug. Det finder simpelthen identiske pixels inden for en angiven tolerance. Pixel-områderne kan være sammenhængende, hvis du ønsker det. Der kan laves en kantudjævning. Og endelig kan du indstille opaciteten (det gælder alle viskelæderne). Hvis du fx sætter den til 50%, viskes områderne kun ud med 50%, så de bliver delvis transparente. Det er bare fikst! III

Mere om indekserede farver Farveområde og Udtræk Farveområde er en anden af Photoshops utroligt mange måder til markering. Funktionen er vist egentlig beregnet til at lave en markering inden for en anden markering, men kan bruges til almindelig markering også. Prøv selv: 1. Indlæs billedfilen palme01.jpg fra hæftets egen hjemmeside. 2. Vælg menupunktet Vælg Æ Farveområde. Vælg Farveprøver i feltet Vælg. Brug pipetten til at udvælge farveområder. 3. Det hvide du ser i det lille billede, er det udvalgte område. 4. Når du klikker på OK, får du markeringen at se i selve billedet. Figur 10. Funktionen Udtræk i Photoshop fjerner billedområder op til en defineret kant. Hvis du har brug for at lave en fritskrabning af en indviklet og detaljeret figur, kan du sikkert med fordel studere funktionerne Farveområde og Udtræk. En af mine egne favoritter er Quick Mask i Photoshop. Teknikken er beskrevet i lær det selvhæfterne om Photoshop, men den går ud på, at man lægger en maske hen over billedet (som i øvelsen på side 36). Det smarte er, at masken kan bearbejdes med alle tegne/male-værktøjer som fx Airbrush. Det er en fremragende metode til markering! Figur 9. Funktionen Farveområde i Photoshop giver en af de mere avancerede markeringsmetoder. Funktionen Udtræk er en anden. Den er svær at håndtere, men prøv selv. Det består i, at du laver en markering i et specielt arbejdsvindue (kaldet Udvid med vanlig edb-logik, se Figur 10). Kort fortalt er princippet dette: Du markerer (med en grøn tusch ) konturen af det, som skal fjernes fra billedet. Så hælder du blå farve i resten og klikker OK, vupti så udtrækker Photoshop en stor pixelmasse. Metoden skulle især være god til at udtrække billedområder, der har en meget indviklet kant, og som ellers er svære at markere. 26. Mere om indekserede farver Begrebet indekserede farver er vigtigt, når vi arbejder med web-grafik. Masser af små grafikopgaver kan nemlig med fordel optimeres i et begrænset farveantal med anvendelse af GIF- og PNG-formaterne. Lad os se lidt nærmere på de begreber (dithering og paletter), der knytter sig til denne form for grafik. Reducer farvedybden Du kan starte med selv at teste din pc med 256 farver. Det er ret enkelt. Du skal ind i skærmopsætningen (se side 29 i hæftet). Vælg så 256 farver som her: IV

Mere om indekserede farver Figur 11. De fleste pc'er kan indstilles til at arbejde med en farvedybde på 8 bit. Det har kun betydning for skærmbilledets udseende og kan med fordel afprøves. Nu vil du opleve dithering, hver gang skærmen skal vise et billede med mere end 256 farver. En stor del af farvenuancerne forsvinder. Det ser ikke godt ud prøv selv at se nogle farvebilleder, fx i IrfanView. Figur 12. Billedet kan ikke vises med fuld farvedybde, derfor sker der en farvereduktion samt dithering. Figur 13. Dithering (her kaldet rastersimulering) kan vælges ved GIF-optimering i Photoshop. Bemærk valgmuligheden diffusion i Figur 13. Det står egentlig for fejl-diffusion, og giver dithering med en algoritme, der forsøger at skjule de uhensigtsmæssige mønstre, som ellers gerne opstår som følge af dithering. Prøv selv at hente et billede ind i Photoshop og se effekten af dithering. Når billedet er indlæst, skal du vælge Gem til Web og vælge GIF-formatet. Så kan du sætte Simulering til 100% og evt. teste algoritmerne Diffusion, Mønster og Støj. Det er en meget fin lille øvelse; resultatet kan følges i previewvinduet. En anden mulighed er at indlæse et JPG-billede i Photoshop og derefter skifte billed-tilstand til Indekseret farve : Dithering Dithering (eller raster-simulering) er en teknik, der benyttes til at emulere farver, der ikke kan vises. Man skaber en illusion af nye farver ved hjælp af mønstre. Hvis du fx laver et mønster af små røde og gule prikker, vil det på afstand ligne en orange flade. Dithering blev især benyttet i ældre computere, hvor pc ens skærm ikke kunne vise mere end 8 bit farvedybde. Da kunne man ved hjælp af dithering opnå en fornemmelse af flere farver i farvebilleder. Og det er det, du oplever, hvis du indstiller din skærm til at arbejde ved 256 farver. Langt de fleste pc er kan arbejde med 16 og 24 bit farvedybde, derfor ses dithering ikke meget mere. Det er dog fortsat en valgmulighed, når du vælger at optimere et billede i GIF-formatet: Så kan du lege med indstillingerne for Rastersimulering: Det kan ikke anbefales, at du benytter dithering, når du optimerer dine grafikfiler. GIF-filerne kommer til at fylde meget mere på grund af de V

Mere om indekserede farver kulørte mønstre der dannes i flader, der egentlig burde være ensfarvede. Mønstrene er svære at komprimere. Under alle omstændigheder ser det ikke særlig godt ud, når farvefotografier vises i GIF-formatet, dithering eller ej. Men det er en meget pudsig og belærende øvelse at se funktionen i brug. Hvorfor GIF og PNG GIF-formatet Gif 87a er oprindeligt fra 1987, og det understøtter interlacing (i syv gennemløb, se side 37). I juli 1989 blev formatet forbedret, og i version 89a blev mulighederne for animation og transparens tilføjet. Problemet med GIF er, at formatet indeholder den patenterede LZWalgoritme, der bruges til kompression. Denne algoritme ejes af firmaet UNISYS, og det har givet nogle problemer. Vi, almindelige webbrugere, må frit fremstille, sende og uploade GIF-filer. Men hvis du skulle finde på at fremstiller et grafisk program med GIF-filtre, så skal der betales licens. Det har gjort, at man har udviklet det helt fri format PNG (Portable Network Graphics). PNG er tabsfrit og kan bruges til det meste af det, GIF bruges til. Det kan ikke lave animationer, men til gengæld findes det både i en 24 og en 32 bits udgave (med variabel transparens). Kompressionen skulle gennemsnitligt være omkring 15% bedre i PNG end i GIF. Jeg benytter selv PNG til masser af opgaver. En af de store fordele er, at programmet Fireworks benytter PNG som sit eget filformat. Der er tale om en 32 bits specialudgave, som kan indeholde både bitmap- og vektor-grafik foruden en lang række komponenter som lag, slices, hotspots, frames mv., som man arbejder med i Fireworks. Det er ret smart, for man kan hele tiden browser-teste PNG-filerne under arbejdet. Paletter Når et billede skal farvereduceres, skal der smides farver væk. Hvilke farver skal blive tilbage i billedet? Svaret ligger i den valgte palet. Her er grundlæggende to muligheder: du kan vælge at lave en ny palet eller benytte en eksisterende. I et program som Fireworks finder du en række GIF-paletter at vælge mellem, når du vil gemme det optimerede billede: Figur 14. Til GIF-formatet tilbyder Fireworks en række paletter. I alle tilfælde er palettens farver et udvalg af RGB-farverne. Her er en beskrivelse af dem: Adaptive 256. En ny palet dannes automatisk ud fra billedets indhold. I praksis sker der noget i retning af, at programmet vælger de 256 mest forekommende farver i billedet. I visse programmer kan du lave en markering og få filtret til at indeksere på baggrund af de i markeringen forekommende farver. Paletter baseret på princippet Adaptive giver det bedste resultat, når man skal optimere eksisterende farvebilleder til GIFformatet. WEB216. Her er tale om en fast palet (udviklet af Netscape). Den kan sikre maksimal kompatibilitet til alle typer computere (pc og Macintosh). Denne web-sikre palet benytter farver med RGB-værdierne 0, 51, 102, 153, 204 og 255 (eller med hextal: 0, 33, 66, 99, CC og FF). Det giver i alt 216 bestemte farvenuancer, der som omtalt kan fremvises på alle computertyper. Konvertering af eksisterende farvebilleder medfører ofte dithering, som det ses i Figur 15 på næste side. Paletten bør benyttes til logoer og anden grafik der tegnes på pc ikke til eksisterende farvebilleder. Websnap Adaptive. Her dannes en ny palet, men farver, der ligger tæt på de web-sikre farver ændres dertil. I Figur 16 kan du se en sammenligning af to af paletterne. I den øverste version benyttes paletten Adaptive 256 og nedenunder ses samme billede optimeret til paletten Web-safe 216. Hvis man ser efter, er der ingen diskussion om, at det øverste billede er langt at foretrække. De to billeder kan også ses på hæftets egen hjemmeside (Billedfiler F4). VI

Mere om indekserede farver Figur 15. Billedet af en vin-etikette er et farvefotografi. Jeg forsøger at gemme billedet i GIF-formatet, og benytter Photoshops funktion Gem til web. Jeg kan vælge mellem forskellige typer paletter (Sanselig, Selektiv, Adaptiv og Web). Paletten har betydning for den måde programmet reducerer antallet af farver. Paletten Web er et meget uheldigt valg, for farverne passer slet ikke til billedet. Derfor sker der en voldsom dithering (rastesimulering). Figur 16. De to forskellige paletter giver meget forskellig farvereduktion. Hvis du kigger efter, ses ditheringen tydeligt i den nederste udgave. Figur 17. GIF-optimering i Paint Shop Pro. Her ser man også tydelitg effekten af farvereduktionen og dithering. VII

JPG deluxe 27. JPG deluxe Vi har tidligere i hæftet arbejdet med JPG-filer (se fx siderne 28 og 36). Men da JPG-formatet er utroligt vigtigt, vil jeg her fordybe mig lidt mere i det. Facts om JPG JPG er egentlig ikke et filformat. Det er en samling af meget forskellige kompressions-algoritmer, som kan benyttes til kompression af fotografier. Der er 29 forskellige filtre, som er defineret af en komite kaldet JPEG (Joint Photographic Experts Group). Tilsammen danner de JPEG-standarden. Alle pc-programmer kan i dag håndtere et filformat, der er konstrueret ud fra JPEG-standarden. Filformatet hedder egentlig JFIF (JPEG File Interchange Format), men kaldes i daglig brug for JPG. Ikke alle programmer udnytter de 29 forskellige filtre, når de komprimerer billederne deraf kommer den store forskel fra program til program, når det gælder JPG-kompression. De forskellige filtre kan bruges sammen, eller nogle kan udelukkes, og mange af dem kan benyttes i variabel grad. Alt dette giver mulighed for en stor forskelligartethed inden for JPG-kompression; de enkelte programmer som Photoshop, Fireworks og IrfanView implementerer filtrene meget forskelligt. Farvedybden Almindeligvis sætter man JPG synonymt med 24 bit RGB-farver, men JPG-standarden omhandler egentlig 8 bit per farvekanal. Dvs. at formatet kan bruges til: 8 bit gråtoner 24 bit RGB 32 bit CMYK. Men når det drejer sig om webgrafik, benytter vi selvfølgelig først og fremmest 24 bits-udgaven. Tabsfri rotation og spejling (flipping) JPG-kompression medfører tab af detaljer, og gentagne kodninger kan ødelægge billedet. Derfor skal man altid bevare en original-kopi, som fx kommer direkte fra digitalkameraet. Men i visse situationer kan det lade sig gøre at gemme i JPG uden yderligere tab. Det kan udnyttes, når billeder skal gemmes efter rotation (i ryk af 90 o ) og efter spejling uden tab af kvalitet. Rent teknisk kræver den tabsfri kompression, at billedet gemmes i nøjagtig samme kvalitet. Det skal også opfylde specielle pixelmål. De fleste digitalkameraer er indrettet til at kunne rotere billederne uden tab via den indbyggede software, og billedbrowsere som FotoAlbum kan også foretage operationen. Figur 18. Den gratis billedbrowser Fotoalbum kan rotere JPG-billeder uden at der tilføjes tab. Sløring I mange programmer (som Photoshop) kan man vælge sløring, når der JPG-komprimeres: Indstillingen Sløring anvender en effekt, der er identisk med effekten af filteret Gaussisk sløring i Photoshop. Det gør det ofte muligt at komprimere filen mere, men tilføjer altså billedet en svag grad af uskarphed. Sløring kan skjule JPGartefakterne. VIII

JPG deluxe En anden metode til at fjerne artefakter består i at skrumpe billedet en smule på hver led. Du formindsker simpelthen billedstørrelsen et par pixels eller mere. I visse tilfælde kan det fjerne artefakterne. Embedded data En lille pudsig detalje. Inde i JPG-filen findes der et specielt data-område (EXIF), som visse programmer udnytter til lagring af såkaldte metadata. Det er data, som ikke direkte indgår i billedets bitmap. Photoshop har i nogle versioner gemt en miniatureudgave af billedet i dette område. Disse oplysninger kan bl.a. læses af billedbrowseren Fotoalbum: Et par fremragende programmer Noget af det bedste uafhængige JPG-software, jeg har set, kommer fra xat.com. De laver et sharewareprogram, som hedder Image Optimizer. Det er et generelt billedbehandlingsprogram, som bl.a. indeholder MagiCompression; en teknologi, som automatisk finder billedområder, der kan tåle større kompression end andre. Det virker faktisk ret godt! Figur 21. Image Optimizer benytter en meget smart metode til JPG-kompression, der automatisk varierer kompressionsgraden i billedet. Figur 19. Billedoplysninger gemt som metadata læses af billedbrowseren Fotoalbum. Mange digitale kameraer gemmer en stor portion oplysninger om billedets eksponering såsom blænder, lukkertid, dato for optagelsen mv. Alle oplysningerne for et billede ses her: Det mindre, men gratis program JPEG Optimizer fra samme firma, kan kun løse én opgave, nemlig at lave JPEG-kompression. Det gør det til gengæld også glimrende med brug af samme teknologier, som findes i Image Optimizer. Prøv programmerne; du finder link til dem på hæftets egen hjemmeside. Figur 22. JPEG Optimizer er et gratis specialprogram, der kun kan løse en opgave: at gemme grafik i JPGformatet. Figur 20. Digitalkameraet lagrer billedoplysninger. IX

Gamma correction 28. Gamma correction Lade mig slutte af med en svær sag. Gammakorrektion et begreb mange sikkert har hørt om, og som ikke mange forstår. Det gør jeg heller ikke selv, men jeg har da gravet lidt i betydningen. Skærme er forskellige Ikke alle skærme er ens. Faktisk er de enormt forskellige, og forskellene stikker dybt; de arbejder nemlig ikke lineært. Og dermed får man brug for gammakorrektion. Når lysstyrken i en skærm ikke udvikler sig lineært, betyder det fx, at en rød farve med værdien 200, er mindre end dobbelt så kraftig som lysstyrken 100. Teoretisk set burde lysstyrken 200 være dobbelt så kraftig som 100, men det er den altså ikke i praksis. Denne ulineære betoning af mellemtone-området kan være meget forskellig fra skærm til skærm Dette forhold behandles med en gammakorrektion, som netop modvirker, at mellemtoneområdet bliver for mørkt. Gammakorrektion er indbygget i computerens styresystem (fx i Windows). Meningen er, at alle billeder automatisk korrigeres i forhold til den aktuelle skærm. Du finder også gammakorrektion i visse billedbehandlingsprogrammer samt fx i scannersoftware: Figur 23. Korrektion for gamma før scanning (Canon FS2710 dias-scanner). En indviklet affære Problemet med gammakorrektionen er, at det ikke foregår særligt eksakt. Macintosh-computere har traditionelt haft relativt bedre standardiseret hardware end det man finder på Windows/Intel-baserede pc er. Macintosh skærme og grafikkort kommer fra få leverandører, og derfor er farverne lettere at styre på disse computere. På Windows-maskiner er der langt større variation i hardwaren, som kan komme fra et meget stort antal leverandører. Derfor er gamma-korrektionen lidt mere tilfældig på pc-siden. I øvrigt benytter de to platforme hver sin gammakorrektion: Macintosh: 1,8 Windows: 2,2 Det betyder, at det samme JPG-billede vil se lysere ud på en Mac end på en pc. Et program som Fireworks kan vise billedet med begge korrektioner. I Windows-versionen kan du vælge dette: Til professionel brug kalibrerer man alt det nødvendige udstyr (scanner, skærm, printer mv.) i forhold til hinanden ved hjælp af profiler og nogle gange specialudstyr. Det er utroligt indviklet og helt uden for den glade amatørs muligheder. Men du kan være opmærksom på forholdet og det kan forklare den forskel i billedernes farver, som man ofte oplever også på en og samme pc. Filformaterne JPG og PNG kan i øvrigt indeholde gamma-oplysninger om den specifikke monitor, billedet er fremstillet ved. Oplysningen lagres i filen, så billedet automatisk kan korrigeres ved fremvisning. Denne funktionalitet understøttes af Internet Explorer, men har vist aldrig fået den store betydning. X