7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Interface Design

Mischen und passen Sie ein Layout mit Mustern, Fotos und Hintergründen an

Scroll to top
Read Time: 11 mins

German (Deutsch) translation by Valentina (you can also view the original English article)

Es ist ziemlich erstaunlich, wie viel Farbe und Hintergrund das Erscheinungsbild einer Website verändern können. In diesem Tutorial erstellen wir ein schnelles, einfaches aber effektives Layout und erstellen dann Variationen mit Hintergründen, Fotos und Mustern. Wir werden auch untersuchen, wie Sie nahtlos gekachelte Hintergründe aus einem Foto erstellen, Methoden zum Beenden eines einzelnen Fotos und einfache Möglichkeiten zum Erstellen von Pixelmustern. Kurz gesagt, es ist ein vollgepacktes Tutorial!

Dieser Beitrag ist Tag 1 unserer Webdesign-Sitzung. Kreativsitzungen

Schritt 1 - Erstellen des Basislayouts

Deshalb ist es unsere erste Aufgabe, ein Layout für unsere Seite zu entwerfen. Wir werden nichts Außergewöhnliches tun, denn das Tutorial beschäftigt sich mehr mit Hintergründen als mit Layouts. Trotzdem sollte es gut aussehen und ein realistisches Layout sein. Im obigen Bild sehen Sie also meinen Plan der groben Bestandteile der Seite. Ich habe in einem Menü und Untermenü ein Panel geplant, um den Abschnitt und einen Inhaltsbereich einzuführen. Ich habe auch geplant, dass es weniger als 1000px sein sollte, sodass eine Person, die auf einem kleinen Bildschirm die Seite betrachtet, immer noch den Hintergrund richtig sieht (da dies ein großer Aspekt des Designs sein wird).

Jetzt sollte ich in Wirklichkeit darauf hinweisen, dass ich diesen Satz Boxen nicht wirklich so gezeichnet habe. Es war eher so, als würde ich einfach nur herumtollen, bis ich dachte "Oh, das ist ein schönes Layout". Aber für dieses Tutorial ist es sinnvoller, es so zu erklären!


Schritt 2 - Ausarbeiten

Das Layout ist also unsere Knochen, jetzt müssen wir es mit Dummy-Inhalten und einem Farbschema ausarbeiten.

Wie Sie sehen, habe ich hier nichts wirklich Erstaunliches getan, sondern die Elemente auf der Seite ordentlich und gleichmäßig platziert. Beachten Sie also diesen Abstand. In dem Bild habe ich versucht zu zeigen, wie sich verschiedene Elemente aneinander reihen (gelbe Linien), wie der Abstand ungefähr vertikal und horizontal sowie über und unter Elementen ist.

Beachten Sie, dass dies nur grobe Anhaltspunkte sind und ich arbeite eigentlich nur mit dem Auge, bis die Dinge richtig aussehen. Wenn Sie sich jedoch nicht sicher sind, ob Sie etwas Abstand haben, ist es kein schlechter Anfang. Wenn Sie sich mit Abständen wohler fühlen, können Sie die Dinge variieren und mit ungleichmäßigen Gleichgewichten spielen.

In der Abbildung oben können Sie sehen, dass ich eine Hauptanzeigeschriftart namens Rockwell ausgewählt habe, die wir im Überschriftenfeld verwenden, um der Seite etwas Charakter zu verleihen. Wenn ich diese Site baue, könnte dies ein Bild sein oder mit sIFR eingefügt werden. Der Rest des Textes ist Helvetica und Arial, was natürlich für die Verwendung von HTML geeignet ist. Ich habe auch eine Vektorillustration eines Papierflugzeugs eingeworfen, das ich vor Jahren gezeichnet und als Lager verkauft habe. In einem realen Projekt würde dieses Image natürlich etwas mit der Website zu tun haben, anstatt nur zufällig in das hier geworfen zu werden.

Schließlich habe ich eine warme Farbpalette mit erdigen Tönen verwendet. Ich bin eigentlich ein Fan von Beige- und Erdfarben, und Sie werden feststellen, dass ich sie häufig benutze. Ich denke, dass sie viel dazu beitragen, dass Websites freundlicher und zugänglicher erscheinen.

