Entwerfen einer Familie von Websites

Bei Webdesign geht es größtenteils nicht wirklich um die Photoshop-Technik, daher ist es immer schwierig, ein Photoshop-Tutorial zu diesem Thema zu schreiben. Noch heute werde ich Sie durch ein Design führen, das ich kürzlich zusammengestellt habe. Wir werden einige Photoshop-Schritte durchlaufen und ich werde versuchen, Ihnen einige der Gründe für meine Aktionen näher zu bringen.

Sie finden die Photoshop-PSD-Dateien in einem Verzeichnis mit der Bezeichnung "PSDs", das in der von Ihnen heruntergeladenen ZIP-Datei enthalten ist. Vielleicht möchten Sie sie kurz durchsehen, bevor wir beginnen.

Erstens die endgültigen Entwürfe

Zuerst ein Blick auf die Designs. Ich schreibe ein Buch über WordPress-Themen mit dem Titel Wie man ein Rockstar WordPress Designer wird. Das Buch erforderte ein Beispielthema, also habe ich dieses entworfen, das ich "Creatif" nenne - weil es französisch und irgendwie cool klingt. Grundsätzlich handelt es sich um eine Reihe von Designs, die in zwei WordPress-Themen integriert werden - eines ist ein reguläres Blog und eines ist ein Thema, mit dem Sie mit WordPress ein Portfolio erstellen können.

Was Sie unten sehen, sind die vier Hauptentwurfsbildschirme, mit denen ich das Thema erstellt habe. Im Allgemeinen erstelle ich für die meisten Websites zwei Bildschirme - eine Homepage und eine Inhaltsseite. Wenn eine Site komplizierter ist, würde ich einen Bildschirm pro kritischer Seite erstellen. Bis zu einem gewissen Grad können Sie einige Seiten entwerfen, während Sie sich in der HTML-Erstellungsphase befinden. Es ist jedoch gut, alle Schlüsselseiten zuzuordnen, damit Sie sicher sein können, dass alles richtig aussieht und sich richtig anfühlt.

Die folgenden Bildschirme sind:

1. Die Homepage für das Creatif Portfolio-Thema
2. Die Homepage für das Creatif Blog-Thema
3. Eine allgemeine Inhaltsseite für beide
4. Ein alternatives Farbschema, das wir in ein austauschbares Stylesheet integrieren - damit Sie sie austauschen und eine dunkle oder helle Version eines der beiden Themen erhalten können.

Farbpalette

Eine meiner ersten Entscheidungen beim Entwerfen einer neuen Site ist die Auswahl einer Farbpalette. Es gibt einige gute Websites, die Ihnen bei der Auswahl eines schönen Sets helfen, aber oft habe ich mir nur meine eigenen ausgedacht, indem ich experimentiert habe. Eine einfache Formel, die ich manchmal verwende, besteht darin, einen Satz neutraler Farbtöne und eine einzelne Hervorhebungsfarbe auszuwählen, um die Palette anzuheben. In diesem Fall habe ich eine beige-graue Farbpalette mit einem wirklich hellen Hellblau als Hervorhebungsfarbe ausgewählt.

Schritt 1

Wir beginnen das Tutorial mit einem kleinen Logo. Während das Logo-Design im Allgemeinen ein komplexer Prozess ist, möchte ich in diesem Fall nur eine kleine Grafik, um meine Seite zu verankern. Also habe ich den gesamten regulären Prozess übersprungen und nur ein schönes kleines Text-/Box-Logo erstellt. Wenn Sie sich für Logo-Design interessieren, ist Logo Design Love von David Airey ein großartiger Blog zu diesem Thema. Eine gute Galerie mit Logos finden Sie natürlich bei Faveup.

Jedenfalls habe ich mich für die Schriftart News Gothic Condensed Bold entschieden. Ich denke, dies ist eine Standard-Mac-Schriftart, aber ich bin mir nicht sicher, da ich überall eine Unmenge von Schriftarten installiere. Ich habe einen einfachen Ebenenstil verwendet (für den Sie im nächsten Schritt die Einstellungen sehen können), der den Typ irgendwie web2 und trendy aussehen lässt. Es verwendet einen schwachen Farbverlauf, einen subtilen Schatten und einen 1-Pixel-Rand, um den Typ von der Seite zu entfernen.

Schritt 2

Hier sind die Einstellungen für den Ebenenstil:

Schritt 3

Als nächstes habe ich ein abgerundetes Rechteck hinter dem Text hinzugefügt. Sie können dies mit dem abgerundeten Rechteck-Werkzeug (U) erstellen. Wie Sie im Bild unten sehen können, habe ich der Box ebenfalls einen schwachen Farbverlauf hinzugefügt. Sie können dies tun, indem Sie bei gedrückter STRG-Taste auf die Box-Ebene klicken, um ihre Pixel auszuwählen. Gehen Sie zu Auswählen > Ändern > Kontrahieren und verkleinern Sie sich um 1 Pixel. Zeichnen Sie dann in einer neuen Ebene einen radialen Verlauf von einer helleren Version der dunklen Farbe und verblassen Sie zur Transparenz.

Wie ich bereits erwähnt habe, fühlt sich dieses Design wie ein Web2 an - es ist sauber und einfach, hat einige Farbverläufe und ist ziemlich übersichtlich. Einige Designer halten sich entschieden von Trends fern. Ich persönlich habe nichts dagegen, sie zu verwenden, solange sie meinem Zweck entsprechen. In diesem Fall wollte ich einen sauberen Look, der dem Inhalt nicht im Wege stand, sondern einen schönen Wrapper lieferte. Jedenfalls ist alles ein bisschen subjektiv.

Schritt 4

Jetzt ist die Leinwand, die ich hier benutze, ungefähr 1100px breit x 1400px hoch. In Wirklichkeit liegt der gesamte Inhalt innerhalb von 1000 Pixel, sodass er auf einem 1024 x 768-Bildschirm angezeigt werden kann. Ich möchte eine breitere Leinwand haben, damit ich planen kann, was passiert, wenn der Betrachter eine größere Auflösung hat.

In diesem Schritt habe ich die Grundlagen meiner Kopfzeile hinzugefügt, nämlich einen dunklen Balken oben, einen dunkleren Farbton der Hintergrundfarbe als Menüleiste, eine 1-Pixel-Linie zum Abdichten der Menüleiste und einen Untertext unter meinem Logo ( in News Gothic wieder verdichtet).

Es gibt zwei Dinge zu beachten:

1. Es ist immer schön, Schattierungen Ihrer Farbpalette zu verwenden. Hier habe ich eine Hintergrundfarbe, die Menüleiste, die Menüelemente und der Logo-Subtext variieren alle, dunklere Schattierungen dieser Farbe. Dies gibt ein schönes, glattes, nicht kollidierendes Gefühl. Wenn Sie nur Farbtöne verwenden, wird es natürlich ziemlich langweilig. Deshalb stellen wir unsere Highlight-Farbe etwas später vor. Unterschiedliche Designstile erfordern mehr Variationen in der Farbe, aber in unserem Fall möchten wir meistens Farbtöne und Schattierungen mit einem starken Highlight kombinieren.
2. Außerdem ist es schön, Ihre Farbe in Ihrem Design wiederzugeben. Hier haben wir also eine beige Hintergrundfarbe und dann erscheint unsere dunklere Farbe an drei Stellen - dem Logo, der oberen Leiste und dem hervorgehobenen Menülink. Dies schafft ein visuelles Gleichgewicht und eine Ausrichtung zwischen den drei Elementen. Balance ist wichtig.

Schritt 5

Hier fügen wir das erste Stück unserer Highlight-Farbe hinzu. Es ist eine wirklich subtile 1px-Linie entlang der Oberseite. Später, wenn wir weitere Elemente hinzufügen, wird die Hervorhebungsfarbe an verschiedenen Stellen wieder angezeigt und zieht diese Elemente zusammen, um sie zu einem einzigen, schick aussehenden Design zu vereinen. Da dieses Design nur gut platzierte Elemente und Farben enthält, ist es sehr wichtig, die richtige Farbgebung zu wählen.

Schritt 6

Jetzt sieht die Seite etwas flach aus, daher habe ich hier eine Ebene direkt über der Hintergrundebene hinzugefügt. Dann habe ich einen radialen Farbverlauf gezeichnet, der von meiner dunkelbeigen/grauen Farbe zu Transparenz wechselt, und diese Ebene auf Ausweichen gesetzt, um den Hintergrund aufzuhellen. Da die Menüleiste tatsächlich transparent gezeichnet ist, zeigt sich der Aufhellungseffekt auch in der Menüleiste.

