Pixeldrama » Grid

GridMaker für Photoshop

Benjamin — Tue, 06 May 2008 19:21:45 +0000

Ein kleines Skript hilft ein Raster blitzschnell und pixelgenau mit Photoshop zu erstellen. Die Höhe der einzelnen Rasterreihen wird nach dem goldenen Schnitt berechnet.

Für die Installation einfach den Ordner Adobe Photoshop CS2\Vorgaben\Skripten aufrufen und dort das Script ablegen. Dann in Photoshop unter Datei/Skripten aufrufen.

Website besuchen: GridMaker Reboot

Screendesign mit 960-Raster

Benjamin — Thu, 27 Mar 2008 11:32:44 +0000

Raster, oder im englischen Sprachgebrauch Grid genannt, sind nicht nur gerade im Aufwind bei den Screendesignern da draußen, sondern unterstützen tatsächlich die Entwicklung eines sauberen Layouts ganz ungemein.

Nathan Smith hat jetzt ein Raster für 960px angefertigt. Als Template für die üblichen Verdächtigen unter den Grafikprogrammen und als HTML-Template kann das Raster auf 960.gs. herunter geladen werden.

Website besuchen…

via

Designen mit Grid… diesmal mit Excel

Benjamin — Sat, 16 Jun 2007 16:09:39 +0000

Um geeignete Proportionen zu finden, benutze ich ganz gerne eine Vorlage, die ich mir in Photoshop oder Gimp als Ebene einbinde. Dabei komme ich nicht umhin, den Taschenrechner zu zücken, um Gesamtenbreiten zu berechnen. Vor allem ist die Geschichte meist recht unflexibel. Soeben ist mir ein wirklich abgefahrener Artikel auf Design Canopy über gelenkigere Grids untergekommen. Die Grundlage des Grids wird nicht mit einem konventionellen Grafikprogramm erstellt, es kommt eine Software für Tabellenkalkulation zum Einsatz – Excel. Bemerkenswert, wenn jemand bei seiner Arbeit plattformübergreifend denkt, von so einem Geist lebt die Szene, großartig.

Website besuchen…

Einiges über Rasterlayouts und ein 720px-Raster

Benjamin — Fri, 11 May 2007 12:04:43 +0000

Für Webdesigner ist es eigentlich Plicht sich mit dem Thema Rasterlayout zu beschäftigen. Zur Zeit gibt auch es eine kleine Welle in den einschlägigen Designblogs. So gibt es den endlosen Diskurs fluis/liquid Layouts vs fixed Layouts. Heute aber nur zu den fixen Layouts, welche auch schon vielen Fragen aufwerfen, die unbedingt der Klärung bedürfen. Dabei sollten keine Dogmen verbreitet werden, sondern immer die konkrete Aufgabenstellung und Zielgruppe den Leitfaden spinnen.

Was man mit Grids so alles anstellen kann, ist auf Subtraction nachzulesen. Dort hat man sich die Mühe eines hypothetischen Redesigns eines bekannten Suchportals gemacht, um zu erklären, wozu ein Grid ein gut ist. Am Ende des Artikels gibt es ne klasse Präsentation im PDF-Format. Pflichtlektüre!
Auch lesenswert ist Tanz auf dem Raster auf cold-heat.de, dort könnt ihr Christian Mücke beim Spielen mit einem Rasterlayout über die Schulter gucken.

Inspiriert durch den Artikel Gridding the 960 von Cameron Moll habe ich mich an eine Rastervorlage für 720px gemacht. Sie basiert auf dem Grid von Christian Watson.

Download
720px-grid-png.zip
grid-720px-ps.zip

Wieso jetzt 720px? Zum Beispiel sollte bei Projekten immer die Zielgruppe berücksichtigt werden, also welche Endgeräte kommen zum Einsatz und die daraus resultierende Breite für das Layout, um das ungeliebte horizontale Scrollen zu vermeiden. Viele Websites spekulieren schon auf eine Mindestauflösung von 1024×768 und entscheiden sich für eine Breite rund um die 900px-960px. Damit ist schon ein Puffer für Browserseitenleisten, Scrollbalken und nicht bildschirmfüllende Fensteransicht einberechnet. Ein Trend, der den Fortschritt bei der Hardware Tribut zollt, denn mit dem Einzug von Flachbildschirmen in Haushalte und Büros, kam auch eine höhere Auflösung. Doch gerade bei Firmenauftritten oder Informationsseiten setze ich noch auf 720px Breite, um auch für alte Geräte mit 800×600 oder kleine Fenster gewappnet zu sein. Daher die Entscheidung auch ein 720px-Raster vorrätig zu haben…