Werbehinweise

Startseite » Blog » Antipixel, Publicons, Microbutton 

Blog

Mai 2024 April 2024 Februar 2024 Januar 2024 Dezember 2023 November 2023 Oktober 2023 September 2023 August 2023 März 2023 Dezember 2022 November 2022 Oktober 2022 September 2022 August 2022 Juli 2022 Juni 2022 Mai 2022 März 2022 Januar 2022 Dezember 2021 November 2021 Oktober 2021 August 2021 Juli 2021 Juni 2021 Mai 2021 April 2021 März 2021 Februar 2021 Januar 2021 Dezember 2020 November 2020 Oktober 2020 August 2020 Juli 2020 Juni 2020 Mai 2020 April 2020 März 2020 August 2019 Juni 2019 April 2019 Dezember 2018 September 2018 Februar 2018 Oktober 2017 August 2017 April 2017 März 2017 Februar 2017 Januar 2017 Dezember 2016 Juli 2016 Februar 2016 Januar 2016 Oktober 2015 Juli 2015 Juni 2015 März 2015 Januar 2015 Dezember 2014 November 2014 Oktober 2014 September 2014 Juli 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 Bluefish Editor
Geany – The Flyweight IDE
get Mozilla Firefox
get Opera
get Konqueror
get Mozilla Thunderbird
get Linux Mint
get Ubuntu Linux

Anzeige
ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Werbung

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

Datenschutzerklärung
Durch die Nutzung der Website stimmen Sie der Verwendung von Cookies zur Durch­führung von Analysen und zum Erstellen von Inhalten und Werbung, welche an Ihre Interessen angepasst ist, zu.