Es ist jedoch wichtig zu bedenken, dass Sie dieses Design später in HTML einbauen müssen. Aus diesem Grund werden Sie feststellen, dass wir, wenn Sie die Ränder des sichtbaren Bereichs von 1000 Pixel erreichen, wieder monotone Farben haben. Das bedeutet, dass ich später ein einzelnes Bild-Slice erstellen und es als CSS-Hintergrundbild verwenden kann. Dann habe ich ein weiteres Hintergrundbild mit dem großen Hervorhebungsbereich und dies ist ein Hintergrundbild im Hauptinhaltskörper.

Es ist wichtig, über Baustellen Bescheid zu wissen, damit Sie sie so gestalten können, dass später Komplikationen vermieden werden. Ich denke, dies beruht hauptsächlich auf Erfahrung und dem Lernen, welche Designentscheidungen das Leben später problematisch machen können. Hier macht es das Leben viel einfacher, einen leicht wiederholbaren Hintergrund außerhalb des sichtbaren Bereichs von 1000 Pixel zu haben.

Schritt 7

Weiter ist es Zeit, meinen ersten weißen Inhaltsblockbereich hinzuzufügen. Hier habe ich einen 1px-Umriss einer dunkleren Version der Hintergrundfarbe verwendet, dann einen 1px-Innenrand und schließlich einen schwachen beige Farbverlauf nach unten. Dieser Stil passt zu meinem früheren Logo. Zusätzlich erhalten wir durch den dunkleren Umriss, gefolgt von einem helleren Innenumriss, einen sehr scharfen Blick auf die Seite. Die Schärfe kommt vom Kontrast - d. H. Dunkel bis hell.

Persönlich denke ich, dass Schärfe oder Klarheit im Webdesign wirklich wichtig sind. Nichts ärgert mich mehr als ein Mangel an Liebe zum Detail, um die Dinge klar und klar zu machen.

Schritt 8

Jetzt füge ich hier einige Scheininhalte hinzu. Da es sich bei diesem Text um HTML-Text handeln muss, ist es wichtig, dass Sie Ihre Schriftarten sorgfältig auswählen. Es gibt nichts Deprimierenderes, als einige schöne Schriftarten auszuwählen und sich später daran zu erinnern, dass es sich nicht um Standardschriftarten handelt. Folglich wird Ihr Design völlig anders aussehen, als Sie es sich vorgestellt haben. Ich habe Helvetica für die fette Überschrift und Arial für den Text verwendet.

In Photoshop ist es eine gute Idee, das Anti-Aliasing auf "Scharf" zu setzen, um nachzuahmen, wie der Text im Browser aussehen wird. Früher habe ich "None" verwendet, aber heutzutage verwenden die meisten PCs und alle Macs dieses raffinierte ClearType-Material, um Schriftarten flüssig aussehen zu lassen.

Beachten Sie erneut, dass die Subtext-Links unser blaues Highlight verwenden und die zuvor hinzugefügte 1px-Überschriftenzeile aufgreifen.

Schritt 9

Als nächstes fügte ich ein kleines Designelement in Form eines Nachrichtenstreifens in der oberen rechten Ecke meiner Box hinzu. In einem einfachen Design wie diesem (wo es sich hauptsächlich um einfache Linien und Kästchen handelt) ist es schön, ein oder zwei Elemente zu haben, die wirklich herausspringen. In diesem Fall verwenden wir unsere Hervorhebungsfarbe in Kombination mit einem Winkel von 45', um ein cooles Element zu erstellen, das fantastisch aussieht.

Also zeichnen wir ein Rechteck und fügen etwas Text darüber hinzu. Dann habe ich das Ausweichwerkzeug (O) verwendet, um den Mittelteil aufzuhellen, und einen Ebenenstil hinzugefügt, um dem Text ein wenig Schatten zu verleihen. Dann wähle ich beide Ebenen zusammen aus und drücke STRG-T, um sie zu transformieren und um 45 'zu drehen.

Schritt 10

Nachdem ich es über meine Schachtel gelegt habe, schneide ich die Kanten wie gezeigt ab. Jetzt werden Sie feststellen, dass wir es so platzieren konnten, dass es mit der Box ausgerichtet war, aber ich dachte, es wäre schön, wenn es so aussieht, als würde sich dieser Streifen um die Box wickeln, also ist es ungefähr 4 Pixel von der Box entfernt.

Schritt 11

Danach habe ich die Pixel in dem unten gezeigten Muster manuell ausgewählt, eine Ebene unter der Ebene des Nachrichtenstreifens erstellt und eine dunkelblaue Farbe gezeichnet. Es ist dunkler, so dass es wie die Rückseite des Nachrichtenstreifens aussieht, und Sie werden feststellen, dass ich es so gemacht habe, dass es rechts dunkler ist, wo es sich in einem Scheinschatten befindet.

