Hij is of te groot of te klein of de verhouding tussen de hoogte en de breedte is niet goed.
Het kost niet veel moeite om een afbeelding te verknoeien met een paar riskante handelingen.
In deze les leer je de regels waarmee je de juiste afbeelding voor je pagina krijgt met de oorspronkelijke kwaliteit.
Voordat je verder gaat, raden we je aan de afbeelding weer te geven en op te slaan waarmee we deze hele les gaan werken.
Stel jezelf de volgende vragen
In alle gevallen zijn er een paar belangrijke vragen die je jezelf moet stellen:
- Welke afmetingen krijgt de afbeelding op de webpagina?
Dit is een cruciale vraag.
Bij een afbeelding die wordt weergegeven op een scherm - wat het geval is als je hem op het web gebruikt - worden de afmetingen weergegeven in pixels. - Wat is de ware grootte van de afbeelding?
In Paint Shop Pro worden de afmetingen van de afbeelding weergegeven in het dialoogvenster Open file, links van de miniatuur.
Zodra de afbeelding is geladen, kan je deze informatie opvragen door op Shift+I te drukken - Verschillen de verhoudingen?
Je berekent de verhoudingen door de breedte van de afbeelding te delen door de hoogte.
Doe hetzelfde voor de gewenste afmetingen op de webpagina. Als de twee verhoudingen gelijk zijn, kan je de afbeelding zonder bijknippen gebruiken. - Moet de afbeelding worden vergroot of verkleind?
Dit is belangrijk.
Paint Shop Pro voegt pixels aan de afbeelding toe, wat kan leiden tot blokvorming en schaaleffecten.
Als de afbeelding moet worden verkleind, moeten pixels worden verwijderd, wat een aanzienlijk verlies aan detail kan geven.
Als de situatie het toelaat, is het beter om een afbeelding bij te snijden in plaats van de afmetingen te veranderen.
In deze les beginnen we met een afbeelding van 345 x 464 pixels.
De ruimte die je voor de afbeelding hebt gereserveerd op de webpagina is 300 x 400 pixels.
We gaan verschillende mogelijkheden uitproberen om op de juiste afmetingen uit te komen.
Heb je geen afbeelding bij de hand, dan kan je nog altijd de onderstaande grabben:
(even rechtsklikken en opslaan als...)
De afbeelding bijsnijden
Dit houdt in dat je een gedeelte van de afbeelding selecteert en dit uitknipt. Dat doe je met Paint Shop Pro 5 op de volgende manier:
- Klik op de knop Crop. Dit is de vierde knop op de werkbalk.
- Teken een rechthoek van 300 pixels breed bij 400 pixels hoog.
Deze waarden zie je linksonder op de statusbalk.
Het maakt niet uit waar het frame zich bevindt.
- Klik binnen de bijsnijdrechthoek en sleep de rechthoek naar de gewenste locatie.
De keus van de uiteindelijke locatie van het frame is een ontwerpkwestie.
In dit voorbeeld houden we de reflectie van het laken in de rivier. - Dubbelklik binnen de bijsnijdrechthoek.
De afbeelding wordt automatisch bijgesneden tot de afmetingen die je hebt ingesteld, in dit geval 300 x 400 pixels .
De afbeelding heeft nu de gewenste afmetingen, maar een heel stuk ervan is verloren gegaan.
In dit voorbeeld is de nadruk komen te liggen op het hoofdthema van de afbeelding, de witte was die te drogen hangt in het trapgat.
Soms is het belangrijk dat je de hele afbeelding behoudt.
In dat geval moet je de afbeelding vergroten of verkleinen.
Een afbeelding vergroten of verkleinen
De kwaliteit van een afbeelding verslechtert als je hem vergroot of verkleint omdat pixels worden toegevoegd of verwijderd.
Zelfs als Paint Shop Pro zijn best doet om deze problemen tot een minimum te beperken door de pixels in elkaar te schuiven...
Daar gaan we nu echter niet op in.
Laten we aannemen dat je afbeelding is geladen in de ruimte die je ervoor hebt gereserveerd met de volgende opdracht:
<IMG SRC="Image.jgp" WIDTH=300 HEIGHT=400>
De browser verkleint of vergroot de afbeelding automatisch zodat deze in het frame past en rekt de breedte of de lengte uit als de verhoudingen niet hetzelfde zijn.
Dat is de reden waarom je de afbeelding vantevoren moet voorbereiden.
In het volgende voorbeeld is het probleem hetzelfde als in het vorige: een afbeelding van 345 x 464 pixels moet passen in een ruimte van 300 x 400 pixels.
De twee frames zijn niet identiek.
De afbeelding heeft een verhouding van 1:0,74 en de ruimte 1:0,75.
Het verschil is zo klein dat we het zouden kunnen negeren.
Alles wat we hoeven doen is de grootte van de afbeelding te wijzigen in Paint Shop Pro.
Met welke kant moeten we beginnen?
Met de kant waar de verhouding kleiner is, zodat we optimaal kunnen vergroten of verkleinen.
Voor de breedte is de verhouding 345/300 = 1,15 ; voor de hoogte 464/400 = 1,16.
We beginnen dus met de breedte.
We gaan als volgt te werk om de afbeelding op de juiste grootte te krijgen:
- Selecteer Image > Resize.
- Geef 300 op in het vak Width van het dialoogvenster dat verschijnt.
Paint Shop Pro berekent de hoogte standaard automatisch: 403 pixels.
Klik op OK.
De afbeelding is 3 pixels te hoog.
Je kunt nu kiezen uit drie mogelijke oplossingen:
- niets doen.
De browser drukt de afbeelding een heel klein beetje samen zodat hij in de gereserveerde ruimte past.
Dit is bijna niet zichtbaar. - de afbeelding bijsnijden.
Er worden drie rijen pixels opgeofferd aan de boven- of onderkant van de afbeelding. - geef de kenmerken WIDTH en HEIGHT van de <IMG> niet op.
In dit geval gebruikt de browser de afbeelding met de normale afmetingen.
Deze oplossing wordt niet aangeraden.
Het is altijd beter de afmetingen van een afbeelding aan te geven in de HTML-code. - verbeter de HTML-code door de volgende waarden voor de kenmerken van de code op te geven:
WIDTH=300 HEIGHT=403
Dit is de netste oplossing die de afbeelding als geheeld het meest intact laat.
En je ziet het.
Je hebt nu de essentiële technieken voor het produceren van een site met leesbare afbeeldingen onder de knie.