Anzeige
Tutorialbeschreibung

Klassische Business-Webseite mit räumlicher Navigation erstellen

Klassische Business-Webseite mit räumlicher Navigation erstellen

In diesem Video-Training erkläre ich dir, wie eine klassische Business-Website mit einer räumlichen Navigation erstellt wird. Bezeichnend in diesem Video-Training ist die in den Raum ragende Navigation, die aus nur einer Formebene besteht. Auch erfährst du in diesem Video-Training, wie die Haare des Hauptmotivs im Header freigestellt wurden.

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


Bildquelle: fotolia.com: 5697778_XL © 1418336 Ontario Ltd, 7244811_L© T.Tulic

Schritt 1

Ich erstelle ein neues Dokument in 1600 x 1600 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 vier Ordner an, damit alles auch seine Ordnung hat, wenn ich meine zahlreichen Ebenen erstelle. Die Hintergrundebene wandle ich durch einen Doppelklick 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:

Nicht jeder hat ein Gespür für passende Farben. Da ich mich genauso in diese Gruppe einordne, helfe ich mir, indem ich mir das Bedienfeld Kuler aufrufe. Dies ist eine Community, die sich mit passenden Farben beschäftigt. Ich kann diese nach Bewertung sortieren und dann zum Farbfeldbedienfeld hinzufügen.

Bilder



 

Schritt 5:

Als Nächstes erstelle ich eine neue Formebene mit einem Verlaufsstil:

Bilder



 

Schritt 6:

Jetzt kommt ein Text über meiner Verlaufs-Formebene mit folgenden Einstellungen:

Bilder



 

Schritt 7:

Ich ziehe jetzt eine weitere Formebene mit einem Grauton auf.

Bilder



 

Schritt 8:

Als Nächstes schnappe ich mir das Ankerpunkt-hinzufüge-Werkzeug und erstelle 4 neue Punkte. Damit ich die zwei unteren Punkte auf der gleichen Senkrechte erstelle, lege ich mir zwei Hilfslinien an. Danach aktiviere ich das Direktauswahlwerkzeug und verschiebe die rechten Punkte. Danach ziehe ich die Griffe wieder zu den Punkten, damit eine Gerade entsteht und die Kurve nicht rund wird.

Bilder



 

Schritt 9:

Danach erstelle ich das Gleiche auch für die rechte Seite der Navigation. Ich mache dazu eine Auswahl, damit ich weiß, wie groß der Abstand links ist. Danach wird die Auswahl verschoben und rechts auch wieder Hilfslinien aufgezogen. Jetzt das Gleiche wie in Schritt 8 beschrieben.

Bilder



 

Schritt 10:

Damit das Ganze noch besser aussieht, werde ich die Formebene duplizieren und die Farbe ein wenig kräftiger einstellen. Danach genau die beiden Knicke mit der Auswahl markieren und eine Maske erstellen. Jetzt wird nur genau dieser Bereich eingeblendet (bzw. Strg+I, falls es von den Farben genau andersherum sein sollte).

Bilder



 

Schritt 11:

Dieser Schritt ist ein wenig freaky: Ich erstelle eine Kontur auf der Formebene mit weißer Farbe bei 1Px. Danach klicke ich mit rechter Maustaste im Ebenenbedienfeld auf den Effekt und klicke auf Ebene erstellen. Jetzt wird der Effekt in eine Ebene umgewandelt. Danach wähle ich mit dem Auswahlrechteck-Werkzeug den unteren Teil aus und färbe diesen mit einem dunkleren Grauton.

Bilder



 

Schritt 12:

Teilweise ist ein grober Treppeneffekt beim Knick zu sehen. Diesen kann ich aber mit einer Maske schnell ausblenden.

Bilder



 

Schritt 13:

Als Nächstes lade ich mir ein Foto und wandle es in ein Smart-Objekt um.

Bilder



 

Schritt 14:

Um das Foto gut und vor allem schnell freizustellen, gibt es seit CS5 eine tolle Kante-verbessern-Erweiterung: das Radius-verbessern-Werkzeug. Damit kann ich die Problemzonen schnell bemalen und schon stellt Photoshop diese ziemlich gut frei. Vorher stelle ich die Person mit dem Schnellauswahlwerkzeug grob frei und klicke dann auf Kante verbessern.

Bilder



 

Schritt 15:

Danach klicke ich auf das Masken-Symbol und schon ist die Person gut freigestellt. Ein paar Bereiche muss ich noch ausbessern. Dazu kann ich auch direkt mit gehaltener Alt-Taste auf meine Maske klicken, damit mir nur die Maske eingeblendet wird. Darauf kann ich wiederum mit einem Pinsel die Bereiche verbessern.

Bilder



 

Schritt 16:

Das Ergebnis überzeugt mich und ich werde alles, was die Navigation betrifft, mit der Shift-Taste im Ebenenbedienfeld markieren und mit gedrückter Shift-Taste auf das Gruppen-Symbol unten im Ebenenbedienfeld klicken, damit diese Ebenen gleich in einen neuen Gruppenordner reingeschoben werden. Diesen Ordner benenne ich um in "Navigation".

