Erstellen von Web-Fotogalerien

Eine Web-Fotogalerie ist eine Website, die aus einer Homepage mit Miniaturbildern sowie Galerieseiten mit Bildern in voller Größe besteht. Jede Seite verfügt über Links zum Navigieren durch die Site. Wenn ein Besucher z. B. auf der Homepage auf ein Miniaturbild klickt, wird das entsprechende Bild in voller Größe in eine Galerieseite geladen. Mit dem Befehl „Web-Fotogalerie“ können Sie aus einem Satz von Bildern automatisch eine Web-Fotogalerie erstellen.

Photoshop bietet für die Galerie eine Vielfalt von Stilen, die Sie mit dem Befehl „Web-Fotogalerie“ auswählen können. Wenn Sie mit HTML vertraut sind, können Sie durch Bearbeiten einer Reihe von HTML-Vorlagendateien einen neuen Stil erstellen oder einen vorhandenen Stil anpassen.

Jede Vorlage für Galeriestile enthält andere Optionen. Wenn Sie einen Vorgabestil verwenden, können daher einige Optionen abgeblendet dargestellt sein oder in diesem Stil gar nicht zur Verfügung stehen.

Erstellen einer Web-Fotogalerie

Erstellen von Web-Galerien in Adobe Bridge

Adobe Bridge verfügt über aktualisierte Funktionen zum Erstellen von Webgalerien. Anweisungen hierzu finden Sie unter Erstellen einer Web-Fotogalerie in der Hilfe zu Adobe Bridge oder in den nachfolgend aufgeführten Lehrgängen.

Verwenden des älteren, optionalen Photoshop-Zusatzmoduls

Sicherstellen konsistenter Farben

Wenn Sie in einem Farbraum mit großem Farbumfang arbeiten, z. B. ProPhoto RGB oder Adobe RGB, ändern sich u. U. die Bildfarben, wenn sie in einer Webgalerie von einem Browser angezeigt werden, der eingebettete Farbprofile nicht lesen kann. Falls dies der Fall ist, versuchen Sie, die Bildprofile in sRGB (Standardprofil bei den meisten Browsern) zu konvertieren, bevor Sie das Bild optimieren oder für eine Web-Fotogalerie verwenden. Konvertieren Sie sie mit einer der folgenden Methoden in sRGB. Arbeiten Sie hierbei am besten mit einer Kopie der Bilder.

• Zum Konvertieren eines einzelnen Bildes wählen Sie „Bearbeiten“ > „In Profil umwandeln“ und dann „sRGB“. Siehe Zuweisen oder Entfernen eines Farbprofils (Illustrator, Photoshop)

• Um einen Ordner mit Bildern zu konvertieren, verwenden Sie den Bildprozessor. Wählen Sie „Datei“ > „Skripten“ > „Bildprozessor“. Siehe Konvertieren von Dateien mit dem Bildprozessor.

Wenn Sie den Bildprozessor verwenden, können Sie die Dateien direkt in der gewünschten Größe im JPEG-Format speichern. Deaktivieren Sie in diesem Fall im Bereich „Große Bilder“ die Option „Bilder skalieren“.

Optionen für Web-Fotogalerien

Optionen für Dateierweiterungen, Kodierung und Metadaten.

Verwendet entweder „.htm“ oder „.html“ als Dateinamenerweiterung.

Verwendet UTF-8-Kodierung.

Legt die Abmessungen fest und verkürzt die Downloadzeit.

Behält die Metadateninformationen bei.

Textoptionen für das Banner, das auf jeder Seite der Galerie angezeigt wird. Geben Sie Text in folgende Felder ein:

Der Name der Galerie.

Der Name der Person oder Organisation, von der die Fotos stammen.

Kontaktinformationen für die Galerie, z. B. Telefonnummer oder Geschäftsadresse.

Das Datum, das auf jeder Seite der Galerie angezeigt wird. Standardmäßig wird in Photoshop das aktuelle Datum verwendet.

(Für manche Sitestile verfügbar) Optionen für den Bannertext.

Optionen für die Hauptbilder, die auf jeder Seite der Galerie angezeigt werden.

(Für manche Sitestile verfügbar) Fügt eine numerische Sequenz (1 bis Gesamtzahl an Seiten in der Galerie) ein, die horizontal oben auf jeder Seite der Galerie verläuft. Jede Zahl ist mit der entsprechenden Seite verknüpft.

