Neue Designs für die erfolgreiche iTunes-Alternative

Tutorial: Skins für den Songbird entwerfen

Lange wurde die Alternative zu Apples iTunes von Musikfans erwartet. Die Preview von Songbird ist jetzt erst einen guten Monat online verfügbar und schon werden Stimmen nach Skins für den Player laut. Wie die Skins aufgebaut sind und mit welchen Mitteln sie umgebaut werden können, erklärt dieses Tutorial.

Tutorial: Skins für den Songbird entwerfen

Inhaltsverzeichnis

  1. 1Inhaltsverzeichnis
  2. 2Erfahrung mit CSS, HTML und Grafiken
  3. 3Ein Mosaik aus vielen Teilen
  4. 4Alles auf Anfang
  5. 5Fehler feststellen und ausmerzen
  6. 6Mit CSS zum Wunschlayout
  7. 7Eigene Farbschemen einbauen
  8. 8Alle Ordner in Ordnung?
  9. 9Skins hochladen und mit der Community teilen
  10. 10Netzwelt versucht sich an einer Discoskin

Inhaltsverzeichnis

Erfahrung mit CSS, HTML und Grafiken

Werbung

Ein bisschen Erfahrung mit Programmcode sollten Sie mitbringen, egal ob HTML, JAVA oder eine andere Sprache. Die Skins sind recht einfach aufgebaut. Die Oberfläche besteht ähnlich wie ein Mosaik aus vielen kleinen Bildchen. Diese Bilder liegen in einem bestimmten Ordner in dem Skin-Verzeichnis. Zu finden sind die vorinstallierten Skins im Programmordner des Songbird. Dort befindet sich ein Ordner namens Chrome, in dem beide Skins liegen. Machen Sie ein Backup von den Skins, bevor Sie die Dateien verändern.

Die einzelnen Bilder bilden die Oberfläche des Players. Insgesamt sind es 156 kleine Grafiken. Um eine komplett neue Oberfläche zu gestalten muss jedes einzelne Bild verändert werden. Das kostet Zeit und viel Geduld. Um einmal einen Überblick über die Aufteilung des Players zu bekommen, hat netzwelt jedes Bild einmal durch eine Routine laufen lassen. Dabei wurden einfach zwei von drei Grundfarben ausgetauscht. In unserem Fall gelb und rot. Daraus entstand eine grüne Oberfläche an der an einigen Stellen noch rote Flecken durchkommen.

Ein Mosaik aus vielen Teilen

Nachdem die Oberfläche aus den Bildern neu zusammengesetzt wurde, muss die CSS-Datei an die neuen Farben angeglichen werden. Die neue grüne Oberfläche wird noch von roten Flecken durchzogen. Die Suchmaske und die Menüleiste fallen am deutlichsten ins Auge. Diese Farbeigenschaften sind in der CSS-Datei gespeichert, die im Hauptpfad der Skin liegt. Diese Datei wird mit einem Notepad geöffnet und kann dann bearbeitet werden.

SONGTUT

Bild 1 von 8
004
Bild vergrößern

004

Bild 2 von 8
002
Bild vergrößern

002

Bild 3 von 8
008
Bild vergrößern

008

Bild 4 von 8
005
Bild vergrößern

005

Bild 5 von 8
001
Bild vergrößern

001

Bild 6 von 8
007
Bild vergrößern

007

Bild 7 von 8
003
Bild vergrößern

003

Bild 8 von 8
006
Bild vergrößern

006


Weitere Informationen

Wie geht's weiter? Zu diesem Thema haben wir eine redaktionelle Übersicht erstellt. Sie finden das Special zu Apple iTunes hier.

Links zum Thema

Kommentieren