sprite helper images

[vidimento]

Hallo Zusammen
ich habe heute eine Email erhalten wo drum gebeten wurde ein von mir erstelltes PSD-Menü (Checkboxen und ein Dropdownmenü - ging lediglich in erster Linie um einen Designvorschlag) in ein sprite helper image und CSS format umzusetzen.
Spontan meine Frage, kann mir jemand kurz erklären, falls überhaupt möglich ist, was das überhaupt ist, insbesondere die sprite... noch nie gehört.
Wenn zu umfangreich, auch ok, vielleicht auch einen sehr guten Link, wo ich die wichtigsten Infos finde.

Vielen Dank im Voraus

 

[Enigmon]

Schau mal hier:

http://www.w3schools.com/css/css_image_sprites.asp

Pascal Bajorat hatte es mal sehr gut in seinem Videotutorial über
Responsive Webdesign Teil 3 erklärt.
Ich glaube hier findest du es:

https://www.psd-tutorials.de/video-...xis-projekt-teil-3-content-bereich-und-footer

Bin mir aber nicht sicher..

LG
Thomas

 

[owieortho]

Sprites sind ganze Grafiksammlungen auf einem einzigen Bild. Die Einzelelemente sind so angeordnet, dass sie jeweils in eine Rechteckauswahl passen. Nutze mal die Google-Bildersuche nach Sprite und schau Dir die Beispiele, die nichts mit der Limo zu tun haben an.
Mit CSS kannst Du dann nur den gewünschten Teilbereich des Gesamtbildes zur ANzeige bringen.
Hier kannst Du es mal ausprobieren:
http://www.w3schools.com/css/css_image_sprites.asp

O.

 

[vidimento]

Hallo
oh vielen vielen Dank, @Enigmon und @owieortho genau nix limo
werde mich mal schlau machen, vielleicht ist es gar nicht so kompliziert, wie ich denke

 

[cebito]

Im Endeffekt geht es darum, dass du nur einen http-request brauchst um "mehrere" Bilder zu laden. Nach dem ersten Aufruf hast du also alle zur Verfügung und sie müssen nicht erst bei Bedarf geladen werden. Das lohnt sich bei kleinen Grafiken, also auch in deinem Fall.
Für meinen Adventskalenderbeitrag 2013 hab ich bspw. für die verschiedenen Plattformen und Santa-Posen auch nur eine Grafik benutzt

 

[vidimento]

@cebito merci für deine Info (schönes Projekt), macht ja auch Sinn bei so kleinen Grafiken, kann ich nachvollziehen.

Ich habe sowohl alle Grafiken komplett zu einer png gepackt, als auch PSD Layered geliefert. Deshalb frage ich mich, ob der Programmierer, Webdesigner dies nicht selbst arrangieren kann, denn ich habe einfach null Plan von sprite helper format und wie CSS umsetzen,

danke

 

[noltehans]

Hi vidimento,

zig Tutorials über CSS-Sprites.
http://www.drweb.de/magazin/css-sprites-quellensammlung/


Online CSS-Sprite Generatoren.
http://csssprites.com/

http://css.spritegen.com/

 

[vidimento]

Hallo @noltehans - danke für den Hinweis und deine links, und gut zu wissen,
Ja, den einen oder anderen sprite generator habe ich auch getestet, aber nach wie vor ist das gar nicht so meine Baustelle - mache keine websachen, nur gesagt so kann es aussehen...

Aber ich bin der Meinung, das kann der programmierer bei einem layered psd und zusätzlich noch als png auch selbst machen und in sein design einbauen, wie das passt.