Anzeige
Tutorialbeschreibung

Website im professionellen Business-Look II

Website im professionellen Business-Look II

In diesem Tutorial geht es darum, ein klassisches Layout im Businesslook zu erstellen, welches aber vor allem durch ein großes Sliderbild edel daherkommt. Das Design wurde so konzipiert, dass auf jeder Unterseite ein anderes Bild angezeigt wird. Bei Bedarf kann auf der Startseite das Bild zu einem Slider (Bildwechselfunktion) erweitert werden.

... ü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 1500 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:

Ich erstelle jetzt im Ebenenbedienfeld einen Ordner, benenne ihn so, wie die Webseite heißen soll, und lege darunter einen Unterordner "Navigation" und "Header" an. Im Navigationsordner (eigentlich heißt es ja Gruppe) füge ich mit dem Rechteck-Werkzeug eine Formebene ein.

Bilder



 

Schritt 4:

Als Fülloption erstelle ich eine Verlaufsüberlagerung mit folgenden Einstellungen:

Bilder



 

Schritt 5:

Jetzt wird es Zeit, in der Leiste zwei Links einzufügen: Anfahrt & Kontakt sowie Impressum. Danach füge ich mit dem Abgerundeten Rechteck-Werkzeug mit einem 10-Pixel-Radius mehrere Buttons ein. Ich ziehe dabei die Buttons immer neu auf, weil beim Skalieren sonst die Rundung mit skaliert würden, was beim Neuaufziehen nicht der Fall ist.

Bilder



 

Schritt 6:

Für die Startseite nehme ich ein dunkles Orange und für die anderen Buttons ein angenehmes Blau.

Bilder



 

Schritt 7:

Als Nächstes füge ich in der Header-Gruppe den Namen des Steuerberaters ein. Als Effekt nehme ich einen weißen Schlagschatten mit 100% Deckkraft und geringem Abstand/Weichzeichnung.

Bilder



 

Schritt 8:

Jetzt setze ich ein Foto ein, welches ich bei Fotolia.com gekauft habe. Damit das Foto auch abgerundete Ecken hat, werde ich mit dem Abgerundeten Rechteck-Werkzeug genau so eine Form aufziehen, wie gleich mein Foto aussehen soll.

Bilder



 

Schritt 9:

Dazu ziehe ich die Form auf und erstelle mit gedrückter Strg-Taste im Ebenenbedienfeld auf der Maske meiner Form eine Auswahl. Danach aktiviere ich mein Foto und klicke auf das Masken-Symbol.

Bilder



 

Schritt 10:

Schon hat mein Bild abgerundete Ecken.

Bilder



 

Schritt 11:

Jetzt füge ich über dem Foto eine Formebene mit dem Rechteck-Werkzeug mit 40% Deckkraft von einem hellen Grau ein.

Bilder



 

Schritt 12:

Dort schreibe ich einen Slogan hinein. Die Fläche bekommt außerdem noch einen leichten Schlagschatten.

Bilder



 

Schritt 13:

Jetzt gibt es wieder eine neue Gruppe namens "Content", und darin füge ich eine Überschrift mit der Schriftart "Futura LT" ein.

Bilder



 

Schritt 14:

Den Text füge ich mit der Schriftart Verdana ein. Danach setze ich unten noch ein Foto ein und ergänze daneben die Kontaktdaten.

Bilder



 

Schritt 15:

Tipp: Nicht einfach das Foto so nehmen, wie man es bekommt. Es ist immer besser, wenn die Person in das Layout hineinschaut und nicht raus. Darum habe ich es jetzt gespiegelt.

Bilder



 

Schritt 16:

Jetzt füge ich im rechten Teil eine neue Gruppe ein und darin eine Untergruppe, die ich mit einer abgerundeten Fläche fülle und der ich gleichzeitig eine Kontur mit 40% Deckkraft und einer Verlaufsüberlagerung gebe.

Bilder



 

Schritt 17:

Jetzt kommt in der Box noch ein Icon, welches ich in einer großen Sammlung bei Fotolia als SVG-Datei gekauft habe. Die kann ich mit Illustrator öffnen und daraus mein Icon in die Zwischenablage kopieren.

Bilder



 

Schritt 18:

Das Icon setze ich jetzt mit Strg+V ein. Ich bestätige, dass ich mein Icon als Smart-Objekt haben möchte. So kann ich die Änderungen direkt in Illustrator vornehmen.

Bilder



 

Schritt 19:

Das Icon ändere ich von der Deckkraft auf 60% und färbe in Illustrator das Grün in Weiß um. Danach kommt noch ein Linktext hinein.

Bilder



 

Schritt 20:

Dann kopiere ich die Gruppe und ändere die Position, das Icon und den Text.

Bilder



 

Schritt 21:

Das Gleiche mache ich noch zwei Mal und die ganz untere Fläche ändere ich vom Verlaufsfarbton. Wichtig ist, dass die untere Fläche genau da aufhört, wo auch das Foto links abschließt. Danach füge ich eine neue Gruppe namens "Footer" ein.

Bilder



 

Schritt 22:

Ganz unten nehme ich von oben als Kopie die blaue Formebene. Darin füge ich noch einen kleinen Spruch ein.

Bilder



 

Schritt 23:

Im Hintergrund füge ich noch einen minimalen Verlauf ein, der von Grau in fast Weiß übergeht. Und so sieht dann die fertige Webseite in Photoshop aus:

Bilder


Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Dessert
  • 06.06.2017 - 01:02

Vielen Dank für das gut erklärte Video

Portrait von Bitace
  • 25.05.2016 - 00:11

Danke für das Tutorial!

Portrait von Bitace
  • 25.05.2016 - 00:11

Danke für das Tutorial!

Portrait von BokiM
  • 15.02.2013 - 08:33

Schönes Tutorial, danke dafür!

Meine Frage: Ist es erlaubt bei Fotolia gekaufte Icons und Grafiken zu bearbeiten oder verletzt man damit irgendwelche Copyrights?

Portrait von clanfirefox
  • 01.11.2012 - 23:16

Sehr schönes Tutorial, hat mir gut geholfen :)

Portrait von Blurange
  • 22.03.2012 - 22:15

Echt gute Sache. Webdesign is einfach nur Göttlich *_*

Portrait von Bentley
  • 04.03.2012 - 22:17

Sehr nützlich. Danke.

Portrait von Bonersen
  • 27.02.2012 - 18:15

danke für das tutorial. sehr gut geschrieben und sehr nützlich.

Portrait von Posni
  • 16.02.2012 - 10:26

@cocodina,
naja beim aufbau einer reinen html/css webseite gibt es meist nie große unterschiede,
diese also per html nachzubauen dürfte kein Problem sein - ich denke hier geht es nur
um das Design/das Layout.

Allerdings verstehe ich immernoch nicht so ganz wieso denn nicht Fireworks verwendet wird,
welches sehr viel praktischer für solche Arbeiten ist.
Trotzdem vielen herzlichen Dank für die inspiration :)

Portrait von Andre_S
  • 15.02.2012 - 18:48

Wenigstens den Textteil sollte man in HTML editieren und nicht in PS

Portrait von cocodina
  • 15.02.2012 - 17:55

Schönes Tutorial, aber wahrscheinlich noch nicht zu Ende, oder?
Bisher ist es ja nur in Photoshop erstellt, also als Layout -
Wie geht es weiter?
Mit Slices, oder bindest du das ganze als Grafik in HTML ein?
Bin gespannt... bisher sehr interessant

Portrait von Hanno_Hauser
  • 15.02.2012 - 09:25

Hi,
danke für Inspiration Teil 2.
LG

Portrait von MindCake
  • 05.12.2011 - 23:53

Vielen Dank für das super Video! Konnte einige Tricks lernen die mir das Leben doch stark erleichtern sollten ;) Dein Workflow gefällt mir sehr gut. Und vor allem dass du nebenbei auch noch ein paar kleine PS Tricks/Tipps verrätst wird für dem ein oder anderen PS-Neuling sicherlich sehr helfen ;)

Gruß
Jan

Portrait von Susan99
  • 17.10.2011 - 12:32

Ein sehr schönes Layout-Beispiel und hervorragend erklärt. Vielen Dank!
LG Susan

x
×
×