Lothar „BlogPimp“ Baier ist ein gefragter WordPress-Profi, Web-Frontend-Entwickler und Web-Standardista. Er hat GridEasy verbrochen.
Manches merkt man ja erst, wenn man mittendrin ist. So ging es mir auch diesmal. Ich habe ein neues Kunden-Projekt begonnen und habe natürlich GridEasy eingesetzt. Der Kunde möchte in seiner Website mehrere Bereiche haben, wo er Anzeigen in Standard-Formaten platzieren kann.
Also den Photoshop angeworfen, einen schwarzen Background angelegt, darauf einen weißen Layer, der die Ausmaße der Klasse .rahmen hat, dann eine Reihe von Hilfslinien gezogen für das sechspaltige Layout, dann Platzhalter für die Anzeigen erstellt, dann… Halt! Hier läuft was falsch. Es kann doch nicht sein, das ich alle diese Schritte jedesmal wieder machen muss! Da hab ich dann erstmal das Kundenprojekt für einen Moment zurückgestellt. Und mir eine Designhilfe für das Entwerfen von Webseiten mit GridEasy gebaut.
Basis ist ein Layer mit einem schwarzen Hintergrund, der dafür sorgt, das sich die neue Website schön davon abhebt. Darauf ein weißer Layer mit der Breite der Klasse .rahmen. Dann folgt eine Layer-Gruppe mit je einem Layer für die 10 verschiedenen Rastermaße von GridEasy. Und wo ich gerade so schön in Schwung war, kommt dann gleich noch eine Layer-Gruppe mit Zeilen-Raster-Layern im Abstand von 18, 20, 21 und 24 Pixel. Und dann noch eine Gruppe mit Layern für die gängigen Standard-Anzeigen-Maße und eine Gruppe mit den Maßen von eher seltener verwendeten Anzeigen-Größen.
Das Ergebnis ist eine PSD-Datei, in der ich bei einem neuen Projekt alles für den Start vorbereitet habe. Hintergrund und .rahmen ist schon aktiviert, ich aktiviere also je einen Layer für das Spaltenraster und den Zeilenabstand, blende eventuell noch die Layer für die verwendeten Anzeigengrößen ein, und schon ist die halbe Arbeit getan. Sehr nützlich. Und weil es nützlich ist, habe ich die PSD-Datei gleich gezipped und auf den Server geladen. Und Ihr könnt sie jetzt in der Sidebar runterladen. Für die Verwendung braucht ihr Photoshop ab Version 7 oder ein anderes Programm, das PSD-Dateien lesen kann und die Layer darstellen.
28 Kommentare
Geschrieben am 11. Juni 2009 um 14:46 Uhr| Permalink
Thanks for the useful info. It’s so interesting
Geschrieben am 17. Juni 2009 um 19:49 Uhr| Permalink
Genial, ich weiß gar nicht wie ich dir danken soll. meine CSS-kenntnisse haben schon ein paar Lücken, und leider bin ich auch nicht so strukturiert, es hilft mir ungemein.
Wenn du mal in herne bist, komm auf nen Kaffee vorbei.
Geschrieben am 12. September 2009 um 14:28 Uhr| Permalink
Hey Lothar!
Großartige Arbeit! Das ist genau was ich gesucht habe. Ein Framework für eine einfache statische Website, das mir kreativen Spielraum lässt und stabilen, validen Code liefert, ohne dass ich mir einen Wolf „programmieren“ muss oder mich wochenlang einarbeiten.
Danke dafür! Ich werde GridEasy ab sofort für meine Projekte einsetzen.
Ich hoffe ich kann das Framework auch für ein Joomla!-Template nutzen, das teste ich bald.
Mfg
Matthias
Geschrieben am 5. Januar 2010 um 22:21 Uhr| Permalink
Spitze! Danke dir
Geschrieben am 9. Januar 2010 um 14:43 Uhr| Permalink
Hey, das ist wirklich eine großartige Hilfe!
Weiter So! Gruß Baby
Geschrieben am 14. Januar 2010 um 17:04 Uhr| Permalink
Spitzen Sache!
Geschrieben am 14. Januar 2010 um 18:09 Uhr| Permalink
Wirklich klasse!
Geschrieben am 14. Januar 2010 um 18:09 Uhr| Permalink
Tolle Sache!
Geschrieben am 14. Januar 2010 um 18:10 Uhr| Permalink
Vielen Dank für deine Hilfestellung!
Sehr gut, wirklich sehr gut!
Geschrieben am 14. Januar 2010 um 18:11 Uhr| Permalink
Danke für die Hilfe!
Geschrieben am 14. Januar 2010 um 18:12 Uhr| Permalink
Klasse Hilfe! Danke.
Geschrieben am 14. Januar 2010 um 18:16 Uhr| Permalink
Toller Service!
Geschrieben am 14. Januar 2010 um 18:16 Uhr| Permalink
Danke!
Geschrieben am 14. Januar 2010 um 18:16 Uhr| Permalink
Toller Blog und sehr geile Features!
Geschrieben am 14. Januar 2010 um 18:17 Uhr| Permalink
Spitze! Ich weiß gar nicht wie ich dir danken soll. meine CSS-kenntnisse haben schon ein paar Lücken, und leider bin ich auch nicht so strukturiert, es hilft mir ungemein.
Geschrieben am 14. Januar 2010 um 18:18 Uhr| Permalink
Klasse Teil, hab’s mir direkt mal eingebaut!
Geschrieben am 14. Januar 2010 um 18:18 Uhr| Permalink
Vielen Dank!
Geschrieben am 14. Januar 2010 um 18:19 Uhr| Permalink
Super Sache! Danke vielmals.
Geschrieben am 18. Januar 2010 um 14:57 Uhr| Permalink
Sehr toll gestaltet!
Geschrieben am 22. Januar 2010 um 05:17 Uhr| Permalink
Toll gemacht.
Geschrieben am 22. Januar 2010 um 16:34 Uhr| Permalink
das hast du wirklich klasse gemacht!
Ich bedanke mich vielmals und sende Grüße aus dem Norden
Andrea
Geschrieben am 11. März 2010 um 16:31 Uhr| Permalink
Ich habe das Grid für meine Seite http://basische-produkte.de benutzt und dabei ist mir aufgefallen, dass ganz unten in der letzten Ebene in Photoshop die Maske verzogen ist. Kannst du dir ja bei Gelegenheit mal ansehen bzw. ich kann dir auch die korrigierte Version rüberschicken wenn du willst.
LG,
Basische
Geschrieben am 12. Mai 2010 um 09:38 Uhr| Permalink
Hab das Grid nun auch eingesetzt auf http://www.erbeausschlagen.de/. Kann bei der Maske nichts feststellen. Ist das ggf. bereits behoben, oder übersehe ich etwas?
Gruß
André
Geschrieben am 7. Juni 2010 um 12:09 Uhr| Permalink
Hab es eben hier eingebaut:
http://www.hausbau-eigenheim.org/Hausbau-Erfahrung.html
Klasse Teil, danke!
Geschrieben am 7. Juni 2010 um 12:10 Uhr| Permalink
http://www.grundsteuer-berechnen.de/Grundsteuer-berechnen.html
Und hier auch
Geschrieben am 15. Juli 2010 um 21:06 Uhr| Permalink
Super Artikel, vielen Dank hat mir sehr geholfen
Geschrieben am 25. Juli 2010 um 12:32 Uhr| Permalink
Klasse, danke!ganz unten in der letzten Ebene in Photoshop die Maske verzogen ist. Kannst du dir ja bei Gelegenheit mal ansehen bzw. ich kann dir auch die korrigierte Version rüberschicken wenn du willst.
Geschrieben am 31. Juli 2010 um 12:39 Uhr| Permalink
Tolles Teil! Bravo.