{"id":21,"date":"2007-09-02T19:18:31","date_gmt":"2007-09-02T17:18:31","guid":{"rendered":"http:\/\/joergnapp.de\/2007\/09\/02\/icons-fur-eigene-programme\/"},"modified":"2008-02-11T19:39:35","modified_gmt":"2008-02-11T18:39:35","slug":"icons-fur-eigene-programme","status":"publish","type":"post","link":"https:\/\/joergnapp.de\/blog\/icons-fur-eigene-programme\/","title":{"rendered":"TomTom: Icons f\u00fcr eigene Programme"},"content":{"rendered":"<p>Man kann sowohl f\u00fcr eigene Programme wie auch f\u00fcr die Standard-Befehle eigene Symbole hinterlegen. F\u00fcr die eigenen Programme geht das \u00fcber die CAP-Dateien, f\u00fcr andere Befehle \u00fcber Men\u00fcanpassungen.<\/p>\n<p><!--more--><\/p>\n<h2>Format<\/h2>\n<p>Als Symbol werden BMP-Dateien im Format <strong>76\u00d748 Pixel<\/strong> akzeptiert. (Kleinere Bilder werden auf dieses Format gestreckt).<\/p>\n<p>Als transparente Farbe kann Rot (entsprechend FF0000) eingesetzt werden. Dabei ist der Rotton nur dann transparent, wenn das Symbol mindestens die oben angegebene Gr\u00f6\u00dfe hat!<\/p>\n<h2>Beispiel<\/h2>\n<p>Als Beispiel die Erstellung eines Symbols f\u00fcr einen Taschenrechner.<\/p>\n<p>Als Basis nehme ich daf\u00fcr das Symbol \u201eaccessories-calculator\u201c von den <a href=\"http:\/\/tango.freedesktop.org\/Tango_Icon_Gallery\" title=\"http:\/\/tango.freedesktop.org\/Tango_Icon_Gallery\" rel=\"nofollow\">Tango-Icons<\/a>.<\/p>\n<p>Diese Symbole liegen im <acronym title=\"Scalable Vector Graphics\">SVG<\/acronym>-Format vor. Das hat den Vorteil, dass mann (z.B. mit <a href=\"http:\/\/www.inkscape.org\/\" title=\"http:\/\/www.inkscape.org\" rel=\"nofollow\">Inkscape<\/a> das Symbol vorher leicht bearbeiten kann.<\/p>\n<p>Die eigentliche Erstellung des Symbols habe ich mit <a href=\"http:\/\/www.gimp.org\/\" title=\"http:\/\/www.gimp.org\" rel=\"nofollow\">Gimp<\/a> vorgenommen.<\/p>\n<h3>Gimp einstellen<\/h3>\n<p>In Gimp als Vordergrundfarbe einen \u201eTomTom-\u00e4hnlichen\u201c Blauton \u2013 ich verwende #a0c8f0 \u2013 und als Hintergrundfarbe Rot (#ff0000) einstellen.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_gimp_grundeinstellungen.png\" alt=\"GIMP Grundeinstellungen\" \/><\/p>\n<h3>Datei \u00f6ffnen<\/h3>\n<p>Jetzt k\u00f6nnen wir die Basis-Datei \u00f6ffnen. In unserem Falle ist das die <acronym title=\"Scalable Vector Graphics\">SVG<\/acronym>-Datei, die wir durch Gimp so rendern lassen, dass sie in das vorgegebene Ma\u00df von 72\u00d748 Pixeln passt, also z.B. mit 48\u00d748 Pixeln.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_svg_oeffnen.png\" alt=\"SVG \u00f6ffnen\" \/><\/p>\n<p>Nat\u00fcrlich kann man hier auch ein passendes Symbol eines anderen Formats (png,\u2026) verwenden.<\/p>\n<h3>Symbol bearbeiten<\/h3>\n<p>Das Symbol hat halbtransparente Bereiche, die u.a. f\u00fcr den Schatten sorgen. W\u00fcrde man jetzt den Hintergrund einfach rot einf\u00e4rben, so w\u00fcrden diese halbtransparente Bereiche \u00fcber dem rot liegen und h\u00e4ssliche Effekte hervorrufen.<\/p>\n<p>Aus diesem Grund sorgen wir daf\u00fcr, dass der gesamte Bereich \u201ehinter\u201c dem Symbol mit einem Blauton eingef\u00e4rbt wird.<\/p>\n<p>Daf\u00fcr muss zun\u00e4chst die Bildebene kopiert werden (das Ebenenfenster l\u00e4sst sich mit <kbd>Strg<\/kbd>+<kbd>L<\/kbd> einblenden).<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_ebene_kopieren.png\" alt=\"Ebene kopieren\" \/><\/p>\n<p>Dann die obere Ebene ausblenden und die untere Ebene aktivieren.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_ebene_aktivieren.png\" alt=\"Ebene aktivieren\" \/><\/p>\n<p>Diese untere Ebene f\u00fcllen wir jetzt komplett mit dem eingestellten Blauton. Im Gimp dazu den Farbeimer <img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icon_farbeimer.png\" alt=\"Farbeimer\" \/>w\u00e4hlen. Die EInstellungen sollten lauten \u201eF\u00fcllart VG-Farbe\u201c, \u201e\u00c4hnliche Farben f\u00fcllen\u201c, \u201eTransparente Bereiche f\u00fcllen\u201c, und die Schwelle sollte auf 255 hochgesetzt werden.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_fuelleinstellungen.png\" alt=\"F\u00fclleinstellungen\" \/><\/p>\n<p>Mit dem Cursor klickt man nun ein mal ins Bild und hat damit den blauen Hintergrund geschaffen.<\/p>\n<p>Als n\u00e4chsten Schritt vergr\u00f6\u00dfern wir die Bildgr\u00f6\u00dfe, um die f\u00fcr das TomTom-Symbol notwendige Bildgr\u00f6\u00dfe zu erreichen. Im Men\u00fc \u201eBild\u201c den Punkt \u201eLeinwandgr\u00f6\u00dfe\u201c w\u00e4hlen. Um die Ma\u00dfe 76\u00d748 eingeben zu k\u00f6nnen, muss man die Verkettung der Werte f\u00fcr Breite und H\u00f6he l\u00f6sen (auf das Kettensymbol klicken). Mittels \u201ezentrieren\u201c wird der Versatz so eingestellt, dass das urspr\u00fcngliche Motiv in der Mitte zu liegen kommt.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_leinwandgroesse.png\" alt=\"Leinwandgr\u00f6\u00dfe\" \/><\/p>\n<p>Jetzt fehlt noch die rote Farbe als Hintergrund f\u00fcr die transparenten Bereiche. Dazu eine neue Ebene anlegen und die F\u00fcllart \u201eHintergrundfarbe\u201c angeben.<\/p>\n<p>Im Ebenenfenster muss man jetzt noch die rote Ebene an die richtige Stelle \u2013 ganz unten \u2013 ziehen und die oberste Ebene wieder einblenden:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_ebenenstapel.png\" alt=\"Ebenenstapel\" \/><\/p>\n<p>Das Ergebnis sieht nun so aus:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_fertig.png\" alt=\"Fertige Grafik\" \/><\/p>\n<h3>Ergebnis<\/h3>\n<p>Und so sieht das Ergebnis auf dem TomTom aus:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/joergnapp.de\/wp-content\/uploads\/2007\/10\/icons_tomtom.png\" alt=\"Grafik auf TomTom\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Man kann sowohl f\u00fcr eigene Programme wie auch f\u00fcr die Standard-Befehle eigene Symbole hinterlegen. F\u00fcr die eigenen Programme geht das \u00fcber die CAP-Dateien, f\u00fcr andere Befehle \u00fcber Men\u00fcanpassungen.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[40,162,23,160,45,167,5],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-allgemein","tag-gimp","tag-grafik","tag-icons","tag-inkscape","tag-menue","tag-svg","tag-tomtom"],"_links":{"self":[{"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":0,"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"wp:attachment":[{"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joergnapp.de\/blog\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}