HomeKontaktImpressum
Sie sind hier: Home

Erzeugung der Sprite-Graphik

Bevor Sprites auf einer Homepage genutzt werden können, müssen zunächst die Bilder, welche zu einem Sprite zusammengefasst werden sollen, in einer einziger Bilddatei abgelegt werden. Diese mittels Bildbearbeitungsprogramm erstellte Bilddatei ist das Ergebnis einer mit der Copy-Paste-Funktion zusammengestellten Collage.

Die Erstellung einer Spritegraphik ist mit nahezu jedem Programm möglich, welches die einfachsten Funktionen zur Bildbearbeitung zur Verfügung stellt. Im Prinzip muss lediglich ein Bild mit einem ausreichend großen Punkteraster – zuschneiden kann man das Bild schließlich später immer noch – erstellt werden. Haben alle zu integrierenden Teilbilder die gleiche Größe, so erstellt man beispielsweise einfach ein Bild, welches die gemeinsame Rasterhöhe besitzt und breit genug ist, dass alle Bilder nebeneinander in die neue Sprite-Graphik passen. Ansonsten sollte man bei der Erstellung der Bilddatei eine Rastergröße wählen, die alle Einzelbilder aufnehmen kann und dabei möglichst wenig Platz vergeudet.

Ist die neue Graphikdatei erstellt, so öffnet man nacheinander jedes einzelne Bild, welches in das Sprite integriert werden soll, und markiert jeweils den gesamten Bildbereich, der in der Bildcollage landen soll. Durch Copy und Paste kann – entweder über das Hauptmenu des Graphikprogramms oder per Tastenkombination STRG-C bzw. STRG-V – das Bildmaterial in die Zwischenablage kopiert, innerhalb des Sprites eingefügt und an die gewünschte Stelle im Raster verschoben werden. Sind erst einmal alle Teilbilder im Sprite gelandet, so speichert man die Datei einfach unter einem bezeichnenden Namen und im Wunschformat – natürlich unter einem der im Internet verbreiteten Formate GIF, PNG oder JPG – ab.

In der folgenden Abbildung 1 wird ein solches Sprite beispielhaft dargestellt. Die Rastergraphik vereint insgesamt vier einzelne Bilder, die jeweils eine unterschiedliche Rasterausdehnung haben. Mit den roten Linien sollen die Grenzen der Einzelbilder angedeutet werden. Dabei können zwischen den einzelnen Bildelementen Lücken vorhanden sein. Allerdings sollte bei der Erstellung von Sprites darauf geachtet werden, dass möglichst wenige solcher Stellen entstehen, da sonst die Dateigröße des Sprites unnötig ansteigt.

Sprite im GIF-Format
Abb. 1: Spritebild mit vier enthaltenen Bildern

Das Teilbild im unteren, linken Bereich könnte etwa direkt unter den Bereich des darüber liegenden Bildes verschoben werden. Allerdings würde hierdurch aufgrund der Höhe des Bildes „B4” kein kleineres Bild dabei heraus kommen. Da die in einem Sprite enthaltenen Bilder in den meisten Fällen ähnliche Maße haben, treten derartige Situationen aber auch eher selten auf. Sprites werden beispielsweise oft zum Zusammenfassen von Iconsets verwendet, die mehrere Icons gleicher Rastergröße enthalten. Auch bei graphischen Navigationselementen, die etwa mittels Hover-Effekt ihr aussehen ändern, sind die im Spriteraster enthaltenen Rastergraphiken normalerweise gleich groß.

Im Beispiel wird eine GIF-Graphik verwendet, die an den Stellen, welche dunkelgrau eingefärbt sind, eine Volltransparenz besitzen – an diesen Stellen ist das Bild durchsichtig und die Hintergrundfarbe des IMG-Elements wird dargestellt. Anstelle des GIF-Formats können Sprites aber auch in den Formaten PNG oder JPG angelegt werden, wobei die Auswahl des passenden Dateiformats von verschiedenen Faktoren abhängt.

Die Anordnung der Bilder ist – abgesehen von der Tatsache, dass wenig verschwendeter Platz zugleich in einer kleineren Bilddatei resultiert – ebenso unerheblich, wie deren Anordnung. Erst bei der Darstellung des jeweiligen Bildes im entsprechenden Element auf der Website müssen die zu einem bestimmten Bild gehörenden Rasterpositionen und Ausdehnungen beachtet werden, damit auch der richtige Bildausschnitt zur Anzeige kommt.

Seite 3 von 5 | « [1][2] • [3] • [4][5] »
  
© 2009-2019 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website