Homepagedesign erstellen mit Mouse-over-Effect-Navigation

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).

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.

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!




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




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

Fülloptionen anwenden

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

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.

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:

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.

Schlagschatten einfügen

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

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!




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.




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

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).




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

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.




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:

Schlagschatten einfügen

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

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:

Logo positionieren

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

Weitere Fülloptionen

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




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

Weitere Fülloptionen

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

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:




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




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




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




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




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:




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:

 

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.




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




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.




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:




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

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....




Dupliziere die obere Formebene (die mit dem Muster).

Dazu diese einfach auf das Neu-Symbol ziehen.

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

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.




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:




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!

ImageReady (bis CS2)

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




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:




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:



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

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:

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.

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.

 

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

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



 

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

 

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