Die Seite sieht also gut aus, ist aber noch nicht sehr einprägsam und etwas grundlegend. Im nächsten Schritt werden wir etwas polieren.


Schritt 3 - Polieren und Stil hinzufügen

OK, hier kann man genau das gleiche Layout sehen, aber ich habe es aufpoliert und zwei visuelle Elemente hinzugefügt, um ihm Stil zu verleihen. Das erste Element ist der aus dem Seitenmenü ausgeschnittene Pfeil. Dadurch erscheint das mittlere Panel als eine Art überwachsene Sprechblase. Das zweite Bild, das Sie sehen, wenn Sie aus der Nähe betrachten, ist eine Art Punktthema.

Wir haben also insgesamt drei visuelle Elemente verwendet, um der Seite einen Stil zu verleihen: eine Illustration, eine interessante gitterbrechende Form und ein subtiles Thema, das auf einer einfachen Form basiert. Später fügen wir ein viertes visuelles Element hinzu - einen Hintergrund -, um den Stil der Site zu beenden.

In dem Bild oben habe ich auf alle Polierpunkte hingewiesen, die ich hinzugefügt habe. Es sind nur kleine Highlights und Abstufungen in Farbe, Punkten und natürlich der ausgeschnittene Pfeil. Sie könnten auch an einem vorherigen Artikel interessiert sein, den ich vor einem Jahr über das Polieren der Webdesigns hier auf Psdtuts+ geschrieben habe.

Vorher und nachher anzeigen

Damit haben wir unser Grundlayout!


Schritt 4 - Hinzufügen eines gekachelten Hintergrunds

Der erste Hintergrund, den wir eintauschen werden, ist ein gekacheltes Bild. In diesem Fall verwenden wir ein Grasfoto, das ich für dieses Grass-Text-Tutorial verwendet habe (eine Serie, die ich noch nicht fertig stellen muss :-). Sie können das ursprüngliche Grasfoto auf Flickr erhalten.

Wenn Sie versuchen, das Originalfoto zu kacheln, wird es natürlich nicht sehr gut aussehen, und es ist offensichtlich, dass Sie immer dasselbe Bild immer wieder wiederholen. Stattdessen müssen Sie das Bild so ändern, dass es nahtlos kachelt. Zum Glück habe ich gerade ein Tutorial zu diesem Thema gemacht, also überlesen und lesen:

Wie verwandelt sich eine Textur in einen nahtlos gekachelten Hintergrund?

Neben der Änderung des Hintergrunds habe ich natürlich die Farbgebung an das neue Aussehen angepasst. Beachten Sie, dass ich den gleichen hellen, hellgrünen Farbton wie das Gras nicht verwendet habe. Andernfalls wäre dies zu stark.Stattdessen werden dunkle und hellere Farbtöne dunklerer Grüntöne ausgewählt, die den Hintergrund ergänzen.


Schritt 5 - Transparenz mit dem Hintergrund mischen

Hintergründe wie diese sind jetzt perfekt für das Hinzufügen von transparenten Ebenen. Hier haben sowohl das Info-Bedienfeld als auch das Menü etwas Transparenz und es sieht toll aus, weil Sie sehen können, wie etwas Gras durchkommt und dadurch etwas mehr Tiefe erhält. Sie können zwar einfach die Opazität der entsprechenden Ebene dimmen, eine weitere Option besteht jedoch darin, ein paar weitere Ebenen hinzuzufügen - eine mit einem leichten Verlauf, der zu nichts übergeht, und die andere mit einem 1px-Lichtfleck.

Im obigen Bild sehen Sie zum Beispiel im Menü, dass ich einen Weißblock auf 70% Opazität gesetzt habe, darüber hinaus gibt es einen Farbverlauf von Weiß zu Nichts und darüber befindet sich eine weiße Linie auf der linken Seite Unterkante. Diese zusätzlichen Ebenen betonen die Transparenz und geben die Bildtiefe an.


Schritt 6 - Erstellen eines schnellen HTML-transparenten PNG-Tests

All diese Transparenz ist in Photoshop einfach zu bewerkstelligen, aber Sie fragen sich vielleicht, wie realisierbar ein solches Design ist.