Schritt 12

Ich duplizierte dann meine Verpackung und drehte sie um 90' und legte sie wie gezeigt auch auf die rechte Seite der Schachtel. Und voila, unser Designelement!

Schritt 13

Als nächstes habe ich einige weitere Elemente erstellt. Hier gibt es nicht viel Neues. Ich habe im Grunde die gleichen Designelemente wiederverwendet - den gleichen Textstil, den gleichen Nachrichtenstreifen, die gleichen Kästchen - und sie dort eingezeichnet, wo ich meinen Inhalt haben möchte.

Schritt 14

Als nächstes habe ich einen Fußzeilenbereich hinzugefügt. Es ist keine sehr aufregende Fußzeile, aber es werden die gleichen Farben wie in der oberen Leiste verwendet, um sie noch einmal wiederzugeben und in diesem Fall das Design abzudichten.

Schritt 15

Da ich jetzt ein WordPress-Theme erstelle, habe ich mich auch dazu entschlossen, eine Version meines Logos zu erstellen, die mit einfachem Text erstellt werden kann. Sie können es unten sehen und in der HTML-Komponente dieses Tutorials erstellen wir dieses "Logo" -Feld.

Schritt 16

Zu diesem Zeitpunkt dachte ich, ich würde Ihnen meine Ebenenpalette zeigen. Ich mag es nicht, Ebenen zu benennen (weil ich faul bin), aber ich glaube daran, Ebenen in Gruppen zu gruppieren. Hier befinden sich das Design für das Logo gegen das Textlogo, das Blog gegen das Portfolio und die interne Seite alle in derselben PSD-Datei, nur in verschiedenen Ebenensätzen. So kann ich sie ein- und ausschalten und verschiedene Arrangements treffen. Dies ist nützlich, da ich, wenn ich mich plötzlich entscheide, das Logo um 2 Pixel nach links zu verschieben, nicht drei Dateien öffnen und jeweils um 2 Pixel verschieben muss, da sonst Unstimmigkeiten auftreten können. Außerdem ist es einfach schön und bestellt und ich fühle mich innerlich warm und verschwommen, wenn ich es mir ansehe.

Schritt 17

Jetzt sollte ich darauf hinweisen, dass ich dieses Design in der Praxis nicht so entworfen habe, wie ich es im Tutorial dargelegt habe. Tatsächlich sah mein frühestes Modell eher wie das unten gezeigte Bild aus.

Ich habe dann zufällig die dunkelbraune Schicht ausgeschaltet und fand sie irgendwie cool, nur wegen der helleren Farbe. Dies nennt man einen glücklichen Unfall. Ich wünschte, ich könnte sagen, ich wäre klug genug, um für die ganze Schönheit meiner Arbeit verantwortlich zu sein, aber ehrlich gesagt ist die Hälfte davon reines Glück.

Auf jeden Fall, als ich am Ende meines Designs angelangt war, schaute ich auf dieses frühe Modell zurück und fand, dass das Design mit einer dunklen Hintergrundfarbe irgendwie gut aussah. Warum also nicht eine Version erstellen, in der es dunkel ist? Dann kann ich eine Option zum Wechseln der Stylesheets erstellen. Das wäre richtig!

Schritt 18

Also habe ich eine neue Kopie meiner Designdatei erstellt und den Hintergrund in dunkelbraun geändert. Glücklicherweise muss nicht viel geändert werden. Ich habe das Logo auf Schwarz abgedunkelt, damit es stillsteht. Außerdem habe ich einige andere Farben angepasst, damit das Design alle Sinn ergibt. Es ist nicht ganz so schön wie das Original, aber eine schöne Ergänzung für die Familie.

Schlussfolgerungen

Wie ich zu Beginn dieses Tutorials erwähnt habe, geht es hier nicht so sehr um die Photoshop-Technik. Die Realität ist, dass Webdesign oft nur sehr grundlegende Techniken zum Ausfüllen von Farbblöcken verwendet. Bei diesem Entwurf geht es mehr darum, Farben und Schattierungen sowie Schriftarten auszuwählen und dann zu entscheiden, wie alles angeordnet werden soll. Ich hoffe, Sie haben etwas aus dem Prozess herausgeholt.

In HTML einbauen

Das Entwerfen einer Website in Photoshop ist natürlich nur ein Teil eines Webdesign-Auftrags. Der nächste Schritt besteht darin, das Design in HTML zu übernehmen.