Anzeige
Tutorialbeschreibung

Homepagedesign erstellen mit Mouse-over-Effect-Navigation

Homepagedesign erstellen mit Mouse-over-Effect-Navigation

Dieser Workshop erklärt, wie man eine Homepage in Photoshop designed. Weiterhin wird gezeigt, wie man die Homepage-Vorlage in ImageReady (Zusatzprogramm von Photoshop) sliced bzw. so einstellt, dass Buttons beim Mauskontakt leuchten. Länge: 50 Minuten


Zunächst erstellst du eine neue Datei mit z. B. folgenden Maßen (ideal für eine Homepage sind entweder 800x600 oder für größere Auflösungen 1024x768 Pixel).

Bilder



 

Anlegen einer übersichtlichen Ordnerstruktur

Es ist sehr wichtig, wenn du mit vielen Ebenen arbeitest, dass du den Überblick niemals verlierst. Dafür gibt es von Photoshop eine gute Lösung: benutze Ordnersets!

In unserem Beispiel legen wir für alle Elemente, die sich im Header (also oben in der Homepage) befnden, einen Ordner namens „Oben“ an. Dort werden wir dann alle Elemente - wie Buttons - und deren Hintergrund ablegen.

Das Gute dabei ist, dass du diesen Ordner jederzeit zusammenklappen kannst und somit z. B. den unteren Teil sehr gut weiterbearbeiten kannst, ohne die Übersicht zu verlieren.

Bilder



 

Anlegen des Hintergrundes im oberen Bereich

Wir legen zunächst mit dem Rechteck-Werkzeug eine Formebene im oberen Bereich an. Warum eine Formebene? Weil du diese mit dem Zeichenstift jederzeit so verformen kannst, wie du es möchtest!

Bilder



 
Du fügst jetzt mit dem Zeichenstift in der unteren Mitte des Rechtecks einen Punkt ein. Den kannst du dann ungefähr so verbiegen:

Bilder



Als Nächstes fügst du die Namen der Buttons ein (Startseite usw.).

Bilder



 

Fülloptionen anwenden

Damit die Namen der Buttons auch schön aussehen, musst du jetzt der Schrift ein paar Fülloptionen hinzufügen:

Bilder



 

Duplizieren der Schrift

Dupliziere jetzt die Schrift (so oft, dass du alle Buttonnamen zusammen hast). Alternativ könntest du auch den Textrahmen breiter ziehen und mit Tabulator arbeiten und dann den Namen einfügen.

Ideal zum Positionieren der Elemente sind Hilfslinien.

Damit du alle Namen auch in der gleichen Höhe anlegst, fügst du deswegen eine Hilfslinie an, worauf du dann die Namen legst.

Bilder



 

Fülloption für den Hintergrund im oberen Bereich

Füge jetzt eine Fülloption für den Text ein. Du kannst z. B. einen Verlauf dafür - wie folgt - verwenden:

Bilder



 

Trennlinien einfügen

Damit die Buttons besser zur Geltung kommen, kannst du diese per Trennstrich hervorheben. Dazu einfach eine neue Ebene oben anlegen und dann per Buntstift die Striche ziehen (TIPP: Halte für gerade Linien die Shift-Taste gedrückt).

Danach kannst du den Strichen die Fülloption spendieren.

Bilder



 

Schlagschatten einfügen

Dem oberen Hintergrund kannst du zur Verfeinerung noch einen Schlagschatten hinzufügen:

Bilder



 

Datei speichern

Sicher ist sicher, darum speichere spätestens jetzt die Datei als PSD-Datei ab, denn Photoshop sichert nicht automatisch im Hintergrund wie z. B. Word!

Bilder



 
Ich erstelle jetzt eine Formebene mit grauer Farbe. Diese muss ich natürlich unter die Navigation in meinem Ebenenbedienfeld ziehen, damit meine Buttons nicht davon überdeckt werden.

Bilder



 
Mit gedrückter Maustaste nach unten verschieben (in der Ebenenpalette). Dann sollte der Hintergrund genau so aussehen:

Bilder



 

Form verändern

Jetzt solltest du die neue Form-Ebene wie folgt verändern (dazu das Ankerpunkt-hinzufügen-Werkzeug benutzen und einen Punkt in der Mitte erstellen und dann verbiegen).

Bilder



Jetzt kannst du der Form noch eine blaue Kontur hinzufügen:

Bilder



 

Balken einfügen

Jetzt kannst du z. B. einen Balken von rechts einfügen. Dazu kannst du entweder wieder eine Formebene einfügen und dann eine blaue Kontur hinzufügen, dann die Formebene rastern (bzw. auf eine leere darunterliegende Ebene reduzieren), oder aber du legst einen Rahmen als Pixelebene ein und fügst auch dort eine blaue Kontur hinzu.

Bilder



 
Als Nächstes fügst du der Ebene eine Maske hinzu und lässt diese per Schwarzweiß-Verlauf ausblenden. Füge darüber eine Textebene ein. Dem Text kannst du ein paar Fülloptionen deiner Wahl einfügen. Danach sollte deine Homepage ungefähr so aussehen:

Bilder



 

Schlagschatten einfügen

Jetzt kannst du der Formebene auch noch einen Schatten hinzufügen:

Bilder



 

Logo einfügen

Jetzt kannst du der Homepage noch ein Logo hinzufügen. Z. B. das PSD-Tutorials.de-Logo. Dazu öffnest du die Logo-Datei und legst beide Fenster nebeneinander und kannst dann per Drag&Drop das Logo in Deine Homepage einfügen:

Bilder



 

Logo positionieren

Jetzt kannst du das Logo noch so verändern, dass es genau oben in den Header reinpasst.

Bilder



 

Weitere Fülloptionen

Füge jetzt dem Header ein Muster hinzu. Du kannst z. B. folgende Einstellung ausprobieren:

Bilder



 
Jetzt noch eine Verlaufsüberlagerung und dann sieht das schon ganz gut aus:

Bilder



 

Weitere Fülloptionen

Lege jetzt ein neues Ebenenset an und füge dort eine neue Formebene ein:

Bilder


Weiteres Element einfügen

Um z. B. in der Homepage zu wissen, wo man sich befindet, kann man ein Übersichts-Element einfügen. Dazu fügen wir zunächst wieder eine neue Formebene ein, die wie ein dünner Strich aussieht. Danach fügst du der Formebene zwei Punkte hinzu (oben und unten), markierst beide und verschiebst sie dann nach oben:

Bilder



 
Jetzt die Formebene duplizieren, spiegeln und in der Größe verändern:

Bilder



 
Jetzt eine neue Formebene erstellen und eine Verlaufsüberlagerung hinzufügen:

Bilder



 
Jetzt reduzierst du die Ebene mit einer leeren, darunterliegenden Ebene:

Bilder



 
Füge jetzt der Ebene eine Maske hinzu und entferne die darüberliegenden Bereiche, sodass es dann am Ende ungefähr so aussieht:

Bilder



Als Nächstes solltest du die beiden Striche umfärben in z. B. Blau und dann in eine normale Ebene umwandeln (wir machen das so, dass wir darunter eine leere Ebene legen und sie mit dieser dann reduzieren). Füge den zwei Strichen eine Maske hinzu und entferne mit einem weichen Pinsel die Enden. Dein Ergebnis sollte jetzt ungefähr so aussehen:

Bilder



 
Füge jetzt eine Ebene ein, die für den kompletten Hintergrund sein soll (z. B. hellblau). Wir sehen dann, dass unser Farbelement eher mit Weiß besser rüberkommt. Darum kannst du jetzt auch schnell eine weiße Ebene anlegen und per Maske ausbessern:


Bilder



 
Unterer Bereich:

So, du hast es fast geschafft! Jetzt konzentrieren wir uns auf den unteren Teil der Homepage. Du fügst jetzt wieder ein Ebenenset an und fügst dort relativ weit unten eine Formebene ein.

Aber aufgepasst: Du musst den unteren Teil über den mittleren Ebenenset-Ordner legen, weil sonst der mittlere den unteren verdeckt.

Bilder



 
Füge jetzt wieder einen Punkt mit dem Ankerpunkt-hinzufügen-Werkzeug auf der Formebene ein, und

Bilder



 
zieh mit gehaltener Alt-Taste per Drag&Drop von der oberen Formebene, die ein Füllmuster besitzt, die kompletten Fülloptionen auf die neue Formebene. So sparen wir uns, diese Optionen nochmal zusammenzuklicken.

Bilder



 
Füge jetzt wieder eine neue Formebene ein. Jetzt mit dem Ankerpunkt-hinzufügen-Werkzeug wieder einen Punkt in der Mitte hinzufügen und dann wie im Bild verbiegen:

Bilder



So, und jetzt der Formebene einen Verlauf hinzufügen:

Bilder



 

Unterer Bereich:

So, du hast es eigentlich geschafft! Sieht doch schon ganz gut aus, oder? Aber weil wir uns mit „gut“ nicht zufriedengeben, optimieren wir die Homepage noch....

Bilder



 
Dupliziere die obere Formebene (die mit dem Muster).

Dazu diese einfach auf das Neu-Symbol ziehen.

Bilder


Verändere die Form per Ankerpunkt-hinzufügen-Werkzeug, sodass die Form dann ungefähr so aussieht:

Bilder

 
So, und jetzt rastere die Formebene (mit einer darunterliegenden leeren Ebene) und füge der Ebene dann eine Maske hinzu. Jetzt fülle die Maske mit einem Schwarzweiß-Verlauf, sodass der linke Bereich ausgeblendet wird. Danach gib der Ebene eine Verlaufsüberlagerung mit z. B. einem Blauverlauf.

Bilder



 
So, jetzt dupliziere die Ebene zweimal und verschiebe diese jeweils ein paar Pixel höher. Den oberen Ebenen gibst du eine geringere Deckkraft als der unteren. Also die untere Ebene z. B. 100%, dann 50% und die ganz oben 25%. So müssten dann deine drei Verlaufsstriche aussehen:

Bilder



 
FERTIG. Du hast es geschafft! Deine Homepage ist jetzt komplett fertig designt.
Jetzt sollten wir allerdings die Homepage aktiv machen. Wenn man jetzt auf einen Button klickt, sollte der z. B. rot werden usw. Und das geht mit Image Ready!

Bilder



 

ImageReady (bis CS2)

Um von Photoshop in ImageReady zu gelangen, klickst du auf folgendes Symbol:

Bilder



ImageReady ist ein Zusatzprogramm von Photoshop, um Webanimationen und auch eine Homepage zu erstellen. Z. B. kann man damit leicht Roll-over-Effekte einfügen oder auch Flash-Animationen erstellen.

Die Oberfläche sollte dann ungefähr so aussehen:

Bilder



 
Um jetzt z. B. die Buttons so zu gestalten, dass sie rot leuchten, wenn man mit der Maus herüber fährt, benötigt man das Slice-Werkzeug. Damit markiert man die Bereiche, die dann z. B. in der Homepage aktive Elemente sein werden.

Am besten, du legst für jeden Button erst einmal Hilfslinien an:

Bilder


 
Wähle jetzt die Fülloptionen von der oberen Formebene aus und füge eine Farbüberlagerung mit folgenden Einstellungen hinzu:

Bilder



 

Das wird dann später die Farbe, die der Button annimmt, wenn man mit der Maus herüberfährt. Danach den Effekt wieder ausblenden. Den brauchen wir aber gleich wieder!

Wähle jetzt das Slice-Werkzeug aus und markiere jeden Button einzeln. du wirst sehen, dass dann jeder Button eine Slice-Nummer erhält:

Bilder



Als Letztes kannst du dem Mittelbereich auch eine große Slice-Auswahl geben. Als Typ wählst du in der Slice-Option nicht Bild, sondern Kein Bild aus. Danach kannst du einen Text in der Textbox einfügen.

Bilder

So, jetzt wird es kompliziert. Nein, nein ... also jetzt klickst du mit dem Slice-Auswahlwerkzeug z. B. den Startseitenbutton an. Danach klickst du in der Web-Inhaltspalette auf das Neu-Symbol und blendest dann die Farbüberlagerungsoption (von den Fülloptionen) ein. Somit wird genau dieser rote Effekt aktiviert, wenn man mit der Maus über dem Button ist. Das machst du jetzt für alle anderen Buttons genauso.

Bilder


 

 

Klick jetzt das Dokument-Vorschau-Symbol an, damit du im Dokument genau sehen kannst, ob der Effekt so funktioniert, wie du das möchtest.

Bilder



Du kannst in der Slice-Box genau einstellen, wohin die Links gehen sollen usw.

Bilder


 

 

Wenn du dann soweit alles fertig hast, kannst du Deine Homepage als Optimiert-Version speichern.

Bilder


 

 

Das war‘s aber jetzt wirklich. Du hast es geschafft! Deine Homepage ist fertig!

Bilder


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von kfzslay87
  • 06.05.2011 - 23:25

Top. Einfach geniales Tuto

Portrait von Voxpop
  • 08.03.2011 - 14:31

Hallo Stefan,

wusste gar nicht, dass es so gut laufen kann im Photoshop eine HP zu erstellen. Nun hab ich also meine "Startseite" mit allem durm und dran fertig, allerdings hänge ich gerade fest: Wie bekomme ich es z. B. hin, dass, wenn ich auf einen Button oben klicke, ich in dem Fenster in der Mitte eine html-Seite öffnet, die ich vorher entworfen habe. Also das Grundgerüst bleibt und nur das Fenster ändert sich entsprehend. War schon so verzweifelt, dass ich alles nochmal im DW machen wollte. Aber dann sieht das Layout halt entsprechend sch... aus ;-)
Danke schon mal!

Portrait von corderx
  • 04.02.2011 - 18:17

Sehr schön gemacht!!Dank.

Portrait von Frauenpower94
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 03.01.2011 - 15:47

Gut erklärt hab sogar was neues gelernt.. ^^ aber welches PHotoshop hast du is glaub n ziemlich altes... naja aber das ändert nichts alles kann auch mit CS5 nach gemacht werden ...

Portrait von Betchy
  • 14.06.2010 - 12:52

Sehr guter Workshop, nur gut das ich noch eine ältere Version habe.
Ist schade das in den neuen Versionen der Rollover-Wffekt nicht zu realisieren ist. Oder gibt es eine andere Möglichkeit mit CS4?

Portrait von griff
  • 28.04.2010 - 12:01

Habe sehr viel gelernt, vielen Dank für das ausführliche Tutorial. Das Schwierigste (und das ist nicht deine Schuld) daran war, dass das Tutorial mit einer "älteren" PS- Version erstellt wurde und ich als Neuling diverse Funktionen in CS4 suchen musste. Das Verzerren von Rechtecken war früher scheinbar auch einfacher ;-)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 21.02.2010 - 15:58

Dein Workshop ist klasse, kann Dir richtig gut folgen.

Portrait von Raisis
  • 21.02.2010 - 13:47

super erklärt! danke

Portrait von JaRoSchm
  • 14.02.2010 - 09:47

Finde das Tut sehr gut.
Habe es mit CS3 gemacht. Hat alles super geklappt bis auf den Rollover Effekt, da es ImageReady dort nicht mehr gibt.

Portrait von Web92
  • 26.12.2009 - 15:32

Vielen Dank! Hat mir bei vielem geholfen!

Portrait von langu
  • 04.11.2009 - 14:55

Cool echt super Hilfe :-)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.10.2009 - 17:14

Cool sowas habe ich gesucht :)

Portrait von FredFuchs94
  • 27.10.2009 - 20:14

Einfach großartig. Kann dir super folgen und alles echt sehr sehr gut erklärt und auch in nachvollziehbar dargestellt.

Mehr als 5 Sterne brauche ich glaube ich nicht mehr zu sagen :).

Portrait von doormann
  • 02.08.2009 - 13:50

Ich will meine eigene homepage gestalten und hoffe das ich mit deinem tut richtig liege. die kommentare der anderen lassen ja großes hoffen!

Portrait von apamost
  • 20.07.2009 - 17:05

top super sache ;)

kann ich nur weiterempfehlen

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 19.06.2009 - 19:08

hervorragend erklärt :D :D

Portrait von Nemme
  • 19.06.2009 - 16:09

sehr gut erklärtes Tut... allerdings hab ich CS3 und finde einige sachen nicht die du beschreibst ^^

Portrait von iceman27581
  • 18.06.2009 - 19:42

Kann mich nur abschließen, solche Workshops kann man immer gebrauchen

Besten Dank iceman27581

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 18.06.2009 - 16:26

Ich hatte noch keine Zeit ihn ganz zu sehen,
aber die Hälfte die ich gesehen habe: toll erklärt
und tolle Inspiration!

x
×
×