Anzeige
Tutorialbeschreibung

Klassisches Layout für ein DVD-Menü erstellen

Klassisches Layout für ein DVD-Menü erstellen

Dieser Workshop erklärt die Erstellung einer Homepage in Adobe Photoshop CS4. Zum Anfang wird gezeigt, wie perfekte Verlaufsformen erstellt werden. Weiter geht es mit der Positionierung eines Logos und Text. Anschließend wird eine Navigation erstellt und mit dem Slice-Werkzeug für die HTML-Ausgabe vorbereitet. Ganz zum Schluss wird kurz auf die Bearbeitung mit Dreamweaver eingegangen, denn Roll-Over Buttons lassen sich nur noch damit realisieren, weil in Photoshop diese Funktion leider entfernt wurde. Dieses Video-Tutorial ist ein Muss für jeden, der selber schnell eine moderne, stylische Homepage erstellen möchte, und dabei auch auf eine geordnete Ebenenstruktur Wert legt.

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


Schritt 1:

Ziel soll es sein, dass am Ende dieses Design, welches komplett in Adobe Photoshop erstellt wurde, herauskommt:

Bilder




 

Schritt 2:

Zunächst erstelle ich ein neues Dokument. Weil ich eine Homepage designe, habe ich gleich die Vorlage Web ausgewählt. Als Größe benutze ich 1024x768 Pixel in einer Auflösung von 72 dpi.

Bilder



 

Schritt 3:

Danach speichere ich das Dokument mit einem aussagekräftigen Namen ab. In meinem Beispiel "DVD-Design".

Bilder



 

Schritt 4:

Damit alles schön geordnet ist, gehe ich in die Ebenenpalette und erstelle ein Gruppen-Set mit dem Namen "Header". Darin erstelle ich gleich meine neuen Ebenen, damit ich diese später durch einen Klick zusammenfassen bzw. ein- oder ausblenden kann.

Bilder



 

Schritt 5:

In meiner Gruppe "Header" erstelle ich eine Untergruppe namens "blaue Streifen".

Bilder



 

Schritt 6:

In meine Gruppe "blaue Streifen" füge ich jetzt eine Formebene ein. In meinem Beispiel ist es mit dem Rechteckwerkzeug erstellt. Aufgepasst: Es muss der Button (oben links) Formebene aktiviert sein. Voreingestellt war die Option, dass der letzte Ebenenstil mit verwendet werden soll. Darum ist gleich eine Verlaufsüberlagerung aktiviert worden.

Bilder



 

Schritt 7:

Diese Fülloption ändere ich aber schnell. Dazu ein Rechtsklick auf die neue Formebene>Fülloptionen.

Bilder



 

Schritt 8:

In der Option Farbüberlagerung füge ich ein Blau hinzu und wähle Verlaufsüberlagerung ab:

Bilder



 

Schritt 9:

Als Nächstes erstelle ich eine weitere Formebene. Jedoch nehme ich dazu jetzt das Zeichenstiftwerkzeug und füge 3 Punkte hinzu, die ich gleich von der Form sehr leicht verbiegen kann.

Bilder



 

Schritt 10:

Damit die Form einen schönen Farbverlauf bekommt, wähle ich wieder Fülloptionen aus und füge dann mit der Option Verlaufsüberlagerung den passenden Verlauf aus. Diesen kann ich jederzeit von den Farben her verändern.

Bilder



 

Schritt 11:

Weil ich in der vorherigen Ebene eine Farbüberlagerung aktiviert hatte, wurde diese beim Erstellen der neuen Form automatisch hinzugefügt. Diese Option wähle ich jetzt wieder ab, mir genügt der Verlauf.

Bilder



 

Schritt 12:

Und weiter geht's. Wieder eine neue Form muss her. Auch diesmal nehme ich das Zeichenstiftwerkzeug, um schön geschwungene Linien bzw. Flächen zu erzeugen.

Bilder



 

Schritt 13:

Habe ich diese Fläche erstellt, werde ich sie in der Ebenenhierarchie in der Gruppe "blaue Streifen" per Drag&Drop fast nach ganz unten ziehen:

Bilder



 

Schritt 14:

Wie soll es anders sein, auch jetzt wird ein Verlauf dieser Formebene hinzugefügt:

Bilder



 

Schritt 15:

Na, das sieht doch schon gar nicht schlecht aus! Jedoch muss der untere Teil gerade abschließen. Dazu komme ich gleich.

Bilder



 

Schritt 16:

Gut, dass ich vorher eine Untergruppe namens "blaue Streifen" erstellt habe. Denn diese wähle ich jetzt aus. Danach ziehe ich mit dem Rechteckauswahlwerkzeug eine Auswahl wie im Bild. Das soll der Bereich sein, der eingeblendet bleiben soll. Danach klicke ich auf Ebenenmaske erstellen (unten in der Ebenenpalette):

Bilder



 

Schritt 17:

Und so sieht es aus, wenn der Bereich maskiert ist. Nur der obere weiße Bereich der Maske wird angezeigt.

Bilder



 

Schritt 18:

Weil mir das immer noch nicht genug geschwungene Formen sind, erstelle ich jetzt noch eine zusätzliche. Das ist schnell mit dem Zeichenstiftwerkzeug realisiert.

Bilder



 

Schritt 19:

Nach so viel Arbeit wäre es jetzt mal angebracht, zwischenzuspeichern. Denn Photoshop hat leider immer noch keine automatische Hintergrundsicherung.

Bilder



 

Schritt 20:

Als Nächstes füge ich das PSD-Tutorials.de-Logo in mein Photoshop-Dokument ein. Das geht per Drag&Drop aus dem Explorer bzw. Dateimanager (in meinem Fall der Altap-Salamander, den ich übrigens sehr empfehlen kann).

Bilder



 

Schritt 21:

So, jetzt nur noch die Datei in Photoshop "loslassen" und dann ist mein Logo im Dokument enthalten.

Bilder



 

Schritt 22:

Weil ich eine EPS-Datei eingefügt habe und es sich bei diesem Format um eine Vektorgrafik handelt, darf ich hier sogar frei die Auswahl ohne Qualitätsverlust auswählen. Da es sich, wie ganz am Anfang schon erklärt, um ein Webseitenlayout handelt und dieses nur am Bildschirm angezeigt wird, reichen 72 dpi (Pixel/Zoll) Auflösung aus.

Bilder



 

Schritt 23:

Da ist auch schon mein Logo. Jedoch nicht direkt in meinem Photoshop-Dokument. Das werde ich jetzt gleich ganz einfach in mein DVD-Design-Dokument einfügen.

Bilder



 

Schritt 24:

Dazu klicke ich in der Ebenenpalette mit der rechten Maustaste auf die Ebene 1 und wähle dann Ebene duplizieren.

Bilder



 

Schritt 25:

Danach erscheint die Dialogbox Ebene duplizieren. Darin wähle ich jetzt das Zieldokument "DVD-Design.psd" aus.

Bilder



 

Schritt 26:

Ich werde das Logo jetzt per Drag&Drop an die richtige Position innerhalb der Ebenen ziehen:

Bilder



 

Schritt 27:

Jetzt kann ich mit dem Verschieben-Werkzeug das Logo an der richtigen Stelle im Bild positionieren. Außerdem habe ich der Ebene einen aussagekräftigen Namen gegeben: Logo.

Bilder



 

Schritt 28:

Damit das Logo noch stylischer rüberkommt, habe ich die Fülloption Schlagschatten ausgewählt.

Bilder



 

Schritt 29:

Eine neue Ebene muss her. Diesmal eine Textebene mit dem Schriftzug 'PSD-Tutorials.de'

Bilder



 

Schritt 30:

Jetzt erstelle ich eine weitere Textebene oben rechts. Darin trage ich den Namen der DVD ein.

Bilder



 

Schritt 31:

Damit der Schriftzug der DVD den gleichen Schlagschatten wie das Logo bekommt, kann ich diesen per Drag&Drop mit gedrückter Alt-Taste vom Logo auf den Schriftzug kopieren.

Bilder



 

Schritt 32:

Ich wähle noch das #1 aus und ändere die Farbe, damit der User gleich sieht, um welche DVD es sich bei der Doppel-DVD handelt.

Bilder



 

Schritt 33:

Ein helles Orange finde ich sehr passend zur blauen Hintergrundfarbe.

Bilder



 

Schritt 34:

Für die 3 neuen Ebenen erstelle ich zur besseren Übersicht eine neue Gruppe mit dem Namen "Logo + Text oben"

Bilder



 

Schritt 35:

Die Ebenen kann ich jetzt mit der Shifttaste alle oder einzeln mit der Strg-Taste direkt auswählen (unbedingt beachten, dass der Name der Ebene ausgewählt wird und nicht das Thumbnail, weil sonst mit gedrückter Strg-Taste eine Auswahl erstellt werden würde) und in den neuen Gruppenordner ziehen.

