Share
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 aus 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. Creative Sessions Session Day 2 "
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 zur Einführung des Abschnitts und einen Inhaltsbereich geplant. Ich habe auch geplant, dass es weniger als 1000px sein sollte, sodass eine Person, die auf einem kleinen Bildschirm die Website betrachtet, den Hintergrund immer noch richtig sieht (da dies ein großer Aspekt des Designs sein wird).
Jetzt sollte ich in der Realität darauf hinweisen, dass ich diesen Satz von 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". Für dieses Tutorial ist es jedoch sinnvoller, es auf diese Weise zu erklären!
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.
Im Bild 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 geben. 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 in HTML geeignet ist. Ich habe auch eine Vektorillustration eines Papierflugzeugs eingeworfen, das ich vor Jahren gezeichnet und als Vorrat 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, erdige Farbpalette verwendet. Ich bin eigentlich ein kleiner Fan von Beige- und Erdfarben, und ich werde sie oft verwenden. Ich denke, dass sie einen großen Beitrag dazu leisten, 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 noch etwas polieren.
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.
Insgesamt haben wir drei visuelle Elemente verwendet, um der Seite einen Stil zu verleihen: eine Illustration, eine interessante rasterbrechende 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 alles 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 von Webdesigns hier auf Psdtuts geschrieben habe+.
Damit haben wir unser grundlegendes Layout!
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 :-). Das ursprüngliche Grasfoto kann bei Flickr heruntergeladen werden.
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 und immer 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:
Neben der Änderung des Hintergrunds habe ich natürlich die Farbgebung an den neuen Look angepasst. Beachten Sie, dass ich es vermieden habe, die gleiche helle, hellgrüne Farbe wie das Gras zu verwenden. Andernfalls wäre dies zu stark. Stattdessen werden dunkle und hellere Farbtöne dunklerer Grüntöne verwendet, um den Hintergrund zu ergänzen.
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 die Deckkraft der entsprechenden Ebene einfach dimmen, eine weitere Option besteht jedoch darin, ein paar weitere Ebenen hinzuzufügen.
Im obigen Bild sehen Sie zum Beispiel im Menü, dass ich einen Weißblock auf 70% Deckkraft gesetzt habe, darüber hinaus gibt es einen Farbverlauf von Weiß zu Nichts und darüber eine 1px weiße Linie auf dem Bildschirm Unterkante. Diese zusätzlichen Ebenen betonen die Transparenz und geben die Bildtiefe an.
Die gesamte Transparenz ist in Photoshop also leicht 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-Mischmodi (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 Deckkrafteinstellungen verwendet. Es ist eher einschränkend, aber Sie können trotzdem schöne Effekte erzielen.
Lassen Sie uns also einen schnellen HTML-Test erstellen, um sicherzustellen, dass alles so funktioniert, wie wir es uns vorstellen. Um ein transparentes PNG zu erstellen, fügen wir zunächst die Ebenen für unsere große Tafelform in einer zusammen. Da alle Ebenen über eine gewisse Transparenz verfügen, ist das Endergebnis nach dem Zusammenführen auch halbtransparent.
Kopieren Sie das einfach in ein neues Photoshop-Dokument, schalten Sie dann die Hintergrundebene aus (siehe Abbildung oben) und Sie sollten die Transparenz durchschauen.
Gehen Sie jetzt zu Datei> Speichern für Web und Geräte 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:
Hintergrund- / Transparenztest
Alles, was wir hier tun, ist das Hintergrundbild als gekacheltes JPG festzulegen. Dann platzieren Sie eine
Das beweist, dass dieses Design gebaut werden kann. Eigentlich müssten Sie einige Korrekturen vornehmen, damit es in IE6 funktioniert Die Google-Suche enthüllt viele Artikel zu diesem Thema. Da dies jedoch Psdtuts + und nicht NETTUTS ist, beenden wir es hier einfach :-)
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.
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 solche Muster sehr 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:
Dann drücken STRG-A um alles auszuwählen und zu gehen Bearbeiten> Muster definieren, geben Sie ihm einen Namen, dann können Sie das Muster mit einem Musterüberlagerung durch die Fülloptionen einer Ebene. Klicken Sie also in Ihrer PSD-Hauptdatei mit der rechten Maustaste auf die Ebene, der Sie das Muster hinzufügen möchten, und wählen Sie dann aus Fülloptionen dann wähle Musterüberlagerung. Im Bild oben habe ich das Muster auf gesetzt Multiplizieren auf einen dunkelgrauen Hintergrund.
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.
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, um das Bild zu platzieren.
Hier sitzt es einfach im Hintergrund unseres Designs. Mit etwas Transparenz sieht es schon recht ordentlich aus, aber was oben links passiert?
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.
Im Bild oben können Sie sehen, dass ich einen Farbverlauf mit den Purpur- und Orangentönen des Originalbilds gezeichnet habe.
Einstellen der Gradientenebene auf Überlagerung und 70% hellt den Sonnenuntergang wirklich auf und lässt ihn lebendiger wirken.
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 Auswahl von 1 Pixel von jedem äußersten Rand des Bildes zu treffen und zu schlagen STRG-T es umzuwandeln. Der Grund, warum wir dies tun, ist so, dass, wenn ein 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 STRG-UMSCHALT-I Um die Auswahl umzukehren und sie mit der gleichen dunklen Farbe zu füllen, die wir zuvor verwendet haben.
Jetzt deaktivieren wir die Ebene und gehen zu Filter> Unschärfe> Gaußsche Unschärfe Um unsere Farbe zu verwischen, verwenden Sie einen Radius von 80px. Dann duplizieren Sie diese Ebene und verwischen Sie sie erneut mit einem Radius von 120px, dann ein drittes Mal mit einem Radius von 160px. Dies sollte einen schönen weichen Abschluss 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 riesiges Browserfenster nichts Dummes aufdeckt.
Weitere Informationen zum Entwerfen mit großen Hintergrundbildern finden Sie in den folgenden drei großartigen Artikeln:
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. Creative Sessions Session Day 2 "
Accentsconagua
