Webfotogalerieën maken

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 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.

Een webfotogalerie maken

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

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 één afbeelding wilt omzetten, kiest u achtereenvolgens Bewerken > Omzetten in profiel en sRGB. Een kleurprofiel toewijzen of verwijderen (Illustrator, Photoshop).

• Als u een map met afbeeldingen wilt omzetten, gebruikt u de Afbeeldingsprocessor. Kies > Bestand > Scripts > Afbeeldingsprocessor. Zie Bestanden omzetten met de Afbeeldingsprocessor.

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.

Opties voor webfotogalerie

Opties voor bestandsextensies, codering en metagegevens.

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

Hierbij gebruikt u UTF‑8-codering.

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

Hiermee behoudt u de metagegevens.

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

De naam van de galerie.

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

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

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

(Beschikbaar voor enkele sitestijlen) Opties voor de bannertekst.

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

(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.

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.

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

(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.

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

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

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.

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.

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

(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.

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

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.

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

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.

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

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

Stijlen voor webfotogalerieën

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:

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

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:

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

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

Bepaalt de layout van de startpagina.

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).

Webfotogaleriestijlen aanpassen

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.

Een webfotogaleriestijl aanpassen of maken

Tokens voor webfotogaleriestijlen

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:

Bepaalt de kleur van actieve koppelingen.

Bepaalt de naam van een afbeeldingsbestand.

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.

Bepaalt de kleur van de banner.

Bepaalt het lettertype van de bannertekst.

Bepaalt de tekengrootte van de bannertekst.

Bepaalt de achtergrondkleur.

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

Bepaalt de tekengrootte van de bijschriften.

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

Bepaalt de tekenset die op elke pagina wordt gebruikt.

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

Breidt uit naar "Adobe Photoshop CS5 Webfotogalerie".

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

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

Bepaalt de koppeling voor de huidige startpagina.

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

Bepaalt de datum die in de banner wordt weergegeven.

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

Bepaalt de afbeeldingsbestandsinformatie voor een bijschrift.

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

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

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

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

Bepaalt de titel van de galerie.

Bepaalt het kaderformaat voor de volledige afbeelding op een galeriepagina.

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

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

Bepaalt de koppeling naar een galeriepagina.

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.

Bepaalt de URL voor de volledige afbeelding op een galeriepagina.

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

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

Bepaalt de kleur van koppelingen.

Bepaalt de koppeling voor de volgende galeriepagina.

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

Bepaalt de koppeling voor de volgende startpagina.

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

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

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

Bepaalt de koppeling voor de vorige galeriepagina.

Bepaalt de koppeling voor de vorige startpagina.

Bepaalt de titel van de galerie.

Bepaalt de titel van de galerie.

Bepaalt de tekstkleur.

Bepaalt de grootte van de kaders om de miniaturen.

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

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

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.

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.

Bepaalt de koppeling van een miniatuur.

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.

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

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

Bepaalt de titel van de galerie.

Bepaalt de kleur van bezochte koppelingen.