German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)
In den vergangenen Tagen suchte ich nach Inspiration in berühmten alten Gemälden und interessierte mich für "Starry Night" von Van Gogh und dachte: Kann ich das auf Webdesign anwenden? Und die Antwort ist ja! Dann, nach mehreren Stunden Arbeit, hier ist mein Tutorial für Sie, ein künstlerisches Webdesign, das ein "Magic Night" Konzept darstellt.
Schritt 1
Lassen Sie uns das Design beginnen! Zuerst, ist das kein grundlegendes Tutorial, deshalb werde ich einige grundlegende Erklärungen überspringen. Wie auch immer, jeder mit einem fortgeschrittenen Niveau von Photoshop Fähigkeiten wird es schaffen. Zweitens, ist es wirklich schwierig, genau das gleiche Ergebnis zu erzielen, das ich habe, und Sie müssen Ihre Vorstellungskraft und Ihren guten Geschmack einsetzen, um etwas Ähnliches oder Besseres als mein Design zu bekommen. Und drittens wurde es entworfen, indem die Anwendung in eine Wordpress-Vorlage aufgenommen wurde, aber Sie können sie schnell in ein anderes Motiv der Engine oder sogar in eine benutzerdefinierte Website konvertieren.
Vorwärts dann! Erstellen Sie ein neues Dokument 960 px mal 1000 px und RGB. Zeichnen Sie einige Hilfslinien, um die Grenzen zu markieren, und gehen Sie zu Bild > Größe der Leinwand (Image > Canvas Size), um die Größe des Dokuments zu ändern, indem Sie die Breite der Leinwand vergrößern (1460 x 1000 px). Auf diese Weise zentrieren Sie Ihr Design in einem großen Dokument und sehen, wie es auf Breitbild-Auflösungen aussieht. Zeichnen Sie auch eine Hilfslinie, um die Höhe der Kopfzeile zu markieren.
Schritt 2
Zeichnen Sie eine horizontale Hilfslinie in der Mitte des Dokuments und verwenden Sie diese, um die Ebene "Hintergrund" mit einem dunkelblauen Radialverlauf (Radial Gradient) (#0D2B53 - #010D1F) zu füllen. Ich füge auch ein paar Leitfadens als Grenzen der linken und rechten Seite der Hauptseite hinzu.
Es ist sehr gut möglich, dass wir die Höhe des Dokuments später ändern. Fügen Sie daher eine neue Füllebene (New Fill Layer) (#010D1F) unterhalb unserer "Hintergrund" Ebene hinzu.
Schritt 3
Da einer der Psdtuts + -Leser vorschlug, anstelle des klassischen Clouds-Filters echte Bilder zu verwenden, versuchen wir das diesmal. Fügen Sie dieses Bild einiger Gewitterwolken in eine neue Ebene namens "Wolken" ein und ändern Sie den Mischmodus (Blending Mode) auf Überlagerung (Overlay). Gehen Sie dann zu Ebene > Ebenenmaske > Alle ausblenden (Layer > Layer Mask > Hide all) und zeichnen Sie einen radialen Farbverlauf von weiß nach schwarz (#FFFFFF - #000000), der von der Mitte oben bis fast zur Mitte unten reicht. Passen Sie dann die "Wolken"-Ebenen etwas an, um die Wolken dunkler zu machen.
Schritt 4
Fügen Sie nun diesen schönen Horizont einer spanischen Küste in eine neue Ebene namens "Horizont" ein. Erstellen Sie dann eine neue Einstellungsebene > Kanal-Mixer (Adjustment Layer > Channel Mixer) ... und wählen Sie Schwarz-Weiß mit Blau-Filter (RGB). Um diesen Effekt nur auf die Ebene "Horizont" in der Ebenen-Palette anzuwenden, halten Sie die Wahltaste gedrückt und klicken Sie zwischen der Ebene "Channel Mixer" und der Ebene "Horizont". Ändern Sie abschließend den Mischmodus der "Horizont"-Ebene auf Überlagerung.
Schritt 5
Wenden Sie eine Ebenenmaske > Alle auf der Ebene "Horizont" anzeigen (Layer Mask > Reveal all) an. Dann benutzen Sie einen großen und schwarzen (#000000) weichen Pinsel, um die Ränder des Bildes auszublenden, wählen Sie dann einen Grunge Pinsel (ich benutze diesen Grunge Pinsel von Kelzky13, besonders die Pinsel 250 und 181) und mache die Ränder ein bisschen mehr irregulär.
Schritt 6
Als nächstes tippen Sie den Titel "Magic" mit der Scriptina-Schriftart. Wenden Sie dann die folgenden Ebene-Stile an: ein Outer Glow (#9EB6D0) und ein Farbverlaufs-Overlay (#70ABF6, #FFFFFF, # B4CBE7 bis #FFFFFF). Außerdem ist es jetzt an der Zeit, unser Design in Ordnern zu organisieren. Legen Sie alle Ebenen in einen neuen Ordner namens "Hintergrund" und den Text in einem anderen Ordner namens "Logo".
Schritt 7
Jetzt fügen wir unserem Design einige Sterne hinzu. Sie können jeden Sternpinselsatz verwenden, aber ich verwende diesen Satz: Sternfeldpinsel von BL1nX. Dann malen Sie mit dem Pinsel 550 des Sets die weißen Sterne (#FFFFFF) in eine neue Ebene in einem Ordner namens "Sterne". Beachten Sie, dass ich den hellsten Stern über den Punkt des i setze. Wenden Sie dann eine Farbverlaufsüberlagerung mit drei Farben (# 3A8FEF, #FFFFFF und #66C9FC) auf die Ebene "Sterne1" an.
Schritt 8
Als nächstes fügen Sie mit dem Pinsel 615 des Sternenfeldsatzes dem Himmel mehr Sterne in eine neue Ebene namens "Sterne2" hinzu. Löschen Sie dann die Sterne mit einem weichen Radiergummi über den Gebäuden. Fügen Sie als Nächstes "Outer Glow" (# 8AB2FF) zu "Sterne2" hinzu.
Schritt 9
Fügen Sie weitere Sterne zur Ebene "Sterne 2" im gesamten Design hinzu und löschen Sie dann mit dem Radiergummi einige Bereiche der Sterne. Schließlich wenden Sie einen Farbverlaufsüberlagerungseffekt (Gradient Overlay) auf die Ebene "Sterne2" an und verwenden dabei vier Farben: #6AB1D1, #FFFFFF, #94CFED und #FFFFFF.
Schritt 10
Laden Sie jetzt diese Sterne-Pinseln von jen-ni herunter und halten Sie die Pinsel griffbereit, da wir sie in diesem Tutorial mehrmals verwenden werden. Wählen Sie einen 65 px Pinsel (ich benutze Nummer 148) und zeichnen Sie einen weißen (#FFFFFF) Stern in eine neue Ebene direkt über dem Punkt des i. Dann wenden Sie ein Outer Glow (#00BCF9) auf den Stern, um es heller zu machen.
Schritt 11
Duplizieren Sie den "Magic"-Text, wählen Sie den Text und geben Sie an dieser Stelle das Wort "Night" ein. Als nächstes stellen Sie das Outer Glow auf Weiß (#FFFFFF) und die Farbverlaufsüberlagerung auf drei Farben (#F9DA5B, #FEAE00 und #FFD403) ein, sehen Sie das Bild unten, um die Filterwerte zu überprüfen.
Schritt 12
Fügen wir unserer Nacht einige Wolken hinzu! Laden Sie die Wolken II-Pinsel von redheadstock herunter. Als nächstes wählen Sie die Pinselnummer 2464 und stellen Sie die Größe auf 960px ein (entspricht der Hauptbreite des Designlayouts). Setzen Sie die Vordergrundfarbe auf #234B7F und fügen Sie eine einzelne Wolke in eine neue Ebene namens "Wolke1" ein. Um die Ebenen geordnet zu halten, setze ich die Wolken in einen separaten Ordner im Ordner "Hintergrund". Jetzt dehnen Sie die "Wolke1" Höhe etwas aus.
Schritt 13
Anschließend, ausweichen und brennen Sie die Wolke ein wenig. Beachten Sie, dass ich die Bereiche neben dem Logo-Stern aufhelle und den Boden der Wolke verdunkle. Ändern Sie auch die "Wolke1"-Opazität auf 50%.
Schritt 14
Fügen Sie eine neue Wolke zu einer neuen Ebene namens "Wolke2" hinzu. Sie können jede beliebige Wolke verwenden, aber verwenden Sie diese Farbe als Vordergrund: #5F83A5. Weichen Sie der Unterseite der Wolke ein wenig aus, um die Beleuchtung zu verbessern.
Schritt 15
Wiederholen Sie den vorherigen Schritt, aber verwenden Sie diesmal einen anderen Pinsel mit dieser Farbe: #36638C und platzieren Sie ihn über der "Wolke1". Ändern Sie Größe, dann Ausweichen (Dodge) und/oder Verbrennen (Burn) Sie die Wolke bei Bedarf.
Schritt 16
Wählen Sie einen großen weichen Radiergummi (Eraser) und löschen Sie den unteren Teil der Ebene "Wolke1", um einen Ausblendeffekt zu erzielen.
Schritt 17
Das ist eigentlich ein kritischer Schritt, wir fügen den Hintergrund des Hauptcontainers hinzu, Sie dürfen niemals vergessen, dass Sie für das Web entwerfen. Zeichnen Sie mit dem Rechteckwerkzeug (Rectangle tool) ein Vektorrechteck (#0A1D37) in eine neue Ebene unterhalb des Ordners "Wolke". Beachten Sie, dass sich mein Rechteck in den Padding-Hilfslinien befindet. Wählen Sie dann die Rechteck-Ebene und gehen Sie zu Ebene> Ebenenmaske> Alle einblenden (Layer > Layer Mask > Reveal all) ... und zeichnen Sie einen Weiß-zu-Schwarz-Verlauf, der an der Spitze des Rechtecks einen schönen Effekt ergibt. Lassen Sie schließlich einen Guide unter der Einblendung des Rechtecks fallen, was uns hilft, wenn wir dieses Design in HTML + CSS umwandeln. Beachten Sie, dass von der Anleitung zum unteren Rand der Hintergrundfarbe klar sein sollte.
Schritt 18
Fügen Sie nun ein weiteres Rechteck hinzu, aber dieses Mal als Sidebar-Hintergrund, helfen Sie sich wieder mit einem Guide und verwenden Sie die Farbe #091525. Wenden Sie dann auf das neue Rechteck eine Ebenenmaske (Layer Mask) wie im vorherigen Schritt an.
Schritt 19
Zu diesem Zeitpunkt haben wir den grundlegenden Header-Hintergrund erstellt. Jetzt ist es an der Zeit, einige Details hinzuzufügen. Ich werde ein einzigartiges RSS-Symbol in der Kopfzeile setzen. Kopieren Sie dieses Vollmondbild und fügen Sie es in eine neue Ebene namens "Mond-rss" ein. Passen Sie dann die Farbton-/Sättigungswerte an, um den Mond ein wenig gelber zu machen, und fügen Sie sowohl den inneren als auch den äußeren Glow-Filter hinzu (sehen Sie die unten gezeigten Werte).
Schritt 20
Fügen Sie in der Ebenenpalette eine kleine Wolkenform mit der Farbe #7997B3 in eine neue Ebene über dem Mond ein. Löschen Sie dann mit einem großen weichen Radiergummi einige Bereiche der neuen Wolke.
Schritt 21
Fügen Sie die klassische RSS-Form (#DCA30B) in eine neue Ebene vor der "Mond" -Ebene, aber hinter die "Wolken" -Ebene ein. Dann wenden Sie die unten gezeigten Filter an (ein Verlaufsüberlager (Gradient Overlay), ein äußeres Leuchten (Outer Glow) und ein Schlagschatten (Drop Shadow)). Fügen Sie schließlich einen Stern über der RSS-Figur hinzu (sehen Sie Schritt 10).
Schritt 22
Fügen Sie dieses Bild in eine neue Ebene ein und verwenden Sie es als Hintergrund für die Hauptseiten-Navigationsleiste. Da das ursprüngliche Bild ein wenig gestreckt ist, müssen wir es breiter machen. Ich habe mit beiden Auswahlen und dem Verschieben-Werkzeug (Frei transformieren) (Move (Free Transform) tool) gespielt, um die Breite des Bildlaufs zu erhöhen. Dann Warp die Rolle nur ein wenig mit der Flag Warp.
Schritt 23
Weichen Sie einigen Bereichen der Schriftrolle aus, um die Schatten zu verstärken und die Warp-Illusion zu verbessern.
Schritt 24
Um die Scroll-Textur zu verbessern, wenden Sie einen Gradienten-Overlay-Filter (#045F96 und #FBF4BD) und ein Pattern-Overlay an.
Schritt 25
Fügen Sie nun der Schriftrolle einen Schlagschatten hinzu. Sie können den Schlagschatten-Filter verwenden oder tun, was ich gemacht habe, duplizieren Sie die Schriftrollebene und bei Farbton/Sättigung stellen Sie die Aufhellung (Lightening) auf -100 ein, verwischen Sie die schwarze Kopie ein wenig und verzerren Sie sie mit dem Freitransformierung-Werkzeug (Free Transform tool), um sie unregelmäßig zu machen.
Schritt 26
Als Nächstes fügen Sie wie in Schritt 15 eine Wolke über den Blättern, Ausweichen, Brennen und Löschen hinzu. Fügen Sie dann den Text der Seitenverknüpfung mit Georgia - Kursivschrift hinzu. Verwenden Sie die Farbe #0B1827 für die Standardverknüpfungen und die Farbe #211808 für die Hoververbindung. Fügen Sie außerdem einige zusätzliche Details wie Sterne im Hintergrund und eine Linie als Hover-Effekt hinzu. Sie können die Struktur der Ebenen unten im Bild unten sehen.
Schritt 27
Erstellen Sie als letztes Detail in der Navigationsleiste eine neue Ebene über der Bildlaufleiste und zeichnen Sie mit einem Partikelpinsel eine Linie wie bei einem Aquarell (sehen Sie Bild unten). Tun Sie es ein paar Mal, aber mit verschiedenen Farben. Auch in der Navigationsleiste "Sterne" liegt die Opazität unter 40%.
Schritt 28
Fügen Sie den RSS-bezogenen Text hinzu. Ich verwende 10 px Aria, mit gelb (#F2C90D) und weiß (#FFFFFF). Vergessen Sie nicht, die Anti-Aliasing-Methode auf None zu setzen, da die meisten Browser den Text ohne Anti-Aliasing rendern (IE7 und Safari sind die Ausnahmen).
Schritt 29
Als zusätzliches Detail fügen Sie dieses Bild eines schönen Ballons hinzu. Extrahieren Sie den Ballon aus seinem Hintergrund und platzieren Sie ihn irgendwo unter dem Logo, fügen Sie einen Farbüberzug (Color Overlay) (#1F416E - Mischmodus: Überlagerung) zur Ebene "Ballon" hinzu, um den Szenenfarben zu entsprechen. Außerdem können Sie die linke Seite des Ballons nur ein wenig verbrennen.
Schritt 30
Als nächstes fügen Sie mit dem Pinsel 615 der Sternfeldpinsel (siehe Schritt 8) mehr Sterne über dem Ballon und der Rolle hinzu. Ich füge dem Ballon auch einen Akkord hinzu, indem ich eine weiße gekrümmte Linie mit einem 3 px breiten Pinsel male. Verwenden Sie den Radierergummi auch hier und da, um die Anzahl der Sterne zu reduzieren.
Schritt 31
Es ist Zeit, einen Beitrag hinzuzufügen. Fügen Sie zuerst den Titel und die Metadatenzeile in eine neue Ebene namens "Post" ein. Sehen Sie sich das Bild unten an, um die Zeichenwerte anzuzeigen. Außerdem füge ich einen kleinen Stern in der Nähe der Metadaten als visuelles Detail hinzu.
Schritt 32
Fügen Sie weitere Informationen in den Ordner "Post" ein, da die Liste auf der Startseite eine Vorschau auf mehrere Posts enthält. Wir fügen links ein Vorschaubild hinzu (200 px by 200 px mit einem 1px Stroke-Effekt) und rechts einen kurzen Text. Außerdem werden wir eine Vorschau hinzufügen, wie viele Kommentare der Beitrag oben rechts hat. Erstellen Sie für das Kommentarfeld einen neuen Ordner mit dem Namen "Kommentare" und fügen Sie einen kleinen Hintergrund mit einer kleinen Wolke und einigen kleinen Sternen hinzu. Im Grunde, wiederholen Sie einfach einen der vorherigen Schritte, als wir den Header entwarfen, aber in einem winzigen Maß. Dann fügen Sie die Kommentarnummer und das Wort Kommentare unten hinzu.
Fügen Sie als Nächstes eine Tags-Zeile unterhalb des Posts hinzu und fügen Sie rechts neben dieser Zeile einen kleinen Stern hinzu. Fügen Sie ein kleines Sternfeld als Hintergrund für den Beitrag hinzu, wenn Sie möchten. Zeichnen Sie abschließend mit dem Line-Werkzeug einen Teiler (#1D324F) für den Post.
Dann duplizieren Sie den Ordner "Post" und bearbeiten Sie die Kopien, um zwei oder drei verschiedene Posts zu erstellen. Es ist sehr gut möglich, dass die Höhe Ihres Dokuments zu diesem Zeitpunkt erhöht werden muss. Verwenden Sie dazu einfach das Freistellungswerkzeug (Crop tool) oder Bild > Leinwandgröße (Crop tool or Image > Canvas size), wie in Schritt 1. Wenn Sie die Größe Ihres Hauptdokuments geändert haben, erhöhen Sie die Höhe des Hauptdokuments Hintergrund und Seitenleiste Hintergrund.
Schritt 33
Lassen Sie uns jetzt an der Seitenleiste arbeiten. Wir werden das Suchformular hinzufügen. Erstellen Sie einen neuen Ordner mit dem Namen "Sidebar" und erstellen Sie darin einen anderen Ordner mit dem Namen "Suche". Zeichnen Sie eine Wolke in diesen Ordner und weichen Sie sie aus und bohren Sie sie, damit sie wie das folgende Bild aussieht. Zeichnen Sie dann mit dem Abgerundeten Rechteck-Werkzeug ein Rechteck über die Wolke. Wenden Sie einen 1px Inside Stroke-Effekt (#697372) auf das Rechteck an und ändern Sie den Füllwert (Fill value) auf 50%.
Schritt 34
Fügen Sie einige weiße Sterne über der Wolkenebene hinzu, indem Sie eine beliebige Sternfeldebene verwenden. Vergessen Sie nicht, alle zusätzlichen Sterne zu löschen. Dann duplizieren, reduzieren und bearbeiten > Horizontal spiegeln (Edit > Flip horizontal)Sie die "Ballon" -Ebene von Schritt 29. Legen Sie es in den Ordner "Suche". Fügen Sie auch den Titeltext mit Georgia Italic und einer schönen gelben Farbe (#D5A934) hinzu. Als nächstes fügen Sie die Suchanweisungen und die Schaltfläche "Go!" hinzu. Sie können die Werte des Charakters unten im folgenden Bild sehen. Als letztes Detail zeichnen Sie einen einzelnen hellen Stern hinter dem Text.
Schritt 35
Fügen Sie den Text, die Titel und die Links der Seitenleiste hinzu und fügen Sie jeden Abschnitt in einen separaten Ordner ein. Fügen Sie außerdem einen weichen Sternfeldhintergrund für jeden Ordner und einen glänzenden Stern hinter jedem Titel hinzu. Fügen Sie außerdem einen glänzenden Stern als Beispiel für den Hover-Effekt auf einer beliebigen Verknüpfung hinzu. Vergessen Sie nicht die Padding- und Margin-Guides.
Schritt 36
Wir erreichen das Ende. Fügen wir eine Fußzeile für die Seitenleiste hinzu. Blenden Sie zunächst das Hintergrundbild der Seitenleiste mit einem weichen Pinsel auf der Ebenenmaske aus. Als nächstes zeichnen Sie ein paar Wolken, dann ausweichen und brennen Sie sie. Stellen Sie sicher, dass die Wolken nicht in den Hauptinhaltshintergrund eindringen oder die Breite der Seitenleiste überschreiten. Fügen Sie dann ein weißes Sternfeld hinter den Wolken hinzu und duplizieren Sie den Ballon noch einmal. Ich speichere alles in einem Ordner namens "Sidebar Fußzeile".
Schritt 37
Schließlich erstellen wir die Fußzeile. Als erstes blenden Sie die Ebenenmaske des Hauptinhaltshintergrunds mit einem großen weichen Pinsel aus und blenden den unteren Rand aus, um ihn auszublenden. Dann wählen Sie einige Wolkenpinsel aus und streichen Sie sie über den unteren Rand des Designs. Ich kombiniere große dunkelblaue (#0B1C38) Wolken und kleine blaue (#223E63) Wolken, wie in den Bildern unten gezeigt. Denken Sie daran, dass diese Wolken zu einem Hintergrundbild werden. Versuchen Sie daher nicht, ein Handbuch zwischen Inhalt und Fußzeile zu kreuzen. Denken Sie außerdem daran, alle zugehörigen Ebenen der Fußzeile in einen neuen Ordner namens "Fußzeile" zu verschieben.
Schritt 38
Verbrennen Sie die leichtesten Wolken. Malen Sie dann ein weißes Sternfeld mit dem Pinsel 615 des Sternensatzes. Anschließend malen Sie ein helleres Sternfeld mit einem anderen Pinsel, in diesem Fall Nummer 656 des Sets. Zuletzt löschen Sie das Sternfeld mit einem weichen großen Radiergummi.
Schlussfolgerung
Ich hoffe, Sie fanden das nützlich. PLUS Mitglieder können die PSD-Datei herunterladen und ändern, was auch immer Sie wollen, hinzufügen oder entfernen Sie Details und erstellen Sie Ihr eigenes Sternen-Design
Abonnieren Sie den Psdtuts + RSS-Feed für die besten Photoshop-Tuts und Artikel im Internet.
By
