Nodig: Paint Shop Pro (voor deze tutorial heb ik versie 9.01 gebruikt)
Image slicer / Segmentering
Als je met grote afbeeldingen op je website werkt, kan het handig zijn om deze in stukken te hakken. De losse jpg- of gif-bestanden worden dan in een tabel geplaatst. Daar merkt de bezoeker van de webpagina helemaal niets van, want de webbrowser laat een complete afbeelding zien. Het voordeel van deze truc is dat het laden van de webpagina sneller gaat. Hoewel ik er voor de eerlijkheid bij moet zeggen dat de meningen hierover verdeeld zijn.
Afijn, PSP heeft hier een instrument voor: image slicer oftewel segmentering. De image slicer deelt de afbeelding op in hapklare brokken en kan trouwens nog meer.
Ga naar menu Bestand > Exporteren > Segmentering. Het venster dat je te zien krijgt bevat een balkje met gereedschappen.
Met het rastergereedschap
kun je de afbeelding in gelijkmatige cellen verdelen.
Met het lijngereedschap
kun je zelf horizontale of verticale lijnen maken. Hiermee kun je ook een specifiek gedeelte van de afbeelding selecteren, bijvoorbeeld een logo.
Met het gumgereedschap
kun je lijnen wegvegen.
Met het pannen-gereedschap
kun je in het voorbeeldvenster die delen van de afbeelding tevoorschijn slepen die anders verborgen zouden blijven.
* * *
Voor deze les ga ik het rastergereedschap gebruiken. Klik op 
en daarna op de afbeelding in het voorbeeldvenster. Zie hieronder:
Dit venstertje verschijnt:
3 rijen, 3 kolommen betekent dat je in de uiteindelijke tabel 9 cellen krijgt.
Klik op OK en je ziet het volgende venster:
Gebruik het gereedschap Pannen en de Zoom-knoppen om de afbeelding beter te kunnen zien.
Met de cursor 
kun je de cellen waar je iets mee wil doen - een url erin zetten, een , of iets anders - aktief maken. Je klikt in een cel en de lijnen worden groen. Uitgebreide informatie over de celeigenschappen kun je vinden bij Help van PSP.
Zoals je ziet kun je het formaat vaststellen: jpg, gif of png. Je kunt de afbeelding in zijn geheel optimaliseren of in gedeelten. Experimenteer er maar een beetje mee.
* * *
Klik nu op de knop Opslaan Als. Er wordt een html-pagina aangemaakt en de opgesplitste afbeeldingen worden erbij gevoegd.
Zo zien de bestanden eruit in de Verkenner:
* * *
In de bron van de HTML-pagina vind je de tabel.
Zo ziet de code van de tabel eruit:
De gegenereerde tabelcode kun je naar je eigen webpagina kopiëren.
* * *
Onderstaande afbeelding is behandeld met de image-slicer/segmenteringsfunctie van PSP. Ik heb er noch url noch rollover in verwerkt. Wat de rollover-functie van PSP betreft, wil ik nog wel opmerken dat die niet optimaal werkt.
Let op: De tabel houdt de verschillende onderdelen van de afbeelding bij elkaar. Dus nooit de tabel verwijderen, want dan valt de afbeelding uit elkaar!
Verwante onderwerpen:
nep-Image map
Image map-tutorial (PSP 9.01)
Splitz, een eenvoudige image map-maker.
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal
