So erstellen und verwenden Sie strukturierte Hintergründe mit den Designoptionen von Divi

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie einfache strukturierte Hintergründe erstellen und diese als Hintergründe für Ihre Abschnitte verwenden können, um Ihre Website ein wenig authentischer aussehen zu lassen. Wenn Sie sich unser aktuelles kostenloses Learning Management Layout ansehen, werden Sie feststellen, dass wir auch auf allen Seiten einen strukturierten Hintergrund verwendet haben.

Nun beginnen wir damit, Ihnen zwei Arten von Texturen zu zeigen, die wir mit Photoshop neu erstellen werden; Texturen mit Formen und Texturen mit Pinseln. Sobald Sie wissen, wie es geht, können Sie so kreativ sein, wie Sie möchten, und authentische strukturierte Hintergründe erstellen. Danach zeigen wir Ihnen, wie Sie atemberaubende Ergebnisse erzielen können, indem Sie die strukturierten Hintergründe und die Designoptionen von Divi kombinieren.

Bildergebnis mit Formen erstellt

Das erste Bild, das wir Ihnen zeigen, wie Sie mit Photoshop erstellen, sieht so aus:

Ergebnis mit Divis Designoptionen

Und nach der Integration in Divi können Sie beeindruckende Ergebnisse wie diese erzielen:

Bildergebnis mit Pinsel erstellt

Das zweite Bild, das wir erstellen werden, sieht so aus:

Ergebnis mit Divis Designoptionen

Und kann das folgende schöne Ergebnis liefern, wenn Sie es auf Ihrer Website verwenden:

So erstellen und verwenden Sie strukturierte Hintergründe mit den Designoptionen von Divi

Abonnieren Sie unseren Youtube-Kanal

Erstellen Sie strukturierten Hintergrund mit Photoshop

Mit Formen gemacht

Der erste strukturierte Hintergrund, den wir Ihnen zeigen, wie Sie ihn neu erstellen, enthält hauptsächlich Formen, die mit dem Polygonal Lasso-Werkzeug und dem Radiergummi-Werkzeug erstellt wurden. Wir führen Sie Schritt für Schritt, wie Sie das folgende Ergebnis erstellen:

Neue Datei

Öffnen Sie Photoshop und beginnen Sie mit dem Hinzufügen einer neuen Datei. Diese Datei benötigt eine Breite von 1920px und eine Höhe von 847px.

Hintergrundfarbe hinzufügen

Fügen Sie dann der soeben erstellten Datei eine Hintergrundfarbe hinzu. Stellen Sie sicher, dass Sie während des gesamten Vorgangs etwas dunklere Grautöne verwenden. Es ist wichtig, eine etwas dunklere Farbe zu verwenden, da sie Ihnen später in diesem Beitrag auch beim Hinzufügen von Divi-Designoptionen hilft. In diesem Beispiel haben wir '#626262' als Hintergrundfarbe verwendet und das Farbeimer-Werkzeug verwendet, um die Farbe der Ebene hinzuzufügen.

Ebene hinzufügen 2

Fahren Sie fort, indem Sie eine neue Ebene direkt über der ersten Ebene hinzufügen.

Fügen Sie die erste Form zu Ebene 2 hinzu

Wählen Sie dann das Polygonal Lasso-Werkzeug aus und beginnen Sie mit der Erstellung einer Form, während Sie Ebene 2 ausgewählt haben.

Wenn Sie fertig sind, wählen Sie das Farbeimerwerkzeug aus und verwenden Sie '#747474', um das ausgewählte Teil einzufärben.

Ebene hinzufügen 3

Fügen Sie dann eine weitere Ebene direkt über Ebene 2 hinzu.

Fügen Sie die zweite Formebene hinzu 3

Fahren Sie fort, indem Sie mit dem Polygonal Lasso-Werkzeug eine andere Form erstellen, wie die im Druckbildschirm unten.

Wählen Sie das Farbeimerwerkzeug aus und verwenden Sie diesmal '#6a6a6a'.

Bisher sollte Ihr Bild so aussehen:

Verwenden Sie das Radiergummi-Werkzeug auf Ebene 3

Wählen Sie das Radiergummi-Werkzeug aus, während Sie Ebene 3 ausgewählt haben.

Verwenden Sie das Radiergummi-Werkzeug zusammen mit einem Pinsel mit 0% Härte und einer Größe von 338px.

Fahren Sie dann fort und löschen Sie den Bereich, den Sie entfernen möchten. Wir haben bewusst nur einen kleinen Teil von Layer 3 belassen, wo Sie einen Übergang zwischen Layer 2 und Layer 3 sehen können.

Duplizieren, Transformieren, Drehen und Platzieren von Ebenen auf der gegenüberliegenden Seite

Nachdem wir nun die linke Seite erstellt haben, geht die andere Seite viel schneller. Wir möchten, dass es genau gleich ist, deshalb werden wir sowohl Layer 2 als auch Layer 3 auswählen. Dann werden wir die Layer duplizieren.

Nach dem Duplizieren werden sie in Ihrer Liste der Ebenen angezeigt.

Während beide duplizierten Ebenen ausgewählt sind, gehen Sie zu Bearbeiten> Transformieren> 180° drehen und ziehen Sie die Ebenen auf die andere Seite des Bildes.

Für das Web speichern

Es bleibt nur noch das Bild zu speichern. Klicken Sie dazu auf Datei > Exportieren > Für Web speichern .

