Handboek Annuleren

Webfotogalerieën maken

Opmerking:

Zie Een webfotogalerie maken in de Adobe Bridge Help voor informatie over het maken van webgalerieën in Photoshop CS5. Als u de hieronder beschreven oudere, optionele plug-in Webfotogalerie wilt gebruiken, download en installeer deze dan eerst voor Windows of Mac OS.

Informatie over webfotogalerieën

Een webfotogalerie is een website die een startpagina heeft met miniatuurafbeeldingen en galeriepagina’s met afbeeldingen in de oorspronkelijke grootte. Elke pagina bevat koppelingen waarmee bezoekers door de site kunnen navigeren. Als een bezoeker bijvoorbeeld op een miniatuurafbeelding op de startpagina klikt, wordt een galeriepagina met de bijbehorende afbeeldingen in de oorspronkelijke grootte geladen. Met de opdracht Webfotogalerie kunt u automatisch een webfotogalerie genereren op basis van een set afbeeldingen.

Photoshop - Startpagina webfotogalerie
Startpagina webfotogalerie

Photoshop biedt diverse stijlen voor galerieën, die u kunt selecteren met de opdracht Webfotogalerie. Als u een ervaren gebruiker bent die met HTML kan werken, kunt u een nieuwe stijl maken of een stijl aanpassen door een reeks HTML-sjabloonbestanden te bewerken.

Elke sjabloon voor galeriestijlen bevat andere opties. Als u een vooraf gedefinieerde stijl gebruikt, zijn bepaalde opties mogelijk uitgeschakeld of niet beschikbaar in die bepaalde stijl.

Webgalerieën maken met Adobe Bridge

Adobe Bridge beschikt over verbeterde functies voor webgalerieën. Zie Een webfotogalerie maken in de Help van Adobe Bridge of bekijk de onderstaande lesbestanden voor meer informatie.

De oudere, optionele Photoshop-plug-in gebruiken

  1. Download en installeer de oudere plug-in Webfotogalerie voor Windows of Mac OS.

  2. (Optioneel) Selecteer de bestanden of map die u wilt gebruiken in Adobe Bridge.

    Uw afbeeldingen worden gepresenteerd in de volgorde waarin ze worden weergegeven in Bridge. Als u liever een andere volgorde aanhoudt, wijzigt u de volgorde in Bridge.

  3. Voer een van de volgende handelingen uit:

    • Kies Extra > Photoshop > Webfotogalerie in Adobe Bridge.

    • Kies Bestand > Automatisch > Webfotogalerie in Photoshop.

  4. Kies een stijl voor de galerie in het pop-upmenu Stijlen. In het dialoogvenster wordt een voorvertoning van de startpagina in de gekozen stijl weergegeven.

  5. (Optioneel) Voer een e-mailadres in als de contactpersoon voor de galerie.

  6. Kies de bronbestanden voor uw galerie in het menu Gebruik.

    Geselecteerde afbeeldingen van Bridge

    Hierbij gebruikt u afbeeldingen die u selecteert voordat u het dialoogvenster Webfotogalerie opent.

    Map

    Hierbij gebruikt u afbeeldingen uit mappen die u hebt geselecteerd met de knop Bladeren (Windows) of Kies (Mac OS). Selecteer Inclusief alle submappen als u ook de afbeeldingen in de submappen van de geselecteerde map wilt gebruiken.

  7. Klik op Doel en selecteer vervolgens een map waarin u de afbeeldingen en HTML-pagina's voor de galerie wilt opslaan. Klik vervolgens op OK (Windows) of Kies (Mac OS).

  8. Selecteer opmaakopties voor de webgalerie. Maak een keuze in het menu Opties om iedere set met opties weer te geven. Zie Opties voor webfotogalerie.

  9. Klik op OK. De volgende HTML- en JPEG-bestanden worden in de doelmap geplaatst:

    • Een startpagina voor de galerie met de naam index.htm of index.html, afhankelijk van de opties voor Extensie. Open dit bestand in een willekeurige webbrowser als u een voorvertoning van de galerie wilt bekijken.

    • JPEG-afbeeldingen, in een submap voor afbeeldingen.

    • HTML-paginabestanden, in een submap voor pagina’s.

    • JPEG-miniatuurafbeeldingen, in een submap voor miniaturen.

