Anzeige
Tutorialbeschreibung

Rollover-Buttons-4 Phasen-in Photoshop erstellen

Rollover-Buttons-4 Phasen-in Photoshop erstellen

Wer für die Erstellung einer "barrierefreien", WC3-konformen Website html-Editoren wie z.B. Net-ObjectsFusion o.ä. Programme nutzen möchte, ärgert sich oftmals über die grafisch nicht sehr ansprechenden Style-Vorlagen, die das Programm von Haus aus bietet. Oder aber es soll einfach etwas persönlicher aussehen und den eigenen Stil repräsentieren... Hierzu lassen sich eigene, also selbst erstellte Style-Vorlagen-Elemente wie Buttons oder Banner in diese Programme importieren, die dann innerhalb der Site weiterverarbeitet werden können.

In diesem Tutorial erfahrt ihr, wie man mittels Photoshop (auch ältere Photoshop-Versionen möglich) auf einfache Weise z.B. Navigationsbuttons erstellt, die als Rollover-Buttons vom html-Editor weiter verarbeitet werden können.


Vorab-Überlegungen:

 

Zunächst sollte festgelegt werden, in welcher Größe (Breite x Höhe in Pixel) und Auflösung die Buttons später auf der fertigen Website erscheinen sollen.

In diesem Beispiel habe ich mich für eine Breite von 126 Pixel und eine Höhe von 53 Pixel  bei einer (Standard-Bildschirm-)Auflösung von 72dpi entschieden.

Gute proportionBilder

Die Breite sollte nicht zu klein gewählt werden, um später, im html-Editor noch ausreichend Platz für den Button-Text zu erhalten,
der vom Programm quasi über die Grafik(en) "projeziert" wird; ist der "Knopf" zu schmal, könnte die Schrift bei längeren Worten sonst über
den Button herausragen oder abgeschnitten werden, was nicht sehr ansehnlich oder professionell wirkt.

Button zu schmal für max. TextlängeBilder


Ähnlich verhält es sich bei der Höhe;

      

Texthöhe und Buttonhöhe passen zusammenBilder

Wenn der Button-Text noch einigermaßen lesbar sein soll, empfiehlt sich für die Button-Höhe mindestens 25 Pixel zu wählen,
um bei einer 10pt.-Schrift (schon recht klein) noch in den "Rahmen" zu passen. Sonst sieht es dann später evtl. so aus wie auf der unteren, zugegebenermaßen übertriebenen Abbildung, was ja keiner will:

       

Button zu flach für TexthöheBilder

Natürlich lassen sich die einzelnen Parameter für die Text-Proportionen in den html-Editoren noch gezielt festlegen und variieren, allerdings empfiehlt sich aus meiner Erfahrung eine zumindest ungefähre Vorfestlegung der Größe für die Schaltflächen.

TIPP: Wenn erst einmal eine Grundlage geschaffen wurde, lassen sich natürlich auch die Proportionen der Buttons in Photoshop später noch über "Bild"/"Bildgröße" manipulieren, allerdings sollte bei der Verwendung von Texturen (wie hier im Beispiel die Glasspiegelung oder auch der Riffeleffekt im Hintergrund)- die ja bei einem Pixel-basiertem Grafikprogramm wie Photoshop dann auch mit skaliert werden- besser vorab das Größenverhältnis festgelegt werden.

Doch nun geht's los:

Nach dem öffnen des Programms wird zunächst über "Datei"/"Neu" oder über die Tastenkombination "Strg+N"

Datei neuBilder

ein neues Dokument mit den zuvor annähernd ermittelten Größenverhältnissen, der gewünschten Auflösung und transparentem Hintergrund erstellt.
Für alle Webseite-Elemente sollte der RGB-Farbmodus und eine Auflösung von 72 dpi gewählt werden.

ScreenshotBilder

In der Ebenen-Verwaltung werden nun zu der bereits vorhandenen "Ebene 1" vier weitere Ebenen erstellt, da ja geplant ist, die Buttons für 4 Phasen oder Zustände zu erstellen, nämlich
  1. "Standard" (so sieht ein nicht gewählter Button später auf der Website aus)
  2. "Mouse-Over" (so sieht der Button aus, wenn sich der Mauszeiger darüber befindet)
  3. "Hervorgehoben" (ein angeklickter/gewählter Button/Menupunkt)
  4. "Hervorgehoben+Mouse-Over" (der aktivierte Button bei Mausberührung).
Dazu wird noch eine Ebene erstellt, die die Reflektion bzw.den Glaseffekt simuliert, so das insgesamt 5 Ebenen benötigt werden.

Eine neue Ebene in Photoshop kann auf verschiedene Weisen generiert werden:
  • Über das Menu "Ebene"/"Neu"/"Ebene"
  • Per Tastenkombination "Umschalt"+"Strg"+"N"
Neue Ebene erstellenBilder
  • oder per Mausklick auf das Symbol "Neue Ebene" in der Ebenen-Verwaltung, was ich persönlich am bequemsten finde.
Neue Ebene per MausklickBilder


Auf diese Weise lassen sich die 5 benötigten Ebenen sehr schell und einfach erstellen;

Der Übersichtlichkeit halber empfehle ich die eindeutige Benennung der einzelnen Ebenen. Dazu in der Ebenen-Verwaltung auf die vorgegebenen Namen links doppelklicken, kurz warten bis die Eingabemaske aktiviert ist und den einzelnen Zuständen die entsprechenden Namen zuweisen, also "Standard", "Mouse-Over", "Hervorgehoben" und "Hervorgehoben-Mouse-Over".

Die oberste Ebene wird die "Reflektions- oder Glaseffektebene".

Nun sollte die Ebenenverwaltung in etwa wie folgt aussehen:

Die 5 neuen noch leeren EbenenBilder


Im folgenden werden die noch "leeren" Ebenen sukzessive mit Inhalt gefüllt.

Doch zunächst noch ein kleiner Exkurs, der sich an die "Anfänger" oder "Neueinsteiger" richtet, die Photoshop und die Arbeitsweise des Programms noch nicht so genau kennen.
Wer schon Erfahrung im Umgang mit dem Programm gesammelt hat, kann den folgenden Abschnitt getrost überspringen;
Allen anderen muss ich allerdings mitteilen, das der Funktionsumfang des Programms und seiner einzelnen Komponenten so umfangreich und  anhand von diversen Paramentern auf so vielfältige Weise manipuliert werden kann, daß es unmöglich ist, alle Paramenter hier genau zu beschreiben. Ich beschränke mich deshalb auf die absolut notwendigen Grundlagen, die zur Realisierung dieses Tutorials unbedingt nötig sind. Ich kann nur jedem "Neuling" empfehlen viel auszuprobieren und die Auswirkungen der einzelnen Aktionen am Bildschirm nach zuverfolgen. Auf diese Weise lernt es sich effektiv und vor allem nachhaltig!


Für die Arbeit mit Photoshop sind einige Grundsätze unabdingbar zu berücksichtigen:
  • Alle Aktionen beziehen sich jeweils nur auf die aktive Ebene, sofern mit mehreren Ebenen gearbeitet wird; das bedeutet, daß nur diejenige Ebene von der Aktion bzw. dem gewählten Werkzeug betroffen ist, die in der Ebenenverwaltung durch den kleinen Pinsel markiert ist und deren Hintergrundfarbe hervorgehoben dargestellt wird. Im oberen Screenshot ist das die Ebene, die ich "Reflektion" genannt habe.
  • Wenn eine "Auswahl" getroffen wurde (Menu: "Auswahl" oder Werkzeuge "Auswahl-Rechteck-/Ellipse/Zauberstab/Lasso..."), beziehen sich alle Auswirkungen nur auf den Bereich, der sich in der aktiven Ebene innerhalb der Auswahl befindet. In der weiteren Bearbeitung wird sich dieses Prinzip noch "selbst erklären". Hierbei kann jedoch zwischen den Ebenen "gewechselt" werden, ohne die getroffene Auswahl zwischenzeitlich aufheben zu müssen, so das sich eine getroffene Auswahl prinzipiell wiederum auf alle Ebenen beziehen kann.
  • Die Arbeit mit Ebenen erleichtert oftmals die Verwirklichung von Vorstellungen oder gewünschten Ergebnissen, obwohl diese sich bestimmt auch auf andere Art und Weise erzielen liessen. Man sollte jedoch bei allen Vorteilen, die die Arbeit mit Ebenen mit sich bringt stets daran denken, das die Dateigröße entscheidend von der Anzahl der in einem Projekt enthaltenen Ebenen abhängt; soll heißen: je mehr Ebenen desto größer die Datei.
