Dato: Januar Billeder til web. Photoshop elements ver CMShouse Boulevarden Vejle

Transkript

1 Billeder til web Dato: Januar 2010 Photoshop elements ver CMShouse Boulevarden Vejle

2 Materiale Generelt Materiale Dette materiale er udviklet og bliver vedligeholdt af CMShouse i Vejle. Målgruppe Deltager information Formålet at give redaktøren et opslagsredskab til klargøring af billeder til web. Dette materiale forklarer de grundlæggende principper for at klargøre billeder til Internettet. Materialet kan anvendes uanset om du koder i HTML, bruger visuelle editorer f.eks. Dreamweaver eller anvender et CMS system. Billedbehandlingsprogrammet Adobe Photoshop Elements 6.0 er anvendt til opbygning af undervisningmaterialet. Materialet kan anvendes til andre versioner fra Adobe eller andre billedbehandlingsprogrammer. S id e 2

3 Opløsning og pixelantal Opløsning og pixelantal er de tal man skal bruge for at kende et billedes størrelse. Begge kan ses og justeres under menuen Image>Resiza>Image Size. Normalt, når man måler et areal, er det nok at kende bredde og højde. Hvis et billede måler 100 pixels på hver led, hvor stort er det så? På skærmen kan man forholde sig til det, fordi skærmen også måles i pixels, men hvor stort er det på papir? Det afhænger af billedets opløsning. Opløsningen måles i PPI (pixel per tomme) og fortæller hvor mange pixels der skrives per tomme. Jo højere opløsning (PPI) billedet har, jo flere pixelinformationer er der pr. tomme og jo bedre kvalitet. Man kan sammenligne med korsting, jo flere sting man bruger til at sy et motiv, jo mere nuanceret kan det blive. Pixelantal Hvis et billede måler 100 pixel på hver led og har en opløsning på 100 PPI, vil billedet måle 1 tomme på hver led når man udskriver det. Hvis samme billede har en opløsning på 200 PPI, vil det udskrives med 200 pixel per tomme, og derfor måle ½ tomme på hver led. Billedet vil fylde det halve når man udskriver det, til gengæld vil det være finere aftegnet end det på 100 PPI. Man kan også vende regnestykke om. Hvis billedet stadigvæk skal fylde 1 tomme på hver led skal det ikke måle 100 pixels på hver led, men 200 pixels på hver led. Så vil det første billede bestå af 100*100 pixels = pixels som Photoshop skal gemme farveinformationer om. Det andet billede vil fylde 200*200 pixels = pixels (altså 4 gange så meget!) som Photoshop skal gemme informationer om og dermed fylder billedet mere i MB på harddisken. S id e 3

4 Man kan jo godt mene at jo højere opløsning, jo flere pixels, jo bedre billede men sådan forholder det sig ikke altid! Der er ingen grund til at arbejde med flere pixelinformationer, end det medie billedet skal bruges til, kan udnytte. Derfor skal man vide hvad billedet skal bruges til, før man kan bestemme hvilken opløsning det skal være i. S id e 4

5 Der er nogle generelle tal man kan regne med: Medie Opløsning Forklaring Skærm 72/96 PPI Skærmens opløsning er 72 PPI på PC og 96 PPI på Mac. Alle billeder, uanset deres opløsning, vises i skærmens opløsning. Print 150 PPI Mange almindelige printere kan ikke udskrive bedre, et billede i højere kvalitet kan komme til at virke grumset. Avis tryk 200 PPI Avispapir er groft og suger meget farve, hvis pixels ligger tættere vil de så at sige flyde sammen. Offset tryk PPI Tryksager trykkes normalt på bedre papir, der suger mindre farve, hvorfor pixels kan ligge tættere. Hvis billedet skal trykkes bør man altid spørge trykkeren om den bedste opløsning, det afhænger nemlig både af trykkemetode og papirkvalitet. S id e 5

