German (Deutsch) translation by Valentina (you can also view the original English article)
In diesem Jahr gab es eine große Zunahme an Grunge / texturierten / handgezeichneten Website-Designs. Von Natur aus neige ich dazu, selbst einen saubereren Look zu entwerfen, aber ich dachte, ich würde mich heute im Grunge versuchen und ein Tutorial schreiben, wie man in Photoshop eine einfache Papierstruktur von Grund auf neu erstellt und sie dann mit einem Weblayout kombiniert, um ein ordentliches Design zu erstellen.
Später in dieser Woche nehmen wir dasselbe Webdesign und ich zeige Ihnen, wie Sie beim Remixen noch weiter gehen können, als nur Hintergründe und Farbschemata zu ändern, dass Sie tatsächlich den gesamten Stil eines Designs ändern können. Aber zuerst machen wir unsere Papiertextur-Site!
Teil 1 - Erstellen einer Papierstruktur
Es gibt drei verschiedene Möglichkeiten, wie Sie einen strukturierten Papierlook erzielen können:
- Scannen Sie Ihr eigenes Papier ein Sehen Sie sich Bittboxs Tutorial zum Erstellen einer fantastischen Grunge-Papierstruktur an Textur
- Verwenden Sie die Textur von jemand anderem Es gibt haufenweise Websites, die Texturen auflisten, sieh dir diese Links an: Bittbox | TextureKing | Psdtuts+ Texturen
- Machen Sie es in Photoshop Das werden wir tun!
Das Erstellen einer Textur in Photoshop führt im Allgemeinen zu einem eher stilisierten als realistischen Aussehen, hat jedoch seinen eigenen Reiz. Es bedeutet auch, dass Sie keine externen Bilder benötigen.
Schritt 1
Also beginnen wir zuerst ein neues Dokument, diese Leinwand ist 1200px breit x 900px hoch. Als nächstes füllen wir die Hintergrundebene mit einer beige Farbe - #e8e8e2.
Schritt 2
Erstellen Sie nun eine neue Ebene darüber und erstellen Sie Ihre Vorder- und Hintergrundfarben: #979a8f und #cfd1c5, die Variationen der Originalfarbe sind. Gehen Sie dann zu Filter > Rendern > Wolken
Schritt 3
Jetzt führen wir Filter > Kunstfilter > Malmesser mit den Einstellungen aus, die im obigen Bild gezeigt werden. Spachtel verwandelt unsere Wolken in Kleckse ... irgendwie wird dies der Textur schließlich ein leicht zerknittertes Gefühl geben.
Schritt 4
Als nächstes fügen wir der Leinwand etwas Rauschen hinzu, indem wir Filter > Rauschen > Rauschen hinzufügen mit der gezeigten Einstellung verwenden. Dies sollte unsere Textur rau aussehen lassen.
Schritt 5
Jetzt nehmen wir unsere verrauschte, knautschige Ebene und stellen sie auf Multiplizieren und 30%. Dies wird es gleich wieder tonisieren.
Schritt 6
Erstellen Sie nun eine neue Ebene darüber und erstellen Sie Ihre Vorder- und Hintergrundfarben: #42433e und #cfd1c5 - eine dunklere Version des letzten Satzes, damit wir diesmal mehr Kontrast erhalten. Gehen Sie dann zu Filter > Rendern > Wolken
Schritt 7
Dann führen wir erneut den Filter > Kunstfilter > Malmesser aus.
Schritt 8
Und dieses Mal setzen wir die neue Ebene auf Ineinanderkopieren und 60%. Dies sollte unserer Textur etwas mehr Tiefe verleihen.
Und das ist es! Das ist unsere Textur!
Schritt 9
Für dieses Tutorial ist die leichte Textur perfekt, aber Sie können leicht andere Variationen erstellen, indem Sie einfach mit den Mischwerkzeugen herumspielen. Um zum Beispiel diese dunkelbraune Papierstruktur herzustellen:
- Nehmen Sie die Light-Version und drücken Sie STRG-U, um den Farbton/die Sättigung zu ändern. Stellen Sie die Schieberegler auf -30, -10 bzw. -5.
- Duplizieren Sie die Ebene und drücken Sie STRG-UMSCHALT-U, um sie schwarzweiß zu machen
- Gehen Sie dann noch auf der Schwarz-Weiß-Ebene zu Bearbeiten > Anpassungen > Helligkeit / Kontrast und gehen Sie zu -30 bzw. +3030
- Stellen Sie nun die Schwarz-Weiß-Ebene auf Ineinanderkopieren
- Erstellen Sie dann eine weitere Ebene darüber und füllen Sie sie mit #beac93 und ändern Sie diese Ebene in Multiplizieren.
- Duplizieren Sie die Multiplizierte Ebene
- Dann duplizieren Sie die Schwarz-Weiß-Ebene und ziehen Sie sie ganz nach oben. Stellen Sie es auf Ineinanderkopieren und 20% und drehen Sie es um 90', um der Textur etwas mehr Tiefe zu verleihen.
Schritt 10
Wenn Farbvariationen nicht ausreichen, können Sie auch die Haptik der Textur mit verschiedenen Filtern ändern. Hier haben wir zum Beispiel ein pergamentartigeres Gefühl geschaffen, indem wir unsere leichte Textur genommen haben und:
- Schnappen Sie sich die erste knautschige / rauschende Ebene und führen Sie einen Filter > Strukturierungsfilter > Mit Struktur versehen aus und verwenden Sie Canvas, 75% und 2 für Ihre Einstellungen
- Schnappen Sie sich die zweite knautschige / Rauschschicht und führen Sie den gleichen Filter aus
- Duplizieren Sie nun die zweite Ebene und drehen Sie sie um 90', wobei Sie sie auf Ineinanderkopieren und 60% setzen.
- Erstellen Sie darüber eine neue Ebene und fülle sie mit Weiß - #ffffff
- Führen Sie einen Filter > Strukturierungsfilter > Mit Struktur versehen aus und verwenden Sie diesmal Canvas, 200% und 16 und stellen Sie diese Ebene dann auf Ineinanderkopieren und 20% ein
- Erstellen Sie nun eine weitere Ebene darüber und füllen Sie sie erneut mit Weiß. Ändern Sie diesmal den Ebenenmischmodus auf Farbe und 53%, um unsere Textur etwas weißer zu machen.
Abschließende Notizen zur Papierstruktur
Nun, da Sie eine Textur haben, können Sie sie natürlich in einen nahtlos gekachelten Hintergrund verwandeln.
Für dieses Tutorial verwenden wir die erste Textur, die wir erstellt haben - die aus Schritt 8.
Teil 2 - Erstellen des Website-Layouts
Jetzt erstellen wir ein Portfolio-Layout, das zu unserer Papierstruktur passt. Hier ist der ungefähre Aufbau für die Homepage. Wie Sie sehen, ist die Struktur etwas komplizierter als im vorherigen Weblayout-Tutorial, da wir diesmal ein Layout im Layout haben.
Unser Gesamtraster ist also ein dreispaltiges Raster. Im Hauptfenster haben wir dieses Raster verwendet, um den Bereich in zwei Haupträume zu unterteilen, einer hat die Größe von Spalte 1 und der andere erstreckt sich über die beiden anderen Spalten.
Schritt 13
Also werden wir zuerst einen Arbeitsbereich erstellen und ihn aufhellen. Hier habe ich also zwei Hilfslinien auf den Bildschirm gezogen, eine mit 100px und eine mit 1100px - das macht den Bereich, in dem ich arbeite, in genau 1000px, was perfekt ist.
Dann erstellen wir eine neue Ebene und zeichnen wie abgebildet eine große weiße Box.
Schritt 14
Als Nächstes setzen wir die weiße Box wieder auf 25% Deckkraft.
Dann werden wir es aufrauen. Es gibt viele großartige Grunge-Pinsel, aber für diesen Schritt verwenden wir nur einen der Standardpinsel von Photoshop. Sie können es im obigen Screenshot mit der 60 darunter sehen.
Wenn dieser Pinsel nicht für Sie angezeigt wird, klicken Sie einfach auf den kleinen rechten Pfeil oben im Pinselbildschirm und wählen Sie Nasse Medienpinsel aus, und klicken Sie dann auf Anhängen, um sie Ihrem aktuellen Set hinzuzufügen.
Schritt 15
Wählen Sie also das Radiergummi-Werkzeug (E), wählen Sie den gerade erwähnten Pinsel aus und gehen Sie dann um die Kanten unserer Form herum und rauen Sie sie einfach auf, wie Sie es fühlen. Ich habe die obere Kante intakt gelassen, wie Sie sehen können.
Schritt 16
Als nächstes erstellen Sie eine neue Ebene direkt unter dem weißen Feld und zeichnen einen radialen Farbverlauf (G) von Weiß zu Transparenz. Dies wird nur hervorheben, wo wir gleich unser Logo platzieren werden. Stellen Sie die Ebene auf Ineinanderkopieren und 70% ein.
Schritt 17
Jetzt fügen wir ein kleines "Logo" hinzu - in unserem Fall nur ein Wort in einer schönen Schrift. Die Schriftart, die ich hier gewählt habe, ist Egyptian710 BT, eine ziemlich bekannte Schriftart und für unsere Zwecke geeignet, da sie sehr ungleichmäßig aussieht - Großbuchstaben sind dicker als die Kleinbuchstaben - und die Slab Serifs sehen irgendwie schreibmaschinenartig aus, was dazu gehört unser Papierthema.
Schritt 18
Als Nächstes erstellen wir ein Wasserzeichen, um dem Hintergrund etwas mehr hinzuzufügen. Eigentlich können Sie verrückt werden und tonnenweise Sachen in die Hintergrundtextur einfügen, aber wir geben uns mit einem einzigen Wasserzeichen zufrieden.
Hier habe ich das Wort Folio in einer zufälligen Schriftart (HumstSlab712 Blk) ausgeschrieben und in dieser Farbe gesetzt - #c5c6ba.
Schritt 19
Ändern wir nun den Mischmodus auf Farbig nachbelichten und 70% und fügen wir wie gezeigt eine 1px-Kontur hinzu. Beachten Sie, dass ich für den Fülltyp ein Muster verwendet und dann eine Textur ausgewählt habe, bei der ich herumhing. In Kombination mit einer geringen Deckkraft (36%) und einem Mischmodus (Multiplizieren) sieht dies unseren Umriss aus, als wäre er in Teilen ausgeblendet.
Schritt 20
Jetzt verschieben wir unser Wasserzeichen hinter das Logo.
Schritt 21
Als nächstes werden wir ein kleines horizontales Trennelement erstellen. Erstellen Sie also eine neue Ebene und zeichnen Sie eine 1px-Linie im Dunkelbraun ein.
Schritt 22
Nehmen Sie jetzt den gleichen alten Radiergummipinsel und gehen Sie einfach über die Linie und radieren Sie kleine Stücke daraus, damit er beunruhigt aussieht. Entfernen Sie auch die Kanten, damit es an der gleichen Stelle wie die weiße Box beginnt.
Schritt 23
Erstellen Sie als Nächstes eine neue Ebene darunter und zeichnen Sie wie abgebildet ein braunes Feld mit einer Höhe von etwa 3-4 Pixeln.
Schritt 24
Setzen Sie das braune Feld auf Multiplizieren und 5%. Dies wird eine Art Schatten für unseren Separator sein.
Schritt 25
Als nächstes erstellen Sie eine neue Ebene und zeichnen diesmal ein weißes Feld etwa 20 Pixel hoch über der Linie.
Schritt 26
Stellen Sie die weiße Box auf etwa 50% Deckkraft ein und löschen Sie mit unserem Pinsel erneut die Oberseite unordentlich.
Schritt 27
Wiederholen Sie nun die letzten drei Schritte, um ein zweites weißes Kästchen zu zeichnen, aber dieses Mal, wenn Sie es löschen, löschen Sie mehr, damit es ein dünnerer weißer Streifen ist.
Wenn beide weißen Schichten kombiniert werden, ergeben sie ein unordentliches Highlight.
Gruppieren Sie diese Trennschichten in eine einzelne Schichtgruppe.
Schritt 28
Jetzt können wir unsere Ebenengruppe duplizieren, um drei Kopien zu haben, um unseren horizontalen Rasterbereich wie gezeigt zu bilden.
Schritt 29
Hier habe ich nur etwas Inhalt eingefügt. Wie Sie sehen, habe ich ein wenig die Display-Schrift mit einer normalen HTML-Schrift vermischt.
Für den normalen Text habe ich Cambria verwendet, eine Vista-Schriftart. Im CSS würden Sie für Leute, die die Vista-Schriftarten nicht haben, standardmäßig auf Georgia zurückgreifen. Wenn Sie selbst die Vista-Schriften nicht haben, können Sie sie kostenlos und legal erhalten, folgen Sie einfach diesen Anweisungen. Es gibt ein paar nette Schriftarten, ich mag Calibri auch sehr.
Schritt 30
Jetzt werden wir unser Hauptpanel hinzufügen. Zeichnen Sie also ein großes rechteckiges Kästchen in der dunkelbraunen Farbe - #1e1a19 - und verwenden Sie dazu das Abgerundete Rechteck-Werkzeug (U) mit einem Radius von 5px.
Schritt 31
Zoomen Sie nun in die obere linke Ecke und nehmen Sie eine kleine quadratische Auswahl auf und füllen Sie sie mit der gleichen dunkelbraunen Farbe aus. Wir wollen keine Kurve in dieser Ecke.
Schritt 32
Zoomen Sie nun in die obere rechte Ecke und verwenden Sie das Polygonal Lasso-Werkzeug (L), während Sie die Umschalttaste gedrückt halten, um eine abgewinkelte Auswahl wie gezeigt zu treffen und dann auf Löschen zu drücken.
Schritt 33
Zeichnen Sie nun in einer neuen Ebene darüber ein hellbraunes Quadrat, sagen wir #352f2b, und treffen Sie dann eine weitere abgewinkelte Auswahl und löschen Sie die Hälfte des Quadrats, so dass Sie ein Dreieck übrig haben, das 1 px vom Rand entfernt ist.
Schritt 34
Als nächstes erstellen Sie eine neue Ebene und zoomen Sie erneut in die obere linke Ecke. Wir werden jetzt unsere Registerkartenform erstellen. Wir tun dies mit dem Stiftwerkzeug und ein paar sehr präzisen Klicks. Im obigen Bild habe ich alle Hintergrundebenen ausgeschaltet, damit Sie die Form genau sehen können. So machen Sie es:
- Beginnen Sie am unteren linken Punkt und klicken Sie einfach auf einen einzelnen Punkt in
- Halten Sie dann die UMSCHALTTASTE gedrückt, so dass Sie eine schnurgerade Linie erhalten, und klicken Sie auf den nächsten Punkt entlang der Linie, halten Sie die Maustaste gedrückt, während Sie klicken, sodass der Punkt Griffe hat, und ziehen Sie ein wenig nach oben. Dies bedeutet, dass der nächste Punkt, auf den Sie klicken, eine Kurve hat, die dazwischen verläuft.
- Klicken Sie nun auf die dritte Position und halten Sie erneut die Maustaste gedrückt und halten Sie die UMSCHALT-Taste gedrückt, um die Griffe im rechten Winkel herauszuziehen. Sie sollten in der Lage sein, diese perfekte Kurve zu erhalten. Wenn Sie die Umschalttaste gedrückt halten, stellen Sie sicher, dass die Winkel alle schön und präzise sind, so dass es nur eine Frage der richtigen Größe und Positionierung ist. Es kann ein paar Schritte dauern, aber das Gute ist, dass Sie einfach STRG-Z drücken können, um den Vorgang rückgängig zu machen, und wenn Sie mehr als einen Schritt zurückgehen müssen, drücken Sie einfach STRG-ALT-Z
- Klicken Sie als Nächstes bei gedrückter SHIFT-Taste auf den vierten Punkt, halten Sie die Maus erneut gedrückt und ziehen Sie nach rechts, sodass Ziehpunkte angezeigt werden. Dieses Handle können Sie im obigen Bild sehen (weil es einer der letzten beiden Punkte ist, bevor ich einen Screenshot mache). Wie Sie sehen, sollte der Griff schnurgerade sein - dies wird sichergestellt, indem Sie die Umschalttaste gedrückt halten.
- Halten Sie schließlich die UMSCHALTTASTE gedrückt, klicken Sie auf den fünften Punkt und ziehen Sie erneut nach rechts. Dies wird Ihnen diese fantastische letzte Kurve geben.
Schritt 35
Nachdem Sie den fünften Punkt gemacht haben, können Sie den Rest der Form einfach beliebig ausfüllen, da wir nur die untere Kante wegschneiden, um sowieso perfekt gerade zu sein.
Wenn Sie die Form fertiggestellt haben, klicken Sie mit der rechten Maustaste und wählen Sie Auswahl treffen.
Schritt 36
Jetzt können Sie die Form mit Dunkelbraun ausfüllen, um der Hauptbox zu entsprechen. Dann schneiden Sie die unteren zusätzlichen Bits weg, damit es schön flach ist und wie abgebildet perfekt oben sitzt.
Schritt 37
Als nächstes duplizieren wir unsere Registerkartenebene und verschieben die neue unter die alte Registerkarte (so dass die braune so aussieht, als wäre sie vorne). Klicken Sie dann mit der rechten Maustaste auf unseren neuen Tab und wählen Sie Mischoptionen und geben Sie ihm eine Farbe-Ineinanderkopieren dieser schönen rötlich-orange Farbe - #cc5630. Der Grund, warum wir eine Farbüberlagerung erstellen und die Registerkarte nicht nur mit der neuen Farbe ausfüllen, besteht darin, dass bei der zweiten Methode ein paar übrig gebliebene braune Pixel durchscheinen.
Halten Sie als nächstes die STRG-Taste gedrückt und klicken Sie auf die erste Registerkarte, wählen Sie dann das Rechteckige Auswahlwerkzeug und drücken Sie einige Male auf den rechten Pfeil, bis sich Ihre Auswahl mit der orangefarbenen Registerkarte überlappt. Der Grund, warum ich sage, dass Sie in diesem Schritt das Auswahlwerkzeug auswählen sollten, ist, dass Sie zum Verschieben einer Auswahl ein Auswahlwerkzeug nach oben haben müssen. Wenn Sie stattdessen das normale Pfeilwerkzeug ausgewählt hätten, würden Sie neben der Auswahl auch Pixel verschieben. Probieren Sie beides aus und Sie werden sehen, was ich meine.
Schritt 38
Jetzt erstellen wir eine neue Ebene zwischen den beiden Registerkarten und füllen unsere Auswahl mit einer dunkleren orangen Farbe - #b44724. Halten Sie dann STRG gedrückt und klicken Sie auf die orangefarbene Registerkartenebene. Klicken Sie dann auf STRG-UMSCHALT-I, um die Auswahl umzukehren, klicken Sie auf die mittlere Ebene und klicken Sie auf Löschen. Dadurch sollten Sie nur den dunkleren orangefarbenen Teil haben, der die orangefarbene Registerkarte überlappt.
Schritt 39
Wie Sie sehen, haben wir auf unserer zweiten Registerkarte eine Art Schatten erstellt.
Wenn ich das selbst sage, sehen diese Registerkarten fantastisch aus, und der Grund dafür ist, dass sie sich überlappen. Leider erschwert dies auch die Arbeit mit ihnen in HTML. Sie können jedoch eine Vielzahl von Dingen mit transparenten PNGs tun oder alternativ einfach die Farben des Textes in Rollovern ändern und sich keine Gedanken über das Ändern der Registerkartenfarben machen. Dies alles sprengt jedoch den Rahmen dieses Tutorials. Es genügt zu sagen, dass das Menü möglicherweise etwas schwierig zu erstellen ist.
Schritt 40
Hier also unser bisheriges Layout. Ich habe ein paar weitere Registerkarten hinzugefügt und ihnen etwas Text gegeben.
Schritt 41
Jetzt zeichnen wir den vorgestellten Arbeitsbereich ein. Dies ist ein einfaches weißes Rechteck, in das die Arbeit gehen wird. Erstellen Sie dann dahinter eine weitere Ebene und verwenden Sie das Polygonal Lasso-Werkzeug (L), um eine Art wackeliges Rechteck zu zeichnen und es mit einer dunklen, dunkelbraunen Farbe zu füllen - #0e0c0c.
Schritt 42
Als Nächstes fügen wir links einen beschreibenden Text und das Element selbst hinzu. Beachten Sie, dass bei dem Text, den ich für die beiden Deskriptoren (Projekttitel und Projektbeschreibung) ein dunkles Braun verwendet habe, diese in den Hintergrund treten, was gut ist, da sie nicht so wichtig sind. Der Titel des Projekts und der beschreibende Text stechen hingegen hervor. Diese letzten beiden Elemente sind in einer hellbeigen Farbe gesetzt, die aus dem Hintergrund ausgewählt wurde, wobei der Titel heller ist als der Text.
Außerdem habe ich dem Arbeitsbeispiel einen schwachen radialen Farbverlauf hinzugefügt, der von Weiß zu einem hellen Beige geht - einfach weil ich radiale Farbverläufe liebe und nicht genug davon bekommen kann :-)
Schritt 43
Jetzt endlich füge ich ein paar kleine handgezeichnete Kritzeleien hinzu, um das Design zu vervollständigen. Für diese habe ich David Leggett von Tutorial9s exzellenten und kostenlosen handgezeichneten Pinseln verwendet. Sie können Pinsel hinzufügen, indem Sie die Pinselpalette wie gezeigt öffnen, auf den kleinen rechten Pfeil klicken und Pinsel laden wählen und dann die heruntergeladene Pinseldatei auswählen.
Da die Pinsel viel größer sind, als ich sie haben möchte, ist es wichtig, die Ebene zu schärfen, nachdem Sie die Größe geändert haben. Also habe ich hier den Pfeil nach unten geschrumpft und dann einen Filter > Scharfzeichnungsfilter > Unscharf maskieren ausgeführt, um ihn zu reparieren.
Das Design
Also los geht's, das endgültige Design, mit ein paar Variationen für verschiedene Seiten. Die endgültigen PSD-Designs stehen natürlich auf ThemeForest zum Verkauf, und ich werde die Homepage-PSD zum Plus-System hinzufügen.
Abschließende Gedanken
Das ist also meine Meinung zu einem Layout mit Papierstruktur. Es gibt viele Designer, die das viel besser machen als ich. Schauen Sie sich insbesondere Liam McKays Arbeit bei WeFunction an und schauen Sie sich auch Design-Galerien wie WebCreme an und Sie werden viele nette grungy, papierartige Designs finden.
By