Beginnen werden wir mit der untersten Ebene "Standard" die wir in der Ebenen-Verwaltung mit einem linken Mausklick auf den Namen aktiv setzen. Es sollte ein Auge-Symbol im linken Kästchen neben dem Namen zu sehen sein (das Auge steht hier für die Sichtbarkeit der aktiven Ebene) und im rechten Kästchen das Pinsel-Symbol, welches uns die "Bearbeitbarkeit" der Ebene signalisiert. Info am Rand: Eine Ebene kann auch, wenn sie "Unsichtbar" geschaltet ist bearbeitet werden! Um eine Ebene unsichtbar zu schalten reicht ein linker Mausklick aufs "Auge"-Symbol.

Wir werden der Ebene "Standard" eine einfarbige Füllung geben, die mittels des Farbwählers für die Vordergrundfarbe aus der Werkzeugpalette nach Wunsch gewählt wird. Dazu mit der linken Maustaste auf das "obere", linke Farbfeld klicken (in der Abbildung rot umrandet), worauf hin sich das Farbauswahl-Fenster öffnet. Hier kann auf vielfältige Weise eine gewünschte Farbe bestimmt werden, was ich an dieser Stelle jedoch nicht vertiefen möchte.

Farbwahl-FensterBilder


Info: Die "harte" Trennung der einzelnen Farbabstufungen in dem obigen Bildschirmabdruck sind der Redutzierung des Farbspektrums auf die sog. "Websicheren" Farben geschuldet. Wenn der Haken bei "Nur Webfarben anzeigen" entfernt wird sind auch feinere Abstufungen (16,7 Millionen Farben bei 24 bit Farbtiefe) möglich.

Für unser Beispiel wählen wir als Vordergrundfarbe den Hexadezimalwert "#666666". Das ist die Graustufe oberhalb der durch den kleinen Auswahlpunkt gekennzeichneten Farbe. Unsere Auswahl bestätigen wir durch drücken der "Enter"-Taste oder durch einen linken Mausklick auf  die "OK"-Schaltfläche.
Das Farbwahl-Fenster schliesst sich darauf hin wieder.

Bevor die Ebene "Standard" nun mit Farbe gefüllt wird, wählen wir eine Farbe für die "Mouse-Over"-Schaltfläche, indem wir eine neue Hintergrundfarbe wählen (in der oberen Abbildung das weiße Feld unter der "Vordergrundfarbe").

Für die Hintergrundfarbe nehmen wir den im Screenshot dargestellten Hexadezimalwert "#333333".

Nun wird aus der Werkzeugpalette das "Farbeimer"-Werkzeug gewählt und die Fläche der Ebene "Standard" wird vollflächig durch einen linken Mausklick in die leere Fläche eingefärbt.

Farbeimer-WerkzeugBilder


Die Farbe für den Standard-ButtonBilder


Hiernach werden Vorder-und Hintergrundfarbe durch Anklicken des kleinen Doppel-Pfeilsymbols in der rechten oberen Ecke der Farbwahlfelder vertauscht. Nun wird die 2te Ebene "Mouse-Over" ausgewählt und erneut mittels des Farbeimers eine vollflächige Füllung angelegt.

Die Farbe für Mouse-OverBilder


Für die beiden weiteren Zustände der Buttons wählen wir erneut Farben, wie zuvor und weisen den beiden noch verbliebenen Phasen entsprechende Füllungen zu. Für "Hervorgehoben" wählen wir den Hexadezimalwert "#999999" und für "Hervorgehoben-Mouse-Over" den Farbwert "#993333".

HervorgehobenBilder
   

und Hervorgehoben bei MausberührungBilder


Das ist die Basis für die 4 Zustände der Rollover-Buttons.
Noch ziemlich langweilig, aber mit einem kleinen Trick auf Ebenen 5 werten wir sie nun optisch auf, indem wir die Tiefenwirkung durch Glasoptik verstärken.
Dazu muss zunächst die Ebene "Reflektion" aktiviert werden.

