Erstellen Sie Drahtmodelle in Photoshop CS6

Abgesehen von Bleistift und Papier gibt es viele digitale Tools zum Erstellen von Drahtgittern - das „Lo-Fi“ -Layout einer Webseite, mit dessen Hilfe Sie die Grundstruktur bestimmen können, bevor Sie das visuelle Design hinzufügen. Ein Vorteil der Verwendung Photoshop CS6 Als Ihr Wireframing-Tool können Sie das Wireframe als Basis für Ihr detailliertes Modell verwenden, anstatt von vorne beginnen zu müssen.

Lösung

Das folgende Bild zeigt die „Serviettenskizze“, die mir mein fiktiver Kunde zur Verfügung gestellt hat. Dies ist eine Möglichkeit, ein Drahtmodell bereitzustellen.



Nachdem ich mehr mit meinem Kunden gesprochen habe, habe ich zusätzliche Anforderungen für die Startseite gesammelt:

beste Weg, um digitale Kunst zu drucken
  • Der Kunde möchte nach der Überschrift und dem Einführungstext eine Schaltfläche 'Weitere Informationen'.
  • Er wird nicht mehr als zwei Zitate im Bereich 'Was die Leute sagen' haben.
  • Dem Kunden gefällt die Idee, eine Hintergrundfarbe oder ein Hintergrundbild mit einem weißen Inhaltsbereich zu haben.

Es ist Zeit, Photoshop zu starten und ein Drahtmodell zu erstellen, das die tatsächlichen Abmessungen berücksichtigt und ein etwas polierteres Erscheinungsbild bietet.

Erstellen Sie zunächst ein Dokument auf der Grundlage des 960-Rastersystems (Informationen dazu finden Sie im Abschnitt „Einrichten eines Rasters in Photoshop“, der kostenlos verfügbar ist Beispielkapitel ) das ist 1.100 Pixel breit und 750 Pixel hoch. Wenn Sie möchten, verwenden Sie das Farbeimer-Werkzeug ( G ) und füllen Sie den Hintergrund mit einer hellgrauen Farbe, um anzuzeigen, dass es eine Hintergrundfarbe oder ein Bild gibt.

wie man einen guten Filmtrailer macht

Wählen Sie das Rechteck-Werkzeug ( U. ) und zeichnen Sie ein Feld, um den Inhaltsbereich darzustellen. Da ich das 960-Rastersystem verwende, ist meine Box 940 Pixel breit. Ich habe die Vordergrundfarbe weiß gemacht, damit sie vor dem grauen Hintergrund angezeigt wird.

Geben Sie ein, um den Vorgang zu beschleunigen D. um den Vordergrund auf Schwarz und den Hintergrund auf Weiß zu setzen. Wir zeichnen schwarze Kästchen, um die Inhaltsbereiche darzustellen, und ändern dann die Deckkraft, damit sie grau angezeigt werden, wie hier gezeigt:

Hinzufügen von Rechtecken zur Darstellung von Logo und Navigation

Hinzufügen von Rechtecken zur Darstellung von Logo und Navigation

Fügen Sie nach dem Raster ein Rechteck hinzu, um das Logo darzustellen. Verringern Sie die Deckkraft des Rechtecks, indem Sie sofort nach dem Zeichnen des Rechtecks ​​einen Deckkraftwert („30“) eingeben. Wenn Sie möchten, fügen Sie Text mit dem Textwerkzeug hinzu ( T. ), um den Text „LOGO“ über das Feld zu setzen. Fügen Sie ein weiteres Rechteck hinzu, um den Navigationsbereich darzustellen, und verringern Sie den Deckkraftwert erneut, um ihn grau zu machen.

Möglicherweise möchten Sie Rechtecke hinzufügen, um die Inhaltsspaltenbereiche anzuzeigen. Das nächste Bild zeigt, dass ich mich für ein zweispaltiges Layout mit einer etwas größeren Hauptinhaltsspalte und einer kleineren Spalte für das Startseitenbild entschieden habe. Ich habe die Deckkraft für die Spalten auf 10% festgelegt und ein weiteres Rechteck hinzugefügt, um die Fußzeile am unteren Rand der Seite darzustellen.

Was bedeutet Skalierung in der Kunst?

Spaltengrößen bestimmen

Spaltengrößen bestimmen

Zeichnen Sie Rechtecke, um die Inhaltsbereiche innerhalb der Spalten darzustellen. Möglicherweise möchten Sie auch Dummy-Text mit Photoshop hinzufügen Art > Fügen Sie Lorem Ipsum ein Befehl. Mein fertiges Drahtmodell ist hier zu sehen:

Wenn Sie ein grobes Drahtmodell wie dieses erstellen, erhält der Client einen Eindruck davon, wo sich der Inhalt auf der Seite befindet. Er ermöglicht jedoch eine schnelle und einfache Bearbeitung, wenn Sie Elemente verschieben müssen.

Weitere Anleitungen, Beispiele und zeitsparende Vorschläge finden Sie unter Schauen Sie sich das Buch genauer an (oder Laden Sie ein Beispiel-PDF des Buches herunter ).

wie man den Pfad in Photoshop streichelt

Schauen Sie sich jetzt diese großartige Auswahl an kostenlosen an Photoshop-Pinsel auf unserer Schwesterseite Creative Bloq