Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Hou de foto’s op je website haarscherp
22 okt 2008•Heb je ooit al eens een foto moeten verkleinen om die op een website te plaatsen? Misschien heb je dan gemerkt dat de verkleinde foto er plots een stuk onscherper uitziet. Het is een veelvoorkomende kwestie die vrij eenvoudig te verhelpen is.
Het probleem
Om te verkleinen ga je het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) oproepen. Je wijzigt daarna de pixelafmetingen en klaar is kees. Van een foto als deze, bekom je dan een resultaat als dit:
Ziet er goed uit? Het kan beter! Zeker als je het origineel bekijkt dan valt op dat de letters een stuk waziger zijn. Dat komt omdat Photoshop tijdens het verkleinen niet echt rekening heeft gehouden met de randen die in je foto voorkomen. Nu is het net het randcontrast in je foto die de scherpte gaat bepalen.
De oplossing
Gelukkig kunnen we Photoshop op een andere manier de foto laten verkleinen. Als je even terugkeert naar het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) dan zal je zien dat je onderaan het berekeningsalgorithme van Photoshop kan wijzigen bij ‘Nieuwe beeldpixels berekenen’. Als je wil verkleinen dan kies je hier best voor de optie ‘Bicubisch scherper (meest geschikt voor reductie)’.
Het resultaat
Het resultaat van de nieuwe verkleining kan je hieronder zien. De foto is stukken scherper en ziet er naar mijn mening veel beter uit. (Een snelle vergelijking.)
Opslaan voor web en apparaten
De meeste webdesigners gaan hun foto’s verkleinen in het dialoogvenster ‘Opslaan voor web en apparaten’ (Save for web and devices). Ook hier kan je het algorithme dat Photoshop gebruikt tijdens de verkleining gaan instellen op ‘bicubisch scherper’. De screenshot hieronder demonstreert dat:
Te scherp?
Vind je dat je foto er nu te scherp uitziet? Verklein dan op de oude manier (met het standaard ingestelde bicubisch algorithme), en ga net voor het opslaan je foto nog even verscherpen via ‘Filter > Verscherpen > Slim verscherpen’ (Filter > Sharpen > Smart sharpen). Nu heb je de hoeveelheid verscherping helemaal zelf in de hand.
Categorieën: Photoshop,
Over 
TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.
RSS Feed TheHotSeatLaatste blog posts
- Upgraden naar ExpressionEngine 2.0
- Hoe het ontwerp van Transistor tot stand kwam
- Transistor: radio op de iPhone
- Over HTML5
- Scrollen in het oneindige
Laatste reacties
- Hendrik op Upgraden naar ExpressionEngine…
- Thomas Byttebier op Hoe het ontwerp van Transistor…
- Thomas Byttebier op Upgraden naar ExpressionEngine…
- Kevin op Upgraden naar ExpressionEngine…
- Frederik Severijns op Hoe het ontwerp van Transistor…
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving
Gelijkaardige blog posts
7 reacties op dit bericht
Wanneer je een plaatje verkleint is dit soms niet goed genoeg om de scherpte te behouden op jouw manier. Om er voor te zorgen dat het scherp blijft is het soms nodig deze na te bewerken. Dit kun je naar mijn idee het beste doen door een kopie van je foto te maken in een nieuwe layer dan naar Filter—> other—> highpass je ziet nu wat scherp word speel met deze slider. Zet vervolgens je layer op softlight. Om dingen scherp worden weg te laten vallen naar het orginee gebruik een brush op #808080 .. P.s. een foto kan zo altijd scherper.
Pascal, de ‘highpasstechniek’ die jij beschrijft is zeker en vast een goede manier om foto’s scherper te maken. Het neemt natuurlijk net ietsje meer tijd in beslag. Bedankt voor je tip!
Geen dank, ik vind je blog een leuk blog ik kijk er zo nu en dan op als je het leuk vind kun je me altijd bereiken op MSN vos_pascal[apenstaartje]hotmail.com zo kunnen we nog eens wat leuke informatie uit delen!
Goeie tip!
1 toevoeging echter. Indien je de Save for web gebruikt om je slices op te slaan vanuit Photoshop, dan bekom je veel betere resultaten qua filesize als je Fireworks gebruikt.
Doe maar eens de test. Een afbeelding op 80% jpeg in Photoshop zal een heel pak (kan tot 50% oplopen) groter zijn dan diezelfde afbeelding op 80% in Fireworks.
En ook in CS4 is de JPEG-engine van photoshop nog steeds inferieur aan die van Fireworks. Dit heb ik oa horen toegeven door een Adobe Evangelist op het seminarie in Milaan.
Voor zo’n winst in bestandsgrootte zou je al eens overwegen om met fireworks de slices aan te maken..
Bedankt voor de overige tips!
Hé Klaus, bedankt voor die tip, dat wist ik niet. Vreemd eigenlijk dat de JPEG engine van Photoshop nog niet aangepast is aan die van Fireworks. Je zou toch vermoeden dat die hetzelfde resultaat oplevert van 2 producten die ondertussen al een paar jaar onder hetzelfde Adobedak huizen.
De optimalisering van PNG bestanden laat trouwens ook nog te wensen over. Maar dat had je misschien al gelezen in een eerdere post van me over OptiPNG.
Interessant artikel. Inderdaad jammer en vreemd dat Photoshop in het “save-for-web-gebied” blijkbaar sterk achterloopt op Fireworks. In Fireworks kan je bijvoorbeeld ook PNG8 afbeeldingen met alpha transparency opslaan. De bestandsgrootte is (veel) kleiner. Bovendien worden pixels die meer dan 50% doorzichtig zijn automatisch 100% doorzichtig (i.p.v. grijs) in Internet Explorer 6.
@ thomas: bedankt voor die fireworks tip! Dit is erg leuk om te weten
Plaats een reactie
Reageren is niet mogelijk op dit bericht.