Kleuren overeen laten komen

Als u foto's bewerkt in een werkruimte met een uitgebreide kleuromvang, zoals ProPhoto RGB of Adobe RGB, kunnen de afbeeldingskleuren er anders uitzien als ze in een webgalerie worden weergegeven door een browser die ingesloten kleurprofielen niet kan lezen. Als dit gebeurt, kunt u de afbeeldingsprofielen omzetten in sRGB (het standaardprofiel van de meeste browsers) voordat u ze optimaliseert of opneemt in een webfotogalerie. U kunt profielen op de volgende manieren omzetten in sRGB. Het is beter om met een kopie van de afbeeldingen te werken.

Als u de Afbeeldingsprocessor gebruikt, kunt u de bestanden direct opslaan in de gewenste JPEG-indeling. Als u dit doet, schakel het selectievakje Afbeeldingen vergroten/verkleinen dan uit in de opties voor Grote afbeeldingen.

Algemeen

Opties voor bestandsextensies, codering en metagegevens.

Extensie

Hierbij gebruikt u .htm of .html als de extensie van de bestandsnaam.

UTF 8-codering gebruiken voor URL

Hierbij gebruikt u UTF‑8-codering.

Breedte- en hoogtekenmerken toevoegen voor afbeeldingen

Hiermee bepaalt u afmetingen, waardoor u de downloadtijd kunt verkorten.

Alle metagegevens behouden

Hiermee behoudt u de metagegevens.

Banner

Tekstopties voor de banner die op elke pagina in de galerie verschijnen. Voer tekst in in alle volgende velden:

Sitenaam

De naam van de galerie.

Fotograaf

De naam van de persoon of organisatie die het auteursrecht op de foto’s in de galerie heeft.

Contactinfo

De contactinformatie voor de galerie, zoals een telefoonnummer of zakelijk adres.

Datum

De datum die op elke pagina van de galerie wordt weergegeven. Standaard wordt de huidige datum gebruikt.

Lettertype en Tekengrootte

(Beschikbaar voor enkele sitestijlen) Opties voor de bannertekst.

Grote afbeeldingen

Opties voor de belangrijkste afbeeldingen die worden weergegeven op elke galeriepagina.

Numerieke koppelingen toevoegen

