Anzeige
Tutorialbeschreibung

Das moderne Fahrschul-Design - optimal für eine junge Zielgruppe

Das moderne Fahrschul-Design - optimal für eine junge Zielgruppe

In diesem Video-Training wird gezeigt, wie ein Weblayout für eine Fahrschule erstellt wird. Dabei wird erläutert, wie durch cleveres Einsetzen von Masken tolle Effekte erstellt werden können.

Die Zielstellung dieses Designs ist ein frisches Layout, um die vorwiegend junge Zielgruppe von Fahrschulen angemessen anzusprechen.

... ü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 1280 x 920 Pixel. Die Auflösung ist dabei egal (ist nur relevant für Dokumente, die gedruckt werden sollen).

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 einen Ordner mit dem Namen der Webseite an und dann einen Ordner "Navigation". Darin füge ich mit dem Rechteck-Werkzeug eine schwarze Linie ein und erstelle darauf einen Schlagschatten.

Bilder



 

Schritt 4:

Mit dem Abgerundeten Rechteck-Werkzeug füge ich jetzt den Button für die Startseite ein. Auch darauf kommt ein Schlagschatten.

Bilder



 

Schritt 5:

Danach erstelle ich den Text für die Navigation. Als Nächstes folgt ein Bild, welches ich oben rechts platziere.

Bilder



 

Schritt 6:

Wenn ich den Hintergrund grau färbe, sieht man, dass das Foto einen weißen Hintergrund hat. Um den schnell auszublenden, ändere ich die Füllmethode auf Multiplizieren.

Bilder



 

Schritt 7:

Jetzt dupliziere ich die Auto-Ebene und setze da die Füllmethode wieder auf Normal; jedoch setze ich darauf eine füllende Maske und blende nur die spiegelnden Bereiche wieder ein. Danach erstelle ich mit dem Textwerkzeug den Namen der Webseite und lege darauf einen Schlagschatten an.

Bilder



 

Schritt 8:

Als Nächstes ziehe ich unter "Fahrschule" noch eine Fläche auf, die ich leicht schräg stelle (geht am besten mit dem Direktauswahlwerkzeug). Dann kopiere ich den Text + die Fläche, markiere alles mit der Shift-Taste und wandle es in ein Smart-Objekt um. Danach führe ich den Bewegungsunschärfe-Filter aus.

Bilder



 

Schritt 9:

Jetzt erstelle ich eine neue Gruppe mit den Namen "Content" (zuvor habe ich mein Logo und das Auto in die Gruppe "Logo & Eyecatcher" geschoben). Darin setze ich eine abgerundete Fläche ein, die auch einen Schlagschatten, Verlaufsüberlagerung und 10 Pixel starke Kontur (wenig Deckkraft) erhält. Die Deckkraft meiner Form setze ich auf 80%, damit mein Hintergrundbild später leicht durchschimmert.

Bilder



 

Schritt 10:

Mit dem Ankerpunkt-hinzufügen-Werkzeug ergänze ich noch paar Ankerpunkte und verschiebe diese mit dem Direktauswahl-Werkzeug. Danach ziehe ich noch an den Kurven-Griffen, damit eine schön elegante Fläche entsteht. Anschließend folgt ein wenig Text. Die Überschriften schreibe ich in der Schriftart Futura und den Fließtext in Verdana.

Bilder



 

Schritt 11:

Im Kontaktblock ziehe ich wieder eine Fläche auf und füge einen Schlagschatten ein. Damit ich den Schlagschatten besser bearbeiten kann, wandele ich ihn in eine eigene Ebene um (rechte Maustaste auf den Effekt im Ebenenbedienfeld>Ebene erstellen). Danach transformiere ich ihn mit Strg+T und ziehe an den Eckpunkten mit gedrückter Strg-Taste.

Bilder



 

Schritt 12:

Jetzt füge ich drei Fotos ein. Damit diese Fotos abgerundete Ecken bekommen, bediene ich mich eines Tricks: Ich erstelle darüber in gleicher Größe eine Form mit dem Abgerundeten-Rechteck-Werkzeug.

Bilder



 

Schritt 13:

Dann nehme ich eine Auswahl von der Form (mit gedrückter Strg-Taste im Ebenenbedienfeld) und füge meinem Foto eine Ebenenmaske hinzu. Schon habe ich abgerundete Ecken. Die Form kann ich danach komplett ausblenden.