6 Farvedybde og farvemodeller Farvedybden er antallet af farver i et billede. Computeren gemmer informationer om farven i hver enkelt pixel. Jo mere plads den har til informationen jo flere farver kan den gemme oplysninger om. Computeren regner i BIT, én bit kan have værdien 1 eller 0 (eller man kan sige at den kan være tændt eller slukket). 1-BIT 4-BIT 8-BIT hver pixel har én bit information om farven. Denne ene bit kan have 2 forskellige værdier ( 1 eller 0) hvilket vil sige, den kan rumme informationerne sort eller hvid. Så 1-bit farve er ren sort og hvid uden nogen gråtoner imellem. 1-bit kaldes bitmap i Adobe Photoshop. giver 16 farver at arbejde med. 4-bit er ikke brugt så meget mere, den er ofte afløst af 8-bit farver. Den er alligevel med her af hensyn til forståelsen. 8 bit kan være gråtoner, hvor hver pixel har 8 bit information om farven (8 kombinationer af 1 og 0) det giver 256 kombinationer eller 256 gråtoner, hvor hvid = 0 og sort = bit kaldes gråtone i Adobe Photoshop. 8-BIT 8 bit kan også være farver. 8-bit giver en kombination af 256 farver. 8-bit er meget brugt, gif filer, som ofte er det filformat man bruger til filer, der skal downloades via telefonnettet er 8-bit. Når man bruger 256 farver, tager billedbehandlingsprogrammet de 256 mest brugte farver i billedet, og de resterende farver ændres til den af de 256, der kommer nærmest den oprindelige farve. Det vil sige, at programmet ser på hver eneste pixel og afgør, hvilken farve netop den pixel skal have. 8-bit kaldes indekseret farve i Adobe Photoshop. 16-BIT 24-BIT kaldes også for 64K farver og består af en kombination på ca farver. 16-bit farver kom frem på et tidspunkt da 8 bit farver var for lidt at arbejde med og 24 bit farver var for dyrt at investere i. De fleste billeder kan bygges op af farver, man kan faktisk næsten ikke se forskel på 16-bit farver og 24-bit farver, men 16-bit billedet fylder langt mindre på harddisken, og det er væsentligt hurtigere at arbejde med. 24-bit består af 16,7 mill. farver, de er blandet efter RGB modellen af de tre grundfarver Rød, Grøn og Blå. 24-bit kaldes blot RGB i Adobe Photoshop. S id e 6

7 32-BIT er også 16,7 mill. farver, men de er blandet efter CMYK modellens fire grundfarver Cyan, Magenta, Yellow og Black. 32- bit kaldes CMYK i Adobe Photoshop. S id e 7

8 Farvemodeller CMYK RGB CMYK farve modellen Både skærmen og øjet kan bruge RGB modellen, men det kan papir ikke. Derfor findes CMYK modellen, som er baseret på blanding af 4 grundfarver. Hvis der fyldes en given mængde af hver farve i en spand, og disse farver blandes fås den nye farve. CMYK arbejder ud fra den subtraktive farveteori, som er lige modsat den additive. Farven er hvid, når der ingen farver er, og hvis alle farver er med giver det sort. Skærmen bruger altid RBG modellen, også til at vise CMYK farver, det er derfor, at farverne på skærmen ser anderledes ud, end de gør, når de bliver printet på printeren. Det kan faktisk sammenlignes med at se på et dias (der er RGB-modellen) hvor lys strømmer igennem, og så et papirbillede (CMYK-modellen) hvor farven suges op af papiret. S id e 8

9 RGB farve modellen Både den måde hvorpå skærmen viser farver, og den måde det menneskelige øje ser farver på, er ud fra RGB modellen. RGB farvemodellen danner farver ud fra mængden af lys i de tre grundfarver Rød, Grøn og Blå. Hver pixel består af 3 punkter i de tre farver og øjet opfatter disse tre farver som en farve. Farven dannes udfra refleksion og absorbering. Blå synes blå fordi den blå farve reflekteres, mens alle andre farver absorberes. Sort fremkommer når alle farver absorberes. Dette kaldes den additive farveteori. Hvis der er fuld lystyrke i både Rød, Grøn og Blå er farven hvid, og hvis der ikke er lys i nogen af de 3, er farven sort. S id e 9

10 Filformater Alle filer har et filformat, et word dokument hedder.doc, et excel dokument hedder.xls og et Photoshop billede hedder.psd. Der findes utallige forskellige billed- og videofil formater, og Photoshop kan åbne og behandle en lang række forskellige formater. I dette afsnit vil vi kun gennemgå nogle af de mest almindelige formater. TIFF TIFF-format (Tagged Image File Format) bruges til at udveksle filer mellem programmer og computerplatforme. TIFF er et fleksibelt bitmapbilledformat, som understøttes af næsten alle tegne-, billedredigerings- og sidelayoutprogrammer. Desuden kan stort set alle scannere producere TIFF-billeder. TIFF-formatet understøtter CMYK-billeder, RGB-billeder, billeder i 256 farver og gråtonebilleder med alfakanaler samt billeder i bitmaptilstand uden alfakanaler. Photoshop kan gemme lag i en TIFF-fil, men hvis du åbner filen i et andet program, vises kun det sammenkopierede billede. Photoshop kan også gemme anmærkninger, gennemsigtighed og pyramidedata med flere opløsninger i TIFF-format. EPS EPS-format (Encapsulated PostScript) kan både indeholde vektor- og bitmapgrafik og understøttes af næsten alle grafiske illustrations- og sidelayoutprogrammer. EPS-format bruges til at overføre PostScriptgrafik mellem programmer. Når du åbner en EPS-fil med vektorgrafik, lægger Photoshop raster i billedet, så vektorgrafik konverteres til pixel. EPS-formatet understøtter farvetilstandene Lab, CMYK, RGB, Indekserede farver, Duotone, Gråtone og Bitmap, men ikke alfakanaler. EPS understøtter ikke fritskrabningskurver. I DCS-format (Desktop Color Separations), en version af standard-eps-formatet, kan du gemme farveseparationer af CMYK-billeder. Brug DCS 2.0- format til at eksportere billeder med staffagefarvekanaler. Hvis du vil udskrive EPS-filer, skal du have en PostScriptprint S id e 10

