Share
In diesem Jahr hat die Gestaltung von Websites mit grungey / textured / handgezeichneten Designs stark zugenommen. Von Natur aus tendiere ich dazu, selbst einen saubereren Look zu entwerfen, aber ich dachte, ich würde mich heute bei Grunge versuchen und ein Tutorial zum Erstellen einer einfachen Papiertextur in Photoshop von Grund auf erstellen. Dann werde ich sie mit einem Weblayout verbinden, um ein ordentliches Design zu erstellen.
Später in dieser Woche verwenden wir dasselbe Webdesign und ich zeige Ihnen, wie Sie Remixing noch weiter machen können, als nur Hintergründe und Farbschemata zu ändern, sodass Sie tatsächlich den gesamten Stil eines Designs ändern können. Aber zuerst machen wir unsere Papier-Textur-Site!
Dieser Beitrag ist Tag 4 unserer Webdesign-Sitzung. Creative Sessions "Session Day 3Session Day 5"
Es gibt drei Möglichkeiten, wie Sie ein strukturiertes Papier aussehen können:
Das Erstellen einer Textur in Photoshop führt im Allgemeinen zu einem eher stilisierten als realistischen Look, aber es hat seinen eigenen Charme. Es bedeutet auch, dass Sie keine externen Bilder benötigen.
Als erstes beginnen wir ein neues Dokument, diese Leinwand ist 1200 x 900 x 900 Pixel hoch. Als nächstes füllen wir die Hintergrundebene mit einer beigen Farbe - # e8e8e2.
Erstellen Sie nun eine neue Ebene und legen Sie Ihre Vordergrund- und Hintergrundfarben fest: # 979a8f und # cfd1c5 welche sind Variationen der ursprünglichen Farbe. Dann geh zu Filter> Rendern> Wolken
Jetzt laufen wir Filter> Künstlerisch> Spachtel mit den im obigen Bild gezeigten Einstellungen. Das Spachtel-Messer verwandelt unsere Wolken in Flecken… irgendwie wird dies der Textur ein leicht zerknittertes Gefühl verleihen.
Als Nächstes fügen wir der Leinwand ein Geräusch hinzu Filter> Noise> Add Noise mit der gezeigten Einstellung. Dadurch sollte unsere Textur rau aussehen.
Jetzt nehmen wir unsere laute, knusprige Schicht und setzen sie auf Multiplizieren und 30%. Dies wird es gleich wieder tönen.
Erstellen Sie nun eine neue Ebene und legen Sie Ihre Vordergrund- und Hintergrundfarben fest: # 42433e und # cfd1c5 - Dies ist eine dunklere Version des letzten Sets, so dass wir dieses Mal mehr Kontrast bekommen. Dann geh zu Filter> Rendern> Wolken
Dann laufen wir wieder die Filter> Künstlerisch> Spachtel Filter.
Und diesmal setzen wir die neue Ebene auf Überlagerung und 60%. Dies sollte unserer Textur etwas mehr Tiefe verleihen.
Und das ist es! Das ist unsere Textur!
Für dieses Tutorial ist die leichte Textur perfekt. Sie können jedoch auch andere Variationen vornehmen, indem Sie einfach mit Mischwerkzeugen herumspielen. Um zum Beispiel diese dunkelbraune Papierstruktur zu erstellen:
Wenn die Farbvariationen nicht ausreichen, können Sie auch das Gefühl der Textur mithilfe verschiedener Filter ändern. Hier haben wir zum Beispiel ein Gefühl von Pergament gemacht, indem wir unsere leichte Textur genommen haben und:
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 zuerst Textur, die wir gemacht haben - die aus Schritt 8.
Jetzt erstellen wir ein Portfolio-Layout für unsere Papiertextur. Hier ist die ungefähre Struktur für die Homepage. Wie Sie sehen, ist die Struktur etwas komplizierter als im vorherigen Weblayout-Tutorial, da dieses Mal ein Layout im Layout vorhanden ist.
Unser gesamtes Raster ist also ein dreispaltiges Raster. Im Hauptbereich haben wir dieses Raster verwendet, um den Bereich in zwei Haupträume aufzuteilen, von denen einer die Größe von Spalte 1 und der andere die beiden anderen Spalten überspannt.
Zuerst erstellen wir einen Arbeitsbereich und erleichtern ihn. Ich habe hier also zwei Hilfslinien auf den Bildschirm gezogen, eine mit 100px und eine mit 1100px. Das macht den Bereich, in dem ich arbeite, mit genau 1000px, was perfekt ist.
Dann erstellen wir eine neue Ebene und zeichnen wie gezeigt ein großes weißes Feld.
Als nächstes setzen wir die weiße Box wieder auf 25% Opazität.
Dann werden wir es aufrauhen. Es gibt viele tolle Grunge-Pinsel, aber für diesen Schritt verwenden wir einfach einen der Standard-Pinsel von Photoshop. Sie können es im Screenshot oben sehen, darunter die 60.
Wenn dieser Pinsel nicht für Sie angezeigt wird, klicken Sie einfach auf den kleinen rechten Pfeil oben auf dem Pinsel-Bildschirm und wählen Sie Nasse Medienbürsten, Klicken Sie dann auf Anhängen, um sie Ihrem aktuellen Set hinzuzufügen.
Also wähle das aus Radiergummi-Werkzeug (E), Wählen Sie den Pinsel aus, den Sie gerade erwähnt haben, und gehen Sie dann an den Rändern unserer Form vorbei. Ich habe den oberen Rand intakt gelassen, wie Sie sehen können.
Als Nächstes erstellen Sie eine neue Ebene direkt unter dem weißen Feld und zeichnen Sie ein Radialgradient (G) Von Weiß zu Transparenz. Dies wird nur hervorheben, wo wir in Kürze unser Logo platzieren werden. Stellen Sie die Ebene auf Überlagerung und 70%.
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, die für unsere Zwecke geeignet ist, da sie sehr ungleichmäßig aussieht - Großbuchstaben sind dicker als die Kleinbuchstaben - und die Slab-Serifen wirken wie eine Art Schreibmaschine, die dazu passt unser Papierthema.
Als Nächstes erstellen wir ein Wasserzeichen, um etwas mehr Hintergrundmaterial hinzuzufügen. Eigentlich kannst du verrückt werden und Tonnen von Sachen in die Hintergrundtextur einfügen, aber wir werden uns mit einem einzigen Wasserzeichen zufrieden geben.
Also habe ich hier das Wort Folio in einer zufälligen Schriftart (HumstSlab712 Blk) geschrieben und in dieser Farbe eingestellt - # c5c6ba.
Nun ändern wir den Mischmodus in Farbe brennen und 70% und wir fügen einen 1px-Strich wie gezeigt hinzu. Beachten Sie das für Füllen Sie Typ Ich habe eine verwendet Muster und wählte dann eine Textur, an der ich herumhing. In Kombination mit einer niedrigen Opazität (36%) und einem Mischmodus (Multiplizieren) wirkt unsere Kontur so, als wäre sie in Teilen ausgeblendet.
Jetzt verschieben wir unser Wasserzeichen und setzen uns hinter das Logo.
Als Nächstes erstellen wir ein kleines horizontales Trennelement. Erstellen Sie also eine neue Ebene und zeichnen Sie eine 1px-Linie im dunklen Braun.
Jetzt schnappen Sie sich den gleichen alten Radiergummi-Pinsel und gehen Sie einfach über die Linie und löschen Sie kleine Teile, so dass er verzweifelt aussieht. Entfernen Sie auch die Kanten, so dass sie an der gleichen Stelle wie das weiße Feld beginnen.
Erstellen Sie als Nächstes eine neue Ebene und zeichnen Sie in ein braunes Feld, das etwa 3-4px hoch ist (siehe Abbildung).
Stellen Sie die braune Box auf Multiplizieren und 5%. Dies wird eine Art Schatten für unser Trennzeichen sein.
Als Nächstes erstellen Sie eine neue Ebene und zeichnen dieses Mal ein weißes Feld etwa 20 Pixel über der Linie.
Setzen Sie das weiße Kästchen auf ungefähr 50% Deckkraft und noch einmal mit unserem Pinsel, löschen Sie einfach die Oberseite auf unordentliche Weise.
Wiederholen Sie nun die letzten drei Schritte, um ein zweites weißes Feld zu zeichnen. Wenn Sie dies jedoch löschen, löschen Sie weitere, sodass es sich um einen dünneren weißen Streifen handelt.
Wenn beide weißen Ebenen kombiniert werden, geben sie ein unordentliches Highlight.
Gruppieren Sie diese Separator-Layer in einer einzelnen Layer-Gruppe.
Jetzt können wir unsere Ebenengruppe duplizieren, um drei Kopien zu haben, um unseren horizontalen Gitterbereich zu bilden (siehe Abbildung).
Hier habe ich gerade einige Inhalte eingefügt. Wie Sie sehen, habe ich ein wenig der Display-Schrift mit einer normalen HTML-Schrift gemischt.
Für den normalen Text habe ich Cambria verwendet, eine Vista-Schriftart. Im CSS hätten Sie es für Leute, die nicht über die Vista-Schriftarten verfügen, standardmäßig auf Georgia zurückgesetzt. Wenn Sie selbst nicht über die Vista-Schriftarten verfügen, können Sie diese frei und legal erhalten. Befolgen Sie einfach diese Anweisungen. Es gibt ein paar nette Schriftarten, ich mag auch Calibri.
Jetzt fügen wir unser Hauptpanel hinzu. Zeichnen Sie also eine große rechteckige Box in der dunkelbraunen Farbe - # 1e1a19 - und verwenden Sie dazu die Abgerundetes Rechteckwerkzeug (U) mit einem Radius von 5px.
Zoomen Sie nun in die obere linke Ecke und wählen Sie ein kleines Quadrat aus. Füllen Sie dann dieselbe dunkelbraune Farbe. Wir wollen keine Kurve in dieser Ecke.
Zoomen Sie jetzt in die obere rechte Ecke und verwenden Sie die Polygonales Lasso-Werkzeug (L) Halten Sie die Umschalttaste gedrückt, und wählen Sie eine abgewinkelte Auswahl aus, und drücken Sie Löschen.
Ziehen Sie nun in einer neuen Ebene oben ein Quadrat mit einer helleren braunen Farbe # 352f2b, und nehmen Sie dann eine andere abgewinkelte Auswahl vor und löschen Sie das halbe Quadrat, sodass ein Dreieck übrig bleibt, das 1 Pixel vom Rand entfernt ist.
Erstellen Sie als Nächstes eine neue Ebene und vergrößern Sie die linke obere Ecke erneut. Wir machen jetzt unsere Tab-Form. Wir machen dies mit dem Stiftwerkzeug und ein paar sehr genauen Klicks. Im Bild oben habe ich alle Hintergrundebenen deaktiviert, damit Sie die Form genau sehen können. So machen Sie es:
Nachdem Sie den fünften Punkt gemacht haben, können Sie einfach den Rest der Form wie gewohnt ausfüllen, da wir den unteren Rand einfach wegschneiden, um trotzdem vollkommen gerade zu sein.
Wenn Sie die Form abgeschlossen haben, klicken Sie mit der rechten Maustaste und wählen Sie Auswahl treffen.
Jetzt können Sie die Form mit dunkelbraun füllen, um sie an das Hauptfeld anzupassen. Schneiden Sie dann die unteren zusätzlichen Bits weg, damit sie schön flach sind und wie gezeigt perfekt oben sitzen.
Als Nächstes duplizieren wir unsere Tab-Ebene und verschieben die neue Ebene unten die alte Registerkarte (so sieht die braune aus, als wäre sie vorne). Klicken Sie dann mit der rechten Maustaste auf unsere neue Registerkarte und wählen Sie Fülloptionen und gib es ein Farbüberlagerung von dieser schönen rötlich-orange Farbe - # cc5630. Der Grund, warum wir eine Farbüberlagerung durchführen und nicht einfach die Registerkarte mit der neuen Farbe füllen, ist, dass Sie bei der zweiten Methode ein paar übrig gebliebene braune Pixel erhalten.
Weiter gedrückt halten STRG und klicken Sie auf die erste Registerkarte und wählen Sie dann die Rechteckiges Laufschriftwerkzeug Drücken Sie einige Male auf den Rechtspfeil, bis sich Ihre Auswahl mit der orangefarbenen Registerkarte überschreitet. Ich sage, dass Sie sich für das Marquee-Werkzeug in diesem Schritt entscheiden sollten, weil 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 tatsächlich Pixel verschieben sowie die Auswahl. Probieren Sie beide aus und Sie werden sehen, was ich meine.
Jetzt erstellen wir eine neue Ebene zwischen den beiden Registerkarten und füllen unsere Auswahl mit einer dunkleren orange Farbe - # b44724. Dann halten Sie gedrückt STRG Klicken Sie auf die orangefarbene Registerkarte, und klicken Sie dann auf STRG-UMSCHALT-I Um die Auswahl umzukehren, klicken Sie auf die mittlere Ebene und klicken Sie auf Löschen. Dies sollte nur den dunkleren orangefarbenen Teil überlappen, der die orangefarbene Registerkarte überlappt.
Wie Sie sehen, haben wir auf unserer zweiten Registerkarte eine Art Schatten erstellt.
Wenn ich es so sage, sehen diese Tabs fantastisch aus, und der Grund dafür ist, dass sie sich überlappen. Leider erschwert dies auch die Arbeit mit HTML. Sie können jedoch mit transparenten PNGs eine Vielzahl von Aktionen ausführen oder alternativ Textfarben in Rollovers ändern und sich keine Gedanken über das Ändern der Tabulatorfarben machen. Trotzdem liegt das alles ein wenig außerhalb des Rahmens dieses Tutorials. Es genügt zu sagen, dass das Menü etwas kompliziert aufgebaut werden kann.
Also hier ist unser Layout bisher. Ich habe ein paar weitere Registerkarten hinzugefügt und ihnen etwas Text gegeben.
Jetzt zeichnen wir in dem vorgestellten Arbeitsbereich. Dies wird ein einfaches weißes Rechteck sein, in dem die Arbeit ausgeführt wird. Dann hinter dem erstellen Sie eine andere Ebene und verwenden Sie die Polygonales Lasso-Werkzeug (L) um eine Art wackeliges Rechteck zu zeichnen und es mit einer dunklen, dunkelbraunen Farbe zu füllen - # 0e0c0c.
Als Nächstes fügen wir links etwas beschreibenden Text und den Artikel selbst hinzu. Beachten Sie, dass bei dem Text, den ich für die beiden Deskriptoren (Projekttitel und Projektbeschreibung) dunkelbraun verwendet habe, diese dazu führen, dass sie in den Hintergrund eingeblendet werden, was gut ist, weil sie nicht so wichtig sind. Hervorzuheben sind der Titel des Projekts und der beschreibende Text. Diese letzten beiden Elemente sind in einer hellbeigen Farbe dargestellt, die aus dem Hintergrund ausgewählt wurde, wobei der Titel heller als der Text ist.
Ich habe auch einen schwachen radialen Farbverlauf zu dem Arbeitsprobe hinzugefügt, der von Weiß zu einem hellen Beige übergeht - nur weil ich radiale Farbverläufe liebe und nicht genug davon bekommen kann :-)
Jetzt werde ich endlich ein paar kleine, von Hand gezeichnete Kritzeleien hinzufügen, um das Design zu beenden. Für diese habe ich David Leggett von Tutorial9's exzellenten und kostenlosen Pinsel verwendet. Sie können Pinsel hinzufügen, indem Sie die Pinselpalette wie gezeigt öffnen, auf den kleinen Pfeil nach rechts klicken und auswählen Bürsten laden, Wählen Sie dann die heruntergeladene Pinseldatei aus.
Da die Pinsel viel größer sind als ich möchte, ist es wichtig, die Ebene nach der Größenänderung zu schärfen. Also hier hab ich den pfeil nach unten geschrumpft und dann ein laufen Filter> Scharfzeichnen> Maske nicht entfernen um es zu reparieren.
Nun geht es los, das endgültige Design, mit einigen Variationen für verschiedene Seiten. Die endgültigen PSD-Designs stehen natürlich bei ThemeForest zum Verkauf, und ich werde die Homepage PSD zum Plus-System hinzufügen.
Das ist meine Ansicht auf eine Art Papierstruktur. Es gibt viele Designer, die das viel besser aussehen lassen als ich, insbesondere die Arbeit von Liam McKay bei WeFunction. Außerdem können Sie in Design-Galerien wie WebCreme nachschauen, und Sie finden viele ordentliche, papierartige Designs.
Dieser Beitrag ist Tag 4 unserer Webdesign-Sitzung. Creative Sessions "Session Day 3Session Day 5"
Accentsconagua