Antipixel, Publicons, Microbutton

Ich habe schon seit etwa einem Jahr die sogenannten »Antipixel«-Banner unterhalb meiner Navigationsleiste plaziert. Da es keine farblich passend zu meiner Website gab, habe ich sie mir einfach selbst gestaltet.

Mit Gimp war dies nicht sonderlich schwer und wer schon einmal mit einem Bildbearbeitungsprogramm auf Pixel-Ebene gearbeitet hat (Photoshop, Gimp, etc.), kann sich selbst auch recht einfach einen solchen »Antipixel« zusammenbauen. Hier meine Variante für einen »Antipixel« für Ubuntu:

Zunächst jedoch ein paar ganz allgemeine Informationen über diese Buttons im Format von 80x15 Pixel. Sie sind (wie schon in der Überschrift angedeutet) unter vielen Namen bekannt. Neben »Antipixel« sind sie auch als »Publicons« oder vor allem im deutsprachigen Raum als »Microbutton« bekannt.

Etabliert haben sie sich vor allem auf Blogs oder sie werden um 90° gedreht inzwischen zu unübersichtlich nebeneinander gestellten »Antipixelwänden« auch in Signaturen verwendet.

Nun zum eigentlichen Thema: Wie erstellt man selbst einen solchen »Antipixel«? Zunächst einmal einfach ein neues Dokument im Format von 80x15 Pixel mit transparentem Hintergrund erstellen. Anschließend die erste bereits vorhandene Ebene (in der später zu findenden Ebenenübersicht als »passepartout« betitelt) in der Farbe einfärben, in welcher später Rand und die Farbfläche unter dem Text erscheinen sollen. Ich habe dafür das Orange gewählt welches auch auf meiner Website mehrfach zu finden ist.

Als nächsten Schritt habe ich eine neue Ebene (»defintiv weiß«) erstellt und mittels des Werkzeugs »Rechteckige Auswahl« jene Bereiche weiß ausgefüllt, welche auch später in jedem Fall weiß erscheinen sollen. Das weiße Feld auf der linken Seite hat die Maße 25x13 Pixel, sowohl der orangefarbene wie auch der weiße Rand sind jeweils 1 Pixel breit.

Jedoch soll später in der großen weißen Fläche auch ein Icon oder Ähnliches erscheinen. Aus diesem Grund muss innerhalb des weißen Feldes ein Rechteck mit den Maßen 23x11 Pixel ausgeschnitten werden.

Dieser Vorgang ist auch im Orange der darunterliegenden Ebene »passepartout« vorzunehmen das genau dies Entsteht: Ein Passepartout. Wurden beide Ebenen entsprechend bearbeitet sollte es nun folgendermaßen aussehen:

Der nächste Schritt ist das Einbinden des Textblocks. Die verwendete Schriftart ist der Font »Silkscreen« welcher mittels Google einfach zu finden sein sollte.

Als Schriftgröße habe ich 8 px verwendet. Jedoch ist dann das Wort »Thunderbird« zu lang:

Setzt man den Zeichenabstand auf den Wert »-1.0« passt »Thunderbird« haargenau in den orangefarbenen Bereich:

Eine Anmerkung zwischendurch: Immer das Dokument so speichern das die Ebenen erhalten bleiben bzw. das man die Objekte später mit der Anwendung noch bearbeiten kann. Im Fall von Gimp bedeutet dies, dass man das Bild als .xcf, also im Gimp-eigenen Format abspeichern muss.

Ansonsten wären die vorgenommenen Schritte zwar nicht verloren, aber man kann die selbsterstellte Vorlage später nicht weiterverwenden, z.B. um die Rahmenfarbe zu ändern oder weitere Antipixel erstellen zu können.

Nun weiter mit der Erstellung des Antipixels bzw. der Vorlage um mehrere generieren zu können.

Da ich einen Antipixel zum Verlinken des Mozilla Thunderbird erstellen möchte, habe ich mir einfach das Icon von meinem Linux-System (/usr/share/pixmaps/thunderbird.png) geholt und in eine neu erstellte Ebene (»icon«) eingefügt:

Da das Thunderbird-Icon einen transparenten Hintergrund hatte, ist nun eine Ecke hinter dem Passepartout auch noch transparent. Damit diese Stelle ebenfalls weiß ist muss noch eine weitere Ebene (»hintergrund«) in Weiß unter allen anderen Ebenen angelegt werden.

Und siehe da: Fertig ist das eigene, selbst erstellte Antipixel für den Thunderbird. Wie bei jedem Schritt erwähnt hier nun als Übersicht alle angelegten Ebenen mit den ebenfalls genannten Namen:

Nun das Bild als .png oder .jpg speichern. Es wird die Warnung erscheinen das Gimp keine Ebenen in den Formaten speichern kann. Solange man nicht vergisst die eventuell vorgenommenen Änderungen als .xcf zu speichern macht das natürlich nichts. Das fertige Endresultat als .png:

Alle übrigen Antipixel auf www.x-fish.org habe ich ebenfalls auf diese Art und Weise erstellt bzw. einfach das vorhandene Bild um weitere Ebenen ergänzt und die nicht benötigten (z.B. vom Thunderbird) vor dem Speichern als .png einfach ausgeblendet. Beispielsweise auch beim Antipixel für www.x-fish.org:

Dieser Antipixel darf gerne verwendet werden um auf meine Website hinzuweisen.

Quelle: http://www.x-fish.org/images/antipixel_x-fish_org.png

Der Antipixel beinhaltet etwas was noch gar nicht online zu finden ist. Voraussichtlich morgen wird nämlich eine kleine Überarbeitung von meiner Website online gehen. Ein bischen breiter und endlich mal ein Logo. Das hat ja schon seit längerer Zeit gefehlt...

X_FISH