(Beschikbaar voor enkele sitestijlen) Plaatst boven aan iedere galeriepagina een horizontale serie nummers (beginnend met 1 en eindigend met het totale aantal pagina's in de galerie). Elk nummer fungeert als een koppeling naar de desbetreffende pagina.

Afbeeldingen vergroten/verkleinen

Hiermee wijzigt u de grootte van de bronafbeeldingen die op de galeriepagina's worden geplaatst. Kies een grootte in het pop-upmenu of voer een grootte in pixels in. Kies bij Beperken voor welke afmetingen van de afbeelding u beperkingen wilt instellen tijdens het vergroten of verkleinen. Kies bij JPEG-kwaliteit een optie in het pop-upmenu, geef een waarde tussen 0 en 12 op of sleep de schuifregelaar. Hoe hoger de waarde, hoe beter de afbeeldingskwaliteit en hoe groter het bestand.

Opmerking:

In Photoshop wordt de standaard interpolatiemethode voor afbeeldingen gebruikt, die staat ingesteld bij de voorkeuren. Kies Bicubisch scherper als standaard voor het beste resultaat bij het reduceren van de bestandsgrootte.

Formaat

Hiermee bepaalt u de breedte, in pixels, van het afbeeldingskader.

Titels

(Beschikbaar voor enkele sitestijlen) Hiermee geeft u opties op voor de weergave van bijschriften onder iedere afbeelding. Selecteer Bestandsnaam als u de bestandsnaam wilt weergeven of selecteer Beschrijving, Verantwoording, Titel en Copyright als u een beschrijvende tekst wilt weergeven die is ontleend aan het dialoogvenster Bestandsinfo.

Lettertype en Tekengrootte

(Beschikbaar voor enkele sitestijlen) Hiermee geeft u de tekengrootte en het lettertype van het bijschrift op.

Miniaturen

Hiermee hebt u de keuze uit opties voor de startpagina van de galerie, waaronder de grootte van de miniatuurafbeeldingen.

Grootte

Hiermee bepaalt u de grootte van de miniaturen. Maak een keuze in het pop-upmenu of voer een waarde in pixels in voor de breedte van elke miniatuur.

Rijen en Kolommen

Hiermee geeft u het aantal rijen en kolommen op waarin u de miniaturen wilt weergeven op de startpagina. Deze optie is niet van toepassing op galerieën die gebruikmaken van de horizontale of verticale kaderstijl.

Formaat

Hiermee bepaalt u de breedte, in pixels, van het kader om een miniatuur.

Titels

(Beschikbaar voor enkele sitestijlen) Hiermee geeft u opties op voor de weergave van bijschriften onder iedere miniatuur. Selecteer Bestandsnaam als u de bestandsnaam wilt weergeven of selecteer Beschrijving, Verantwoording, Titel en Copyright als u een beschrijvende tekst wilt weergeven die is ontleend aan het dialoogvenster Bestandsinfo.

Lettertype en Tekengrootte

(Beschikbaar voor enkele sitestijlen) Hiermee geeft u de tekengrootte en het lettertype van het bijschrift op.

Eigen kleuren

Hiermee hebt u de keuze uit opties voor kleuren van elementen in de galerie. Als u de kleur van een element wilt wijzigen, klikt u op het kleurstaal van het element en selecteert u een nieuwe kleur met de Adobe Kleurkiezer. U kunt de achtergrondkleur van elke pagina (optie Achtergrond) en van de banner (optie Banner) wijzigen.

Beveiliging

Hiermee plaatst u tekst op elke afbeelding om diefstal van de afbeelding tegen te gaan.

Inhoud

Hiermee geeft u de tekst op die moet worden weergegeven. Selecteer Eigen tekst als u aangepaste tekst wilt invoeren. Selecteer Bestandsnaam, Beschrijving, Verantwoording, Titel of Copyright als u een tekst wilt weergeven die is ontleend aan het dialoogvenster Bestandsinfo.

Lettertype, Kleur en Positie

Hiermee geeft u het lettertype, de kleur en de plaats van het bijschrift op.

Roteren

Hiermee plaatst u de tekst onder een hoek op de afbeelding.

Photoshop biedt een keur aan stijlen voor uw webfotogalerie. Als u een ervaren gebruiker bent die met HTML kan werken, kunt u een nieuwe stijl maken of een stijl aanpassen door een reeks HTML-sjabloonbestanden te bewerken.

De webfotogaleriestijlen die bij Photoshop worden geleverd, worden opgeslagen in afzonderlijke mappen op de volgende locaties:

Windows

Program Files/Adobe/Adobe Photoshop CS5/Voorinstellingen/Webfotogalerie.

Mac OS

Adobe Photoshop CS5/Voorinstellingen/Webfotogalerie.

De namen van de verschillende mappen op deze locatie worden als optie weergegeven in het pop-upmenu Stijlen in het dialoogvenster Webfotogalerie. Elke map bevat de volgende HTML-sjabloonbestanden, waarmee door Photoshop de galerie wordt gegenereerd:

Caption.htm

Bepaalt de layout van het bijschrift dat onder elke miniatuur op de startpagina wordt weergegeven.

Frameset.htm

Bepaalt de layout van de kaderset voor het weergeven van pagina’s.

IndexPage.htm

Bepaalt de layout van de startpagina.

SubPage.htm

Bepaalt de layout van de galeriepagina’s met afbeeldingen in de oorspronkelijke grootte.

Thumbnail.htm Bepaalt de lay-out van de miniaturen die op de startpagina worden weergegeven.

Elk sjabloonbestand bevat HTML-code en tokens. Een token is een tekenreeks die door Photoshop wordt vervangen wanneer u de desbetreffende optie instelt in het dialoogvenster Webfotogalerie. Een sjabloonbestand kan bijvoorbeeld het volgende TITLE-element bevatten, waarin in plaats van de ingesloten titel een token wordt gebruikt:

<TITLE>%TITLE%</TITLE>

Wanneer Photoshop de galerie genereert met dit sjabloonbestand, wordt de token %TITLE% vervangen door de tekst die u in het dialoogvenster Webfotogalerie als sitenaam hebt opgegeven.

Als u een bestaande stijl beter wilt begrijpen, kunt u de bijbehorende HTML-sjabloonbestanden openen met een HTML-editor. Omdat voor het maken van HTML-documenten alleen standaard ASCII-tekens vereist zijn, kunt u deze documenten maken, openen en bewerken met een standaardteksteditor zoals Kladblok (Windows) of TextEdit (Mac OS).

U kunt een bestaande webfotogaleriestijl aanpassen door een of meer van de bijbehorende HTML-sjabloonbestanden te bewerken. Als u in Photoshop een stijl aanpast, volgt u de volgende richtlijnen zodat de stijl juist wordt gegenereerd:

  • De map met stijlen moet de volgende bestanden bevatten: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm en Frameset.htm.

  • U kunt de naam van de map met stijlen wijzigen, maar niet de namen van de HTML-sjabloonbestanden in de map.

  • U kunt het bestand Caption.htm echter wel leeg laten en de HTML-codes en de tokens die de layout van bijschriften bepalen in het bestand Thumbnail.htm plaatsen.

  • U kunt een token in een sjabloonbestand eventueel vervangen door de gewenste tekst of HTML-codes. U stelt de optie in dat geval in via het sjabloonbestand in plaats van via het dialoogvenster Webfotogalerie. Een sjabloonbestand kan bijvoorbeeld een BODY-element bevatten met het volgende achtergrondkleurkenmerk, dat een token als waarde heeft:

    bgcolor=%BGCOLOR%

    Als u de pagina een rode achtergrond wilt geven, vervangt u de token %BGCOLOR% door “FF0000”.

  • U kunt aan sjabloonbestanden HTML-code en tokens toevoegen. De namen van tokens moeten uit hoofdletters bestaan en moeten tussen procenttekens (%) worden geplaatst.

  1. Ga naar de map met de bestaande webfotogaleriestijlen.
  2. Voer een van de volgende handelingen uit:
    • Als u een stijl wilt aanpassen, maakt u een kopie van de map Stijlen, en slaat u deze op dezelfde locatie op als de bestaande mappen voor stijlen.

    • Als u een nieuwe stijl wilt maken, maakt u een nieuwe map voor de nieuwe stijl en slaat u deze op dezelfde locatie op als de bestaande mappen voor stijlen.

    De nieuwe of aangepaste stijl (met de naam van de map) wordt weergegeven in het pop-upmenu Stijlen in het dialoogvenster Webfotogalerie.

  3. Als u een HTML-editor gebruikt, gaat u op een van de volgende manieren te werk:
    • Pas het HTML-sjabloonbestand aan.

    • Maak de vereiste HTML-sjabloonbestanden en sla deze op in de stijlmap.

    Wanneer u sjabloonbestanden maakt, volgt u de richtlijnen voor aanpassing die worden beschreven in Webfotogaleriestijlen aanpassen.

    Opmerking:

    Wanneer u een galeriestijlsjabloon maakt of aanpast, moet u de volgende tokens op afzonderlijke regels in het HTML-bestand opnemen: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% en %PREVINDEX%. Wanneer u in Photoshop bepaalde pagina’s van een galerie genereert, worden sjabloonregels met tokens die geen betrekking hebben op die pagina’s, overgeslagen. Bij het genereren van de eerste galeriepagina wordt bijvoorbeeld elke regel in de sjabloon overgeslagen die de token %PREVIMAGE% bevat. Deze token vertegenwoordigt namelijk de koppeling naar de vorige galeriepagina. Door de token %PREVIMAGE% op een afzonderlijke regel te plaatsen voorkomt u dat andere tokens in de sjabloon ten onrechte worden genegeerd.

In Photoshop kunt u een standaard webfotogaleriestijl definiëren door tokens in de HTML-sjabloonbestanden te plaatsen. In Photoshop gebruikt u deze tokens om een galerie te genereren op basis van de instellingen die u in het dialoogvenster Webfotogalerie opgeeft.

Wanneer u een galeriestijl maakt of aanpast, kunt u een willekeurige token aan een willekeurig HTML-sjabloonbestand toevoegen, met uitzondering van %THUMBNAILS% en %THUMBNAILSROWS%, die alleen kunnen worden gebruikt in het bestand IndexPage.htm. Houd er rekening mee dat u, wanneer u een token toevoegt, mogelijk ook HTML-code moet toevoegen, om de token juist toe te passen.

In de HTML-sjabloonbestanden kunt u de volgende tokens gebruiken:

%ALINK%

Bepaalt de kleur van actieve koppelingen.

%ALT%

Bepaalt de naam van een afbeeldingsbestand.

%ANCHOR%

Biedt de mogelijkheid om terug te gaan naar de miniatuur van de afbeelding die de gebruiker bekijkt, in plaats van naar het begin van de index. Dit wordt uitgevoerd als de gebruiker op de knop Home klikt.

%BANNERCOLOR%

Bepaalt de kleur van de banner.

%BANNERFONT%

Bepaalt het lettertype van de bannertekst.

%BANNERFONTSIZE%

Bepaalt de tekengrootte van de bannertekst.

%BGCOLOR%

Bepaalt de achtergrondkleur.

%CAPTIONFONT%

Bepaalt het lettertype van de bijschriften onder de miniaturen op de startpagina.

%CAPTIONFONTSIZE%

Bepaalt de tekengrootte van de bijschriften.

%CAPTIONTITLE%

Haalt de documenttitel uit de bestandsinformatie en voegt deze in als een bijschrift.

%CHARSET%

Bepaalt de tekenset die op elke pagina wordt gebruikt.

%CONTACTINFO%

Bepaalt de contactgegevens voor de galerie, zoals een telefoonnummer en een woonplaats.

%CONTENT_GENRATOR%

Breidt uit naar "Adobe Photoshop CS5 Webfotogalerie".

%COPYRIGHT%

Haalt de copyrightinformatie uit de bestandsinformatie en voegt deze in als een bijschrift.

%CREDITS%

Haalt de verantwoording uit de bestandsinformatie en voegt deze in als een bijschrift.

%CURRENTINDEX%

Bepaalt de koppeling voor de huidige startpagina.

%CURRENTINDEXANCHOR%

Bevindt zich in SubPage.htm en verwijst naar de eerste indexpagina.

%DATE%

Bepaalt de datum die in de banner wordt weergegeven.

%EMAIL%

Bepaalt het e-mailadres in de contactgegevens voor de galerie.

%FILEINFO%

Bepaalt de afbeeldingsbestandsinformatie voor een bijschrift.

%FILENAME%

Bepaalt de bestandsnaam van een afbeelding. Gebruik deze token voor metagegevens die verschijnen als HTML-tekst.

%FILENAME_URL%

Bepaalt de URL-bestandsnaam van een afbeelding. Alleen gebruiken voor URL-bestandsnamen.

%FIRSTPAGE%

Bepaalt de koppeling voor de eerste galeriepagina die in het rechterkader van de kaderset wordt weergegeven.

%FRAMEINDEX%

Bepaalt de koppeling voor de startpagina die in het linkerkader van de kaderset wordt weergegeven.

%HEADER%

Bepaalt de titel van de galerie.

%IMAGEBORDER%

Bepaalt het kaderformaat voor de volledige afbeelding op een galeriepagina.

%IMAGE_HEIGHT%

Schakelt het selectievakje Breedte- en hoogtekenmerken toevoegen voor afbeeldingen in. De gebruiker kan daardoor de kenmerken downloaden zodat het downloaden sneller verloopt.

%IMAGE_HEIGHT_NUMBER%

Deze token wordt vervangen door een numerieke waarde die (alleen) de breedte van de afbeelding weergeeft.

%IMAGEPAGE%

Bepaalt de koppeling naar een galeriepagina.

%IMAGE_SIZE%

Als het selectievakje Afbeeldingen vergroten/verkleinen is ingeschakeld, bevat deze token de pixelwaarde van de afbeelding die wordt gebruikt in het venster Grote afbeeldingen. Als het vakje niet is ingeschakeld, bevat deze token een lege string. Dit komt van pas als u JavaScript in sjablonen gebruikt, omdat het vakje de maximale hoogte- en breedtewaarden kan weergeven voor alle afbeeldingen van de gegenereerde site.

%IMAGESRC%

Bepaalt de URL voor de volledige afbeelding op een galeriepagina.

%IMAGE_WIDTH%

Schakelt het selectievakje Breedte- en hoogtekenmerken toevoegen voor afbeeldingen in. De gebruiker kan daardoor de kenmerken downloaden zodat het downloaden sneller verloopt.

%IMAGE_WIDTH_NUMBER%

Deze token wordt vervangen door een numerieke waarde die (alleen) de breedte van de afbeelding weergeeft.

%LINK%

Bepaalt de kleur van koppelingen.

%NEXTIMAGE%

Bepaalt de koppeling voor de volgende galeriepagina.

%NEXTIMAGE _CIRCULAR%

Stelt de koppeling in van een grote voorvertoning van een afbeelding naar de volgende grote voorvertoning.

%NEXTINDEX%

Bepaalt de koppeling voor de volgende startpagina.

%NUMERICLINKS%

Voegt genummerde koppelingen in op subpagina's naar alle grote voorvertoningen van afbeeldingen.

%PAGE%

Bepaalt de huidige paginalocatie (bijvoorbeeld pagina 1 van 3).

%PHOTOGRAPHER%

Bepaalt de naam van de persoon of organisatie die het auteursrecht op de foto’s in de galerie heeft.

%PREVIMAGE%

Bepaalt de koppeling voor de vorige galeriepagina.

%PREVINDEX%

Bepaalt de koppeling voor de vorige startpagina.

%SUBPAGEHEADER%

Bepaalt de titel van de galerie.

%SUBPAGETITLE%

Bepaalt de titel van de galerie.

%TEXT%

Bepaalt de tekstkleur.

%THUMBBORDER%

Bepaalt de grootte van de kaders om de miniaturen.

%THUMBNAIL_HEIGHT%

Schakelt het selectievakje Breedte- en hoogtekenmerken toevoegen voor afbeeldingen in. De gebruiker kan daardoor de kenmerken downloaden zodat het downloaden sneller verloopt.

%THUMBNAIL_HEIGHT_NUMBER%

Deze token wordt vervangen door een numerieke waarde die (alleen) de hoogte van de miniatuur weergeeft.

%THUMBNAILS%

Deze token wordt vervangen door miniaturen aan de hand van het bestand Thumbnail.htm voor de kaderstijlen. Plaats deze token alleen op een afzonderlijke, niet-afgebroken regel in het HTML-bestand.

%THUMBNAIL_SIZE%

Bevat de pixelwaarde van de miniatuur in het venster Miniaturen. Dit komt van pas als u JavaScript in sjablonen gebruikt, aangezien het vakje de maximale hoogte- en breedtewaarden kan weergeven voor alle miniaturen van de gegenereerde site.

%THUMBNAILSRC%

Bepaalt de koppeling van een miniatuur.

%THUMBNAILSROWS%

Deze token wordt vervangen door rijen miniaturen aan de hand van het bestand Thumbnail.htm voor de niet-kaderstijlen. Plaats deze token alleen op een afzonderlijke, niet-afgebroken regel in het HTML-bestand.

%THUMBNAIL_WIDTH%

Schakelt het selectievakje Breedte- en hoogtekenmerken toevoegen voor afbeeldingen in. De gebruiker kan daardoor de kenmerken downloaden zodat het downloaden sneller verloopt.

%THUMBNAIL_WIDTH_NUMBER%

Deze token wordt vervangen door een numerieke waarde die (alleen) de breedte van de miniatuur weergeeft.

%TITLE%

Bepaalt de titel van de galerie.

%VLINK%

Bepaalt de kleur van bezochte koppelingen.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?