Fachartikel

Von 1997 bis 2005 erschienen Artikel von mir in den Computerfachzeitschriften PC Intern und Internet Intern. Nachfolgend finden Sie alle erschienenen Artikel aufgelistet. Eine kurze Beschreibung zeigt Ihnen, worum es in dem Artikel geht. Klicken Sie einfach auf den Link, um den gesamten Artikel zu lesen. Die Bilder in den Artikeln sind mit vergrößerten Darstellungen verknüpft.

Fachartikel

Web-Galerien mit Photoshop

Web-Galerien mit Photoshop

Web-Grafik & Animation: Heft 02/2002 (S. 124) 2 Seiten

Erweiterte Vorlagen im praktischen Einsatz

Schon seit einigen Versionen bietet Photoshop Automatismen zum Erstellen von Web-Galerien an. In der aktuellen Version 7 kamen weitere Vorlagen dazu. So ist es ein Leichtes, eine interessante und ansprechende Fotogalerie für die eigene Web-Seite zu erstellen - Programmierkenntnisse sind zum Erzeugen des im Hintergrund arbeitenden JAVA-Quell-Codes nicht notwendig

Fotoalben wurden im Laufe der Zeit immer beliebter im Web - ob auf privaten Homepages oder zur Produktpräsentation. Dabei werden zur Platzersparnis zunächst nur Thumbnails auf einer Seite abgebildet, die nach dem Anklicken in vergrößerter Darstellung gezeigt werden.

Dieser Entwicklung hat das Standard-Bildbearbeitungsprogramm Photoshop schon in der Version 5.5 Rechnung getragen. Dort gab es erstmals eine Funktion um derartige Web-Fotoalben automatisch zu erzeugen. Seitdem wird dieses Feature von Version zu Version weiterentwickelt und verbessert.

Die Aufgabenstellung

Die Ausgangssituation wird vermutlich meist so aussehen, dass verschiedene Fotos - eventuell in unterschiedlichen Dateiformaten - vorliegen. Oftmals liegen dabei auch verschiedene Bildgrößen vor. Derartiges Bildmaterial muss nun vereinheitlicht werden. Bei der Aufbereitung helfen die automatischen Funktionen von Photoshop, wie etwa die Aktionen. So können beispielsweise leicht viele Bilder auf eine einheitliche Größe skaliert werden.

Dafür werden zwei verschiedene, einheitliche Bildgrößen benötigt: Ein kleines Bild in einer Größenordnung von ungefähr 100 Pixeln Breite, das für die Thumbnail-Darstellung verwendet werden kann. Dazu kommt die vergrößerte Variante. Diese sollte bei einer Breite von ca. 400 Pixeln liegen, um die Ladegeschwindigkeit erträglich zu halten. Größere Bilder sollten entsprechend stärker komprimiert werden, um die Geduld des Web-Besuchers nicht zu strapazieren. Gegebenenfalls könnten diese Ergebnisse noch mit Bildeffekten versehen werden, wie etwa einem weichen Schatten.

Die Weiterverarbeitung

Nachdem alle Bildvorbereitungen abgeschlossen sind, muss ein Webeditor bemüht werden, um die Seiten zu gestalten.

Dabei kann eine Menge Arbeit entstehen, da für jede vergrößerte Darstellung eines Bilds ein neues HTML-Dokument nötig ist. Bei aufwändigen Fotoalben, die sich über mehrere HTML-Seiten mit Thumbnail-Darstellungen erstrecken, kommen diese Sammelseiten bei der Gestaltungsarbeit noch dazu.

Viel Hilfe von Photoshop

All diese Aufgabenstellungen erledigt Photoshop mit der Funktion Datei/Automatisieren/Web-Fotogalerie selbstständig. Dennoch ist das Wissen um die notwendigen, manuellen Arbeitsschritte hilfreich, um nachträglich auf die Ergebnisse Einfluss nehmen zu können. Hat der Anwender beispielsweise eine fertige Web-Galerie vorliegen und möchte nun nur noch Bildeffekte einfügen, muss nicht etwa die gesamte Prozedur wiederholt werden - es reicht das nachträgliche Bearbeiten der Bilder per Aktion. Auch das spätere Ändern des Erscheinungsbilds ist ohne weiteres möglich.

Web-Galerien mit Photoshop
Sämtliche Grund-Optionen für das spätere Album finden sich übersichtlich im Dialogfeld der Funktion Web-Fotogalerie

Die Arbeitsschritte

Nach dem Aufruf der Funktion Datei/Automatisieren/Web-Fotogalerie öffnet Photoshop ein Dialogfeld mit zahlreichen Funktionen. Für die Gestaltung kann im ersten Listenfeld zwischen elf verschiedenen Erscheinungsbildern gewählt werden.

Web-Galerien mit Photoshop
Die Optionen für den Kopfbereich der HTML-Seite lassen sich auch nachträglich mit einem Editor überarbeiten

Die Option "Einfach", wie auch die Tabellen-Optionen erzeugen dabei getrennte Thumbnailseiten und vergrößerte Darstellungen. Mithilfe der anderen Auswahlmöglichkeiten gehen Sie anders vor: Hier wird mit Frames gearbeitet. Ein Frame beinhaltet die Thumbnail-Bilder, ein anderes die vergrößerte Darstellung. Dabei wird zwischen einer horizontalen und vertikalen Anordnung des Thumbnail-Frames unterschieden. Das Aussehen und den Aufbau des jeweiligen Stils kann der Anwender in einer Vorschau begutachten.

