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

Passend zum Inhalt empfehlen wir:
Photoshop-Workshop-DVD - Webdesign Vol. 2
Top. Einfach geniales Tuto
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!
Sehr schön gemacht!!Dank.
du bist meine rettung danke
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 ...
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?
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 ;-)
Dein Workshop ist klasse, kann Dir richtig gut folgen.
super erklärt! danke
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.
Vielen Dank! Hat mir bei vielem geholfen!
Cool echt super Hilfe :-)
Cool sowas habe ich gesucht :)
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 :).
Ich will meine eigene homepage gestalten und hoffe das ich mit deinem tut richtig liege. die kommentare der anderen lassen ja großes hoffen!
top super sache ;)
kann ich nur weiterempfehlen
hervorragend erklärt :D :D
sehr gut erklärtes Tut... allerdings hab ich CS3 und finde einige sachen nicht die du beschreibst ^^
Kann mich nur abschließen, solche Workshops kann man immer gebrauchen
Besten Dank iceman27581
Ich hatte noch keine Zeit ihn ganz zu sehen,
aber die Hälfte die ich gesehen habe: toll erklärt
und tolle Inspiration!
Mehr anzeigen