Bilder



 

Schritt 17:

Jetzt brauche ich noch ein paar Links und gleichzeitig ändere ich oben die Farbe vom Zitat von Grün auf Blau, weil mir das Grün nicht wirklich gefiel.

Bilder



 

Schritt 18:

Jetzt erstelle ich eine Slideshowbox. Dazu füge ich ein neues Foto ein und lege gleichzeitig eine Maske drauf, falls nur ein Teil vom Foto angezeigt werden soll.

Bilder



 

Schritt 19:

Damit der Besucher sieht, dass man die Fotos in der Slideshow steuern kann, lege ich dazu eine kleine Navigation an. Ich erstelle dazu mit dem Ellipse-Werkzeug einen Kreis, wähle die Hälfte mit dem Auswahlrechteck-Werkzeug aus und klicke dann auf das Maskensymbol. Schon habe ich einen Halbkreis.

Bilder



 

Schritt 20:

Mit dem Polygon-Werkzeug kann ich jetzt ein Dreieck erstellen. Dazu muss ich jedoch oben im Steuerungsbedienfeld als Seitenanzahl 3 eingeben.

Bilder



 

Schritt 21:

Die beiden Elemente verschiebe ich in einen neuen Gruppenordner und kopiere diesen nach rechts und drehe ihn.

Bilder



 

Schritt 22:

Als Nächstes erstelle ich eine Fläche mit dem Rechteck-Werkzeug.

Bilder



 

Schritt 23:

Als Nächstes füge ich mit dem Ankerpunkt-hinzufüge-Werkzeug zwei Punkte hinzu und schiebe den einen nach oben. Die Griffe werde ich wieder an den Punkten zurückführen, damit diese gerade sind.

Bilder



 

Schritt 24:

Jetzt kopiere ich die Form, ändere die Farbe in ein dunkleres Blau und markiere den Knick und maskiere den Bereich, sodass nur dieser eingeblendet wird. Ich könnte aber auch anders vorgehen: Ich erstelle dazu mit dem Polygon-Werkzeug einfach ein Dreieck und lege es in die Position, wie abgebildet.

Bilder



 

Schritt 25:

Jetzt füge ich noch im Textstreifen der Slideshow einen Text ein. Danach füge ich im Content-Ordner einen Text "Das bin ich" ein. Als Platzhaltertext besorge ich mir einen Fülltext von http://www.loremipsum.de.

Bilder



 

Schritt 26:

Im Hintergrund meiner Textbox kann ich noch eine Formebene mit zwei Effekten hinzufügen: Verlaufsüberlagerung von Schwarz nach Weiß bei einer Deckkraft des Effektes von nur 10% und dann eine Kontur in Grau. Die Flächendeckkraft setze ich dabei auf 17%.

Bilder



 

Schritt 27:

Als Nächstes ziehe ich mit dem Formwerkzeug eine Box auf und füge oben den Text "Kontaktiere mich" ein. Danach füge ich mit dem abgerundeten Rechteckwerkzeug diverse Eingabefelder ein.

Bilder



 

Schritt 28:

Als Button zum Abschicken des Formulars füge ich noch einen Verlauf von Grün zu einem noch etwas dunkleren Grün ein. Ich habe gleichzeitig die blaue Box mit Strg+J dupliziert, ein wenig kleiner transformiert und ihr eine Kontur gegeben. Dann habe ich die Flächendeckkraft auf 0 gesetzt, damit nur die Kontur zu sehen ist.

Bilder



 

Schritt 29:

Als Nächstes kopiere ich unten im Footer den Streifen von oben per Alt-Taste nach unten. Bei den Links mache ich das genauso, nur dass alle Wörter in Weiß umgefärbt werden.

Bilder



 

Schritt 30:

Von www.iconspedia.com besorge ich mir ein Twitter-Icon.

Bilder



 

Schritt 31:

Das Twitter-Icon wandle ich in ein Smart-Objekt um und transformiere es ein wenig. Die orange Box werde ich von der Höhe ein wenig reduzieren und darunter einen Text einfügen.

Bilder



 

Schritt 32:

Beim Button habe ich dem weißen Text noch einen Schlagschatten spendiert, weil man den Text sonst vielleicht schwer lesen kann.

Bilder



 

Schritt 33:

Zur weiteren Optimierung habe ich oben in der Navigation noch einen leichten Schlagschatten eingefügt.

Bilder



 

Schritt 34:

Des Weiteren habe ich auf der orangen Formebene eine Kontur mit 1Px dunkleloranger Farbe eingefügt.

Bilder



 

Schritt 35:

Und hier das fertige Ergebnis:

Bilder




Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von teste123
  • 14.01.2012 - 17:51

Vielen Dank für die Schöne Anleitung
MfG

Portrait von Schmizi97
  • 07.11.2011 - 20:28

Nice TuT, hilft einem weiter

Portrait von Kira1711
  • 02.10.2011 - 20:11

