Anzeige
Tutorialbeschreibung

Die kreative Hochzeitswebsite - für Hochzeitspaare, -fotografen oder -planer

Die kreative Hochzeitswebsite - für Hochzeitspaare, -fotografen oder -planer

In diesem Video-Training wird erklärt, wie eine Webseite für ein Hochzeitspaar erstellt wird. Dabei wird gezeigt, wie das Layout an gute Bilder kommt und diese entsprechend einfach freigestellt werden. Das Eyecatcherbild im Hintergrund ist ein aufwendiges Composing. Außer für Hochzeitspaare eignet sich das Design idealerweise für Hochzeitsplaner und Hochzeitsfotografen, die ihre Leistungen auf der Website vorstellen und sich von Mitbewerbern auf kreative Weise abgrenzen wollen.

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


Schritt 1:

Ich erstelle ein neues Dokument in der Größe 1280 x 970 Pixel.

Bilder



 

Schritt 2:

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 3:

Im Ebenenbedienfeld lege ich diverse Ordner an, damit alles auch seine Ordnung hat, wenn ich meine zahlreichen Ebenen erstelle. Die Hintergrundebene färbe ich in Grau um. Durch einen Klick mit der rechten Maustaste auf das Auge vor jedem Ordner kann ich die Farbe innerhalb der Ordner definieren, damit die Übersichtlichkeit weiter erhöht wird.

Bilder



 

Schritt 4:

Als Nächstes erstelle ich mit dem Abgerundeten Rechteckwerkzeug eine Form-Ebene mit einem Radius von 15 Px. Die Deckkraft reduziere ich auf 80%.

Bilder



 

Schritt 5:

Mit dem Ankerpunkt-hinzufügen-Werkzeug füge ich einen Punkt genau in der Mitte der Fläche ein. Um die Mitte schnell herauszubekommen, erstelle ich einfach eine Auswahl von der Form und transformiere dann die Auswahl um 50% (rechte Maustaste>Auswahl transformieren und dann in der Optionsleiste ganz oben bei Breite und Höhe 50% eingeben). Diesen Punkt hebe ich dann leicht nach oben.

Bilder



 

Schritt 6:

Jetzt dupliziere ich die Fläche und transformiere sie leicht größer (105%). Die Deckkraft stelle ich auf 40%.

Bilder



 

Schritt 7:

Für die Navigation soll etwas richtig Tolles her. Ich wollte eigentlich faul sein und mir diese direkt aus Fotolia kaufen, die es sogar als Vektor-Datei gibt:

Bilder



 

Schritt 8:

Aber eigentlich kann ich in Photoshop diese Navigation auch schnell selber bauen. Dazu nehme ich das Rechteck-Werkzeug und erstelle eine Form-Ebene. Diese bearbeite ich mit dem Ankerpunkt-hinzufügen-Werkzeug so, dass ich mit dem Direktauswahl-Werkzeug die Punkte entsprechend an den Griffen kurvig umändere. Ich lege das genau über das Original, damit das später fast 1:1 aussieht.

Bilder



 

Schritt 9:

Die Fläche bekommt jetzt noch eine Fülloption Verlaufsüberlagerung.

Bilder



 

Schritt 10:

Für die untere Fläche habe ich mir das Zeichenstift-Werkzeug geschnappt und damit das gebogene Dreieck erstellt. Danach einfach eine neue Ebene erstellt und den Schlagschatten mit einem schwarzen Pinsel mit wenig Deckkraft zu simulieren versucht.

Bilder



 

Schritt 11:

Damit ich den Verlauf farblich noch besser abstimmen kann, habe ich darüber eine Farbton/Sättigungs-Einstellungsebene erstellt.

Bilder



 

Schritt 12:

Jetzt füge ich alle Elemente, die meine Navigation betreffen, in einen Unterordner. Damit die Farbton/Sättigungs-Einstellungsebene sich nicht auf darunterliegende Gruppen/Ebenen auswirkt, ändere ich die Füllmethode der Gruppe von Hindurchwirken in Normal um.

Bilder



 

Schritt 13:

Nachdem ich jetzt alle Untergruppen jeweils kopiert und umbenannt habe, kann ich in der Foto-Gruppe meine drei Fotos oben einfügen.

Bilder



 

Schritt 14:

Als Nächstes füge ich einen Schlagschatten hinzu, wandele diesen aber mit der rechten Maustaste in eine Ebene um.

Bilder



 

Schritt 15:

Jetzt transformiere ich den Schatten und wähle dann mit der rechten Maustaste Verkrümmen. Danach muss ich nur noch in der Mitte unten den Bereich leicht hochziehen. Schon sieht der Schlagschatten noch besser aus.

Bilder



 

Schritt 16:

Den Schlagschatten kopiere ich jetzt zweimal und schiebe ihn entsprechend zu den anderen Fotos.

Bilder



 

Schritt 17:

In der Mitte füge ich einen Text ein. Oben habe ich die Schriftart Gentium Basic gewählt (kostenlose Schriftarten gibt es unter www.dafont.com). Darunter habe ich die Georgia benutzt.

Bilder



 

Schritt 18:

