Grid ist ein beliebter Ansatz zur Gestaltung von Websites. Es ist konsequent und macht Abschnitte proportional richtig. Ein paar Beispiele für CSS Grid Frameworks sind 960.gs oder Skeleton. Allerdings ist eine der Einschränkungen der Verwendung eines Gitters Rahmen, dass wir weniger Flexibilität haben.
Wir sind auf den Rahmen der Spezifikation gebunden, und sein Autor die Methodik, die in vielen Fällen möglicherweise nicht passend für unsere Anforderungen Website.
In diesem Beitrag werden wir Ihnen zeigen, wie erstellen Sie eine benutzerdefinierte Raster sowohl für CSS und Photoshop . Um den Prozess einfach, werden wir mehrere Werkzeuge zu benutzen. Lassen Sie uns check it out.
Install guideguide
Zuerst müssen wir über einen schönen guideguide , eine Photoshop-Erweiterung zu installieren Leitfaden erstellen Linien, eigens hierzu ein Grid mit Leichtigkeit zu schaffen. Um guideguide installieren, müssen Sie Ihre Photoshop CS4 mindestens sein.
Das Photoshop-Erweiterung kann durch den Adobe Extension Manager installiert werden, da folgt.
Berechnen Sie Ihre Grid
Bevor wir die Hilfslinien in Photoshop einrichten, müssen wir das Gitter berechnen müssen, die auch die Gesamtbreite, die Spaltenbreite, die Nummer der Spalte und die Spalte Dachrinne . Dies kann leicht getan werden mit Gitter Taschenrechner Heroku.com.
In diesem Beispiel möchte ich präzisieren Breite für 1000px , 30px für die Dachrinne Breite und 10 für die Anzahl der Spalten. Dieses Tool wird dann automatisch die eigentlichen Inhalt Breite sowie die entsprechende Spaltenbreite .
Sie können auch übertragen Sie die erzeugte CSS Grid.
Erstellen des Grid
Zeit, um wieder zu Photoshop. Gehen Sie zu diesem Menü: Fenster> Erweiterungen , um die guideguide Panel in der Sidebar Photoshop zeigen. Dann erstellen Sie eine neue Photoshop Leinwand, und stellen Sie die Leinwand Breite in Übereinstimmung mit der Fulll Breite -. In meinem Fall ist es 1000px
Füllen Sie die Felder in der guideguide Panel – Column Gutter, Spaltenbreite und Column Numbers -. entsprechend zu den in der Startaufstellung Rechner
Dann, in der guideguide Panel, den Sets Registerkarte. In diesem Register finden Sie einige voreingestellte Hilfslinien. Wählen Sie die Gliederung voreingestellt Hilfslinien am Rand der Leinwand zu schaffen.
Wir sind fertig, und hier ist unsere eigene Netz bereit- for-use für die Gestaltung einer Website.
Darüber hinaus können Sie mehr Raum zum Atmen fügen an den linken und rechten Seite der Leinwand durch die Verlängerung der Leinwand Breite, und dann hinzufügen Rechteck in neue Schichten für die Schaffung eines visuellen Helfer für die Spalten des Rasters.
Laden Sie die PSD von unserem Beispiel unten.
/>
/> über