Bilder



 

Schritt 14:

Das mache ich bei den anderen zwei Fotos auch. Vorher erstelle ich aber noch eine Form, damit man beim Foto gleich weiß, worum es geht.

Bilder



 

Schritt 15:

Jetzt setze ich nur noch im Hintergrund ein richtig tolles Foto ein (habe ich von fotolia.com), entferne eventuell mit einer Einstellungsebene Farbton/Sättigung ein wenig Sättigung, und schon ist das Layout fertig:

Bilder


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Bitace
  • 25.05.2016 - 00:08

Gut, aber man sollte es alles genauer erklären jeden Schritt etc.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.07.2013 - 21:55

Sehr gutes Tutorial. Wäre super, wenn ein Tutorial erscheinen würde, wie man das ganze in HTML einbindet. MfG D4rkownz

Portrait von Lugaid
  • 20.01.2013 - 14:22

Sieht gut aus, aber für mich als web-design Einsteiger sehe hier nur knapp 30% von dem Erklärt, was tatsächlich passiert. Also für mich absolut sinnloses Tutorial.

Portrait von SchweiniX
  • 12.01.2013 - 14:57

Sehr gutes Tutorial. Die Website sieht echt gut aus ;)

Portrait von clanfirefox
  • 01.11.2012 - 23:17

Sehr gut erklärt, hat mir ebenfalls gut geholfen :)

Portrait von Marc91
  • 06.08.2012 - 11:32

Super verständlich! Danke!

Portrait von cuco-m
  • 27.07.2012 - 21:20

Kurz und Knapp aber super verständlich erklärt DANKE

Portrait von Tueffi
  • 22.06.2012 - 14:44

Fein geschriebenes Tutorial - dankeschön

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.06.2012 - 07:05

Sehr schönes Tutorial und das Ergebnis kann sich sehen lassen. Mich würde interessieren, wie man das nun in eine funktionsfähige Webseite umwandelt (HTML + CSS).

Portrait von sap
sap
  • 28.05.2012 - 12:19

Kurz und knapp erklärt - die Screenshots zeigen, was im Text nicht ausformuliert ist - sehr verständlich, vielen Dank!

Portrait von Michamuse
  • 23.04.2012 - 13:03

Ein super Tutorial! Danke, dass Du Dir so eine Mühe gegeben hast!

Portrait von cocodina
  • 25.03.2012 - 17:20

sehr verständlich erklärt, danke....

Portrait von Xaiverxx
  • 23.02.2012 - 11:45

Echt super Tutorial! Damit kann man auch andere Themen als Webseite gut umsetzen :D

Portrait von visualb
  • 18.02.2012 - 01:08

Super Tutorial, danke. Mich würde auch interessieren wie das Layout geslict und eingebunden wird.

Portrait von shushu
  • 14.02.2012 - 06:47

Sehr gutes und leicht verständliches Tutorial welches sich in meiner Branche mit Sicherheit gut umsetzen lässt. Danke :)

Portrait von pTown
  • 13.02.2012 - 07:31

so is das cool, gut verständlich. Könntest du noch ein TUT erstellen, in dem es darum geht, wie das layout geslict wird und in eine WS eingebunden wird?

Portrait von Hanno_Hauser
  • 12.02.2012 - 12:00

Hi,
danke für das tolle Vidio. Ist gut und verständlich erklärt.
LG

Portrait von Balivandi
  • 08.09.2011 - 12:12

Ein sehr gutes Tutorial. Was mir auch neue Dinge bei PS augezeigt hat.
Gibt es ggf. auch ein Video, wie man das diese Bild codet/programmiert?! ...

Das schlimme ist, ein Business Layout kann ich erstellen, nur das Umsetzen ist nicht so meine Sache, genauso, wie die Unterseiten dann auszusehen haben oO ...

Portrait von classman
  • 13.07.2011 - 12:51

ich warte auch gerne wie ist mit der CSS und xhtml .

Portrait von maks125
  • 26.06.2011 - 14:42

Tolles Tutorial....gut zu verstehen....und ganz wichtig: Eine angenehme, ruhige und motivierende Stimme.
Das macht einfach Spaß. Vielen Dank

x
×
×