Stellen Sie abschließend sicher, dass die Datei eine JPG- oder PNG-Datei ist, und speichern Sie sie.

Mit Pinseln hergestellt

Als Nächstes zeigen wir Ihnen, wie Sie mit Pinseln strukturierte Hintergründe erstellen. Der strukturierte Hintergrund, den wir Ihnen zeigen, wie Sie ihn neu erstellen, sieht in diesem Fall so aus:

Neue Datei

Beginnen Sie erneut, indem Sie ein neues Dokument mit einer Breite von 1920px und einer Höhe von 847px erstellen.

Hintergrundfarbe hinzufügen

Sobald dies erledigt ist, fügen Sie der ersten Ebene einen Hintergrund mit dem Farbcode '#8f8f8f' hinzu.

Suchen Sie online nach passendem Pinsel

Der nächste Schritt besteht darin, einen Pinsel zu finden, der dem Stil Ihres Heldenabschnitts entspricht. Es gibt viele kostenlose Photoshop-Pinsel, die atemberaubend und kostenlos sind. Sie können die in diesem Tutorial verwendete Version finden und herunterladen, indem Sie auf die folgende Seite gehen.

Pinsel hochladen

Suchen Sie die ABR-Datei auf Ihrem Computer und gehen Sie zu Photoshop, um die Pinsel zu laden. Wählen Sie Bearbeiten > Vorgaben > Vorgaben-Manager > Pinsel > Laden und wählen Sie die ABR-Datei aus, die Sie auf Ihrem Computer gespeichert haben.

Ebene hinzufügen 2

Wenn Sie fertig sind, fügen Sie eine weitere Ebene direkt über Ebene 1 hinzu.

Verwenden Sie den Pinsel mit der hellsten Farbe

Dann können Sie mit Ihrem Pinsel beginnen, den gewünschten strukturierten Hintergrund zu erstellen, indem Sie das Pinselwerkzeug auswählen.

Wählen Sie den gewünschten Pinsel mit einer Größe von 600px und verwenden Sie eine Deckkraft von 60%.

'

Die erste Farbe, die wir verwenden, ist '#a0a0a0'. Fahren Sie fort und erstellen Sie die erste Pinselebene auf Ihrem Bild.

Verwenden Sie denselben Pinsel mit einer dunkleren Farbe

Ersetzen Sie dann die vorherige Farbe durch '#ababab' und machen Sie dasselbe.

Verwenden Sie denselben Pinsel mit der dunkelsten Farbe

Schließlich müssen Sie die Farbe '#686868' verwenden, um Ihren strukturierten Hintergrund zu beenden.

Für das Web speichern

Nachdem Ihr strukturierter Hintergrund fertig ist, müssen Sie nur noch das Bild speichern. Wählen Sie dazu Datei > Exportieren > Für Web speichern .

Wählen Sie erneut aus, ob Sie Ihr Bild als JPG- oder PNG-Datei speichern möchten.

Texturierte Hintergründe zu Abschnitten hinzufügen

Strukturierter Hintergrund mit Formen

Sie können mit den Hintergrundeinstellungen von Divi herumspielen, um genau das gewünschte Ergebnis zu erzielen, sobald Sie die Bilder erstellt haben. Für den strukturierten Hintergrund mit Formen wählen wir einen radialen Verlaufstyp, um eine der Verlaufsfarben in der Mitte und die andere in Harmonie mit unserem Hintergrundbild zu haben.

Hintergrund mit Farbverlauf

Verwenden Sie den folgenden Verlaufshintergrund für Ihren Abschnitt:

• Erste Farbe: #474ab6
• Zweite Farbe: #9271f6
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 41%
• Endposition: 100%

Bildmischoptionen

Laden Sie dann das Bild hoch und verwenden Sie die folgenden Einstellungen:

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Strukturierter Hintergrund mit Pinseln

Der Verlaufshintergrund, den wir für den mit Pinseln erstellten strukturierten Hintergrund verwenden werden, ist linear. Wir machen einen subtilen Übergang, der die Farbe, die in Harmonie mit dem Hintergrundbild verwendet wird, immer noch leicht trennt.

Hintergrund mit Farbverlauf

Öffnen Sie die Abschnittseinstellungen und verwenden Sie die folgenden Einstellungen für die Unterkategorie Hintergrund:

• Erste Farbe: #474ab6
• Zweite Farbe: #9271f6
• Verlaufstyp: Linear
• Verlaufsrichtung: 270deg
• Startposition: 70%
• Endposition: 100%

Bildmischoptionen

Laden Sie dann das Hintergrundbild hoch und verwenden Sie die folgenden Einstellungen dazu:

• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Overlay

Ergebnis

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir noch einmal einen Blick auf das Endergebnis.

Bildergebnis mit Formen erstellt

Ergebnis mit Divis Designoptionen

Bildergebnis mit Pinsel erstellt

Ergebnis mit Divis Designoptionen

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie strukturierte Hintergründe verwenden können, um Ihre Website authentischer zu machen. Wir haben Ihnen gezeigt, wie Sie mit Photoshop zwei Arten von Texturen erstellen können, und haben Ihnen anschließend gezeigt, wie Sie sie zusammen mit den Designoptionen von Divi in ​​Ihren Abschnitten verwenden können. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von WEB-DESIGN / shutterstock.com