Sneeuwbol - Elke bol een wereld!

Een aantal van de zoekteksten die ik zie waar mensen mee op mijn site komen zijn:

• "thumb maken"
• "thumbnails aanmaken"
• "thumbnails aanmaken met een gratis programma"
• "hoe plaats ik een thumbnail op mijn website"

In deze cursus wil ik op deze punten wat meer op ingaan.

Het verkleinen van een plaatje is bijna hetzelfde als het maken van een thumbnail. Alleen zul je vaak de grote van het plaatje tussen 600 en 300 px willen hebben ipv 120 en 80 (wat standaard is voor thumbs) Voor het maken van thumbs kun je programma's gebruiken. In de cursus met Nvu staat het programma JAlbum vermeld waarmee je foto albums kunt maken. Naast JAlbum zijn er nog veel meer soorten album makers. Een andere die ik vaak gebruik is webalbum. Deze programma's maken thumbnails aan en linken die naar een originele foto. Je kunt deze thumbnails die het programma maakt ook zelf gebruiken zonder dat je het hele album gebruikt wat het programma aanmaakt.

Naast albummakers zijn er ook programma's die alleen thumbnails maken. Een voorbeeld daarvan is easythumb for Windows. Voor de andere platformen zijn er ook programma's te krijgen maar helaas heb ik nog niet veel Cross platform programma's gevonden die makkelijk zijn.

Maar al deze programma's heb je niet echt nodig, je kunt het ook doen met een grafisch bewerkingsprogramma zoals, irfanview (Een echte aanrader voor Windows gebruikers) Photoshop (al dan niet elements), Paintshop, Gimp en XnView.

Gimp en XnView zijn cross platform (dat wil zeggen voor Windows, Mac OS en Linux (BDS) te gebruiken. In deze cursus maak ik gebruik van xnview. Een programma wat ook in meerdere talen beschikbaar is.

Als je Windows gebruikt en ook een uitleg wilt zien met behulp van het programma Irfanview kun je hier terecht.

Om een plaatje alleen maar kleiner te maken gebruik je de zelfde methode als bij het maken van een thumbnail. De grote van een thumbnail is meestal 120x120px (pixels) t/m 60x60px. Het is verstandig om bij het maken van een thumbnail (en helemaal bij het verkleinen van een foto) de ratio (verhouding) van de foto te behouden. Hierdoor worden de thumbs niet allemaal 60x60 maar bijvoorbeeld 60 x 23. Dat kan een nadeel zijn maar ze zien er dan wel zo uit als de originele foto.

Ok, dan gaan we nu beginnen. Stel we hebben een foto groot.jpg ik heb hem op mijn desktop staan. Deze openen we met het programma XnView. (Ik doe dat door het plaatje op het XnView icoon te slepen. Je kunt ook het programma openen en dan file > open kiezen.)

Als ik onderaan de foto kijk zie ik daar 2006x3014x24 staan. Dit geeft de grote van de foto weer en hoeveel kleuren er gebruikt worden. Deze foto is veel te groot om hem op een website te gebruiken. Hij neemt teveel ruimte in op je site en laad langzaam. Als eerste ga ik de foto verkleinen naar 400x??x24. Dat doe ik door Image > resize (shift-s) te kiezen. Er verschijnt nu een invulscherm.

Ik zorg er voor dat de ratio (verhouding) behouden blijft. Daarna verander ik de kleinste zijde (in dit geval de breedte) in 400px. Het programma veranderd nu zelf de hoogte in 600px zodat het de zelfde verhouding heeft als het originele plaatje. Daarna druk ik op "OK". Nu bewaar ik dit plaatje (met File > Save as ..) en noem het groot-600.jpg Dit plaatje is groot genoeg voor een website. Nu maak ik van dit plaatje een thumbnail door nogmaals Image >resize te kiezen. Ik wil dat op mijn site alle thumbnails een grote hebben van 100x100 px, door nu de grootste waarde in 100 te veranderen krijg ik een goede maat van mijn thumbnail. Ik druk weer op OK en bewaar (met save-as) het bestand als groot-thm.jpg.

Ik heb nu 3 plaatjes:

• groot.jpg (het orgineel). Zorg altijd dat je nooit je echte orgineel gebruikt maar een kopie ervan. Eenmaal verknoeid kun je niet meer terug.
• groot-600.jpg (het verkleinde plaatje voor de site)
• groot-thm.jpg (de thumbnail die ik op de site plaats en dan het plaatje "groot-600.jpg" laat openen

Eigenlijk ben je nu al klaar, je hebt een (verkleinde) foto en een thumbnail ervan. Voor alle duidelijkheid laat ik nog even zien hoe je nu je thumbnail gebruikt in Nvu.

Open Nvu, als je je thumbnail in een bestaande pagina wilt plaatsen kun je die pagina openen ik hou het bij een lege pagina. Als voorbeeld maak ik een pagina die in de map homepage staat en hond.html heet. In deze map staan ook 2 sub mappen. Nl. de map thumbs en de map plaatjes. In de map thumbs plaats ik het bestand groot-thm.jpg (de thumb) en in de map plaatjes plaats ik groot-600.jpg (de foto). Ik voeg wat tekst toe en bewaar de pagina in Nvu als hond.html in de map homepage (file > save). Eerst vraagt Nvu om de titel (ik noem hem "Mijn hond")

Nu plaats ik dan de thumbnail in het Nvu scherm. Dit kun je doen met de menu optie Insert> Image. (Invoegen > Afbeelding) Selecteer de file groot-thm.jpg uit de directory homepage/thumbs/

De tekst bij tooltip wordt zichtbaar als mensen met hun muis over de afbeelding gaan. De Alternate text (alternatieve) is verplicht, geef hier een omschrijving van het plaatje. Soms zie je dat het pad naar het plaatje ook een drive letter bevat. Je ziet dat het pad naar het plaatje er ook staat (in dit geval werk ik met linux). Zorg ervoor dat de verwijzing naar het plaatje relatief is. Relatief wil zeggen zonder drive letter etc. Als het plaatje in de zelfde directory (map) staat als je html pagina vul dan alleen de naam van de file in. Staan de plaatjes in een aparte directory voeg die dan toe. In ons voorbeeld wordt dat dus: "thumbs/groot-thm.jpg"

Selecteer nu de tab "Link" en kies daar de file "plaatjes/groot-600.jpg"

Klik dan op "ok". Nu heb je een tekst met een thumb. Als je er op klikt wordt het groot-600.jpg plaatje geopend. Als je in plaats van het plaatje een html pagina wilt openen met het plaatje groot-600.jpg er in verwijs in de link dan naar "paginametplaatje.html" ipv naar groot-600.jpg. Je moet dan natuurlijk wel nog even een HTML pagina maken met die naam en daar dan het groot-600.jpg plaatje in zetten. Het voordeel hiervan is dat je dan een achtergrond kleur kunt gebruiken.

Ik hoop dat dit voldoende uitleg is. Mocht het niet zo zijn hoor ik dat graag. Als je een ander programma gebruikt dan XnView dan is dat niet erg. Zolang je maar het plaatje resized (niet het canvas) en de eenheid in pixels hebt (niet mm, cm ofzo) en de verhoudingen gelijk houdt.