Senderlogo mit Paint.net erstellen

[phyXius]

Alohahey zusammen,

da hier immer mal wieder Fragen und Wuensche zu Logos und deren Anfertigung aufkommen, habe ich zu dem Thema eine kurze Anleitung anhand eines Logos geschrieben, das ich fuer die H885 erstellt habe. Vielleicht hilft sie dem ein oder anderen ja bei dem Vorhaben, sein Wunschdisplay zusammenzubasteln .

Ziel:
Ein Senderlogo mit den richtigen Maßen (hier 64x32px) und einem variablen (siehe dazu den Hinweis zu den Senderlogos) Hintergrund erstellen. In dem Beispiel ist es das ZDF-Logo mit einem schwarzen Hintergrund.

Was man braucht:
- das kostenlose Bildbearbeitungsprogramm Paint.net. Es klappt natuerlich auch mit jedem anderen Bildbearbeitungsprogramm, welches Ebenen unterstuetzt. Da sich die Anleitung aber eher an unerfahrene Bildbearbeiter richtet gehe ich nicht davon aus, dass Photoshop zur Verfuegung steht .
- das Senderlogo. Um das sauberste Ergebnis zu erhalten, sollte das Logo als transparente Grafik vorliegen. Eine gute Quelle hierfuer ist Wikipedia, dort liegt zu vielen bekannten Sendern das Logo als transparente *.png-Grafik vor. Sollte man kein transparentes Logo sondern nur eine normale *.jpg-Grafik finden, gibt es zwei Moeglichkeiten: Entweder man lebt mit dem Hintergrund der *.jpg-Grafik (in weiß und schwarz gibt es die sicher immer), oder man schneidet das Logo aus, was je nach Logo und Hintergrund einigen Zeitaufwand bedeuten kann.

Arbeitsschritte in Paint.net:

1. Ueber Datei -> Oeffnen das Senderlogo laden.


2. Ueber Bild -> Groeße aendern den unten sichtbaren Dialog aufrufen. Dort Absolut waehlen und den Haken bei Seitenverhaeltnis beibehalten setzen.
Jetzt den Wert der Breite auf 64 setzen und den Wert der Hoehe beobachten. Setzt der sich automatisch auf >32, dann muss man diesen Wert der Hoehe auf 32 setzen. Jetzt wird der Wert der Breite natuerlich kleiner (da sonst das Seitenverhaeltnis nicht mehr stimmt), das ist aber so gewollt. Man muss also entweder den Wert der Hoehe oder den der Breite so waehlen, dass keiner der Werte seine maximale Groeße ueberschreitet.

02_groeße.jpg (27.31 KiB) 3311 mal betrachtet

3. Im Farbfenster (unten links) auf >> mehr klicken und dort die Transparenz-Alpha auf "0" stellen. Jetzt die Sekundaerfarbe (oben links im Farbfenster) auswaehlen und dort ebenfalls die Transparenz auf "0" stellen.

04_farbe.jpg (29.91 KiB) 3311 mal betrachtet

4. Nun Bild -> Zeichenbereichgröße auswählen. Hier jetzt den Haken bei Seitenverhältnis beibehalten entfernen und die Werte von Breite und Hoehe auf 64 bzw. 32 stellen. Nun noch den Anker auf "Mittig" stellen.
Jetzt liegt das Logo in maximaler Groeße auf einer 64x32px großen Flaeche, ohne gestaucht oder gestreckt zu sein.

5. Ueber Ebene -> neue Ebene eine neue Ebene erstellen. Diese sieht man jetzt grau unterlegt (aktiviert) in der Ebenenuebersicht unten rechts. Diese Ebene schiebt man jetzt nach unten, indem man auf den am unteren Rand der Ebenenuebersicht auf den blauen Pfeil nach unten klickt. Jetzt ist die neue, transparente Ebene unter das Senderlogo gerutscht.
Ein kurzer Exkurs zu den Ebenen in der Bildbarbeitung: Man muss sich das so vorstellen, dass jede Ebene einer Klarsichtfolie entspricht. Liegen mehrere Ebenen aufeinander, dann sieht man immer nur die oberste, es sei denn, diese Ebene enthaelt durchsichtige Elemente (so wie die Ebene, auf der das Senderlogo hier liegt). Dann scheint die naechsttiefere Ebene durch. Bearbeitungen, die man auf einer Ebene durchfuehrt, haben auch nur Auswirkungen auf diese eine Ebene.

