auf Facebook teilen auf Google+ teilen auf LinkedIn teilen auf Pinterest teilen twittern
Werbehinweise
» Startseite » Blog » Antipixel, Publicons, Microbutton 

Blog

April 2017 März 2017 Februar 2017 Februar 2016 Januar 2016 Oktober 2015 Juli 2015 Juni 2015 März 2015 Januar 2015 Dezember 2014 November 2014 Oktober 2014 September 2014 Juni 2014 April 2014 März 2014 Februar 2014 Januar 2014 Dezember 2013 November 2013 Oktober 2013 August 2013 Juli 2013 März 2013 Februar 2013 Januar 2013 Dezember 2012 November 2012 Oktober 2012 September 2012 August 2012 Juli 2012 Juni 2012 Mai 2012 April 2012 März 2012 Februar 2012 Januar 2012 Dezember 2011 November 2011 Oktober 2011 September 2011 August 2011 Juli 2011 Juni 2011 Mai 2011 April 2011 März 2011 Februar 2011 Januar 2011 Dezember 2010 November 2010 Oktober 2010 September 2010 August 2010 Juli 2010 Juni 2010 Mai 2010 April 2010 März 2010 Februar 2010 Januar 2010 Dezember 2009 November 2009 Oktober 2009 September 2009 Januar 2009 Dezember 2008 November 2008 Antipixel, Publicons, Microbutton '08er Überarbeitung von x-fish.org Eine recht optimistische Verpackung PC-Kaufberatung November 2008 Wir trennen uns, 5 schöne Jahre sind vergangen Sie ist da: Canon EOS 350D Thermaltake Xaser II – Moddingbeginn Oktober 2008 September 2008 Juni 2008 Mai 2008 April 2008 März 2008 Februar 2008 Januar 2008 Dezember 2007 November 2007 Oktober 2007 Mai 2007 Februar 2007 Januar 2007 September 2006 August 2006 Juni 2006 Mai 2006 April 2006 März 2006 Februar 2006 November 2005 Oktober 2005 September 2005 Juli 2005 Juni 2005 Mai 2005 Mai 2004 Oktober 2003 September 2003 Juli 2003 Juni 2002 Mai 2002 März 2002 Februar 2002 Januar 2002 November 2001 Oktober 2001 Juli 2001 Juni 2001 Mai 2001 März 2001 Februar 2001 Januar 2001
get Opera
get Mozilla Firefox
get Konqueror
get Mozilla Thunderbird
get Ubuntu Linux

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

03.

November

2008

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


Das Generieren dieser Seite dauerte genau 0.05807 Sekunden.