Das Tutorial ist als Gesamtpaket finde ich sehr gut, nur bei einigen kleinen Details habe ich etwas länger gebraucht bis ich es hinbekommen habe, P.S Blutigen Anfängern würde ich dieses Tutorial nicht empfehlen

Portrait von ThePaddy
  • 24.07.2011 - 16:40

HTML, CSS und (PHP) sind da die Stichwörter.
Du erstellst deine "Slices" in Photoshop. Die Seiten selber sind eigentlich nur Textdateien, die mit der Endung .htm und .html abgespeichert werden (bei PHP als .php) und dann von einem Webserver an den Betrachter deiner Webseite ausgeliefert werden. Ob du die Webseiten nun per Hand schreibst, oder n Editor wie den Dreamweaver nimmst ist dabei Geschmacks- und Wissenssache.
Guck doch mal in der örtlichen Stadtbibliothek nach nem HTML Buch und guck ob das was für dich ist. Wenn ja kann die "Kauforgie" ja losgehen ;-)

Portrait von kfzslay87
  • 08.05.2011 - 22:08

Klasse Tut. hat mir sehr geholfen

Portrait von lichtwerker
  • 19.01.2011 - 15:26

Der Workshop hätte für Anfänger ausführlicher gestaltet werden können. Ich kämpfe mich an vielen Stellen durch und komme nicht immer zum richtigen Ergebnis. Aber so lernt man auch was.

Portrait von yoka86
  • 17.09.2010 - 12:33

einfach top! sehr zu empfehlen! :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.09.2010 - 09:18

I)ch danke dir gerade in diesem Bereich muss ich noch viel lernen

Portrait von PiiiViii
  • 08.10.2010 - 00:56

Da kann man sich nur anschließen was das "Coden" betrifft.
Hier geht es leider lediglich um das Layouten in PS! :(
Schade! Aber trotzdem ein schönes Tut.
Und man sieht mal wieder das man sieht mal wieder:
"Viele Wege führen nach Rom!" ;D

Portrait von Stoetzman
  • 27.09.2010 - 03:58

Ich muss sagen, die Idee ist nicht schlecht. Aber für Anfänger ist dieses Tutorial nicht geeignet. Kleine (aber wichtige) Zwischenschritte werden nicht erklärt und von daher ist es doch etwas schwer zu folgen!

Portrait von Fadeiar
  • 26.09.2010 - 10:55

einen kleinen hinweise bzw tipp wie man das ganze coden angeht mit der vorlage wäre klasse gewesen, aber danke trotzdem für das tut!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 24.09.2010 - 19:48

wow find ich wirklich toll. muss ich bei zeiten mal ausprobieren :)

Portrait von CubeHoshi
  • 24.09.2010 - 19:15

Sehr schön gemacht. Und wieder habe ich dabei die eine oder andere mir nicht bekannte Technik und Vorgehensweise kennengelernt.

Portrait von hoth
  • 24.09.2010 - 08:05

ich weiß ja nicht ob der Verfasser des Tutorials sich auch mal die Kommentare anguckt, aber eine Rückmeldung seinerseits auf die Kommentare wäre doch ganz schön. Muss ja nicht wirklich sein, dass er wie einige es sich gewünscht haben was zum coden sagt, reicht ja auch zu sagen das man das selbst lernen muss. Aber so ein bischen feedback wäre schön, wir geben das ja auch mit unseren Kommentaren.

Portrait von MacDan
  • 23.09.2010 - 21:59

Naja Webdesign Tutorials vorallem für Portfolios gibts ja mittlerweile zu Hauf, im Grunde nix neues.

Vergebe aber 4 Sterne weil das Tut mich auf Kuler gebracht hat, wo ich eifnach vollends begeistert bin aktuell :)

Portrait von FREAK_09
  • 23.09.2010 - 11:15

Der Workshop mag ja ganz gut sein, ist jedoch für Anfänger nicht zu
gebrauchen. Ständig steht da ich mache dies oder ich mache das. Über
das WIe lässt sich der Autor jedoch nur selten aus.

Portrait von NoLimit
  • 22.09.2010 - 19:52

Sehr gutes Tutorial hat mir sehr gut gefallen hat mich um einiges weiter gebracht !

Portrait von windes
  • 22.09.2010 - 13:42

Hallo!

Vielen Dank für das Tutorial! Das hat mich wieder ein paar Schritte im Umgang mit PS im Webdesign weitergebracht.

Nur warum müssen die Header im so ein riesen Format haben? Wenn man den Layoutvorschlag umsetzt, sieht man vor lauter Header keinen Content mehr!

Und auch mir haben ein paar Worte zur Umsetzung gefehlt!

Mfg Steffen

Portrait von fusco
  • 21.09.2010 - 17:03

Grundsätzlich ganz gut, für die meisten wäre es aber bestimmt interessant gewesen noch etws übers "Coden" zu sagen.

Portrait von tiekay
  • 21.09.2010 - 11:19

Super Anleitung. Gerne mehr davon

x
×
×