6. Jetzt im Farbfenster die Transparenz-Alpha wieder auf "255" setzen und den Farton mit einem Linksklick waehlen, den man als Hintergrundfarbe haben moechte. Danach den Farbeimer aus dem Toolfenster waehlen (oder einfach "F" druecken) und mit der linken Maustaste einmal auf das Bild klicken. Wenn die zuvor erstellte Ebene unter dem Senderlogo liegt und aktiviert (grau unterlegt) ist, fuellt sich alles um das Logo herum mit der ausgewaehlten Farbe.
Alternativ dazu kann man natuerlich auch jeden Farbverlauf oder jedes andere Bild als Hintergrund einfuegen, sofern man es vorher auf 64x32px skaliert hat. Dazu das Bild in paint.net laden, kopieren, zum Logo wechseln und bei aktivierter Hintergrundebene ueber Bearbeiten -> Einfuegen in diese Hintergrundebene einfuegen, oder ueber Bearbeiten -> Als neue Ebene einfuegen als seperate Ebene einfuegen. Diese dann ggf. mit der blauen Pfeiltaste wieder unter das Logo schieben.

06_ebenen.jpg (11.29 KiB) 3311 mal betrachtet

7. Jetzt nur noch ueber Datei -> speichern unter das fertige Logo abspeichern. Dabei als Dateityp "jpg" waehlen. Im nachfolgenden Dialog kann die Qualitaet ruhig auf "100" gestellt werden. Bilddateien mit 64x32px liegen meist in einer Groeße von 3-5kb. Die Harmony-Software laesst hier ueppige 160kb zu, sodass eine Groeßenreduzierung ueber die Komprimierung zulasten der Darstellungsqualitaet nicht noetig ist. Im letzten Dialog jetzt noch auf zusammenfassen klicken. Dadurch werden die beiden Ebenen zu einer zusammengefasst.

Das war's auch schon . Falls Interesse besteht schreibe ich noch etwas dazu, wie man ein Logo aus einer nichttransparenten Grafik am besten ausschneidet.

[insasse]

Falls Interesse besteht schreibe ich noch etwas dazu, wie man ein Logo aus einer nichttransparenten Grafik am besten ausschneidet.

Hallo,

ja bitte. Im voraus schon mal Danke.

Schönen Tag noch

[phyXius]

Alohahey,

hat ein bisschen gedauert, dafuer ist es auch ein bisschen ausfuehrlicher geworden . Ich hoffe ihr koennt damit etwas anfangen.

Senderlogos aus nichttransparenten Grafiken ausschneiden

Hier eine kurze Uebersicht dazu, wie man mit Paint.net ein Senderlogo aus einer bestehenden, nichttransparenten Grafik ausschneiden kann.
Anmerkung: Paint.net hat eine relativ rudimentaere Ausschneidefunktion, Programme wie Paint Shop Pro oder Photoshop lassen eine weitaus groeßere Anpassung der auszuschneidenden Bereiche zu (beispielsweise Kantenglaettung, Vergroeßern des Bereichs etc.). Dennoch reichen die Funktionen von Paint.net fuer viele Arbeiten locker aus.

geeignete Grafiken
Paint.net greift beim automatischen Ausschneiden auf die Farbwerte der Pixel zurueck. Je mehr sich der auszuschneidende von den nicht auszuschneidenden Bereichen in der Farbe unterscheidet, desto einfacher kann man das Logo auschneiden. Und je weniger unterschiedliche Farben oder Farbbereiche es gibt, desto einfacher geht die Arbeit.
Daraus ergibt sich, dass entweder das Logo oder der Hintergrund moeglichst einfarbig und jeweils voneinander moeglichst unterschiedlich farbig sein sollten. Wie man ein Logo aus einer Zweifarbengrafik trennt zeigt Beispiel 1, wie man das bei einem komplexeren Logo macht, Beispiel 2.

