At have billeder på din hjemmeside er essentielt for at fange dine besøgendes opmærksomhed og formidle dit budskab. Men billeder taget direkte fra et kamera eller en scanner er ofte for store, forkert farvejusterede eller i et uhensigtsmæssigt format til webbrug. Adobe Photoshop 7 er et kraftfuldt værktøj, der selv i dag kan hjælpe dig med at klargøre dine billeder effektivt til online brug. Her gennemgår vi de grundlæggende trin, du sandsynligvis skal følge, før du placerer billeder på en webside. Før vi dykker ned i processen, er det vigtigt at forstå, hvorfor disse trin er nødvendige. Billeder direkte fra kilder som digitale kameraer eller scannere er typisk i meget høj opløsning og med stor filstørrelse. På en hjemmeside ønsker vi billeder, der loader hurtigt, hvilket kræver en lille filstørrelse. Vi ønsker også, at billederne vises korrekt på forskellige skærme, hvilket involverer justering af dimensioner og farver. Photoshop 7 giver de værktøjer, der er nødvendige for at opnå dette.
https://www.youtube.com/watch?v=ygURI2Fkb2JlcGhvdG9zaG9wXzc%3D
Åbning af Billedet
Det første skridt er naturligvis at få dit billede ind i Photoshop. Dette gøres nemt. Gå til menuen "File" (Filer) øverst til venstre i programmet og vælg "Open" (Åbn). Naviger til den mappe, hvor dit billede er gemt, vælg filen og klik på "Open". Dit billede vil nu blive vist i Photoshops arbejdsområde.
Zoom for Præcision
Når billedet er åbent, er det en god idé at få en realistisk fornemmelse af dets faktiske størrelse. Selvom billedet fylder din skærm, kan det være, at du ser det zoomet ind eller ud. For at se billedet i dets sande størrelse, som det ville blive vist på en skærm med en opløsning på 72 dpi, skal du indstille zoomniveauet til 100%. Nederst til venstre i programvinduet finder du en boks, der viser det aktuelle zoomniveau (f.eks. 50% eller 200%). Klik på dette tal, skriv "100" og tryk Enter. Dette giver dig et klart billede af, hvor stort billedet reelt er, hvilket er afgørende for de næste trin.
Justering af Billedstørrelse
Billedstørrelsen er en af de mest kritiske faktorer for billeder på web. Et for stort billede vil ikke kun tage for meget plads på skærmen, men vil også have en unødvendig stor filstørrelse, der forsinker indlæsningstiden for din webside. Omvendt vil et for lille billede fremstå utydeligt, hvis det skal skaleres op af browseren. Overvej nøje, hvor på din webside billedet skal placeres, og hvilken rolle det skal spille. Skal det være et stort, centralt element, eller et mindre billede, der understøtter teksten? Når du har besluttet dig for de ønskede dimensioner (bredde og højde), skal du justere billedstørrelsen i Photoshop. Gå til menuen "Image" (Billede) og vælg "Image Size" (Billedstørrelse). Dette åbner en dialogboks. I denne dialogboks ser du felter for bredde og højde. Du kan indstille disse i forskellige enheder, men "pixels" er mest relevant for web. Indtast de ønskede pixelmål. Det er yderst vigtigt at sikre, at "Constrain Proportions" (Begræns proportioner) er markeret. Når denne boks er tjekket, vil Photoshop automatisk justere højden, når du ændrer bredden (og omvendt), så billedets oprindelige billedformat bevares. Dette forhindrer, at billedet bliver strukket eller klemt, hvilket ville fordreje motivet. En anden vital indstilling i denne boks er "Resolution" (Opløsning). Standardopløsningen for billeder, der skal vises på en skærm, er 72 pixels/inch (eller ppi). Billeder fra kameraer eller scannere har ofte en meget højere opløsning (f.eks. 300 ppi), hvilket er nødvendigt til print, men overflødigt og filstørrelse-øgende til web. Sørg for at indstille opløsningen til præcis 72 pixels/inch. Husk, at når du ændrer opløsningen ned, skal "Resample Image" (Gengiv billede igen) være markeret, da det er denne funktion, der omberegner billedets pixeldata til den nye opløsning. Hvis du kun ændrer opløsningen uden at resample, ændrer du blot billedets printstørrelse, ikke dets pixeldimensioner eller filstørrelse væsentligt for webbrug.
Rotation af Billedet
Det sker ofte, at billeder er taget på siden eller scannet på hovedet. Dette er let at rette i Photoshop 7. Gå til menuen "Image" (Billede) og derefter "Rotate Canvas" (Roter lærred). Her finder du standardindstillinger som 90° med uret (CW) eller mod uret (CCW) og 180°. Disse er selvforklarende og dækker de fleste behov. Hvis dit billede kun er let skævt, kan du vælge "Arbitrary" (Vilkaårlig). Dette åbner en dialogboks, hvor du kan indtaste et specifikt antal grader og vælge retning (CW eller CCW) for en præcis rotation.
Justering af Farveindstillinger
Selv med digitale kameraer og scannere kan billeder lide under problemer som over- eller underbelægning, forkert hvidbalance eller farvestik. Photoshop 7 tilbyder en række værktøjer til at korrigere disse problemer, hvilket er afgørende for at få dine billeder til at se professionelle ud på din hjemmeside. En god farvejustering kan gøre en kæmpe forskel for billedets gennemslagskraft.
Auto Color
Hvis et billede virker for varmt (for orange/rødt) eller for koldt (for blåt/grønt), skyldes det typisk en forkert hvidbalance. "Auto Color" (Automatisk farve) funktionen kan forsøge at rette dette automatisk. Med billedet åbent, gå til "Image" > "Adjustments" (Justeringer) > "Auto Color". Photoshop analyserer billedets farver og forsøger at justere hvidbalancen til et mere neutralt niveau. Resultatet kan variere, og det er ikke altid perfekt, men det er et hurtigt første skridt. Hvis du ikke er tilfreds, kan du altid fortryde ændringen ved at gå til "Edit" (Rediger) > "Undo" (Fortryd) eller trykke Ctrl+Z.
Auto Levels
"Auto Levels" (Automatiske niveauer) justerer billedets tonale rækkevidde for hver farvekanal (rød, grøn, blå) individuelt. Dette kan forbedre kontrasten og farvemætningen ved at sætte de mørkeste pixels til sort, de lyseste til hvid og fordele mellemtoneværdierne jævnt. Gå til "Image" > "Adjustments" > "Auto Levels". Ligesom "Auto Color" er dette en hurtig automatisk justering. Det kan især hjælpe med at få farver til at poppe mere, for eksempel ved at forbedre forskellen mellem himlens blå og skyernes røde farver i et solnedgangsbillede.
Auto Contrast
"Auto Contrast" (Automatisk kontrast) justerer billedets overordnede kontrast ved at maksimere den tonale rækkevidde for det samlede billede (ikke individuelt for hver farvekanal som "Auto Levels"). Dette er nyttigt for billeder, der virker flade eller har lav kontrast, hvor der er lille forskel mellem lyseste og mørkeste områder. Gå til "Image" > "Adjustments" > "Auto Contrast". Denne funktion kan enten øge eller mindske forskellene mellem lys og mørke for at skabe et mere behageligt billede. Disse automatiske funktioner er gode til hurtige forbedringer, men for mere kontrol tilbyder Photoshop også manuelle justeringsværktøjer.
Levels (Manuelle Niveauer)
Manuelle "Levels" (Niveauer) giver dig finjusteret kontrol over billedets lysstyrke og kontrast samt farvefordelingen i de mørke, midterste og lyse toner. Gå til "Image" > "Adjustments" > "Levels". Dette åbner en dialogboks med et histogram, der viser fordelingen af pixels baseret på deres lysstyrke. Øverst i dialogboksen kan du vælge "Channel" (Kanal), typisk RGB (for alle farver) eller individuelt Rød, Grøn, Blå. Under histogrammet er der tre små trekanter (sliders): en sort til venstre, en grå i midten og en hvid til højre. Den sorte trekant justerer billedets sorte punkt. Pixels, der er mørkere end den værdi, du sætter her, bliver helt sorte. Ved at trække denne trekant til højre gør du de mørke områder mørkere og øger kontrasten i skyggerne. Den hvide trekant justerer billedets hvide punkt. Pixels, der er lysere end denne værdi, bliver helt hvide. Ved at trække denne trekant til venstre gør du de lyse områder lysere og øger kontrasten i højlysene. Den grå trekant i midten justerer billedets mellemtone (gamma). Ved at trække den til venstre gør du mellemtoneområderne lysere, og ved at trække den til højre gør du dem mørkere. Dette påvirker den overordnede lysstyrke uden at påvirke de helt sorte og hvide punkter. Ved at justere disse sliders, især for individuelle farvekanaler, kan du løse farvestik eller forbedre bestemte farver. For eksempel, hvis du har et billede af stranden og havet og ønsker at gøre havet blåt mere levende uden at påvirke stranden, kan du vælge den blå kanal og justere sliders for kun den farve. Dette værktøj er utrolig kraftfuldt, men kan kræve lidt øvelse at mestre.
Color Balance (Farvebalance)
"Color Balance" (Farvebalance) giver dig mulighed for at justere farverne i skygger, mellemtoner og højlys separat. Gå til "Image" > "Adjustments" > "Color Balance". Dialogboksen har skydere, der lader dig blande mere cyan/rød, magenta/grøn eller gul/blå ind i de valgte tonale områder (Shadows, Midtones, Highlights). Dette er fantastisk til at fjerne farvestik eller skabe specifikke farveeffekter. Hvis du f.eks. vil give dine højlys et varmere skær, vælger du "Highlights" og trækker skyderen mod gul/rød.
Brightness/Contrast (Lysstyrke/Kontrast)
"Brightness/Contrast" (Lysstyrke/Kontrast) er et simpelt, men effektivt værktøj til at justere den overordnede lysstyrke og kontrast i billedet. Gå til "Image" > "Adjustments" > "Brightness/Contrast". Dialogboksen har to skydere: en for lysstyrke og en for kontrast. At øge lysstyrken gør hele billedet lysere, mens at mindske det gør det mørkere. At øge kontrasten øger forskellen mellem de lyseste og mørkeste dele af billedet, hvilket kan gøre billedet mere levende. At mindske kontrasten reducerer denne forskel, hvilket kan være nyttigt for billeder med meget hårde overgange.
Sammenligning af Automatiske Farvejusteringer
| Funktion | Primær Effekt | Bedst til |
|---|---|---|
| Auto Color | Justerer hvidbalance | Fjerne farvestik (for varmt/koldt) |
| Auto Levels | Justerer tonale rækkevidde for hver farve | Forbedre kontrast og farvemætning |
| Auto Contrast | Justerer overordnet kontrast | Forbedre billeder med lav kontrast |
Redigering af Billedet
Når størrelse og farver er justeret, kan du foretage yderligere redigeringer. To meget almindelige værktøjer er beskæringsværktøjet og tekstværktøjet.
Beskæringsværktøjet (Crop Tool)
"The Crop Tool" (Beskæringsværktøjet) bruges til at fjerne uønskede dele af billedet og beholde et mindre, udvalgt område. Dette er nyttigt for at forbedre billedets komposition eller fjerne distraktioner. Vælg beskæringsværktøjet fra værktøjslinjen til venstre (ikonet ligner to overlappende vinkler). Klik og træk en firkant over det område af billedet, du vil beholde. Når du slipper musen, vises et rektangulært område med håndtag i hjørnerne og på siderne. Du kan trække i disse håndtag for at finjustere beskæringsrammens størrelse og position. Når du er tilfreds med det valgte område, tryk på Enter-tasten (på Windows) eller Return-tasten (på Mac). Alt uden for den valgte ramme vil blive slettet permanent. Husk, at du altid kan fortryde en beskæring lige efter ved at bruge "Edit" > "Undo" eller Ctrl+Z.
Tekstværktøjet (Text Tool)
Ofte vil du måske tilføje tekst til dine billeder – en billedtekst, en titel, eller måske en sjov taleboble. Vælg "The Text Tool" (Tekstværktøjet) fra værktøjslinjen (ikonet er et stort 'T'). Klik et sted på billedet, hvor du vil tilføje tekst, og en tekstmarkør vil blinke. Skriv din tekst. Når teksten er tilføjet, kan du markere den for at ændre skrifttype, størrelse, farve og justering via indstillingslinjen øverst på skærmen. Photoshop 7 tilbyder også muligheder for at deformere teksten ("Warped Text Tool"), så den følger en bue eller en anden form, hvilket kan skabe interessante effekter.
Optimering til Web (Save For Web)
Dette er måske det vigtigste skridt for at klargøre dit billede til online brug. Målet er at finde den balance mellem billedkvalitet og filstørrelse, der sikrer hurtig indlæsning uden at billedet mister for meget kvalitet. Gå til "File" (Filer) > "Save For Web" (Gem til web). Dette åbner en speciel dialogboks, der er designet specifikt til dette formål. "Save For Web"-dialogboksen viser typisk flere versioner af dit billede side om side (originalen og op til tre optimerede versioner). Disse forhåndsvisninger viser, hvordan billedet vil se ud, når det gemmes med forskellige indstillinger og formater. Under hver forhåndsvisning vises vigtige informationer som filformat (f.eks. GIF, JPEG, PNG) og den forventede filstørrelse samt indlæsningstid (baseret på en standardforbindelse). Du kan vælge en af de optimerede forhåndsvisninger og derefter justere indstillingerne i panelet til højre for at finde den optimale balance. De vigtigste indstillinger inkluderer filformat og kvalitet:
- JPEG: Bedst til fotografier og billeder med mange farver og gradienter. Det bruger komprimering, der reducerer filstørrelsen, men kan medføre tab af kvalitet ved lave kvalitetsindstillinger. Du kan justere kvaliteten (typisk på en skala fra 0 til 100 eller Lav/Medium/Høj/Maksimal). En kvalitet på 60-80 er ofte tilstrækkelig til web og giver en god reduktion i filstørrelsen.
- GIF: Bedst til simple grafikker, logoer, tegninger og billeder med få farver og skarpe kanter. Understøtter gennemsigtighed og animation. GIF bruger en begrænset farvepalet (op til 256 farver).
- PNG-8: Ligner GIF (understøtter op til 256 farver og gennemsigtighed), men bruger en anden komprimeringsmetode, der ofte er mere effektiv. God til grafikker og logoer.
- PNG-24: Understøtter millioner af farver og avanceret gennemsigtighed (alfa-kanaler). God til billeder, der kræver høj kvalitet og gennemsigtighed, men resulterer ofte i større filstørrelser end JPEG.
For de fleste fotografier til web vil du vælge JPEG. Eksperimenter med kvalitetsindstillingen, mens du holder øje med forhåndsvisningen og den resulterende filstørrelse. En god tommelfingerregel er at stræbe efter en filstørrelse under 100 KB pr. billede, selvom større billeder naturligvis kan være lidt større. PNG er et godt valg, hvis du har brug for gennemsigtighed (f.eks. et logo, der skal ligge oven på baggrunden på din webside) eller til grafikker. Udover format og kvalitet kan du i "Save For Web"-dialogboksen også justere billedets dimensioner en sidste gang, vælge optimering (f.eks. "Optimized" for GIF/PNG), og indstille gennemsigtighed (hvis relevant). Vælg den forhåndsvisning, der giver det bedste kompromis mellem udseende og filstørrelse. Klik på den valgte forhåndsvisning for at markere den, og klik derefter på knappen "Save" (Gem). Du vil blive bedt om at vælge et navn og en placering for den optimerede fil. Klik "OK" eller "Gem".
Tillykke! Du har nu redigeret, optimeret og gemt dit første billede til webbrug i Photoshop 7.
Ofte Stillede Spørgsmål (FAQ)
Q: Hvorfor skal opløsningen være 72 pixels/inch til web?
A: 72 ppi (eller dpi) var oprindeligt standarden for computerskærme. Selvom moderne skærme har meget højere opløsninger (f.eks. Retina-skærme), refererer billedets pixeldimensioner (f.eks. 800x600 pixels) til, hvor mange pixels det fylder på skærmen. Opløsningsindstillingen (ppi) i billedfilen bruges primært af software til at bestemme den fysiske størrelse, hvis billedet skal printes. For webbrowsere er det primært pixeldimensionerne, der tæller. En højere ppi-værdi end 72 ppi forøger unødvendigt filstørrelsen, hvis billedet skal skaleres ned til en bestemt pixeldimension, fordi det indeholder mere data, der alligevel kasseres ved nedsamplingen. Ved at sætte det til 72 ppi fra starten sikrer du, at billedstørrelse-dialogboksen viser en mere intuitiv sammenhæng mellem pixeldimensioner og den 'traditionelle' skærmstørrelse, og du undgår unødvendig datamængde.
Q: Hvilket filformat er bedst for mine billeder på web?
A: Det afhænger af billedets indhold. Brug JPEG til fotografier med mange farver og bløde overgange. Brug GIF eller PNG-8 til grafikker, logoer, ikoner og billeder med få farver og skarpe linjer. Brug PNG-24, hvis du har brug for høj kvalitet og avanceret gennemsigtighed, men vær opmærksom på den større filstørrelse.
Q: Jeg beskårede mit billede forkert! Hvad gør jeg?
A: Straks efter du har trykket Enter/Return for at bekræfte beskæringen, kan du fortryde handlingen ved at gå til menuen "Edit" (Rediger) og vælge "Undo Crop" (Fortryd beskæring) eller ved at trykke på tastaturgenvejen Ctrl+Z (Windows) eller Cmd+Z (Mac). Hvis du har lavet andre ændringer efter beskæringen, skal du muligvis fortryde flere trin. Du kan også bruge "History" (Historik)-paletten (typisk under "Window" menuen) til at gå tilbage til et tidligere stadie i din redigeringsproces.
Q: Mine billeder ser stadig store ud, selvom jeg har sat opløsningen til 72 ppi og justeret pixelstørrelsen?
A: Opløsningen (ppi) påvirker primært billedets fysiske størrelse ved print. For web er det *pixeldimensionerne* (bredde x højde i pixels), der bestemmer, hvor meget plads billedet fylder på skærmen. Sørg for, at du i dialogboksen "Image Size" (Billedstørrelse) justerer "Width" (Bredde) og "Height" (Højde) til de ønskede pixelmål for web. Hvis billedet f.eks. skal fylde 600 pixels i bredden på din webside, skal du indstille bredden til 600 pixels, *efter* du har sat opløsningen til 72 ppi (med "Resample Image" markeret). Husk også at din websides layout (CSS) kan påvirke den endelige visning af billedet i browseren.
Q: Hvorfor er filstørrelsen vigtig for web?
A: Filstørrelsen påvirker direkte, hvor hurtigt din webside indlæses i en brugers browser. Store billedfiler tager længere tid at downloade, hvilket kan frustrere besøgende med langsomme internetforbindelser eller på mobile enheder. Langsomme hjemmesider kan føre til højere "bounce rates" (besøgende, der forlader siden hurtigt) og kan også påvirke din hjemmesides placering i søgemaskinerne. Optimering af billeder til en lille filstørrelse er derfor afgørende for en god brugeroplevelse og webside-ydelse.
Hvis du vil læse andre artikler, der ligner Klargør Billeder til Web med Photoshop 7, kan du besøge kategorien Fotografi.