Glücklicherweise ist dies dank des Dateiformats .PNG möglich, mit dem Sie Transparenz in Ihren Bildern verwenden können. Beachten Sie jedoch, dass Sie zwar Transparenz (z. B. 60% Deckkraft) ausführen können, jedoch keine Ebenenüberblendungsmodi (z. B. Multiplizieren oder Überlagern). Da es in einem Photoshop-Design wichtig ist, nichts zu tun, was nicht wirklich baubar ist, habe ich nur die Opazitäteinstellungen verwendet. Es ist eher einschränkend, aber Sie können trotzdem schöne Effekte erzielen.

Lassen Sie uns einen schnellen HTML-Test erstellen, um sicherzustellen, dass alles so funktioniert, wie wir es uns vorstellen. Um ein transparentes PNG zu erstellen, werden zuerst die Ebenen für unsere große Tafelform in einer zusammengefügt. Da alle Ebenen über eine gewisse Transparenz verfügen, ist das Endergebnis nach dem Zusammenführen ebenfalls halbtransparent.

Kopieren Sie das einfach in ein neues Photoshop-Dokument, schalten Sie dann die Hintergrundebene aus (sehen Sie Abbildung oben) und Sie sollten die Transparenz durchschauen.

Gehen Sie nun zu Datei > Für Web und Geräte speichern und wählen Sie PNG-24 aus den Optionen. Sie sollten dieselbe Transparenz im Vorschaufenster sehen.

Als Nächstes mache ich dasselbe für einige weitere Bildelemente, weil wir in unserem Test zeigen möchten, dass es möglich ist, ein transparentes PNG auf einem transparenten PNG auf einem Hintergrund zu platzieren.

Bei all unseren erstellten Bildern müssen Sie jetzt nur noch HTML zusammenstellen:

Alles, was wir hier tun, ist das Hintergrundbild als gekacheltes JPG festzulegen. Platzieren Sie dann <div> einzentriert auf der Seite, wobei das Hintergrundbild als erstes transparentes PNG angezeigt wird. In diesem <div> haben wir die zweite transparente PNG-Datei.

Zeigen Sie den Transparenztest an

Das beweist, dass dieses Design gebaut werden kann. Eigentlich müssten Sie einige Korrekturen vornehmen, damit es in IE6 funktioniert. Eine Google-Suche enthüllt viele Artikel zu diesem Thema. Da dies jedoch Psdtuts + und nicht NETTUTS ist, beenden wir es hier :-)


Schritt 7 - Andere Variante

Was mit einem harten Texturhintergrund wie Gras leicht zu tun ist, ist mit einfacheren Texturen wie dieser Papierstruktur von Bittbox noch einfacher. Da das Quellbild besser ist, können Sie viel größere Kacheln für den Hintergrund erstellen, bei denen es weniger wahrscheinlich ist, dass Sie wiederholt aussehen.


Schritt 8 - Pixelmuster

Eine weitere Option für Hintergründe sind einfache Pixelmuster, die bei Wiederholung einem Hintergrund etwas Textur verleihen. Das in dieser Layoutvariante gezeigte Muster ist das, das ich bei Creattica Daily verwendet habe.

Sie können Muster so einfach erstellen. Um diesen Effekt zu erzielen, erstellen Sie einfach ein neues Bild mit einer Breite von 4 x 5 Pixeln und vergrößern Sie es so weit wie möglich. Ziehen Sie dann die folgenden Pixel ein:

Drücken Sie dann CTRL-A, um alles auszuwählen und wählen Sie Bearbeiten > Muster definieren. Geben Sie ihm einen Namen. Dann können Sie das Muster mit einer Musterüberlagerung über die Fülloptionen einer Ebene anwenden. Zurück in der PSD-Hauptdatei klicken Sie mit der rechten Maustaste auf die Ebene, der Sie das Muster hinzufügen möchten, und wählen Sie dann Mischoptionen und dann Musterüberlagerung. In der Abbildung oben habe ich das Muster auf einen dunkelgrauen Hintergrund auf Multiplizieren gesetzt.

Es macht wirklich Spaß, mit diesen Arten von Pixelmustern zu spielen. Die pixelliebenden Leute von K10K verfügen über eine Bibliothek mit Pixelmustern, die Sie auch für weitaus fortschrittlichere Designs nutzen können


Schritt 9 - Große Hintergrundfotos

