Veel van jullie maken leuke, originele sigs en andere kunstwerkjes met Photoshop. Jammer genoeg zie ik ook dat sommige van jullie niet goed weten hoe je die creaties het beste op kan slaan, met als gevolg een te groot bestand, een plaatje met slechte kwaliteit, of een combinatie van beide. In deze tutorial zal ik uitleggen hoe je jouw plaatjes kunt opslaan met goede kwaliteit, zonder een gigantische filesize als gevolg. Ik ga het in deze tutorial vooral over verschillende filetypes hebben en hun voor- en nadelen. Je zult zowel nuttige informatie voor beginners als voor redelijk gevorderden in deze tutorial aantreffen.
Save for Web foo'!
In Photoshop kan je op twee manieren een bestand opslaan; met "Save As" of met "Save for Web". Het is alleen slim om Save As te gebruiken in de volgende drie gevallen:
- Wanneer je een plaatje wil opslaan waar je later nog verder aan wil werken. Je kan je bestand bijvoorbeeld als .PSD opslaan, zodat de verschillende layers ook opgeslagen blijven.
- Wanneer je een plaatje per se als een specifiek filetype wil opslaan, bijvoorbeeld om in een ander programma mee verder te werken.
- Wanneer je een plaatje met vrijwel geen kwaliteitsverlies op je harde schijf wil opslaan (als .BMP).
Save for Web gebruik je - zoals de naam al aangeeft - wanneer je een plaatje op het internet gaat zetten. De save-opties die je bij Save for Web vindt zijn namelijk ontworpen om de gebruiker een gewenste kwaliteit/filesize ratio te kiezen die aansluit bij zijn wensen. Het doel is uiteraard om altijd een zo klein mogelijke filesize te hebben, bij een zo hoog mogelijke kwaliteit. Persoonlijk gebruik ik vrijwel altijd Save for Web om plaatjes op te slaan, wat logisch is omdat bijna al mijn creaties via het internet verstuurd worden.
GIF, JPEG of PNG?
Wanneer we iets gaan opslaan met Save for Web kunnen we kiezen uit verschillende filetypes, waaronder GIF, JPEG, PNG-8 en PNG-24. GIF is een format dat 256 verschillende kleuren ondersteunt, waarvan er 1 transparant kan zijn. Dit filetype geeft een betere kwaliteit/filesize ratio dan JPEG bij plaatjes die weinig kleuren hebben. Foto's bevatten vaak veel kleuren en plaatjes met overlopende kleuren ook. Dat soort plaatjes zijn dus beter als JPEG op te slaan. De "progressive" optie aanvinken zorgt ervoor dat dat internet-gebruikers met een tragere verbinding het plaatje langzaam zien verschijnen, van boven naar beneden. Hij laat dus gelijk zien wat gedownload wordt.
GIF is een vrij oud filetype dat stamt uit de tijd dat monitoren vaak niet meer dan 256 kleuren konden tonen. GIF gebruik je bij plaatjes met weinig verschillende kleuren. Als je een plaatje met een doorzichtige kleur wil hebben is GIF ook een goede keuze. PNG ondersteunt ook transparancy (doorzichtigheid) en zelfs uitgebreider, aangezien elke pixel 256 standen van doorzichtigheid kan krijgen, maar jammer genoeg wordt dit nog niet ondersteund door alle browsers. Firefox doet dit wel, maar het veelgebruikte Internet Explorer bijvoorbeeld niet. De "interlaced" optie aanvinken zorgt ervoor dat internet-gebruikers met een tragere verbinding het plaatje langzaam steeds scherper zien worden. Nog een voordeel naast de ondersteuning door vrijwel alle browsers is dat je met GIF meerdere plaatjes achter elkaar kan zetten. Een GIF plaatje kan dus een animatie zijn. Dit is niet mogelijk met PNG of JPEG.
PNG-8 is een 8-bit PNG format, wat wil zeggen dat het net als GIF 256 kleuren ondersteunt. Voordelen zijn de betere transparancy mogelijkheden (die ik hierboven al toegelicht heb), gamma correctie en twee-dimensionale interlacing. Gamma correctie zorgt ervoor dat wanneer het plaatje wordt overgezet van het ene naar het andere platform dat de helderheid hetzelfde blijft. Twee-dimensionale interlacing is een betere vorm van het één-dimensionale interlacing dat wordt gebruikt bij het GIF formaat. Dit zorgt ervoor dat de plaatjes scherper en dus beter te bekijken zijn tijdens het laden dan GIF-plaatjes.
Verder hebben we de keuze om het plaatje op te slaan als PNG-24, dit is een 24-bit PNG format, wat wil zeggen dat het plaatje 16.7 miljoen kleuren kan bevatten. Als je dit kiest krijg je een plaatje met vrijwel geen kwaliteitsverlies, maar de filesize wordt ook vrij groot. Wanneer je kiest voor een JPEG kan je de filesize zelf bepalen door de kwaliteit te verhogen of verlagen, deze mogelijkheid is er niet wanneer je voor PNG-24 kiest.
Door linksonder te kijken kan je de filesize van je plaatje zien. Door deze te bekijken en bepaalde opties te veranderen of de kwaliteit te veranderen en vervolgens het plaatje in de gaten te houden kan je een keuze maken op welke kwaliteit je op wil slaan en met welke opties aan.
De eigenschappen nog even op een rijtje:
GIF eigenschappen:
- Kleinere filesize bij plaatjes met weinig kleuren
- Mogelijkheid tot animaties
- Transparancy mogelijkheid
- Interlacing mogelijkheid
- Ondersteuning door vrijwel alle browsers
- Maximaal 256 kleuren
PNG-8 eigenschappen:
- Soms kleinere filesize dan GIF
- Superieure transparancy mogelijkheid
- Superieure interlacing mogelijkheid
- Wordt niet volledig door alle browsers ondersteund
- Maximaal 256 kleuren
JPEG eigenschappen:
- Kleinere filesize bij plaatjes met veel kleuren
- Progressive mogelijkheid
- Ondersteuning door vrijwel alle browsers
- Maximaal 16.7 miljoen kleuren
- Uitgebreide compressie mogelijkheid (kwaliteit/filesize ratio)
PNG-24 eigenschappen:
- Vrijwel geen kwaliteitsverlies van het plaatje
- Nauwelijks mogelijkheden tot verkleinen van filesize
- Superieure transparancy mogelijkheid
- Superieure interlacing mogelijkheid
- Wordt niet volledig door alle browsers ondersteund
- Maximaal 16.7 miljoen kleuren
Geen opmerkingen:
Een reactie posten