Danach wird im Farbfeld für Vorder- und Hintergrundfarbe mittels dem kleinen Symbol unten links (schwarzes und weißes überlappendes Quadrat) die Vorder-und Hintergrundfarbe auf schwarz-weiß eingestellt. Für die Bearbeitung der folgenden Effekte ist dies wichtig.

Anschließend wird mittels des Auswahlrechtecks aus der Werkzeugpalette der obere Teil des Buttons ausgewählt/markiert

Auswahlrechteck und gewählter AuswahlbereichBilder


und mit einer Farbeimer-Füllung im Modus "Aufhellen" bei 35%iger Deckkraft und weißer Vordergrundfarbe der ausgewählte Teil des Buttons gefüllt.

Einstellungen für die Füllung des AuswahlbereichsBilder


Mittels "Auswahl"/"Auswahl umkehren" wird nun der bislang unmaskierte Bereich des Buttons in die Auswahl geladen:

Menu "Auswahl" und "Umkehren" des AuswahlbereichsBilder


Mit dem "Verlaufswerkzeug" (Ausklappmenu des "Farbeimerwerkzeugs" bei gedrückter Maustaste)

Das "Verlaufswerkzeug" im Ausklappmenu des "Farbeimerwerkzeugs"Bilder


wird nun ein Verlauf zwischen Vordergrund-und Hintergrundfarbe im unteren Teil der Schaltfläche erstellt (Modus "Abdunkeln" bei 20%iger Deckkraft).

Dialogfeld "Verlaufswerkzeug"Bilder


Das Ergebnis sieht in etwa aus wie folgt:

Der nun "abgedunkelte" untere Teil der SchaltflächeBilder


Da der Farbverlauf nun steht, kann die Auswahl aufgehoben werden. Dazu im Menu "Auswahl" den Unterpunkt "Auswahl aufheben" anwählen.

"auswahl aufheben"Bilder


Um der Schaltfläche zusätzlich noch ein wenig Plastizität zu verleihen, wählen wir aus dem Menu "Ebene" den Unterpunkt "Ebenenstil" und dann "Abgeflachte Kante und Relief"

Die Einstellung des "Ebenenstils"Bilder


Es öffnet sich ein Dialog-Fenster, in dem die weiteren Parameter für den gewünschten Effekt eingestellt und in einer Echtzeitvorschau sogleich am Bildschirm beobachtet werden können:
Für unsere Zwecke eignen sich die Voreinstellungen schon ganz gut, aber hier darf natürlich auch gerne ein wenig "experimentiert" werden und die Effekte den persönlichen Vorlieben entsprechend abgeändert werden.

Das Dialogfenster für die EbenenstileinstellungenBilder


Da die Effekte, wie bereits erwähnt, in Echtzeit als Vorschau bei den betroffenen Objekten nachverfolgt werden kann, haben wir zu diesem Zeitpunkt schon ein ganz ansehnliches Zwischenergebnis vorzuweisen. Um den Effekt der Spiegelung und Reflektion jedoch noch zu verstärken, bedienen wir und des "Wischfinger"-Werkzeuges. Auch hier lassen sich diverse Parameter, angefangen von der Werkzeugform über dessen Größe. bzw. Durchmesser bis hin zur "Methode" diverse Parameter nach eigenen Wünschen modifizieren und einstellen.

Bilder


Mit einer "9er" Pinselspitze werden wir nun die scharfkantigen Übergänge am Rand etwas verwischen und somit den Effekt eines gewölbten Glases auf unserer Schaltfläche noch weiter verstärken.

Die weiche Kante steigert die Illusion eines gewölbten ObjektesBilder


Durch eine leichte Reduzierung der Deckkraft der "Refektions"-Ebene wird die Illusion von Transparenz und Tiefe zusätzlich verstärkt.
Die Einstellung kann am Schieberegler der Ebenen-Verwaltung erfolgen oder auch durch numerische Eingabe eines Wertes.

Deckkraft wegnehmenBilder


