Anzeige
Tutorialbeschreibung

Klassische Party-Webseite mit Hintergrundeffekten erstellen

Klassische Party-Webseite mit Hintergrundeffekten erstellen

In diesem Video-Training erkläre ich, wie eine Partywebseite aus nur 3 Fotos erstellt werden kann. Vor allem wird hier ein toller Hintergrundeffekt erstellt, der sich auf nahezu allen Einsatzgebieten gut einfügt. Außerdem wird hier viel Wert auf eine ordentliche Struktur innerhalb der Ebenenhierarchie gelegt und viele Tipps und Tricks, die den Alltag des Webdesigners sicher erleichtern werden.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Schritt 1:

Zunächst lege ich ein neues Dokument an. Ich verwende dafür eine Breite von 1400 Pixel und eine Höhe von 900 Pixel. Mittlerweile gibt es auch sehr große Bildschirme und somit kann auch eine Breite von 2000 Pixel verwendet werden, wobei der Hauptinhalt eine maximale Breite von 980 Pixel haben sollte, da die meisten User immer noch mit 1024x768 surfen.

Bilder



 

Schritt 2:

Damit ein schnelles und übersichtliches Arbeiten überhaupt möglich ist, lege ich für jeden Bereich einen Gruppenordner an. Und damit das alles auch richtig schick ist, bekommt jeder Ordner eine andere Farbe. So lässt sich noch schneller rausbekommen, in welchem Bereich ich gerade arbeite. Trick: Um schnell die Farbe einer Gruppe zu ändern, kann ich mit der rechten Maustaste auf das Auge im Ebenenbedienfeld klicken und dann die Farbe schnell auswählen. So spare ich mir den Weg über die rechte Maustaste auf den Gruppenordner>Gruppeneigenschaften und dann Farbe wählen. Ich habe jetzt insgesamt 4 Ordner angelegt: Header (alles, was sich oben im Kopfbereich der Webseite abspielt), Navigation (alles, was sich in meinem Fall links in der Navigation abspielt), Content (Hauptbereich für die Texte) und Footer (für die Adresse und Kontaktdaten).

Bilder



 

Schritt 3:

Jetzt öffne ich erst einmal alle meine Fotos, die ich in mein Weblayout einbauen möchte. Damit ich diese schnell in mein Dokument eingefügt bekomme, klicke ich in dem Ebenenbedienfeld mit der rechten Maustaste auf meine Hintergrundebene>Ebene duplizieren und wähle als Ziel-Dokument meine Webseitenlayout.psd aus.

Bilder



 

Schritt 4:

Ich habe jetzt alle drei Bilder in mein Weblayout eingebaut. Jetzt verschiebe ich die Bilder in den richtigen Gruppenordner. Und damit ich die Bilder auch jederzeit ohne Qualitätsverlust hin und herskalieren kann, wandle ich diese in Smart-Objekte um (rechte Maustaste auf den Ebenennamen).

Bilder



 

Schritt 5:

Durch einen Doppelklick auf das Smart-Objekt habe ich die Möglichkeit, das Bild z. B. freizustellen. Das geht in diesem Fall mit dem Schnellauswahl-Werkzeug ganz gut. Wenn alles gut ausgewählt ist, klicke ich oben im Steuerungsbedienfeld auf Kante verbessern.

Bilder



 

Schritt 6:

Durch das neue Radius-verbessern-Werkzeug kann ich jetzt die Haare noch besser freistellen. Dazu pinsle ich ganz grob in den Haarenden und schon sind diese gut bis sehr gut freigestellt.

Bilder



 

Schritt 7:

Sobald ich auf OK im Kante-verbessern-Fenster klicke, habe ich eine Auswahl. Diese kann ich schnell in eine Maske umwandeln, indem ich auf das Masken-Symbol im Ebenenbedienfeld klicke. Sollte genau der falsche Teil ausgeblendet sein, kann ich mit Strg+I in der Maske die Maske umkehren:

Bilder



 

Schritt 8:

Die Hintergrundebene habe ich jetzt schwarz umgefärbt und die Frau gespiegelt und etwas kleiner transformiert. Damit ich jetzt weiß, wo der Hauptinhalt in einer Größe von 980 Pixel erstellt werden muss, gibt es folgenden Trick: Ich lege zunächst eine Hilfslinie genau in der Mitte an (rastet automatisch in der Mitte ein). Jetzt erstelle ich eine Auswahl mit Fester Größe und klicke mit gedrückter Alt-Taste genau auf die Hilfslinie. Jetzt wird meine Auswahl genau von diesem Punkt aus mittig erstellt.

Bilder



 

Schritt 9:

Jetzt kann ich an den beiden Enden meiner Auswahl eine Hilfslinie erstellen und weiß dann genau, wo ich meinen Hauptcontent habe. Toll, oder?

Bilder



 

Schritt 10:

Als Nächstes stelle ich die Discokugel frei. Dies ist sehr einfach, weil die ja nur einen weißen Hintergrund hat: Auswahl mit dem Zauberstab und dann Maske erstellen. Dann drehe ich die Kugel ein wenig und füge noch einen Schein nach außen ein.

Bilder



 

Schritt 11:

Damit meine Webseite auch einen schönen Hintergrund bekommt, erstelle ich einen coolen Kugeleffekt. Das geht wie folgt: Ich erstelle zunächst ein neues Dokument in einer relativ großen Breite und füge auf der Hintergrundebene einen schönen, eher dunkleren Farbverlauf ein:

Bilder



 

Schritt 12:

Jetzt erstelle ich eine schwarze Ebene und danach eine neue Ebene, auf der ich mit dem Ellipse-Werkzeug mit der Option Formebene diverse Kreise erstelle (mit gedrückter Shift-Taste). Die Ebene stelle ich auf Dunklere Farbe als Füllmethode um.

Bilder



 

Schritt 13:

Ich klicke jetzt mit der rechten Maustaste auf die Form-Ebene und gehe dann auf Fülloptionen und stelle bei Ausparung auf Leicht um. Dies sorgt dafür, dass die Kugeln bis zur Hintergrundebene ein "Loch" aufschneiden und so die Hintergrundebene an dieser Stelle sichtbar wird.

Bilder



 

Schritt 14:

Das Ergebnis sieht bisher wie folgt aus:

Bilder



 

Schritt 15:

Damit die Aussparung weicher rüberkommt, kann ich der Maske eine Weiche Kante geben. Ich stelle dafür 25 Px ein.

Bilder



 

Schritt 16:

Ich erstelle jetzt wieder eine neue Ebene und mache das Gleiche wie vorher, nur diesmal setze ich die Füllmethode auf Weiches Licht und die Deckkraft auf 80%.

Bilder



 

Schritt 17:

Um den Effekt noch zu verbessern, füge ich eine Kontur mit folgenden Einstellungen ein:

Bilder



 

Schritt 18:

Jetzt erstelle ich wieder eine Ebene, und die Deckkraft setze ich auf 60%:

Bilder



 

Schritt 19:

Damit ich den Effekt weiter verstärke, habe ich alles ausgewählt und mit Strg+Shift+C alles kopiert und als neue Ebene mit der Füllmethode Linear abwedeln hinzugefügt, die Deckkraft dabei ein wenig reduziert und dann nochmal das Gleiche und die Ebene ein wenig verschoben. Sieht doch cool aus, oder?

Bilder



 

Schritt 20:

Das Ergebnis füge ich dann als neue Ebene in mein Weblayout ein. Mit einer Maske kann ich unsaubere Stellen entfernen:

Bilder



 

Schritt 21:

Als Nächstes benötige ich eine schöne Schriftart für meine Überschrift. Ich entscheide mich für Dolly Dots von der Webseite www.dafont.com.

Bilder



 

Schritt 22:

Dieser Schriftart gebe ich dann noch einen Verlauf, und schon ist meine Überschrift fertig:

Bilder



 

Schritt 23:

Jetzt noch eine Unterüberschrift einfügen. Dieser verpasse ich eine pinke Farbe. Teilweise kann es sein, dass die Kugeln im Hintergrund die Schrift unlesbar machen. Darum maskiere ich sie an dieser Stelle einfach weg.

Bilder



 

Schritt 24:

Die Frau werde ich noch schnell von den Farben anpassen, damit das Diskolicht an ihr besser wirkt und die Farben des Kleides knalliger sind. Dazu erstelle ich ein paar Einstellungsebenen und maskiere die Bereiche, die ich ändern möchte. Mit einer 50% Grau-Ebene im Modus Weiches Licht oder Ineinanderkopieren kann ich mit dem Pinsel Stellen aufhellen oder abdunkeln (Ebene 1). Siehe diesen Workshop.

Bilder



 

Schritt 25:

Wenn das geschafft ist, geht es zur Navigation. Darin erstelle ich schon mal den ersten Navipunkt und darunter einen Trenner. Diesen kann ich mit dem Linienzeichner bei einer Größe von 1 Px erstellen. Darauf lege ich einen Verlauf (wichtig die Richtgung, sonst wird nichts angezeigt):

Bilder



 

Schritt 26:

So, die Navigation gefällt mir schon sehr gut:

Bilder



 

Schritt 27:

Jetzt möchte ich als aktiven Punkt noch eine Frau davor stellen, die möglichst so aussieht, als ob sie tanzt. Dazu gehe ich wieder auf www.dafont.com und gebe als Suchbegriff Woman ein.

Bilder



 

Schritt 28:

Dieser Frau gebe ich noch einen Schein nach außen.

Bilder



 

Schritt 29:

Jetzt stelle ich die Boxen frei und werde mit diversen Einstellungsebenen auch dort das Licht ändern. Danach erstelle ich eine Überschrift für den Inhaltsbereich:

Bilder



 

Schritt 30:

Jetzt noch schnell wieder einen Trenner einfügen (nur diesmal mit pinkem Farbverlauf). Damit ich schnell Text für die Webseite einfügen kann, gehe ich auf www.loremipsum.de und füge dann den Text bei mir ein.

Bilder



 

Schritt 31:

Als Nächstes geht es dem Footer an den Kragen: Ich erstelle eine Textbox und füge dort die Anschrift der Firma ein. Als Textfarbe für den Firmennamen wähle ich Grün und für die weiteren Adresszeilen Grau.

Bilder



 

Schritt 32:

Damit es unten links nicht so kahl aussieht, werde ich die Kugeln von oben duplizieren und dort unten mit etwas weniger Deckkraft gespiegelt einfügen.

Bilder



 

Schritt 33:

Unten im Footer erstelle ich auch noch einen Trenner, nur diesmal mit einem Schwarz-Weiß-Verlauf. Bei der Frau habe ich noch eine Maske mit einem weichen Pinsel erstellt , damit der untere Teil nicht so abgehackt ist.

Bilder



 

Schritt 34:

So, und schon ist es geschafft, das Layout ist in Photoshop fertig erstellt. Ich bin sehr zufrieden.

Bilder


Bildquelle fotolia.com: Dancing girl © Ivan Bliznetsov, Discokugel © Clara Dinand, Sound Speaker on white background © Kushch Dmitry

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von premium
  • 04.02.2015 - 12:07

SUPER! Danke schön!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.02.2013 - 11:02

Super Tutorial ;) Vielen Dank

Portrait von holydevil72
  • 13.09.2012 - 19:18

Super tutorial. Aber wie bekomme ich jetzt das ganze in Dreamweaver und gestalte ein voll funktionsfähige Webseite. Gibts vielleicht irgendwann einen zweiten Teil?

Portrait von BullWaih
  • 10.08.2012 - 23:10

supi tutorial, vielen dank dafür.
Wenn jetzt noch Teil 2 für Dreamweaver kommen würde wäre das ganze perfekt.

Portrait von Retro
  • 08.08.2012 - 12:28

Super Tutorial :) suche schon die ganze Zeit danach! Klasse

Portrait von old2young
  • 08.06.2012 - 16:57

Vielen Dank, das TUT hat mir gut geholfen!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.05.2012 - 10:35

geil! das sieht gut aus

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.05.2012 - 10:35

geil! das sieht gut aus

Portrait von panikprinzl
  • 05.12.2011 - 17:22

sehr schön erklärt, vor allem der hintergrund ist toll!

Portrait von DaKleene
  • 15.04.2011 - 16:34

super Tutorial... sehr gut erklärt. danke

Portrait von addiderdealer
  • 16.03.2011 - 13:28

Hamma Tutorial!
Jetzt hab ich einiges dazu gelernt :P

Portrait von lexxt
  • 19.02.2011 - 20:19

klasse erklärt - einfach umzusetzen - Danke!

Portrait von thenoegt
  • 14.02.2011 - 04:19

Sehr schönes Tut! Kann ich gut einsetzen.

Portrait von Dagobert1980
Portrait von apo_84
  • 21.01.2011 - 17:25

Gut erklärt, vielen Dank!

Portrait von Dennis3107
  • 05.12.2010 - 10:15

Danke für Dein Tut, hat sehr geholfen, mach weiter so...super erklärt

Portrait von ajax22
  • 01.07.2010 - 07:47

Sehr gutes Video Tutorial. Super nachzuvollziehen.
Bin gespannt, ob es eine Fortsetzung gibt, bis die Webseite einsatzfähig ist.

Portrait von berndschwartz
  • 29.06.2010 - 21:55

Super....prima erklärt, toller Workshop

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.05.2010 - 13:23

Ich habe mir dein Tutorial angesehen und jede Sekunde genosse. Sehr einfach und klug erklärt und zudem einige nette Tipps für Anfänger. Ich kann dieses Tutorial jedem weiter empfehlen!

Portrait von latino74
  • 28.05.2010 - 22:02

Sher gut erklärt, super!

x
×
×