Webseiten in Photoshop gestalten

Bevor man heute anfängt, sich Gedanken um das Content Management System für eine neue Webseite zu machen und die Programmierer zu unterrichten, wird man mit einem Design beginnen. Dafür nehmen die meisten Entwickler Photoshop. Das Bildbearbeitungsprogramm ist bestens geeignet, sogenannte Mockups von Webseiten anzufertigen.

Dabei handelt es sich um eine gestaltete Webseite, die aber ein Bild ist und keine Funktionen hat. Gestalter haben heute zahlreiche Bibliotheken mit vorgefertigten Elementen, die dann in das Design eingefügt werden. Außerdem benutzen sie meistens Templates für Webseiten, bei denen zum Beispiel die Bildschirmgröße schon hinterlegt ist. So kann man schnell eine mobile Seite gestalten.

Webseite schnell und günstig gestalten

Der Vorteil bei den Photoshop-Webseiten ist, dass man die Gestaltung ganz einfach den Wünschen des Kunden anpassen kann. Manche CMS-Systeme haben eine eigene Photoshop-Datei mit den grafischen Elementen, die dann ebenfalls individualisiert werden können. Hat ein bestimmtes Thema zum Beispiel grüne Buttons, kann man diese mit der Bildbearbeitungssoftware umfärben und im Entwurf darstellen. Im CMS muss man nur noch die CSS-Datei entsprechen anpassen.

Mit den Mockups können Kunden schon zu einem frühen Zeitpunkt sehen, ob und wie ihre Gestaltungswünsche verstanden und umgesetzt werden. Sie können Änderungen vornehmen, ohne dass Code geändert werden muss. Das spart zum einen viel Zeit, zum anderen aber auch Kunden und Entwicklern eine Menge Geld.

Einfache Alternative für die meisten Webseiten

Auch wenn Adobe mittlerweile Programme wie Dreamweaver und Adobe XD im Programm hat, nutzen doch immer noch viele Entwickler das Bildbearbeitungsprogramm. Ganz ohne Nachteile geht das aber nicht. Gerade bei komplexen Seiten wird man schnell an die Grenzen der Leistungsfähigkeit kommen und die Seite kann dann unübersichtlich werden. Manche Agenturen setzen auf Full-Stack-Entwickler, die sowohl das Frontend als auch das Backend entwickeln und neben der Gestaltung auch die Funktionalität im Blick haben.

Für das einfache Gestalten von Webseiten, vor allem wenn sich viele Gestaltungselemente wiederholen, hat Photoshop aber nach wie vor eine Berechtigung. Um eine Startseite zu designen, legt man einfach ein neues Dokument in der Größe 1280 x 920 Pixel an. Um die Auflösung muss man sich nicht kümmern. Meistens wird dann zunächst eine Navigation eingefügt und dann die wesentlichen Bildelemente. Hilfreich sind dabei Rasterlinien, die das Layout festlegen und eine gewisse Ordnung bringen. Man sollte bei den verschiedenen Ebenen, die für die Elemente benötigt werden, aber auf eine genaue und verständliche Beschriftung achten. Außerdem sollten Elemente, die zusammengehören, wie ein Text und eine Box, immer auch gruppiert werden.