Jetzt füge ich noch schnell unten rechts Ringe ein. Die waren leider nicht transparent, sondern mit einer weißen Hintergrundfarbe. Wenn ich in die Fülloptionen gehe, kann ich mit gedrückter Alt-Taste im Farbbereich Grau genau diesen Weißbereich ausblenden.

Bilder



 

Schritt 19:

Wenn der Kontrast zu groß ist, kann ich diesen per Farbton/Sättigungs-Einstellungsebene natürlich schnell reduzieren.

Bilder



 

Schritt 20:

Als Nächstes füge ich zwei Tauben ein. Diese kann ich mit dem Schnellauswahl-Werkzeug auswählen und mit Kante verbessern sehr schnell gut freistellen.

Bilder



 

Schritt 21:

Ich habe dazu folgende Optionen gewählt:

Bilder



 

Schritt 22:

Die andere Taube habe ich schnell mit dem Magischen-Radiergummi-Werkzeug freigestellt.

Bilder



 

Schritt 23:

Als Nächstes habe ich eine Rose eingefügt. Auch diese wurde schnell mit den Fülloptionen Farbbereich Grau entsprechend vom Weiß befreit.

Bilder



 

Schritt 24:

Gleiches auch mit den Orchideen.

Bilder



 

Schritt 25:

Im Hintergrund habe ich ein richtig tolles Bild aus Fotolia genommen, welches ich leicht ankippe.

Bilder



 

Schritt 26:

Jetzt habe ich zum Schluss noch das Auto eingefügt. Damit ich den weißen Hintergrund ausgeblendet bekomme, habe ich die gleiche Herangehensweise wie für die Blumen verwendet. Vorher habe ich die Ebene aber dupliziert. Die duplizierte Ebene setze ich auf Multiplizieren, damit sich dort der Schatten perfekt an die Straße anschmiedet.

Bilder



 

Schritt 27:

Und so sieht das Meisterwerk jetzt aus:

Bilder


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.06.2017 - 01:02

Vielen Dank für das gut erklärte Video

Portrait von MaoMao
  • 15.12.2012 - 15:46

Vielen Dank für das gut erklärte Tutorial.

Portrait von MaoMao
  • 15.12.2012 - 15:46

Vielen Dank für das gut erklärte Video und natürlich auch für die Arbeitsdateien.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.06.2012 - 13:19

Klasse Idee...Daumen hoch dafür!

Portrait von Tueffi
  • 22.06.2012 - 14:48

Fein gemacht - hat ne Weile gedauert - aber sieht so ähnlich aus. Danke

Portrait von Stoppi
  • 01.12.2011 - 16:36

Super gemacht. Danke.

Portrait von melly0910
  • 04.11.2011 - 12:41

Sieht super aus!
LG melly0910

Portrait von fxdesign36
  • 17.10.2011 - 11:02

Haben Sie echt super hinbekommen.

Danke

Portrait von leenamatic
  • 27.09.2011 - 21:55

Hat jemand der hier das Tutorial sich durchgelesen hat auch das Video gesehen, wird da vielleicht mehr über die Navigation eingegangen?
Denn ich habe es versucht und irgendwie funktioniert es nicht so wie es hier geschrieben wurde.

Kann mir jemand helfen?

Portrait von Stefan
  • 27.09.2011 - 22:03

Ja da gehe ich ganz genau darauf ein. Schaue Dir mal das Video bitte an!

Portrait von leenamatic
  • 27.09.2011 - 21:53

Das Tutorial ist gut, jedoch verstehe ich nicht ganz, wie man die Navigation richtig hinbekommt.
Kann mir das jemand einmal erklären, bitte?
Schon mal danke im vorraus.

Portrait von baru24
  • 18.09.2011 - 21:13

Danke. Sieht sehr interessant aus.

Portrait von Emely2010
  • 05.09.2011 - 08:15

SUPER TUT. danke dir

Portrait von linusan
  • 27.08.2011 - 19:00

Wirklich toll gemacht und ausführlich erklärt. Danke!

Portrait von topmanager
  • 15.08.2011 - 19:04

tolles tut vllt. kann ich es ja mal real anwenden*g*

Portrait von naturfroh
  • 08.08.2011 - 18:23

Ich hoffe ich bekomme noch ein paar gute Tipps für den großen Tag , was das fotografieren angeht - hoffentlich geht´s nicht nur um die Webseite! der Download ist fertig -und ich bin schon gespannt - also bis dann!

Portrait von spatzerl
  • 01.08.2011 - 22:08

Hallo,

mir hat das Video und das Ergebnis auch super gefallen. Ich würde allerdings auch gerne wissen, wie man die Webseite am besten in HTML/CSS umsetzt.

Portrait von dirknorderstedt
  • 29.07.2011 - 19:41

Sehr interessantes Video Tutorial über die Layouterstellung für eine Website.
Da ich mich noch nicht tief mit dem Thema beschäftigt habe wäre ein weiterführendes Tutorial, welches die Aufbereitung des Lyoutes zu einer kompletten Website wünschenswert!
Der weitere Ablauf ist mir noch nicht klar

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.07.2011 - 11:31

hallo Stefan,
auch wenn ich mich bis jetzt mit Hochzeitsfotografie noch nicht befasst habe, aber bei einem Tutorial von dir konnte ich mich nicht zurückhalten ;-)
Danke wie immer !

x
×
×