Web-Galerien mit Photoshop
Den ausgewählten Stil können Sie mithilfe eines Vorschaubilds begutachten

Ordnung halten

Für die Web-Galerie sollte der Anwender im Vorfeld einen neuen Ordner anlegen. Im Setup muss dann sowohl ein Ordner angegeben werden, in dem die Ausgangsbilder zu finden sind - wie einer, in dem die veränderten Bilder für die Web-Galerie abgelegt werden sollen. Beim Ausgangsordner können zusätzlich darin befindliche Unterordner mit berücksichtigt werden.

Einstellungssache

Der Optionen-Bereich beherbergt eine Vielzahl an Einstellungen. Wird im Listenfeld die Banner-Option ausgewählt, können Informationen angegeben werden, die im Kopfbereich der HTML-Dokumente angezeigt werden. Zusätzlich kann hier die zu verwendende Schriftgröße und der Schrifttyp eingestellt werden. Für die Schriftart kann leider nur zwischen den vier Standardschriften Arial, Courier, Helvetica und Times gewählt werden. Sollen andere Schriften verwendet werden, ist eine spätere Modifikation der fertigen HTML-Dokumenten nötig. Da die meisten gängigen Webeditoren leistungsfähige Ersetzungs-Optionen bieten, sollte der Austausch keine großen Probleme machen.

In der Kategorie "Große Bilder" werden die Einstellungen für die vergrößerten Darstellungen vorgenommen. Neben der Bildgröße kann dort auch die Qualität der JPEG-Komprimierung vorgegeben werden. Außerdem können für den Titel verschiedene Bilddaten - wie etwa der Dateiname oder ein Copyright-Vermerk - aufgenommen werden. Für diese Daten - die im Kopfbereich der vergrößerten Darstellung angezeigt werden - lassen sich die Schrifteigenschaften anpassen. Ähnlich sind die Optionen in der Miniaturen-Kategorie. Hier fehlt allerdings die Einstellung der Komprimierungsstärke - die wird von Photoshop selbstständig eingestellt.

Web-Galerien mit Photoshop
Für große Bilder sollte auch die Bildqualität angepasst werden, um dem Besucher lange Ladezeiten zu ersparen

In der Rubrik "Eigene Farben" lässt sich das Erscheinungsbild der Texte und Links auf der Web-Seite beeinflussen. Außerdem kann die Hintergrundfarbe eingestellt werden.

Web-Galerien mit Photoshop
Die Farbeinstellungen für das spätere HTML-Dokument lassen sich über Auswahlfelder definieren

Will der Anwender beispielsweise einen Copyright-Vermerk auf den vergrößerten Bildern anbringen, werden die entsprechenden Einstellungen in der Schutz-Kategorie vorgenommen. Auch hier können die Schriftattribute geändert werden. Zudem gibt es verschiedene Optionen für die Position und Rotation der angebrachten Information.

Erstellen der Web-Galerie

Anschließend heißt es warten: Je nach Menge der zu verarbeitenden Fotos und der Größe der Bilder kann es eine ganze Weile dauern, ehe Photoshop all die notwendigen Arbeitsschritte automatisch durchgeführt und alle Bilder konvertiert hat.

Anschließend wird automatisch der Standard-Webbrowser geöffnet, um das fertige Ergebnis anzuzeigen.

Ein Blick in den erstellten Ordner zeigt, dass dort nun einige neue Unterordner vorhanden sind. Die Thumbnail-Bilder wurden ebenso in einem eigenen Ordner abgelegt, wie die vergrößerten Ansichten und die HTML-Seiten. Diese Funktion kann der Anwender auch zur alternativen Gestaltung der Bilder nutzen. Werden vor dem Aufruf der Funktion fertige Grafiken in den Bilderordner kopiert, erstellt Photoshop lediglich die HTML-Dateien neu - die bereits bearbeiteten Bilder bleiben unverändert. In der Datei UserSelections.txt werden unter anderem die verwendeten Komprimierungseinstellungen gespeichert. Im Stammverzeichnis sind außerdem die Frame- und die Index-Datei zu finden. Soll das Design oder die Texte verändert werden, können diese Dateien mit einem Webeditor bearbeitet werden.

Allerdings ist hier Vorsicht geboten. Bei einer Änderung der Optik müssen unter Umständen alle HTML-Dateien im Pages-Ordner verändert werden. Das kann eine Menge Arbeit sein.

Bei der Bearbeitung in einem Webeditor fällt aber auch ein Manko auf: Die Bilder sind in recht unglücklich aufgebauten Tabellenfeldern untergebracht. Durch die unnötig aufwändige Gestaltung der Tabellen wird die HTML-Datei künstlich vergrößert und wird dadurch recht unübersichtlich.

Experten können allerdings die verwendeten HTML-Grundgerüste verändern, die im Photoshop-Programmordner Vorlagen/Web Kontaktabzug zu finden sind. Hier werden Platzhalter für die einzufügenden Bilder verwendet.

Zurück