Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die Technologie längst zu den Basics. Leider ist es zeitaufwändig und lästig eine Sprite zu erstellen: Zunächst müssen die gewünschten Grafiken auf der Arbeitsfläche positioniert werden, anschließend werden die Abmessungen und Koordinaten in das CSS-Dokument übernommen.
Spritepad vereinfacht (wie auch andere Tools) die Arbeit mit Sprites. Im Gegensatz zu allen anderen mir bekannten Online-Anwendungen funktioniert jedoch bei Spritepad alles genau so wie man es sich wünscht.

Was macht Spritepad besser?

Viele Web-Dienste zur Erstellung von Sprites generieren die Grafik und den CSS-Code automatisch. Sprites lassen sich jedoch nicht vollständig automatisieren – häufig muss bei diesen Tools im nachhinein einiges korrigiert werden.

Andere Dienste wie Spritecow haben diese Fehlerquelle erkannt und nehmen dem Benutzer daher nicht alle Arbeitsschritte ab. Bei Spritecow muss die Grafik selbst erstellt werden, den passenden CSS-Code generiert anschließend der Dienst. Diese Arbeitsweise ist für mich der perfekte Weg – ich behalte die Kontrolle über alle wichtigen Arbeitsschritte, lästige Arbeiten werden mir abgenommen.

Spritepad kann beides. Per Drag and Drop positioniert ihr zunächst die Grafiken auf der flexiblen Arbeitsfläche. Spritepad generiert parallel den passenden CSS-Code und übernimmt dabei sogar die Dateinamen zur Benennung der CSS-Selektoren. Auch sich wiederholende Grafiken können berücksichtigt werden. Ein weiterer Pluspunkt ist, dass die Sprite-Dokumente online abgelegt und auch nachträglich noch ausgetauscht oder editiert werden können.

Wenn ihr mit der Sprite zufrieden seid, könnt ihr den Download starten und erhaltet anschließend ein Zip-Archiv mit einer PNG-Grafik und einem CSS-Dokument. Erfreulich ist auch, dass das Stylesheet sauber strukturiert ist und sogar einen Anflug von objektorientiertem CSS erkennen lässt.


.kulturbanause-logo, .gravatar{
  background: url(sprites.png) no-repeat;
}

.kulturbanause-logo{
  background-position: -18px -23px ;
  width: 140px;
  height: 140px;
}

.gravatar{
  background-position: -173px -68px ;
  width: 128px;
  height: 128px;
}

Automatische Ausrichtung für Premium User

Premium Usern steht das intelligente Hilfsmittel „Auto Alignment“ zur Verfügung. Hierbei werden die Grafiken automatisch so angeordnet, dass möglichst wenig Platz verschwendet wird. Das wird mit Sicherheit einiges an wertvoller Arbeitszeit einsparen.

Die Macher von Spritepad bewerben Ihr Tool mit folgenden Worten:

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 3 Kommentare

  1. New Business-Vision
    schrieb am 24.03.2012 um 11:12 Uhr:

    Danke für diesen tollen Artikel!

    Antworten
  2. Marcel
    schrieb am 20.03.2012 um 17:22 Uhr:

    Großartige Umsetzung, genau das Feature, welches ich bei Spritecow noch vermisst habe.

    Antworten
  3. Marcos
    schrieb am 20.03.2012 um 15:49 Uhr:

    Danke für die Infos auch für dein link zum anderen Artikel! ;)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →