Website gestalten lassen: Vom Photoshop-Entwurf zur fertigen Website

Datum: 11. October 2012

Photoshop gilt seit Jahren als das Bildbearbeitungs-Programm par Excellence, mit dem Bilder, Grafiken und Zeichnungen ansprechend und professionell bearbeitet werden können. Zusätzlich ist Photoshop aber auch das Tool der Wahl, wenn es um die Aufbereitung von Bildern für das Internet und den professionellen Workflow zwischen Design und Web-Programmierung beim Website gestalten geht. Eine Vielzahl von Einstellungsmöglichkeiten gestattet es, äußerst komfortabel (selbst aus dürftigen Vorlagen), das Maximum herauszuholen. Photoshop zeichnet sich in seinen aktuellen Programmversionen außerdem dadurch aus, dass es pixelgenaue Eingriffe erlaubt und weboptimierte Größen sowie jedes nur erdenkliche Web-Bildformat unterstützt. Es eignet sich daher nicht nur für anfängliche Gestaltungsentwürfe, sondern gleichermaßen für das professionelle Finishing der entsprechenden Bilder.

Von Anfang an: Bildbearbeitung mit Photoshop
Die Gestaltung einer Website geht nicht selten mit einer Vielzahl von Entwürfen einher, die lange bevor sie in Content Management Systeme – dazu weiter unten mehr – eingepflegt werden, dem späteren Erscheinungsbild des Webauftritts möglichst nahe kommen sollen. Zum Einsatz kommen dafür nicht nur Text- und Bildelemente, sondern darüber hinaus möglicherweise Farb- und Gestaltungsflächen. Weitere Informationen hierzu auch im Artikel: Was zeichnet ein gutes Webdesign aus. Photoshop eignet sich dank ausgefeilter Text- und Bildbearbeitungstools sowohl für das Layout einzelner Seiten, als auch für die Erstellung einzelner Bilder oder Bildbereiche. Photoshop-Anwendern sollte allerdings klar sein: Photoshop ist als Bildbearbeitungs- und nicht als Websitegestaltungsprogramm zu verstehen. Vor Beginn eines Websiteprojektes gilt es übrigens, sich die Abmessungen der fertigen Website oder der entsprechenden Abbildungen vor Augen zu führen. Da die allgemeinen Empfehlungen für die ideale Anlage von Bildern zum Teil erheblich voneinander abweichen und stark CMS-abhängig sind, soll an dieser Stelle nicht auf die genauen Werte eingegangen werden. Die Festlegung der richtigen Bildgröße ist allerdings von nicht geringer Bedeutung – eine Abstimmung mit dem Content Manager sollte nötigenfalls schon im Vorfeld in Erwägung gezogen werden, da spätere Änderungen erheblichen Aufwand verursachen können.

  • Sie möchten eine Website in modernem Design gestalten lassen? Fragen Sie uns unter 089.68098057 oder schreiben Sie uns.

Weboptimierung bei der Bildbearbeitung mit Photoshop
Sowohl in Hinblick auf den Farbraum und die Auflösung als auch in puncto Webausgabemöglichkeiten verfügt Photoshop über alle Einstellungsmöglichkeiten, die beim Website gestalten erforderlich sind. Ein weiterer wichtiger Aspekt bei der Ausgabe von Bilddaten ist das Dateiformat sowie die Komprimierungs- und Einstellungsmöglichkeiten. JPG, PNG oder GIF? Photoshop bedient sämtliche Dateiformate, die im Web wiedergegeben werden und von (fast) allen Content Management Systemen interpretiert werden können. Wichtig: Das Exportieren von weboptimierten Bildern erfolgt nicht unter „Sichern unter“, sondern über ein gesondertes Menü.

“Für Web speichern”: optimale Bilder für das Internet
Neben den eigentlichen „Sichern unter“ hält Photoshop einen weiteren Menüpunkt bereit, der als „Für Web speichern“ bezeichnet wird und unter dem sich eine Vielzahl von Einzeleinstellungen vornehmen lassen. Die Möglichkeiten sind beachtlich und reichen von diversen Dithering- und Farbeinstellungen bis hin zu Transparenz-Optionen oder dem Einbetten von Copyright-Informationen. Besonders interessant ist die Möglichkeit, das Bild erst zu diesem Zeitpunkt zu skalieren. Von der „Sichern unter“-Option, die ebenfalls JPGs unterstützt, unterscheidet sich „Für Web sichern“ durch die besonders starken und webkompatiblen Kompressionen sowie einem übersichtlich unterteilten Einstellungsfenster . Einer der wichtigsten Vorteile der Funktion „Für Web speichern“ ist die vergleichende (A/B)-Darstellung des originalen und der zu speichernden Version, wichtig bei der Auswahl von Kompressionsstufe zur Qualitätsbetrachtung etwa bei JPGs

  • Webdesign mit einem Content Management System wie Typo3 oder Redaxo? Fragen Sie uns unter 089.68098057 oder schreiben Sie uns.

Die Integration der Bilder im Content Management System
Content Management Systeme (kurz CMS) verwalten Text- und Bildinhalte auf dynamische Art – das heißt datenbankgestützt. Diese Feststellung ist wichtig, um zu verstehen, wie CMSs das in Bildordnern abgelegte Bildmaterial wiedergeben und der Kreativität zu Recht einige durchaus verschmerzbare Grenzen setzen. In den Backend-Voreinstellungen des CMS festgelegte Regeln bewirken eine stets einheitliche Darstellung von Bildern, weshalb es wichtig ist, diese Regeln schon beim Bearbeiten in Photoshop zu beachten. Andernfalls entstehen unerwünschte Leerräume oder die Bilder könnten verzehrt oder gestaucht dargestellt werden und verfälschende gestalterische Effekte entstehen. In der Praxis bedeutet dies, dass entweder das Bildverhältnis zu beachten ist oder dass aber die exakte Pixelgröße beim Anlegen der Bilder bekannt sein sollte. Doch CMS verdienen auch in anderer Hinsicht Beachtung: Nicht alle CMS beherrschen den Umgang mit sämtlichen Bildformaten, weshalb auch hier im Vorfeld eine Abstimmungsschleife mit dem Administrator zuweilen unumgänglich ist. Stimmt das Bildformat und sind die richtigen Abmessungen eingehalten worden? Dann sollte das Bild beim Aufruf der Seite entsprechend gut aussehen.

Für Autodidakten seien hier zwei Quellen genannt, die helfen, sich direkt im Internet die Photoshop-Kenntnisse anzueignen, die für professionelles Webdesign benötigt werden:

Tags dieses Beitrags:

    Schreibe einen Kommentar zu "Website gestalten lassen: Vom Photoshop-Entwurf zur fertigen Website"

    Etwas HTML ist ok