Share
Das Festlegen eines Grundlinienrasters für Ihre Photoshop-basierten Designs ist ein unverzichtbarer erster Schritt in einem neuen Website-Projekt. Ein Grundlinienraster stellt einen konsistenten Abstand zwischen Ihren Seitenelementen her und erzeugt einen harmonischen Rhythmus auf der gesamten Seite. Darüber hinaus kann die Verwendung eines CSS-Frameworks mit einem kompatiblen Grundlinienraster während der Entwicklungsphase die Konvertierung von Design in Code erheblich erleichtern.
In einem kürzlich durchgeführten Tutorial zu Webdesign Tuts + hat uns Amir gezeigt, wie Sie ein Skript mit flexiblem Gitter für Photoshop erstellen, mit dem Sie Ihre Hilfslinien für Ihr Layout festlegen können. In ähnlicher Weise werden wir eine Photoshop-Erweiterung verwenden, die uns alle Mühe macht - eine großartige Option, insbesondere wenn das Erstellen eines eigenen benutzerdefinierten Skripts für Ihre Anforderungen etwas zu ehrgeizig ist.
Ich werde Sie durch jeden Schritt führen, der erforderlich ist, um sowohl ein horizontales als auch ein vertikales Grundlinienraster in Photoshop festzulegen, das flexibel, anpassbar und in weniger als zehn Minuten einfach zu erstellen ist.
Im heutigen Tutorial werde ich eine kostenlose Erweiterung von Cameron McEfee verwenden, die - entsprechend - GuideGuide genannt wird. Gehen Sie zu http://www.guideguide.me, um das Plugin herunterzuladen.
Wählen Sie die Version aus, die Ihrem Photoshop (CS4 +) entspricht, und speichern Sie sie an einem geeigneten Ort auf Ihrer Festplatte.
Hinweis: OSX-Benutzer mit Photoshop CS5 müssen den Adobe Extension Manager-Patch installieren.
Stellen Sie sicher, dass Ihr Photoshop geschlossen ist, und öffnen Sie den Adobe Extension Manager.
Klicken Sie im oberen Menü auf den Link "Installieren", navigieren Sie zu Ihrer extrahierten GuideGuide-Erweiterung und klicken Sie auf "Öffnen". Nachdem Sie die Nutzungsbedingungen akzeptiert haben, können Sie beim nächsten Öffnen von Photoshop auf GuideGuide zugreifen.
Starten Sie Photoshop und wählen Sie im Dateimenü 'Fenster' die Option 'Erweiterungen → GuideGuide'..
Die GuideGuide-Erweiterung wird jetzt in Ihrem Arbeitsbereich angezeigt. Machen Sie sich noch nicht allzu viele Sorgen um das Eingabefeld, wir werden uns in Kürze mit der Erweiterung beschäftigen.
Wir werden die Dinge heute sehr einfach halten und das 960px-Raster des 960 Grid Systems nachbilden (obwohl Sie gerne mit den am einfachsten zu messenden Messungen an das Gitter herangehen). Wenn wir zur Website gehen, wird das Raster, das wir replizieren werden, auf der Startseite in Klartext angezeigt:
Um dies neu zu formulieren, erstellen wir heute eine 960px große Leinwand mit 12 gleich großen Spalten mit gleichem Abstand und gleicher Größe. Mit einem Rand von 10 Pixeln auf beiden Seiten der Leinwand wird zwischen den einzelnen Spalten eine 20-Punkt-Rinne gelassen.
Bevor wir fortfahren, weiß ich, was Sie vielleicht sagen: "Warum laden Sie nicht einfach die Photoshop-Vorlage von der Site herunter?". Das, was ich Ihnen heute zeigen werde, ist heute vollständig anpassbar irgendein Projekt und ein beliebiges CSS-Framework, unabhängig von der Anzahl der Spalten, der Leinwandbreite oder den Zwischenstegen. Wir verwenden nur ein einfaches Beispiel, um die Techniken zu demonstrieren.
Wählen Sie in Photoshop Datei → Neu und erstellen Sie ein neues Dokument mit einer Breite von 960 Pixeln und einer Höhe von 1050 Pixeln.
Stellen Sie sicher, dass Ihre Lineale angezeigt werden (Ansicht → Lineale), und ziehen Sie zwei Hilfslinien an die Ränder der Leinwand.
Wenn Sie die GuideGuide-Erweiterung öffnen, werden Sie eine Reihe von Eingabefeldern und Menüelementen bemerken, die es uns ermöglichen, unser horizontales Grundlinienraster wie folgt zu definieren (Sie können auch über jedes Symbol für eine Beschreibung fahren).
Geben Sie die Werte wie folgt ein und klicken Sie auf die Schaltfläche GuideGuide:
Sobald Sie die Werte übermittelt haben, rendert Photoshop automatisch alle Hilfslinien für das Raster:
Hinweis: Wenn Sie GuideGuide ohne Auswahl verwenden, werden die Hilfslinien automatisch auf der gesamten Leinwand dargestellt. Wenn Sie nur Führungslinien über einen Teil des Dokuments erstellen möchten (z. B. eine Navigationsleiste), erstellen Sie eine Auswahl mit dem Auswahlwerkzeug (M), bevor Sie die Erweiterung verwenden.
So wie es aussieht, haben wir ein perfekt verwendbares horizontales Grundlinienraster. Um es für uns einfacher zu machen, fügen wir jetzt einen visuellen Helfer hinzu, der uns sagt, was eine Spalte ist und was eine Rinne ist - etwas, das beim Zoomen direkt in das Dokument schwierig zu unterscheiden ist.
Erstellen Sie eine neue Ebene (Strg + Umschalttaste + N) und ziehen Sie eine Auswahl der Breite und Höhe der ersten Spalte heraus. Drücken Strg + BkSpace, Fülle die Auswahl mit # ff0084. Sie können auch gerne das Formwerkzeug dafür verwenden, aber stellen Sie sicher, dass Ihre Pixel genau ausgewählt sind.
Als Nächstes erstellen Sie 12 Gesamtversionen der Ebene, indem Sie auf drücken Strg + J 11 mal. Wenn Sie die oberste Ebene auswählen, ziehen Sie die Spalte mit dem Verschiebungswerkzeug (V) an die zwölfte Spaltenposition..
Als nächstes wählen Sie alle zwölf Ebenen aus (Strg + Klick) und verteilen Sie die Spalten durch Auswahl von Verteilen Sie horizontale Zentren Symbol unter dem Verschiebungswerkzeug (V) (alternativ Ebene → Ausrichten → Horizontale Zentren)
Bereinigen Sie schließlich das Dokument, indem Sie alle Spaltenebenen auswählen und zusammenfügen (Strg + E). Benennen Sie die Ebene in "Horizontale Grundlinie" um und wählen Sie eine Deckkraft von 10%..
Nun, da wir eine horizontale Basislinie festgelegt haben, ist es an der Zeit, auf unsere vertikale Basislinie zu wechseln. Wir werden uns heute nicht mit der Theorie der vertikalen Basislinien beschäftigen, aber wenn Sie mehr darüber erfahren möchten, erfahren Sie, wie Sie den Web-Typ auf ein Basislinienraster setzen.
Heute werden wir unsere vertikale Grundlinie basierend auf einer Schriftgröße von 14px festlegen. Um eine Linienhöhe von 1,5 festzulegen und uns eine große Flexibilität zu ermöglichen, beträgt unsere Basislinie 7 Pixel (d. H. Drei Basiseinheiten entsprechen 21 Pixel)..
Ich werde Ihnen zwei Methoden zeigen, um dies zu erreichen - verwenden Sie einfach das, was Sie und Ihren Workflow ansprechen!
Zu Beginn werden wir GuideGuide noch einmal verwenden. Öffnen Sie die Erweiterung, geben Sie den folgenden Wert ein und drücken Sie die GuideGuide-Taste:
Nach der Übergabe rendert Photoshop alle Hilfslinien für unsere vertikale Basislinie:
An diesem Punkt wird der klügere Leser erkannt haben, dass diese Methode nur möglich ist, weil wir unsere Dokumenthöhe in einem perfekten Vielfachen von 7 Pixeln (1050 Pixeln) erstellt haben. Wenn wir diesen ersten Schritt nicht unternommen haben, rendert der GuideGuide so viele 7px-Hilfslinien wie möglich und lässt den Rest am unteren Rand des Dokuments zurück.
In diesem einfachen Schritt haben wir eine perfekt funktionale vertikale Basislinie erstellt. Das einzige Problem ist, dass dieses Dokument jetzt sehr beschäftigt ist. Wenn Sie in Ihren Entwürfen häufig Führungen verwenden, kann diese Methode schnell verwirrend, unordentlich und unbrauchbar werden.
Wenn diese Methode nicht Ihrer Meinung nach kitzelt, können Sie die horizontalen Hilfslinien entfernen (Strg + Alt + Z) und erstellen Sie eine alternative Basislinie mit einem Pixelraster.
Öffnen Sie für unsere alternative Methode das Rastereinstellungen-Fenster von Photoshop (Bearbeiten → Einstellungen → Raster, Hilfslinien und Slices). Geben Sie folgende Werte für das Pixelraster ein:
Wenn Sie nun zu Ihrem Dokument zurückkehren, können Sie die Sichtbarkeit des Rasters ein- und ausschalten (Strg + '), wo jede horizontale Linie des Gitters Ihre vertikale Grundlinie festlegt - wie Sie hier mit einem Zoom von 600% sehen können.
Das Tolle an dieser Methode ist, dass wir die horizontale und vertikale Basislinie getrennt haben, sodass Sie die Sichtbarkeit leicht ändern können, je nachdem, an welchem Teil des Designs Sie gerade arbeiten.
Welche Methode auch immer Sie bevorzugen (Hilfslinien oder Gitterebenen), der letzte Schritt besteht darin, einen visuellen Helfer für unsere vertikale Basislinie zu erstellen, genau wie für unsere horizontale Basislinie (wir verwenden jedoch eine andere Methode)..
Erstellen Sie ein neues Dokument 1px x 7px mit transparentem Hintergrund:
Stellen Sie mit dem Auswahlwerkzeug (M) den Style auf Feste Größe, und die Abmessungen auf 1px x 1px. Erstellen Sie eine Auswahl am unteren Rand des Dokuments (Sie möchten so weit hineinzoomen (Z), wie Sie können (Z)) und diese mit # 00ff12 (Strg + Bkspace) füllen..
Als Nächstes definieren Sie dieses Dokument als Muster (Bearbeiten → Muster definieren). Nennen Sie es "7px Vertical Baseline"..
Gehen Sie zurück zu Ihrem Hauptdokument. Erstellen Sie eine neue Ebene (Strg + Umschalttaste + N), Wählen Sie die gesamte Leinwand aus (Strg + A) und drücke Strg + Rücktaste um die Auswahl zu füllen. Wählen Sie aus den Dropdown-Menüs "Muster" als Fülltyp und Ihre neu erstellte "7px-Grundlinie" für das Muster aus.
Benennen Sie die Ebene in "Vertikale Grundlinie" um und wählen Sie eine Deckkraft von etwa 30%..
Obwohl Elemente in keiner der visuellen Hilfslinien einrasten, unabhängig von der Methode, die Sie in den vorherigen Schritten für die vertikale Basislinie (Hilfslinien oder Gitterebenen) verwendet haben, wird Ihre neu erstellte visuelle Ebene perfekt an der Basislinie ausgerichtet Gesamtentwurf.
Damit haben Sie ein pixelgenaues Grundlinienraster mit praktischen visuellen Ebenen für Ihr nächstes Projekt erstellt. Jetzt müssen Sie nur noch etwas Raum zum Atmen lassen.
Öffnen Sie das Dialogfeld "Leinwandgröße" (Bild → Leinwandgröße) und ändern Sie die Breite in 1400px.
Das Endergebnis:
Wenn Sie den ganzen Weg geschafft haben, gute Arbeit! Sie verfügen jetzt über alle erforderlichen Techniken, um in Photoshop eigene benutzerdefinierte Grundlinienraster zu erstellen.
Der einzige Ratschlag, den ich anbieten möchte, ist, dass GuideGuide zwar alle erforderlichen Berechnungen ausführen kann, jedoch innerhalb der Einschränkungen von Photoshop funktionieren muss, nämlich, dass Hilfslinien nur auf einem vollständigen Pixel platziert werden können. Wenn Ihr Raster Subpixel-Messungen erfordert, werden Hilfslinien so nah wie möglich gerendert, wobei ihre Positionen auf das nächste volle Pixel gerundet werden. Vor diesem Hintergrund können Sie durch ein wenig Planung zu Beginn des Projekts viele Ein-Pixel-Kopfschmerzen vermeiden.
Als Abschiedsnotiz können Sie GuideGuide nicht nur für Baselines verwenden. Experimentieren Sie damit, um Raster für alle Arten von Design-Komponenten vom Bilderrahmen bis zum Menü zu erstellen!
Nochmals vielen Dank und vergessen Sie nicht, sich anzumelden und einen Kommentar zu hinterlassen - wir würden gerne Ihre Gedanken hören!
Accentsconagua