11 JPEG JPEG-format (Joint Photographic Experts Group) bruges normalt til at vise fotografier i HTML-dokumenter (HyperText Markup Language) på World Wide Web og andre onlinetjenester. JPEG-formatet understøtter farvetilstandene CMYK, RGB og Gråtone, men ikke alfakanaler. I modsætning til GIF-format bevarer JPEG alle farveoplysninger i et RGB-billede, men filstørrelsen reduceres ved, at nogle data slettes. Et JPEG-billede dekomprimeres automatisk, når det åbnes. Større komprimering giver dårligere billedkvalitet, og mindre komprimering giver bedre billedkvalitet. I de fleste tilfælde kan resultatet af kvalitetsindstillingen Maksimum ikke skelnes fra originalen. Når man bruger JPG, er det et kompromis mellem kvalitet og filstørrelse. Men med en lille til mellem komprimering kan man få et flot billede, uden at det fylder for meget. GIF GIF (Graphics Interchange Format) er det mest almindelige filformat til visning af grafik og billeder i 256 farver i HTML-dokumenter (HyperText Markup Language) på World Wide Web og andre onlinetjenester. GIF er et komprimeret format, som er udviklet til at minimere filstørrelsen og den elektroniske overførselstid. GIF-format bevarer gennemsigtighed i billeder således at billedet kan være rundt (f.eks. en knap) i stedet for firkantet, som billeder ellers er. Med GIF kan man desuden oprette animerede billeder, som giver liv til internetsiden. Et animeret billede er en fil med flere billeder, der skifter automatisk. PNG-format (Portable Network Graphics) er udviklet som et patentfrit alternativ til GIF og bruges til tabsfri komprimering og til visning af billeder på World Wide Web. I modsætning til GIF understøtter PNG 24-bit billeder og yder gennemsigtig baggrund uden ujævne kanter, men visse webbrowsere understøtter ikke PNG-billeder. PNG-format understøtter RGB-billeder, billeder i 256 farver, gråtonebilleder og billeder i bitmaptilstand uden alfakanaler. PNG beholder gennemsigtighed i gråtone- og RGB-billeder. S id e 11

12 Billeder til web Skal man oprette billeder til skærm skal man tage højde for 3 ting: Farvemodel (RGB) Opløsning (72 PPI) Filformat (JPG, GIF, PNG) Internet billeder er i princippet det samme som almindelige billeder, men man er nødt til at tage højde for Internettets begrænsninger med hensyn til overførselshastighed. Hvis man laver sine billeder, så de filmæssigt er meget store, tager det lang tid at overføre dem fra serveren til den enkelte bruger. Hvis brugeren skal vente for længe på et billede, bliver han utålmodig og forlader måske siden uden at vente på at se billedet. En anden begrænsning man skal tage højde for er antallet af farver. Nogle ældre computere kan kun vise 256 farver, og hvis man har indsat et billede i 16 mill. farver, vil det vises i en meget dårlig kvalitet på en computer med 256 farver. Så man må gøre op med sig selv, om man vil tilgodese alle brugere ved at begrænse sine farver, eller om man vil bruge mange farver og derved risikere, at nogle brugere ser billedet i en dårlig kvalitet. Filformater til web Det er ikke alle billedformater der kan vises via Internettet. De tre filformater man kan bruge er JPG og GIF og PNG. Når man skal vælge om et billede til Internet skal være JPG GIF eller PNG, er det en god ting at sammenligne billedet i de forskellige formater og se, hvilket der giver det bedste resultat. Som hovedregel kan man dog sige, at JPG bruges til fotografier og grafik billeder med farveforløb, mens GIF bruges til andre grafik billeder og til billeder, der skal have en transparent baggrund. PNG8 svarer til GIF og PNG24 svarer til JPG, men man skal være opmærksom på, at ikke alle browsere understøtter disse formater. Er billedet mindre end 100*100 pixels giver GIF oftest den mindste fil. Selv om JPG komprimerer meget, gemmer den også komprimeringsmetodeoplysninger, så det totalt giver en større fil end den tilsvarende GIF fil. S id e 12