Die auf diese Weise erhaltene plastische Wirkung der Schaltfläche kann nochmals verstärkt werden, indem der Ebenenstil der Ebene "Reflektion" nun einfach auf die darunter befindlichen Ebenen kopiert wird. Dazu per rechtem Mausklick auf der "Mutterebene" das Kontextmenu aktivieren und aus der Liste den Punkt "Ebenenstil kopieren" auswählen....

Den Effekt einer Ebene kopieren...Bilder


...die erste Ebene, der der gleiche Ebenenstil zugeordnet werden soll auswählen, erneut per rechtem Mausklick das Kontextmenu der aktiven Ebene auswählen und den Ebenenstil per "Ebenenstil einfügen" auf die "Tochterebene" übertragen.

Nun kann durch "Wegklicken" des Auges in der Ebenen-Verwaltung vor dem Speichern schon geprüft werden, wie die verschiedenen Zustände der Schaltfläche optisch wirken.

"Durchschalten" der einzelnen Phasen der SchaltflächenBilder


Wenn das Ergebnis überzeugt, können nun die 4 Zustände der buttons in 4 eigenen kleinen Dateien fürs Internet in komprimierter Form abgespeichert werden. Dazu nur jeweils eine "Schaltflächen-Ebene"+ "Reflektionsebene" sichtbar schalten und über das Datei-Menu "Für Web speichern..."

Für Web speichern...Bilder


Im Dialogfeld können wieder einmal, was auch sonst, diverse Einstellungen vorgenommen werden....Viel Spaß beim Ausprobieren!

Dialogbox "Für web speichern"Bilder


Abschließend noch mal das fertige Ergebnis, jedoch ohne Schrift:

das ErgebnisBilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dottorino
  • 20.02.2012 - 07:59

Die Punkteinformation sollte ein Update erfahren. Angeblich werden 5 Punkte abgezogen, es fehlen dann aber 10 Punkte.

Danke für das Tutorial

Portrait von Lambert90
  • 29.04.2011 - 17:56

sehr gut erklärt^^, dankeschön

Portrait von Lambert90
  • 29.04.2011 - 17:56

sehr gut erklärt^^, dankeschön

Portrait von Spearboy
  • 02.09.2010 - 09:37

Vielen Dank für dieses Tutorial!

Portrait von Iflis
  • 21.07.2010 - 15:45

kombiniert mit dem Glasbutton-Workshop wird hiermit das Prinzip deutlich.
Danke für die Mühe!

Portrait von mohnhaupt
  • 23.01.2010 - 10:42

Gut erklärtes Tutorial.

Portrait von GTChriss
  • 16.01.2010 - 00:13

hat echt gut geklappt danke

Portrait von xcr4ck
  • 11.01.2010 - 19:40

echt geil danke hat mir sehr geholfen...

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.07.2009 - 11:37

sehr schönes tut....danke :)

Portrait von imiri
  • 01.07.2009 - 22:10

Danke für `tutorilas

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 17.05.2009 - 13:28

sehr gutes tutorial,klasse job den hier macht,
vielen dank

Portrait von feno
  • 28.04.2009 - 23:57

cooles tut, hilfreich ;)

Portrait von feno
  • 28.04.2009 - 23:57

cooles tut, hilfreich ;)

Portrait von CidCyber
  • 22.02.2009 - 19:06

Vielen dank fürs tut is supii lg

Portrait von sunwonders
  • 04.02.2009 - 19:17

Super Super Super Super Super!

Echt total super Erklärung :)

Jetzt muss es nur noch auf der Homepage funktionieren ;)

GLG Tina

Portrait von defkon
  • 14.11.2008 - 00:36

Gut erklärt. Danke.
Gruß
defkon

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.08.2008 - 17:48

Schön erklärt!
Danke!

Portrait von jonetsu
  • 27.06.2008 - 03:33

Sehr ausführlich ............ teilweise zu ausführlich. HTML bzw. CSS-Code oder JS wäre schön gewesen aber davon findet man mit Google ruckzuck etliche, deshalb find ich das jetzt nicht so wild.

Portrait von calvera
  • 11.03.2008 - 02:11

naja...nicht so gut


gruß

Portrait von Hofpi
  • 18.01.2008 - 17:05

ich raffs nicht o.o..

x
×
×