Bilder



 

Schritt 36:

Sieht doch jetzt viel aufgeräumter aus!

Bilder



 

Schritt 37:

Wenn ich jetzt die Gruppen zusammenklappe, hat man eine sehr schöne Ebenenstruktur und das Arbeiten wird dadurch beschleunigt, weil ein langes Suchen der passende Ebene entfällt.

Bilder



 

Schritt 38:

Jetzt erstelle ich eine neue Fläche für die Navigation. Dazu habe ich wieder das Rechteck-Werkzeug auserkoren. Vorher habe ich eine neue Gruppe erstellt mit dem Namen "Navigation".

Bilder



 

Schritt 39:

Den Verlauf für die neue Fläche ändere ich in den Fülloptionen wie folgt:

Bilder



 

Schritt 40:

Außerdem gebe ich der Fläche eine weiße Kontur. Ich persönlich finde weiße Konturen sehr ansprechend, erst recht, wenn der Hintergrund eher dunkel ist.

Bilder



 

Schritt 41:

Und so sieht das Resultat bisher aus:

Bilder



 

Schritt 42:

Der Hintergrund könnte auch einen Anstrich vertragen. Weiß gefällt mir nicht so sehr. Darum nehme ich das Füllwerkzeug und ändere die Farbe in Grau.

Bilder



 

Schritt 43:

Als Nächstes erstelle ich eine Textebene. Da hinein kommen meine Navigationspunkte. Angefangen mit Startseite ...

Bilder



 

Schritt 44:

... und abgeschlossen mit Dreamweaver. Ich habe Zwischenräume mit jeweils 4 Leerzeichen ganz einfach gefüllt und die Textausrichtung auf Zentriert gestellt.

Bilder



 

Schritt 45:

Als Nächstes füge ich der neuen Textebene eine Farbüberlagerung als Fülloption hinzu. Denn diese sollen ein Mouse-Over simulieren. Wenn der User nämlich mit der Maus auf dem Button ist, soll sich der Schriftzug von Weiß in Orange ändern.

Bilder



 

Schritt 46:

Die neue Fülloption Farbüberlagerung kann ich aber erst einmal ausblenden. Ich benötige diese erst ganz zum Schluss. Ich sag's mal so: Dirty Tricks :-), also dranbleiben und nicht aufhören, hier weiterzulesen.

Bilder



 

Schritt 47:

Weil ich ein Fan von sanften Schatten bin, füge ich auch hier für die Navigationsfläche einen Schlagschatten mit folgender Einstellung hinzu:

Bilder



 

Schritt 48:

Der Schlagschatten ist hinzufügt. Jetzt fehlt mir noch eine Unterteilung der Menüpunkte. Dazu erstelle ich eine neue Ebene und nehme den Buntstift zum Ziehen der Striche. Damit ich nicht übermale, habe ich zuvor mit der Strg-Taste von meiner Navigationsfläche eine Auswahl erstellt. Dann die neue Ebene angeklickt und mit dem Buntstift die Linien gezogen. Dabei hilft das Ziehen mit gedrückter Shift-Taste. Denn dann werden die Linien garantiert gerade, egal, wie viel ich mit der Maus wackele.

Bilder



 

Schritt 49:

Die Ebene sollte natürlich auch einen aussagekräftigen Namen erhalten. Ich habe mich für "Unterteilung" entschieden.

Bilder



 

Schritt 50:

Damit die Unterteilungen noch besser wirken, füge ich, wie soll es anders sein, natürlich eine Verlaufsüberlagerung als Fülloption ein.

Bilder



 

Schritt 51:

Und so sieht das Zwischenergebnis aus:

Bilder



 

Schritt 52:

Als Nächstes werde ich die Hintergrundebene zu einer normalen Pixelebene umwandeln. Dazu klicke ich doppelt auf die Hintergrundebene.

Bilder



 

Schritt 53:

Als Namen schlägt Photoshop immer Ebene 0 vor. Den Namen Hintergrund finde ich in diesem Fall aber treffender.

Bilder



 

Schritt 54:

Der Hintergrundebene füge ich jetzt eine neue Fülloption hinzu.

Bilder



 

Schritt 55:

Ich möchte eine Scanline als Musterüberlagerung hinzufügen. Leider bietet Photoshop dieses Muster von Haus aus nicht an. Schade ...

Bilder



 

Schritt 56:

Macht aber nichts, dafür gibt es www.psd-tutorials.de! Ich gebe als Suchwort Scanline ein.

Bilder



 

Schritt 57:

Danach klicke ich auf das 2. Resultat in der Downloadsuche.

Bilder



 

Schritt 58:

Jetzt nur noch herunterladen und auf die Festplatte speichern.

Bilder



 

Schritt 59:

In die gepackte Zip-Datei kann ich durch einen Doppelklick die Scanlines.pat (pat steht für englisch: Pattern = Muster in Photoshop) in Photoshop importieren.

Bilder



 

Schritt 60:

Jetzt stehen mir in den Fülloptionen unter Musterüberlagerung die Scanlinien zur Verfügung.

Bilder



 

Schritt 61:

Sobald ich die richtige ausgewählt habe, kann ich meine neue Hintergrundfläche bewundern. Damit die Scanlinien nicht zu offensichtlich sind, habe ich eine Deckkraft von 35% gewählt.

Bilder



 

Schritt 62:

Als Nächstes erstelle ich eine neue Formebene mit dem Rechteckwerkzeug. Als Fülloption wähle ich wieder eine weiße Kontur und eine graue Farbüberlagerung.

Bilder



 

Schritt 63:

Jetzt wirds ernst: Ich zerschneide das Bild. Ok, nicht ganz, aber ich definiere jetzt mit dem Slice-Werkzeug, welche Bereiche Photoshop für mich beim Export als HTML  zerschneiden soll. Dazu wähle ich das Slice-Werkzeug aus.

Bilder



 

Schritt 64:

Ich wähle damit erst einmal den Header aus. Diese erste Fläche bekommt dann auch praktischerweise die Nummer 01 zugeordnet.

Bilder



 

Schritt 65:

Als Nächstes ziehe ich dann weitere Bereich auf, in meinem Fall wird jeder Button damit ausgewählt. Danach der Schatten von der Navigation und zu guter Letzt die Fläche darunter. Somit weiß Photoshop, dass es insgesamt 10 Einzelbilder abzuspeichern gilt. Ansonsten müsste ich das alles per Hilfslinien auswählen, dann markieren, kopieren, in ein neues Dokument einfügen und dann jeweils einzeln abspeichern. Viel zu aufwendig! Zum Glück gibt es dafür das Slice-Werkzeug.

Bilder



 

Schritt 66:

Damit Photoshop weiß, wie die einzelnen Flächen nachher vom Namen zu speichern sind, klicke ich mit dem Slice-Auswahlwerkzeug doppelt auf die einzelnen Slices und benenne diese. Der Header bekommt von mir den sehr fantasievollen Namen: Header.

Bilder



 

Schritt 67:

Weiter geht's mit dem Button Startseite. Den benenne ich in Startseite_0. Jetzt fragst du dich vielleicht, warum 0? Ich benutze die 0 immer als nicht angeklickten Zustand. So weiß ich die Dateien genau zu unterscheiden. Denn später werde ich noch den aktiven Zustand speichern. Und der heißt dann Startseite_1

Bilder



 

Schritt 68:

Nach der schweißtreibenden Arbeit geht's zum Endspurt. Ab auf Menü>Datei>Für Web und Geräte speichern.

Bilder



 

Schritt 69:

Wie praktisch, ich kann jedes einzelne Slice auswählen und sogar in anderen Datei-Formaten oder Kompressionen speichern.

Bilder



 

Schritt 70:

Zum Bespiel GIF, JPEG, PNG-8 bzw. PNG-24 (mit Transparenz) oder WBMP.

Bilder



 

Schritt 71:

Ich habe mich für das PNG-Format entschieden. Und damit ich mir das Coden spare, wähle ich auch gleich die Option HTML und Bilder aus.

Bilder



 

Schritt 72:

Da sind die Dateien. Eine HTML-Datei namens DVD-Design.html und ein Unterordner namens images. In images befinden sich meine gesliceten Bilder.

Bilder



 

Schritt 73:

Hier nochmal ein Screenshot (und wie du siehst, heißen alle Dateien genau so, wie ich diese vorher definiert habe):

Bilder



 

Schritt 74:

Jetzt bin ich aber neugierig. Hat der Export wirklich geklappt? Gleich mal ein Klick auf die DVD-Design.html:

Bilder



 

Schritt 75:

Damit die Menüpunkte beim Herübergehen mit der Maus eine andere Farbe annehmen, werde ich jetzt die Fülloption Farbüberlagerung in meiner Text-Ebene in der Navigation einblenden.

Bilder



 

Schritt 76:

Damit diese beim Exportieren nicht meine vorhandenen Dateien überschreiben, werde ich alle Slices umbenennen. Startseite_0 wird zu Startseite_1.

Bilder



 

Schritt 77:

Schnell exportiert und nachgeschaut: Super, es hat geklappt. Ich habe jetzt zu jedem Button beide Zustände (aktiv und passiv, also einmal weiße und dann orange Textfarbe).

Bilder



 

Schritt 78:

Ich starte jetzt Dreamweaver, um den Buttons einen Rollover-Effekt hinzuzufügen. Denn leider gibt es diese Option nicht (mehr). Bis Photoshop CS2 gab es noch Image-Ready; dieses Miniprogramm hat diese Arbeit abgenommen, Rollover-Effekte usw. zu erzeugen. Aber glückliche Käufer der CS4 Suite können dazu Dreamweaver benutzen.

Bilder



 

Schritt 79:

Ich klicke auf Menü>Einfügen>Grafikobjekte>Rollover-Bild.

Bilder



 

Schritt 80:

Jetzt kann ich noch den Bildnamen definieren, aber viel wichtiger ist, dass ich einmal das Originalbild angebe und dann das Bild, welches eingeblendet werden soll, wenn die Maus rübergeht. Ein Alternativtext sollte nicht vergessen werden.

Bilder



 

Schritt 81:

Wenn ich das bei allen Navigationspunkten gemacht habe und mir dann die DVD-Design.html - Datei anschaue, sieht das Ergebnis wie folgt aus.

So kannst du eine Homepage erstellen. In meinem Fall ist es ein DVD-Menü für die aktuelle PSD-Tutorials.de - Photoshop-Workshop-DVD Premium Edition.

Bilder



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Forven
  • 02.01.2013 - 21:12

Der erste Teil liest sich schonmal recht verständlich als Anfänger. Werd ich bald angehen das Projekt! Danke! :)

Portrait von MaoMao
  • 14.12.2012 - 20:34

Klasse Video danke dafür.

Portrait von MaoMao
  • 14.12.2012 - 20:30

Vielen dank für das Tutorial.

Portrait von Boxerlady
  • 07.02.2012 - 16:45

sehr gutes tutorial. dankeschön!

Portrait von bichi
  • 16.11.2011 - 16:10

WOW! Das ist klar formuliert, sachlich und konkret. Als Anfänger hilft mir das einen Riesensprung vorwärts!! Das werde ich ausprobieren..

Portrait von plusMan
  • 16.09.2011 - 16:48

Ich bin begeistert, auch für mich als Anfänger gut zu verstehen und auch umzusetzen. Vielen Dank!!

Portrait von Dunehero
  • 10.09.2011 - 22:21

sehr schön! toller Leitfaden, genau das was ich für meine Seite gesucht habe

Portrait von BikerSeppel
  • 30.08.2011 - 20:25

Super! werd es gleich ausprobieren

Portrait von cranos
  • 20.07.2011 - 08:15

Ausführliches und Hilfreiches Tutorial. Danke dir.

Portrait von OJey
  • 11.07.2011 - 08:45

Gut und ausführlich erklärt, man kann wieder was von lernen...

Portrait von Suppenkasper8
  • 20.05.2011 - 21:07

super sache!! Auch wenn der Rollover im letzten Bild wohl nicht so prächtig funktioniert!

Portrait von bk28832
  • 11.05.2011 - 11:47

Super Tut! Einfach und gut erklärt.

Portrait von Feddmund
  • 16.04.2011 - 16:41

sehr gute anleitung. vielen dank!

Portrait von Lerhling
  • 01.04.2011 - 18:52

Danke!

Das sind Infos die ich schon immer mal wissen wollte!

Vielen Danl!

Portrait von DraXs
  • 19.02.2011 - 19:16

sehr schönes Tutorial!

Portrait von Gininho
  • 09.02.2011 - 08:26

tolles tuto. sehr gut

Portrait von Javis
  • 26.01.2011 - 12:03

Vielen Dank für das Tutorial, ich habe ne Menge Neues dazugelernt. Super Arbeit!

Portrait von besercer
  • 23.01.2011 - 00:28

Danke, hat mir in vielen Bereichen geholfen!

Portrait von Reavyn
  • 16.09.2010 - 23:18

Sehr Gutes Tut Hat mir sehr geholfen

Portrait von tfhsnak3
  • 24.06.2010 - 09:02

geniales tut und wirklich sehr leicht nachzuvollziehen 5*

x
×
×