Die letzte Variante, die wir uns ansehen, ist die Verwendung eines einzelnen Fotos. Hier verwende ich ein schönes Foto von West Bay Cliffs von Cristiano Betta, das ich auf Flickr gefunden habe:

Es ist ein schönes, breites Foto, das für eine schöne Farbgebung sorgt. Hier sind ein paar schnelle Schritte, die ich unternommen habe, um das Bild zu platzieren.

Hier sitzt es einfach im Hintergrund unseres Designs. Mit etwas Transparenz sieht es schon recht ordentlich aus, aber was ist oben links los?

Wenn Sie das Foto um 50 Pixel nach oben verschieben, werden die seltsam verfärbten Teile von der Seite entfernt. Das nächste Problem ist, dass wir keinen endlosen Fotohintergrund haben können, sodass wir ihn in eine Farbe einblenden.

Wenn wir eine dunklere Farbe aus dem Meer auswählen, erstellen wir eine neue Ebene und zeichnen einen Farbverlauf, der von der Farbe zu Transparent übergeht.Dieser sitzt schön über dem Meereshintergrund und mischt ihn aus.

Nun sieht der Hintergrund tatsächlich etwas flach aus, daher wäre es schön, die Farben etwas aufzuhellen. Dazu überlagern wir das Foto mit einem Farbverlauf, der mit dem Bild übereinstimmt.

In dem Bild oben können Sie sehen, dass ich mit den Purpur- und Orangentönen des Originalbilds einen Verlauf gezeichnet habe.

Wenn Sie die Farbverlaufsebene auf Überlagern (Overlay) und 70% setzen, wird der Sonnenuntergang wirklich heller und der Hintergrund wird lebendiger.

Das nächste Problem ist nun, dass wir das Foto an den Seiten abblenden müssen. Das wird schwierig, weil wir auf der einen Seite einen Berg haben und auf der anderen nur Himmel. Daher ist es wahrscheinlich die beste Lösung, sich in die dunklen Farben zu mischen. Für die meisten Menschen wird dies nicht angezeigt. Es ist nur für alle, die einen riesigen Bildschirm verwenden und ihre Browser direkt öffnen.

Das erste, was wir tun werden, ist, eine vertikale 1px-Auswahl von jedem äußersten Rand des Bildes zu treffen und CTRL-T zu drücken, um es zu transformieren. Der Grund, warum wir dies tun, ist so, dass, wenn irgendein Hintergrund durch die Farbe angezeigt wird, ich gerade hinzufügen werde, dass er nicht sonderbar aussieht.

Als Nächstes fügen wir eine neue Ebene hinzu und zeichnen im Hintergrund eine riesige Ellipse. Drücken Sie CTRL-SHIFT-I, um die Auswahl umzukehren und sie mit der gleichen dunklen Farbe zu füllen, die Sie zuvor verwendet haben.

Jetzt deaktivieren wir die Ebene und gehen zu Filter > Weichzeichnen > Gaußsche Weichzeichnung (Filter > Blur > Gaussian Blur), um die Farbe mit einem Radius von 80 Pixel zu verwischen. Dann duplizieren Sie diese Ebene und verwischen Sie sie erneut mit einem Radius von 120px, dann ein drittes Mal mit einem Radius von 160px. Das sollte eine schöne weiche Staffelung ergeben.

Unser endgültiges Design mit Fotohintergrund für die meisten Menschen wird daher wie das oben abgebildete Bild aussehen. Aber wir können sicher sein, dass selbst ein großes Browserfenster nichts Dummes aufdeckt.

Weitere Informationen zu großen Hintergrundbildern

Weitere Informationen zum Entwerfen mit großen Hintergrundbildern finden Sie in den folgenden drei großartigen Artikeln:

  1. Große Website-Hintergründe "Do's and Don’ts @ WebDesignerDepot
  2. Gewusst wie: CSS Large Background Image @ WebDesignerWall
  3. 80 Große Hintergrundbild-Websites @ WebDesignerWall

Zusammenfassung

Wie Sie sehen, haben wir mit unserem einfachen Layout eine Menge Kilometer zurückgelegt und hoffentlich haben Sie auf dem Weg etwas Nützliches aus dem Prozess herausgeholt!

Dieser Beitrag ist Tag 1 unserer Webdesign-Sitzung. Kreativsitzungen
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.