Genauigkeit der Bearbeitung
Grundsaetzich sollte man natuerlich so genau wie moegich arbeiten, um das bestmoegliche Ergebnis zu erhaten. Man muss jedoch auch bedenken, dass die Logos relativ klein sind und auf kleinen Displays mit mittelpraechtiger Aufloesung erscheinen.
Tipp: Es empfiehlt sich, fuer genaues Arbeiten die Grafik zu vergroeßern. Das kann man ueber die +- und - -Lupen oben im Fenster. Oder direkt ueber die Prozentanzeige zwischen den beiden. Dadurch wird die Grafik nicht interpoiert (vergroeßert), sondern nur groeßer im Fenster dargestellt.
Beim Runterrechnen auf die kleine, fuer die Harmonys erforderiche Aufloesung werden Pixel zusammengefasst und schon allein dadurch koennen einige Bildfehler behoben werden.
Problematisch duerfte hierbei vor allem ein unschoener Rand rund um Schlagschatten sein, weil man diese nicht sauber genug ausschneiden konnte. Hier hilft es dann sehr oft, so genau wie moeglich auszuschneiden und die Pixel, die man partout nicht erwischen kann, umzufaerben. Dazu waehlt man aus dem Werkzeugfenster das Werkzeug Farbauswahl aus und klickt auf einen Pixel sehr nahe an dem, der umzufaerben ist. Jetzt wird dessen Farbton ausgewaehlt und man kann mit dem Farbpinsel-Werkzeug und einer eingestellten Pixelstaerke von 1 den falschfarbigen Pixel umfaerben.
Tipp: Stellt man im Farbfenster die Transparenz-Alpha ein wenig herunter, dann wird der zu malende Pixel durchsichtig. Das kann im Endergebnis harmonischer aussehen, da dadurch der Schatten weicher zum Rand hin auslaeuft.

Das Lassowerkzeug und die Rechteck- und Elipsenmasken
Mit dem Lassowerkzeug kann man eine beliebige Form ausschneiden, mit Rechteck- und Elipsenwerkzeug lassen sich entsprechende Formen ausschneiden. Das Probem bei Paint.net ist, dass man beim Lassowerkzeug keine Schritt-fuer-Schritt-Bearbeitung machen kann, sondern man muss die Form in einem Zug ausschneiden. Das finde ich persoenlich in der Praxis unbrauchbar. Ebenso lassen sich die Rechtecke und Elipsen nicht nachtraegich aendern und fallen als Auswahlmoeglichkeit ebenso aus. Uebrig bleibt nur noch das Zauberstabwerkzeug.

Das Zauberstabwerkzeug
Hauptsaechlich wird beim Ausschneiden das Zauberstabwerkzeug gebraucht (vierte Reihe links im Werkzeugfenster oder per „S“ auf der Tastatur auswaehlen). Hat man es ausgewaehlt, muss man auf einen bestimmten Bildbereich klicken und dieser wird ausgewaehlt.
Hat man den Zauberstab ausgewaehlt, kann man am oberen Bildschirmrand folgende Optionen einstellen:

- Fuellmodus. Hier kann man einstellen, ob nur die farblich gleichen Bereiche ausgewaehlt werden, die mit dem ausgewaehlten Bereich geografisch zusammenhaengen (Zusammenhaengend), oder ob alle Bereiche im Bild mit diesem Farbton ausgewaehlt werden sollen (Global).

- Toleranz. Ueber die Toleranz wird eingestellt, wie genau das Werkzeug beim Auswaehlen des auszuschneidenden Bereichs arbeiten soll. Stellt man die Toleranz auf 0 %, wird auch nur exakt der Farbton ausgewaehlt, auf den man geklickt hat. Das Ganze sieht dann sehr eckig und wenig schoen aus, da selbst allerkleinste Abweichungen im Farbwert der Pixel (den man mit bloßem Auge manchmal gar nicht sehen kann, siehe Beispiel 1) beruecksichtigt werden und das Werkzeug dementsprechend „genau“ ausschneidet. Wird der Prozentsatz hoeher eingestellt, werden auch Pixel in die Auswahl mit einbezogen, die nicht exakt dem ausgewaehlten Farbton entsprechen, aber farblich in dessen Naehe liegen. Bei 100% wird das komplette Bild ausgewaehlt. Das richtige Ergebnis erhaelt man also dadurch, dass man so wenig wie moeglich und so viel wie noetig Toleranz einstellt. Welches der richtige Toleranzwert ist kann man nur durch Ausprobieren herausfinden.
Hinweis: Drueckt man STRG + D, hebt man die Auswahl schnell wieder auf. Das hilft beim Ausprobieren.


Beispiel 1 – „Zweifarb“grafik
Ein einfaches Beispiel laesst sich anhand des hier gezeigten Nickelodeon-Logos zeigen.

nickelodeon.jpg (72.76 KiB) 3237 mal betrachtet

Auch wenn es wie eine weiß-orange Zweifarbengrafik aussehen mag zeigt ein Farbzaehler, dass die Grafik 776 Farbtoene mehr enthaelt.

nick_farbzahl.jpg (25.64 KiB) 3237 mal betrachtet

Man waehlt jetzt den Zauberstab aus, stellt bei Fuellmodus „Global“ ein und klickt einfach auf eine weiße Stelle. Die sich jetzt blaeulich-grau faerbenden Stellen sind ausgewaehlt, das werden alle Flaechen sein, die man mit dem Auge als „weiss“ identifizieren wuerde. Sollte das gesamte Bild ausgewaehlt werden, dann hat man die Toleranz zu hoch eingestellt. Wird das Logo zu grob ausgeschnitten, dann ist die Toleranz zu niedrig.
Da man den Fuellmodus auf „Global“ eingestellt hat, werden jetzt natuerlich auch die weißen Buchstaben innerhalb des orangenen Farbklecks' ausgewaehlt. Will man das nicht, muss man den Fuellmodus auf „Zusammenhaengend“ stellen.
Hat man alle Bereiche ausgewaehlt, die nicht zum Logo gehoeren, drueckt man einfach die ENTF-Taste. Die ausgewaehlten Bereiche verschwinden und man sieht den karierten Arbeitshintergrund. Damit hat man das Logo (wahlweise auch die darin enthaltenen Buchstaben), ausgeschnitten und das Logo liegt mit transparentem Hintergrund vor.

Beispiel 2 – Mehrfarbiges Logo mit Schatten
Schwieriger gestaltet sich das Ganze, wenn man ein mehrfarbiges Logo oder eines mit feinen Details hat. Als zweites Beispiel dient das VOX-Logo.

vox.jpg (18.73 KiB) 3237 mal betrachtet

Probleme entstehen einmal dadurch, dass die Schrift selbst weiße Elemente aufweist, dass der Punkt gaenzlich andere Farbtoene als die Buchstaben hat und dass der Schatten mit ausgeschnitten werden soll.
Man kann hier wieder auf zweierlei Arten herangehen.
Einmal kann man den ganzen weißen Hintergrund markieren und dann ausschneiden, oder man kann das Logo markieren, die Auswahl umkehren und somit ebenfalls den Hintergrund entfernen. Welche Herangehensweise man waehlt ist im Grunde egal, da es letztenendes eh auf dasselbe Ergebnis herauslaeuft.
Man nimmt also wieder den Zauberstab und waehlt die Toleranz so, dass man beim Auswaehlen des weißen Hintergrundes moeglichst wenig vom Logo und vor allem von dessen Schatten auswaehlt, in diesem Fall ca. 25%. Dabei sieht man, dass der Schattten reativ unsauber ausgeschnitten und ein Teil des weißen Hintergrundes drumherum ebenfalls nicht markiert wurde. Deshalb waehlt man jetzt bei Markierungsmodus (oben links neben Fuellmodus) „Hinzufuegen (Union)“ und beginnt, die weißen Stellen, die nachher zusammen mit dem Hintergrund wegfallen sollen, anzuklicken. Dabei kann man je nach Komplexitaet dieser Farbzusammenhaenge den Toleranzwert bei jedem Klick neu anpassen.
Tipp: Mit der Tastenkombi STRG+Z kann man jeden einzelnen Schritt schnell wieder rueckgaenig machen.

Hat der Zauberstab irgendwo das Logo mitmarkiert kann man diesen Teil aus der Markierung entfernen, indem man im Markierungsmodus „Subtrahieren“ auswaehlt und damit auf den entsprechenden Logoteil klickt.
Hat man schließlich alle weißen Stellen soweit markiert, drueckt man wieder die ENTF-Taste und der Hintergrund verschwindet.

Wenn man andersherum herangegangen ist und das Logo komplett markiert hat, wuerde dieses bei einem Druck auf die ENTF-Taste verschwinden. Um das zu verhindern waehlt man einfach Ansicht->Auswahl umkehren aus. Dadurch wird das Logo demarkiert und stattdessen der Hintergrund wieder ausgewaehlt.

[insasse]

Hallo,

vielen Dank, mal sehen ob ich da hinterher komme.

Schönen Tag noch

[PoooMukkel]

Super Anleitung. Damit sollte auch ich es schaffen, die passenden Logos zu erstellen. Danke!