13 Gem til web Photoshop Elements har funktionen Save for Web, via denne opretter Photoshop et billede i den korrekte farvemodel (RGB) og den korrekte opløsning (72 PPI). Dette billede er en kopi af originalen, så man kan beholde sin PSD fil som arbejdsfil. Vær opmærksom på, at når billedet optimeres (det komprimeres så filen bliver mindre) mister man noget af billedkvaliteten. Derfor bør man altid bruge PSD filen hvis man skal ændre billedet og gemme en ny web kopi bagefter. Når man skal gemme sit billede, så det kan vises i en browser, vælger man menuen File Save for Web. Herefter vises dialogboksen Save for Web. Her er 2 billeder, venstre billede er det oprindelige billede og højre billede er web-optimerede billede. I boksen Preset i højre side er det muligt at ændre til andet filformat, til anden farvedybde og Quality bestemmer kvaliteten. Under hvert billede vises filformat, filstørrelse og overførselstid. Under højre billede er knappen Preview in der giver mulighed for at få billedet vist en browser med HTML koden. Under New Size er der mulighed for at justere størrelse på billedet uden det har betydning for PSD filen. Når man er tilfreds med sit resultat klik på OK knappen, og gem filen på harddisken. S id e 13

14 Optimering af JPG Har man valgt et JPG format ser optimeringsmulighederne således ud: Kvaliteten vælges i boksen under JPG, Low, Medium, High og Maximum kan vælges. Jo højere en kvalitet man vælger, jo flere farver kommer med og jo større bliver filen. Man kan også selv justere kvaliteten i feltet Quality. Det anbefales ikke at gå under Quality 80. Med feltet Progressive kan man få billedet vist i først en grov opløsning, så i en lidt bedre opløsning og til sidst i fuld opløsning, mens det indlæses. Med feltet ICC-profil kan billedets farveprofil gemmes sammen med billedet. I feltet Matte kan man vælge den baggrundsfarve billedet skal vises på i browseren. Bemærk at det er muligt at angive farven i hexadecimale værdier, ligesom man gør i et HTML dokument. Optimering af GIF Vælger man et GIF billede ser optimeringsmulighederne således ud: Med GIF er der maksimum 256 farver at vælge imellem. I boksen under GIF er der følgende valgmuligheder: Perceptual (sanselig) anvender en farvepalette baseret på de farver der bedst opfattes af det menneskelige øje. Selective opretter en palette, der minder om ovenstående, men den prioriterer farverne fra web paletten. Er valgt som standard Adaptiv giver en palette med de farver, der er mest fremtrædende i billedet. S id e 14

15 Restrictive/Web giver en farvepalette kun bestående af de 256 sikre farver. De 256 sikre farver er de, som PC og MAC standardpaletter har til fælles. Web giver en større fil og anbefales kun, når det er vigtigt, at ingen nuancer i billedet ændres under visningen i browseren. Brugerdefineret beholder billedets palette uden at ændre den, hvis man ændrer indstillinger for optimering. Flueben i Transparency medfører f.eks. at et fritlagt logo bibeholder sin transparente baggrund. Hvis man afkrydser feltet Interlaced vil billedet blive vist hurtigt i en dårlig opløsning, så i en lidt bedre og herefter i fuld opløsning, svarende til progressiv under JPG. Optimering af PNG PNG24 billeder svarer til JPG, men PNG24 kan være gennemsigtig. Der er ingen optimeringsindstillinger for dette format. PNG8 svarer til GIF billeder, og har samme optimeringsindstillinger som disse. Transparent baggrund i GIF format Hvis man ønsker et billede med gennemsigtig baggrund, oprettes det ved at fjerne/fritlægge billedet inden billedet arkiveres til web. I dialogboksen kan man afkrydse feltet Transparency, og i feltet Matte kan man vælge den farve, billedet skal vises imod i browseren. Bemærk at JPG billeder ikke kan være gennemsigtige. Filnavne på web Filnavne til web bør ikke indeholde mellemrum, æøå, specieltegn. Skriv billedbredden til sidst i filnavnet f.eks. skultur_300.jpg S id e 15