Skaliert die Quellbilder für die Platzierung auf den Galerieseiten. Wählen Sie eine Größe aus dem Popupmenü oder geben Sie eine Größe in Pixeln ein. Wählen Sie unter „Beschränken“ die Bildabmessungen, die beim Skalieren beschränkt werden sollen. Wählen Sie unter „JPEG-Qualität“ eine Option aus dem Popupmenü, geben Sie einen Wert zwischen 0 und 12 ein oder ziehen Sie den Regler. Je höher der Wert, desto höher die Qualität und desto größer die Datei.

Legt die Breite des Bildrands in Pixeln fest.

(Für manche Sitestile verfügbar) Legt die Optionen für die Beschreibung unter jedem Bild fest. Wählen Sie „Dateiname“, um den Dateinamen anzuzeigen, oder „Beschreibung“, „Bildrechte“, „Titel“ und „Copyright“, um den aus dem Dialogfeld „Dateiinformationen“ stammenden Beschreibungstext anzuzeigen.

(Für manche Sitestile verfügbar) Legen Schriftart und Schriftgrad der Beschreibung fest.

Optionen für die Homepage der Galerie, einschließlich der Größe der Miniaturen.

Legt die Größe der Miniaturen fest. Wählen Sie einen Wert aus dem Popupmenü oder geben Sie einen Wert in Pixeln für die Breite jeder Miniatur ein.

Legen Sie die Anzahl der Spalten und Zeilen fest, in denen Miniaturen auf der Homepage angezeigt werden. Diese Option gilt nicht für Galerien, in denen der horizontale oder vertikale Frame-Stil verwendet wird.

Legt die Breite des Randes der einzelnen Miniaturen in Pixeln fest.

(Für manche Sitestile verfügbar) Legt die Optionen für die Beschreibung unter jeder Miniatur fest. Wählen Sie „Dateiname“, um den Dateinamen anzuzeigen, oder „Beschreibung“, „Bildrechte“, „Titel“ und „Copyright“, um den aus dem Dialogfeld „Dateiinformationen“ stammenden Beschreibungstext anzuzeigen.

(Für manche Sitestile verfügbar) Legen Schriftart und Schriftgrad der Beschreibung fest.

Optionen für die Farben der Elemente in der Galerie. Um die Farbe eines bestimmten Elements zu ändern, klicken Sie auf das entsprechende Farbfeld und wählen Sie dann mit dem Adobe-Farbwähler eine neue Farbe aus. Sie können die Hintergrundfarbe jeder Seite (Option „Hintergrund“) und die des Banners (Option „Banner“) ändern.

Zeigt auf jedem Bild einen Text als Diebstahlschutz an.

Legt den angezeigten Text fest. Wählen Sie die Option „Eigener Text“ aus, um benutzerdefinierten Text einzugeben. Wählen Sie „Dateiname“, „Beschreibung“, „Bildrechte“, „Titel“ oder „Copyright“, um den aus dem Dialogfeld „Datei-Informationen“ stammenden Text anzuzeigen.

Legen Schriftart, Farbe und Ausrichtung der Beschreibung fest.

Dreht den Text im Bild um einen bestimmten Winkel.

Web-Fotogaleriestile

Photoshop bietet eine Vielzahl von Stilen für Ihre Web-Fotogalerie. Wenn Sie mit HTML vertraut sind, können Sie durch Bearbeiten einer Reihe von HTML-Vorlagendateien einen neuen Stil erstellen oder einen vorhandenen Stil anpassen.

Die in Photoshop verfügbaren Web-Fotogaleriestile sind in folgenden Verzeichnissen in Einzelordnern gespeichert:

Programme/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Adobe Photoshop CS5/Presets/Web Photo Gallery.

Die Namen der Ordner in diesem Verzeichnis werden in der Dropdown-Liste „Stile“ des Dialogfelds „Web-Fotogalerie“ als Option angezeigt. Jeder Ordner enthält die folgenden HTML-Vorlagedateien, anhand derer Photoshop die Galerie generiert:

Legt das Layout der unter jeder Miniatur auf der Homepage angezeigten Objektbeschreibung fest.

Legt das Layout des Framesets für die Anzeige von Seiten fest.

Legt das Layout der Homepage fest.

Legt das Layout der Galerieseiten mit Bildern in voller Größe fest.

Thumbnail.htm Legt das Layout der auf der Homepage angezeigten Miniaturen fest.

Jede Vorlage enthält HTML-Code und Token. Ein Token ist eine Textfolge, die von Photoshop ersetzt wird, wenn Sie die entsprechende Option im Dialogfeld „Web-Fotogalerie“ aktivieren. Eine Vorlagendatei kann z. B. das folgende „TITLE“-Element enthalten, das ein Token als eingeschlossenen Text verwendet:

<TITLE>%TITLE%</TITLE>

Wenn Photoshop die Galerie mithilfe dieser Vorlagendatei generiert, wird das Token „%TITLE%“ durch den Text ersetzt, den Sie im Dialogfeld „Web-Fotogalerie“ unter „Name der Site“ eingegeben haben.

Um einen vorhandenen Stil besser zu verstehen, können Sie seine HTML-Vorlage mit einem HTML-Editor öffnen und sich diese genauer ansehen. Da zum Erstellen von HTML-Dokumenten lediglich Standard-ASCII-Zeichen benötigt werden, können Sie diese Dokumente mit einem Nur-Text-Editor, wie z. B. Editor (Windows) bzw. TextEdit (Mac OS), öffnen, bearbeiten und erstellen.

Anpassen von Web-Fotogaleriestilen

Sie können eine vorhandene Web-Fotogalerie durch Bearbeiten einer oder mehrerer der dazugehörigen HTML-Vorlagendateien anpassen. Sie müssen sich beim Anpassen eines Stils an diese Richtlinien halten, damit Photoshop die Galerie ordnungsgemäß erstellen kann:

• Der Stilordner muss folgende Dateien enthalten: „Caption.htm“, „IndexPage.htm“, „SubPage.htm“, „Miniatur.htm“ und „FrameSet.htm“.

• Sie können zwar den Stilordner, nicht aber die enthaltenen HTML-Vorlagendateien umbenennen.

• Die Datei „Caption.htm“ kann leer sein. Sie können den HTML-Code und Token in die Datei „Miniatur.htm“ platzieren, um so das Layout der Objektbeschreibung festzulegen.

• Sie können ein Token in einer Vorlagendatei durch den entsprechenden Text oder HTML-Code ersetzen, damit eine Option über die Vorlagendatei statt über das Dialogfeld „Web-Fotogalerie“ eingestellt wird. Eine Vorlagendatei kann z. B. ein „BODY“-Element mit dem folgenden Hintergrundfarben-Attribut verwenden, dessen Wert ein Token ist:

  bgcolor=%BGCOLOR%

  Um für die Hintergrundfarbe der Seite Rot festzulegen, können Sie das Token „%BGCOLOR%“ durch „FF0000“ ersetzen.

• Sie können Vorlagendateien HTML-Code und Token hinzufügen. Alle Token müssen in Großbuchstaben geschrieben werden und mit einem Prozentzeichen (%) beginnen und enden.

Erstellen oder Anpassen eines Web-Fotogaleriestils

Token für Web-Fotogaleriestile

Photoshop verwendet Token in den HTML-Vorlagendateien, um einen Standard-Web-Fotogaleriestil zu definieren. Diese Token ermöglichen Photoshop die Erstellung einer Galerie anhand der Benutzereingaben im Dialogfeld „Web-Fotogalerie“.

Beim Anpassen oder Erstellen eines Galeriestils können Sie jeder HTML-Vorlagendatei beliebige Token hinzufügen. Eine Ausnahme stellen lediglich „%THUMBNAILS%“ und „%THUMBNAILSROWS%“ dar, die nur in der Datei „IndexPage.htm“ enthalten sein dürfen. Bedenken Sie beim Hinzufügen eines Tokens, dass Sie der Datei möglicherweise HTML-Code hinzufügen müssen, damit das Token ordnungsgemäß funktioniert.

Sie können folgende Token in HTML-Vorlagendateien verwenden:

Legt die Farbe aktiver Links fest.

Legt den Namen einer Bilddatei fest.

Bietet die Möglichkeit, direkt zur Miniatur des Bildes statt wieder zum Anfang des Index zurückzukehren. Dieses Token wird verwendet, wenn der Benutzer auf die Schaltfläche „Home“ klickt.

Legt die Farbe des Banners fest.

Legt die Schriftart für das Banner fest.

Legt den Schriftgrad für das Banner fest.

Legt die Hintergrundfarbe fest.

Legt die Schriftart der unter jeder Miniatur auf der Homepage angezeigten Beschriftung fest.

Legt den Schriftgrad der Beschriftung fest.

Fügt den Titel des Dokuments für eine Beschriftung aus den Dateiinformationen ein.

Legt den auf jeder Seite verwendeten Zeichensatz fest.

Legt die Kontaktinformationen für die Galerie, z. B. Telefonnummer und Ort, fest.

Zeigt „Adobe Photoshop CS5-Web-Fotogalerie“ an.

