Sprite mit Hover-Effekt aus Photoshop machbar?

Al Terego

Al Terego

Aktives Mitglied
Thread Starter
Dabei seit
02.03.2004
Beiträge
4.716
Reaktionspunkte
417
Hallo zusammen.

Ich habe hier im Form und im Web gesucht, werde aber nicht fündig zu diesem konkreten Fall.
Nutze die Adobe CC Programme, neueste Versionen.
Ich bin einigermaßen fit in Photoshop, aber diese Aufgabe ist mir neu, die Zeit drängt (heute), daher frage ich.

Ein Kunde fragt bei mir kurzfristig ein Logo an, das auf einer Webseite platziert werden soll.
Es ist weiß auf farbigem Untergrund, beim Überfahren mit der Maus wandelt sich den farbige Hintergrund in hell und das Logo wird zur farbigen Logoversion.
Es existiert schon ein solcher Webseiteninhalt, ich bin angefragt, das Logo zu aktualisieren, mit gleichem Effekt.
Geliefert werden soll ein png, Größen sind vorgegeben.

Ich habe eine Testdatei in Photoshop erstellt, psd.
Ein Quadrat (0 Testlogo) liegt in weiß und in colour in zwei Ebenen.
In der Zeitleiste habe ich zwei Frames angelegt.
In der Vorschau kann ich sehe, dass z.B. ein zeitlich unbegrenzter Wechsel zwischen Frame 1 und zwei stattfinden kann.

Meine Fragen:

a) Wie exportiere ich ein png als Sprite mit Hover-Effekt?
b) Ist dies aus Photoshop überhaupt ohne weiteres Script machbar?

Freue mich auf Euer Feedback, besten Gruß,
Al
 
Mit png schon gar nicht, wenn dan gif. Aber schick ihm doch beide Bilder und der Programmierer macht den Rest.
 
  • Gefällt mir
Reaktionen: masta k
Hi Veritas.
Danke für Deine Antwort.
Stimmt, ja, wenn, dann gif.

Aber die Frage bleibt bestehen:
Export als Sprite aus Photoshop mit Hover-Effekt?

Gruß, Al
 
Al Terego schrieb:
Hi Veritas.
Danke für Deine Antwort.
Stimmt, ja, wenn, dann gif.

Aber die Frage bleibt bestehen:
Export als Sprite aus Photoshop mit Hover-Effekt?

Gruß, Al
Zum Vergrößern anklicken....

Ich muss mal nachfragen, was meinst du mit Sprite? Die Hover-Effekte werden ja über die Webseite gesteuert.
 
Ich vermute der Kunde benötigt einfach zwei PNG-Dateien: Einmal weißes Logo auf farbigem Untergrund, einmal heller Hintergrund und das Logo in farbiger Version.
Anschließend wird sich ein Webentwickler darum kümmern, dass die Darstellung beim Hovern (CSS, JS, ...) passt.
 
  • Gefällt mir
Reaktionen: mausfang und tomric
Ihr habt Recht.
Ein Schritt zurück:

Bei diesem Schnellschuss wurde mir zunächst mitgeteilt, ein png würde benötigt.
Das war ja schonmal Quatsch.
Im Endeffekt wurde ein bmp benötigt, in dem das Logo zweimal vorkommt.
In der oberen Hälfte farbig, in der unteren Hälfte weiß.
Ich habe das nun nach einem gerade erhaltenen Muster analog so angelegt mit dem neuen Logo.
Obere und untere Hälfte, mit Aplhakanal.
Versendet und um Feedback gebeten.

Ich gehe genau wie Ihr ebenfalls davon aus, dass im nächsten Schritt ein Webspezi beim Kunden es anlegt wie selber gewünscht.
Und es stellte sich heraus, dass der Hover-Effekt so aussieht, dass bei Überfahren mit der Maus das weiße Logo nach oben wischt und das farbige Logo an seine Stelle tritt.
Wobei der Hintergrund ebenfalls mitwechselt.
Das Feedback steht noch aus.

Dank an Euch fürs Mitdenken! :drink:
Dann lege ich meine Ursprungsfrage mal auf Eis.
Besten Gruß, Al
 
  • Gefällt mir
Reaktionen: Flauschi, win2mac und Veritas
Das Thema scheint zwar durch zu sein, aber: BMP? Ich würde einfach zwei PNG oder GIF
nehmen (je nachdem, wie das Logo aussieht) und den Hover-Effekt in CSS oder JS umsetzen (der ist trivial, uU reicht einfaches CSS, je nachdem, welcher Effekt gewünscht wird).
 
Oder einfach modern: svg
 
  • Gefällt mir
Reaktionen: giesbert
Al Terego schrieb:
Und es stellte sich heraus, dass der Hover-Effekt so aussieht, dass bei Überfahren mit der Maus das weiße Logo nach oben wischt und das farbige Logo an seine Stelle tritt.
Zum Vergrößern anklicken....

Crazy ... man lernt nie aus :eek:
 
Ob Hexenwerk oder nicht:
Das geht an die IT eines Unternehmens mit über 4000 Mitarbeitern.
Da habe ich keine Karten im Spiel. Wenn die ein bmp brauchen, bekommen sie es.
Habe meine Work-psd mitgeliefert, da ist also alles offen, meinetwegen schnitzen die sich ihren Hover aus Balsaholz aus meiner Vorlage. :teeth:
 
  • Gefällt mir
Reaktionen: giesbert
MacEnroe schrieb:
Crazy ... man lernt nie aus :eek:
Zum Vergrößern anklicken....
Ich habe vor Jahren mal ein Icon bei Facebook runtergeladen, es war der Daumen, glaube ich. Da war ich ganz erstaunt, dass die geladene Datei ganz viele Symbole enthielt. Dort wurde also damals schon die Technik benutzt, die Grafik zu „verschieben.“ Selber habe ich das aber auch noch nie angewandt, ich müsste auch erst nachlesen, wie das geht. ^^ Als Sinn dahinter könnte ich mir vorstellen, dass auf diese Weise gleich alle zusammengehörigen Bildchen geladen sind. Ganz früher hat man ja noch „Preloader“ mit Javascript gebastelt. :)
 
  • Gefällt mir
Reaktionen: Flauschi
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten