Grid und Raster in Photoshop

Raster helfen, beliebige Elemente einer zu gestaltenden Fläche auf/an Linie auszurichten. Damit entsteht ein optischer Zusammenhang, der eine Ein­heit des Gestalteten erreicht. Raster sind im Printbereich Pflicht, im Web­design nur beschränkt umzusetzen. Möchte man die Typografie und weitere Seitenelemente einheitlich am Raster bin­den, dann wird die Erstellung des CSS schwierig. Es gibt ein paar Helferlein, die korrekte Raster­aus­­richtung wenigstens beim Design einer Site in Photoshop erleichtern. Davon möchte ich zwei Freeware-Produkte vorstellen: Modular Grid Pattern und GuideGuide.

Templates versus Plugin

Natürlich können Sie sich ein paar Photoshop Templates basteln, die mit Hilfslinien und anderen Mar­kie­rungen belegt sind. Damit halten Sie sich einen Fundus bereit, mit dem Sie schnell starten können. Einfacher und flexibler können die zwei kleinen Helferlein reagieren, wenn es nicht von der Stange sein soll, und das ist im Webdesign bislang vorherrschendes Prinzip. Leider wurde Photoshop bisher ohne nativen Gridgenerator wie zum Beispiel bei InDesign ausgeliefert.

Modular Grid Pattern

Modular Grid Pattern PaletteAuf der Site von Modulargrid (Autor leider unbekannt) kann man zweierlei tun. Erstens gibt es einen Online-Generator für Grids (siehe Artikelbild oben) und zweitens findet sich eine Extension für Photoshop. Die erste Lösung ist für die schnelle Nummer: gewünschte Raster­werte einstellen (Modulbreite und Modul­menge, Spalten­abstand, Zeilenabstand). Dann ergeben sich Realtimeanzeige und -werte für die erzielte Gesamtbreite. Wollen Sie nicht extra online gehen, dann hilft eine freie Photoshop-Extension, die man downloaden kann. Nach dem Download ruft man den Adobe Extension Manager auf. Damit kann man die Extension installieren und nach einem PS-Start findet man unter dem Menupunkten: Fenster → Erwei­te­rungen → den Eintrag »Modular Grid Pattern«. Mithilfe dieser Palette lassen sich schnell neue Dokumente mit hinterlegtem Raster erstellen.

GuideGuide

Guideguide installieren mit Adobe Extension ManagerDiese Extension von Mc Effee ist mittlerweile in Version 2 erhältlich. Es liegen Plugins für Photoshop CS4 und CS5 (Lion ready) vor. Für den Gebrauch mit CS5 lieferte Adobe Anfang Dezember ein Extension Manger Patch nach, der zunächst geladen und installiert werden muss. Beim nächsten Öffnen von Photoshop ist eine neue Pallete ergänzt. Nach dem Öffnen findet sich ein komplexer Dialog, der sehr komplett ein Raster aus Hilfslinien aufbauen kann. Zuvor muss aber ein Dokument oder eine Arbeitsfläche in Photoshop geöffnet werden. Dann tragen Sie der Reihe nach ein.

Werte festlegen

GG PaletteBeginnen Sie in den ersten zwei Zeilen der GG-Palette mit der Festlegung von Margins, also den Aussenabständen. Das ist vergleich­bar einem Satzspiegel im Print. Dann folgt eine Zeile, in der man die Anzahl von Spalten und Zeilen eintragen kann. Die folgende Zeile ist zur Definition von Spaltenbreite und Zeilenhöhen. Einfach Pixelwerte eingeben. Die letzte Zeile erlaubt die Regelung von Zeilen- und Spalten­abstand. Mit Klick auf den blauen Button unten: »GG« werden per Script alle nötigen Hilfslinien in Ihrem Dokument erzeugt.
Nun gilt es noch, alle erzeugten Hilfslinien zu sperren (Ansicht/Hilfslinien sperren), um Sie dann zum Layouten zu nutzen. GG erlaubt es auch, erzeugte Raster als Set zu speichern, auf Knopfdruck die MItte zu kennzeichnen, oder die Hilfslinien komplett zu löschen—so kann man sich an die optimalen Werte herantasten.

Service

Genial ist schon mal, dass beide Plugins umsonst sind. Modular Grid Pattern erzeugt sehr deutliche Raster-Hintergründe.Von der Extension GuideGuide werden Sie auf mögliche Downloads automatisch hingewiesen, was will man mehr? Die Hinweise auf die vorgestellten Extensions stammen von Florian aus der Sc03, dem hiermit herzlich gedankt sei!
Vielleicht kennen Sie eine weitere nützliche Freeware für Photoshop?

5 Comments

  • 25. Dezember 2011 - 07:43 | Permalink

    Sauber! Danke für das Weihnachtspräsent!

    • BigBossDesigner
      25. Dezember 2011 - 12:52 | Permalink

      Tja, wenn man brav ist, kommt alles von selbst auf einen zu 😉

  • Florian Gabele
    9. Januar 2012 - 13:28 | Permalink

    Immer wieder schön, was man hier zu lesen bekommt!

    Dankeschön =)

    • BigBossDesigner
      9. Januar 2012 - 13:36 | Permalink

      Danke, es wird bald Zeit, dass Sie sich einen Avatar zulegen, oder?

      • Florian Gabele
        9. Januar 2012 - 15:12 | Permalink

        Allerhöchste Zeit wird das! Und einen eigenen Blog…

  • Comments are closed.

    QR Code Business Card