Fügt die Copyright-Informationen für eine Beschriftung aus den Dateiinformationen ein.

Fügt die Bildrechte für eine Beschriftung aus den Dateiinformationen ein.

Legt den Link für die aktuelle Homepage fest.

Ist in „SubPage.htm“ enthalten und verweist auf die erste Indexseite.

Legt das auf dem Banner angezeigte Datum fest.

Legt die E-Mail-Adresse für die Kontaktinformationen der Galerie fest.

Legt die Bilddatei-Informationen der Beschriftung fest.

Legt den Dateinamen eines Bildes fest. Verwenden Sie dieses Token für Metadaten, die als HTML-Text dargestellt werden.

Legt den URL-Dateinamen eines Bildes fest. Verwenden Sie dieses Token ausschließlich für URL-Dateinamen.

Legt den Link zur ersten Galerieseite fest, der im rechten Frame eines Framesets angezeigt wird.

Legt den Link zur Homepage fest, der im linken Frame eines Framesets angezeigt wird.

Legt den Titel der Galerie fest.

Legt die Randgröße eines Bildes mit voller Größe auf einer Galerieseite fest.

Aktiviert die Option „Bildern Höhen- und Breitenattribute hinzufügen“. Dadurch kann der Benutzer die Attribute herunterladen und die Downloadzeit verkürzen.

Dieses Token wird durch eine Zahl ersetzt, die für die Breite des Bildes steht.

Legt den Link zur Galerieseite fest.

Wenn die Option „Bilder skalieren“ aktiviert ist, hat dieses Token den Bildpixelwert aus dem Bereich „Große Bilder“. Wenn diese Option nicht aktiviert ist, enthält dieses Token eine leere Zeichenfolge. Dieses Token bietet sich bei Verwendung von JavaScript in Vorlagen an, da es für alle Bilder auf der generierten Site die maximalen Höhen- und Breitenwerte anzeigen kann.

Legt die URL eines Bildes mit voller Größe auf einer Galerieseite fest.

Aktiviert die Option „Bildern Höhen- und Breitenattribute hinzufügen“. Dadurch kann der Benutzer die Attribute herunterladen und die Downloadzeit verkürzen.

Dieses Token wird durch eine Zahl ersetzt, die für die Breite des Bildes steht.

Legt die Farbe von Links fest.

Legt den Link zur nächsten Galerieseite fest.

Legt den Link von einem großen Vorschaubild zum nächsten großen Vorschaubild fest.

Legt den Link zur nächsten Homepage fest.

Fügt für alle großen Vorschaubilder nummerierte Links auf den Unterseiten ein.

Legt die aktuelle Seitenposition fest (z. B. Seite 1 von 3).

Legt den Namen der Person oder Organisation fest, von der die Fotos in der Galerie stammen.

Legt den Link zur vorherigen Galerieseite fest.

Legt den Link zur vorherigen Homepage fest.

Legt den Titel der Galerie fest.

Legt den Titel der Galerie fest.

Legt die Textfarbe fest.

Legt die Randgröße der Miniaturen fest.

Aktiviert die Option „Bildern Höhen- und Breitenattribute hinzufügen“. Dadurch kann der Benutzer die Attribute herunterladen und die Downloadzeit verkürzen.

Dieses Token wird durch eine Zahl ersetzt, die für die Höhe der Miniatur steht.

Dieses Token wird durch Miniaturen ersetzt, wenn die Datei „Miniatur.htm“ für die Frame-Stile verwendet wird. Sie müssen dieses Token in der HTML-Datei separat in einer einzelnen Zeile ohne Zeilenumbruch platzieren.

Enthält den Miniaturpixelwert im Bereich „Miniaturen“. Dieses Token bietet sich bei Verwendung von JavaScript in Vorlagen an, da es die maximalen Höhen- und Breitenwerte für alle Miniaturen auf der generierten Site anzeigen kann.

Legt den Link zu einer Miniatur fest.

Dieses Token wird durch Zeilen mit Miniaturen ersetzt, wenn die Datei „Miniatur.htm“ für die Nicht-Frame-Stile verwendet wird. Sie müssen dieses Token in der HTML-Datei separat in einer einzelnen Zeile ohne Zeilenumbruch platzieren.

Aktiviert die Option „Bildern Höhen- und Breitenattribute hinzufügen“. Dadurch kann der Benutzer die Attribute herunterladen und die Downloadzeit verkürzen.

Dieses Token wird durch eine Zahl ersetzt, die für die Breite der Miniatur steht.

Legt den Titel der Galerie fest.

Legt die Farbe der besuchten Links fest.