Photoshop-Cafe.de :: Dein Photoshop-Forum

Zurück   Photoshop-Cafe.de :: Dein Photoshop-Forum > Kreativ-Tutorials > Werkzeuge, Bedienfelder und sonstige Grundlagen

Hinweise
Aktuelles aus dem PSC
„Kreativ Hallo Du!

Das Thema für den P-S-C 02/2024 ist ⇒ verkehrte Welt. Bis einschließlich 30.04.2024 kannst du ein Bild einreichen.
Hier gehts zum Foto-Monatsthema für März 2024 : ⇒ Kultur.
... und hier findest du die C-C-C für März 2024: ⇒ Glas.
Unterstützung für das PSC

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 02.03.06, 14:24
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
 
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
Grundlagen Animiertes Web Menu Teil 1 (graphik)

in diesem tutorial widmen wir uns der erstellung eines animierten webseiten-menus mit hilfe von photoshop, imageready und eines texteditors.

der erste teil befasst sich mit der erstellung der psd datei in photoshop und der animation der benötigten animations-bilder in imageready.

im zweiten teil folgt dann eine kleine exkursion in html und javascript, wo wir mithilfe einfacher funktionen das menu "programmieren" werden, sodass es auf die maus reagiert. dies wird im grossen und ganzen mit hilfe der funktionen "onMouseOver, onMouseOut" realisiert.

als letzter schritt wird dann ein preload script folgen, um die benötigten bilder beim seitenstart "vorzuladen", was eine flüssigere animation ermöglicht.

das endergebnis wird dann ähnlich diesem hier aussehen: Web_Menu
(die hier verwendeten ordner sind von Timm )


Photoshop;
Step 1:

- wir starten in photoshop mit einem neuen dokument 150px*40px/72dpi
- als erstes erstellen wir auf einer neuen ebene eine schwarze linie mit dem linienwerkzeug. dann folgt wieder auf einer neuen ebene ein kleines viereck in grau. das duplizieren wir und färben es ein. position bleibt bestehen. dann noch 2 schriftzüge dazu, entsprechend dem ersten menupunkt, wieder auf seperaten ebenen. das sieht dann so oder wenigstens so ähnlich aus:

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild1.gif

- die beiden schriftebenen sowie das eingefärbte viereck packen wir in ein ebenenset.

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild2.gif



Step 2:
- nun machen wir ein neues ebenenset, neue schriftzüge und ein neu eingefärbtes viereck (beispielsweise in anderer farbe). das alte ebenenset können wir ausblenden, um besser arbeiten zu können. um sich arbeit zu sparen kann man es auch duplizieren und anpassen auf den nächsten menupunkt.

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild3.gif

- im ebenenfenster sieht das dann so aus:

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild4.gif

- diesen schritt wiederholen wir jetzt so oft, bis alle gewünschten menupunkte angelegt sind. dann speichern wir und öffnen das dokument in imageready



ImageReady;
Step 1:

- zur technik: wir benötigen von jedem menupunkt 3 bilder. ein standartbild, das angezeigt wird wenn die maus nicht über das menu bewegt wird. eine animation, wenn die maus über einen menupunkt bewegt wird. sowie eine weitere animation, wenn die maus wieder von einem menupunkt entfernt wird. die zweite animation ist nur eine umgekehrte version der ersten animation und nötigt uns nur zwei, drei mausklicks ab bei der erstellung.
- als erstes speichern wir nun das standartbild für jeden menupunkt. dazu blenden wir das entsprechende ebenenset ein, jedoch ohne das gefärbte viereck. das zu speichernde bild benennen wir sinniger weise entsprechend der menupunkte. also für das erste bild wählen wir den namen home.gif.
- bevor wir das speichern, öffnen wir das fenster "optimierung" und stellen hier noch ein paar details ein. als erstes stellen wir als bildformat gif ein, falls das noch nicht so eingestellt sein sollte. um die dateigrösse so gering wie möglich zu halten, deaktivieren wir die funktionen dither und transparenz. bei der funktion farbtabelle wählen wir selektiv und eine möglichst geringe farbanzahl. ich habe für die animation 16 farben eingestellt.
je mehr farben desto grösser die dateigrösse, desto länger die ladezeiten, desto besser ist aber auch die qualität falls icons oder ähnliches verwendung findet!
- wenn wir alles eingestellt haben gehen wir ins menu und wählen die funktion "optimierte version speichern unter". nun den dateinamen eingeben und saven. das selbe machen wir mit allen weiteren menupunkten. bei mir sind das schlussendlich 5 stück: home.gif, poems.gif, art.gif, programming.gif und links.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/home.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/poems.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/art.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/programming.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/links.gif



Step 2:
- nun folgt die animation der einzelnen menupunkte. wir beginnen mit dem ersten menupunkt: home.
- im animationsfenster existiert derzeit 1 frame. nun fügen wir ein weiteres frame hinzu. frame 1 ist das ausgangsbild. ab frame 2 beginnt die animation.
- nachdem wir frame 2 hinzugefügt haben im animationfenster, blenden wir für den menupunkt home das gefärbte viereck wieder ein und blenden dafür das graue aus. sobald die maus über den menupunkt bewegt wird, soll der graue balken farbig angezeigt werden. mehr soll sich derzeit noch nicht ändern bei frame 2.
- dann fügen wir ein drittes frame hinzu, frame 3. zwischen frame 2 und frame 3 kommt die eigentliche animation. die animation besteht aus einer positionsänderung der schrift und des vierecks. also verschieben wir die schrift und das farbige viereck an den rechten rand des dokuments. hier die beiden frames 2 und 3:

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild5.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild6.gif

- damit die animation fliessend und nicht so ruckartig abläuft, fügen wir nun zwischen frame 2 und frame 3 noch animationsframes hinzu. dafür markieren wir frame 2 und frame 3 im animationsfenster und benutzen die funktion "fügt animationsframes dazwischen ein". das ist als kleines icon im animationsfenster direkt anwählbar. das icon besteht aus 4 kleinen kreisen und ist neben dem icon "neues frame einfügen" zu finden. das klicken wir an und stellen hier in etwa folgendes ein:

http://www.photoshop-cafe.de/phoenix/tutorial/wm/bild7.gif

- nun ist die animation auch schon fast fertig. als nächstes markieren wir alle frames (frame 1 anklicken und mit gedrückter shift taste auf das letzte frame klicken) im animationsfenster und stellen die zeitverzögerung von 0 auf 0.03 sekunden um. dazu das kleine dreieck neben der 0 unter einem der frames anklicken und "andere" wählen und die zeitverzögerung von hand eingeben.
- jetzt stellen wir noch die funktion "unbegrenzt" auf "einmal" um im animationsfenster. dazu einfach unbegrenzt anklicken und umstellen. das bewirkt das die animation nur einmal abgespielt wird und sich nicht wiederholt.
- wenn wir das alles haben, können wir die animation speichern. wieder mit der funktion "optimierte version speichern als" als home_over.gif speichern.
- wenn die frames nicht mehr markiert sind, markieren wir sie nun erneut (zum speichern können sie markiert bleiben) und klicken das grosse dreieck (pfeil) rechts im animationsfenster an. da werden nun weitere zusatzfunktionen angezeigt. wir klicken dort einmal auf "frames umkehren". die animation wurde nun umgekehrt. nun speichern wir diese wie gehabt als home_out.gif.

http://www.photoshop-cafe.de/phoenix/tutorial/wm/home.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/home_over.gif

http://www.photoshop-cafe.de/phoenix/tutorial/wm/home_out.gif

jetzt haben wir alle 3 bilder für den ersten menupunkt. home.gif, home_over.gif, home_out.gif. nun wiederholen wir diesen step für alle anderen menupunkte, bis wir für jeden menupunkt die 3 frames haben

damit ist der erste teil dieses tutorials auch schon abgeschlossen und wir sind bereit für den zweiten teil, wo wir das menu dann in eine html seite einbinden und die funktionalität einrichten.

Teil 2


(c) copyright 2006 by photoshop-cafe.de
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft

Geändert von phoenix (03.03.06 um 09:18 Uhr).
Mit Zitat antworten
  #2  
Alt 02.03.06, 15:25
Benutzerbild von Darkwing-dave
Darkwing-dave Darkwing-dave ist offline
PSC-süchtig
 
Registriert seit: 10/2005
Ort: Schweiz, nähe Zürich
Beiträge: 826
OS: Windows
Darkwing-dave geht den richtigen Weg
genial!! Ich muss nämlich genau dieses Wochenende ein Menu für eine Internetseite machen und hatte noch keine Idee... Das ist doch echt super!!!
__________________
Beim Spiel kann man einen Menschen in einer Stunde besser kennen lernen, als im Gespräch während eines Jahres.
Mit Zitat antworten
  #3  
Alt 02.03.06, 15:38
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
 
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
dann kannst du dich ja glücklich schätzen dass ich gerade an teil 2 dran bin
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Mit Zitat antworten
  #4  
Alt 02.03.06, 16:14
Benutzerbild von Azzurri
Azzurri Azzurri ist offline
Forenpate
 
Registriert seit: 07/2005
Ort: Niedersachsen/Wolfsburg
Beiträge: 2.867
OS: Mac OS X
Azzurri ist aktiv und fit
sehr geil phoenix
Mit Zitat antworten
  #5  
Alt 02.03.06, 17:21
Benutzerbild von Darkwing-dave
Darkwing-dave Darkwing-dave ist offline
PSC-süchtig
 
Registriert seit: 10/2005
Ort: Schweiz, nähe Zürich
Beiträge: 826
OS: Windows
Darkwing-dave geht den richtigen Weg
Zitat:
Zitat von phoenix
dann kannst du dich ja glücklich schätzen dass ich gerade an teil 2 dran bin
Von PS resp. IR in ein html-Dokument ist das kleinere Problem als eine gute Idee für ein Design zu haben.. Aber trotzdem SUPER TIMING!!!
__________________
Beim Spiel kann man einen Menschen in einer Stunde besser kennen lernen, als im Gespräch während eines Jahres.
Mit Zitat antworten
  #6  
Alt 02.03.06, 17:32
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
 
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
yea, dafür sind wir doch da
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Mit Zitat antworten
  #7  
Alt 02.03.06, 18:05
Benutzerbild von Darkwing-dave
Darkwing-dave Darkwing-dave ist offline
PSC-süchtig
 
Registriert seit: 10/2005
Ort: Schweiz, nähe Zürich
Beiträge: 826
OS: Windows
Darkwing-dave geht den richtigen Weg
@Phoenix:

Wäre es auch möglich einen Aktiv-Zustand hinzuzufügen? Wäre das sehr viel komplizierter?
__________________
Beim Spiel kann man einen Menschen in einer Stunde besser kennen lernen, als im Gespräch während eines Jahres.
Mit Zitat antworten
  #8  
Alt 02.03.06, 18:06
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
 
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
erklär das mal genauer bitte
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Mit Zitat antworten
  #9  
Alt 02.03.06, 21:25
Benutzerbild von Darkwing-dave
Darkwing-dave Darkwing-dave ist offline
PSC-süchtig
 
Registriert seit: 10/2005
Ort: Schweiz, nähe Zürich
Beiträge: 826
OS: Windows
Darkwing-dave geht den richtigen Weg
ich meine damit wenn ich z.b. auf der Home-Site bin dass man das an der Navigation sehen kann..
__________________
Beim Spiel kann man einen Menschen in einer Stunde besser kennen lernen, als im Gespräch während eines Jahres.
Mit Zitat antworten
  #10  
Alt 03.03.06, 05:57
Benutzerbild von phoenix
phoenix phoenix ist offline
mother-brain
 
Registriert seit: 06/2005
Ort: Basel
Beiträge: 9.684
OS: Windows 8 x64
Kreativ-Software: CS6 x64
phoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es gehtphoenix ist ein Photoshop-Spezialist und hilft wo es geht
sollte durchaus möglich sein. müsste ich mal austesten wie man es am sinnvollsten realisiert
__________________
http://photoshop-cafe.de/sig/themen_bewerten.gifhttp://photoshop-cafe.de/sig/bilder_und_schriften.gifhttp://photoshop-cafe.de/sig/tutorials.gifhttp://photoshop-cafe.de/sig/signaturleitfaden.gifhttp://photoshop-cafe.de/sig/forenleitfaden.gifhttp://www.photoshop-cafe.de/sig/stock-galerie.gif

design oder nicht sein

"So, we’ve got a full pot of coffee, half a pack of cigarettes, it’s dark out, and we’re coding. Hit it." - Synthesoft
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Farbverlauf über Graphik konzipieren corraggiouno Hilfestellung, Tipps und Tricks 23 07.10.10 15:59
Blinkender Button bzw. Graphik corraggiouno Hilfestellung, Tipps und Tricks 4 11.06.10 14:25
Animiertes Web Menu Teil 2 (html) phoenix Werkzeuge, Bedienfelder und sonstige Grundlagen 6 19.12.09 00:10
Wacom Graphik Tablett Knechtruprecht Hilfestellung, Tipps und Tricks 14 27.03.09 15:27
Animiertes Web Menu Teil 3 (script) phoenix Werkzeuge, Bedienfelder und sonstige Grundlagen 2 21.06.06 14:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:20 Uhr.

Impressum

Kontakt      Photoshop-Cafe      Archiv     Impressum     Nach oben

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
©2005-2020 photoshop-cafe.de

Seite wurde generiert in 0,09282 Sekunden mit 13 Queries