Die Meinungen sind gespalten darüber, ob man das eigene Weblayout in Photoshop erstellt, jedoch zählt die Software zu den beliebtesten Werkzeugen, wenn es um das Erstellen von Weblayouts geht. Um den Anwender die Arbeit noch zusätzlich zu erleichtern, gibt es einige Tools, die sehr hilfreich sind.

Rastererstellung anhand von Plug-In oder Webtool

bei der Erstellung eines Weblayouts wird zunächst einmal mit einem Raster begonnen, damit die eigenen Texte, Bilder sowie andere Elemente positioniert werden können. Demnach wird das Raster in vertikale sowie auch horizontale Hilfslinien unterteilt. Dabei werden die Ebenen in mehrere Spalten aufgeteilt was dem Anwender zur Orientierung dient. Damit keine manuelle Einstellung an den Hilfslinien vorgenommen werden muss, gibt es beispielsweise das kostenlose Photoshop-Plug-In namens „GuideGuide“, mit dem das individuelle Raster selbst bestimmt werden kann. Zudem kann man dadurch auf sogenannte Sets zugreifen und auch eigene erstellen. Das Plug-In ist kostenlos und kann unter guideguide.me heruntergeladen werden. Des weiteren gibt es noch das freie Webtool namens „Grid Calculator“, das ähnlich wie Guide-Guide arbeitet. Dabei kann der Anwender sein Raster direkt online erstellen und zusätzlich eine maximale Breite seiner Seite festlegen.

Lösung für Bilder in Photoshop

Freelancer sowie viele Webdesigner nutzen für ihr Layout neben den eigenen Bildern, auch sogenannte Bilddatenbanken. Damit sind Dienste wie Fotolia gemeint, wodurch ein zeitaufwendiges Arbeiten durch das andauernde Switchen zwischen Browser und Photoshop hervorgerufen wird. Um dieses Problem zu vermeiden, kann man auch hier auf eine Plug-In-Lösung zurückgreifen, nämlich das „Fotolia-Plugin“. Es befindet sich zwar in einer beta-Phase, kann jedoch ohne Probleme genutzt werden. Anhand des Plug-In werden dem Anwender viele Möglichkeiten geboten, wie etwa das Einloggen mit dem zuvor erstellten Fotolia-Account oder das Anlegen von Bilderordnern für Layout-Grafiken sowie für gekaufte Bilder. Anschließend kann man über eine Suchfunktion das gewünschte Motiv suchen, die Layout-Grafik direkt runterladen oder das Bild ganz einfach kaufen. Das kostenlose Plug-In eignet sich für Mac- und Windows-User und ist ab der Version CS5 nutzbar.

Das Testen von Schriften in Photoshop

Ein weiterer wichtiger Bestandteil bei der Gestaltung eines Weblayouts ist natürlich die Wahl der Schriften. Denn meistens werden Schriften angewendet, die nicht auf dem eigenen Rechner vorhanden sind. Daher werden diese Schriften meistens nachträglich mit dem CSS-Befehl @font-face eingebunden. Dabei hat der nutzer die Auswahl zwischen Google Fonts sowie selbst gehosteten Fonts. Da Google Fonts aktuell 624 Schriften aufweisen kann, ist die Entscheidung für die richtige Schrift sehr schwer. Um diese Schriften direkt in Photoshop testen zu können, ohne ein Runterladen beziehungsweise ein Installieren vornehmen zu müssen, gibt es das „Web Font Plug-In“ aus dem Hause WebINK. Mit dem Plug-In wird dem Nutzer die Möglichkeit geboten, nicht nur die eigenen Schriften in seinem Layout auszutesten, sondern auch die Google Fonts. Das Plug-In ist kostenlos und richtet sich an Mac- und Windows-Nutzer.

Exportieren von Bildern

Photoshop bietet jedem Anwender die Möglichkeit, seine erstellten Grafiken zu speichern, damit diese anschließend bei der Umsetzung in HTML/CSS genutzt werden können. Dabei kommt das Plug-In „Enigma64“ zum Einsatz, mit dem einzelne Ebenen, Auswahlen und ganze Dokumente mit nur einem Klick exportiert werden können. Dabei kann der Nutzer davor das bevorzugte Format einstellen, genauso wie die Kompressionsstufe und den Ort, wo die Datei abgespeichert werden soll. Jedoch ist das Plug-In nicht kostenlos, dafür aber mit Mac und Windows kompatibel.

CSS3 und Photoshop

Bei der Entwicklung des eigenen Weblayouts wird man oft in den Editor weitergeleitet. Bekanntermaßen bietet CSS3 diverse neue Möglichkeiten, um Photoshop-Effekte wie Schlagschatten oder abgerundete Ecken einzusetzen. Um diesen Vorgang außerhalb von Photoshop wahrnehmen zu können, gibt es verschiedene Webtools beziehungsweise Seiten. Anhand der Seite „HTML5/CSS3 Box.com beispielsweise, steht dem Nutzer eine Auswahl an Möglichkeiten zur Verfügung, um den eigenen CSS3-Code zu generieren und in das eigene Projekt umzusetzen. Dann gibt es noch das Plug-In namens „CSS Hat“, das die Möglichkeit bietet, Ebenenstile sowie Vektor-Formen in CSS3-Cdes zu konvertieren.

ähnliche Artikel:

  1. Media-Saturn-Manager beklagt sich über die bewusste Benachteiligung der Onlinehändler
  2. Die neuen Adobe Touch Apps
  3. DxO FilmPack v3.2.2 kompatibel mit Adobe Photoshop CS6
  4. Liechtensteiner sind sich über neues Landeslogo einig
  5. HTML5 nach über 8 Jahren offiziell fertiggestellt
Tagged with:  

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>