Eine Frage, die mich in den letzten Tagen immer wieder erreicht hat, möchte ich heute klären. Mehrere User fragten mich „Hey, kannst du mir erklären wie du die Nicklisten Icons im Channel App Entwickler gemacht hast? Ich will auch solche – weiß aber, nicht wie ich es machen kann.“ Hier die Schritt-für-Schritt Anleitung. Werdet selbst kreativ!

Schritt 1:

Erstelle eine Arbeitsfläche mit folgenden Maßen:

• Breite: 100px
• Höhe: 20px
• Auflösung: 72 Pixel/Zoll

---

 

Schritt 2:

Wähle eine Füllfarbe aus um die Arbeitsebene mit einer Farbe zu füllen. Diese Ebene wird später ausgeblendet, dient aber im Moment nur dafür, dass du selbst sehen kannst wie deine Grafik aussieht.

Tipp: Wähle am besten die Hintergrundfarbe des Channels in dem du unten auf die zwei Farbfelder doppelt klickst und eine Farbe auswählst.

---

Schritt 3:

Wähle das Text-Werkzeug aus und klicke auf deine Ebene (im mittleren Bildschirm) um eine neue Text-Ebene zu erstellen.

---

Schritt 4:

Am oberen Bildschirm ändert sich die Werkzeugleiste. Übernehme die gezeigten Angaben.

Für die Feinheiten kannst du dann bei jedem einzelnen Buchstaben folgende Angaben überprüfen um ein einheitliches Bild zu erzeugen.

Tipp: Mit STRG + J kannst du aktivierte Ebene (hier die blau hinterlegte) kopieren und musst noch den Buchstaben ändern. Das spart Zeit. Mit STRG + V aktivierst du das verschiebe Werkzeug. Wenn du nun die Pfeiltasten nutzt, kannst du die Buchstaben pixelgenau horizontal oder vertikal verschieben. So wie es dir lieb ist.

Anschließend markiere alle Textebenen. Dafür klickst auf die oberste Ebene und drückst anschließend die SHIFT-Taste und klickst mit gedrückter SHIFT-Taste die letzte Text-Ebene an. Um diese Ebenen zu Gruppieren, drücke STRG + G.

---

Schritt 5:

Wenn die Textebenen in einer Gruppe eingeordnet sind, klickst du auf Gruppe 1 mit der rechten Maustaste bis sich folgendes Kontext-Menü öffnet und wählst mit der linken Maus-Taste die Option „In Smart-Objekt konvertieren“ aus.

---

Schritt 6:

Nicht erschrecken. Eure Ebenen sind nicht weg sie heißt nun anders und ist anders zu verarbeiten. Das ist aber uns erstmal egal, denn wir möchten auf die Ebene noch eine Fulloption drauf packen. Dies geschieht in dem ihr auf die Ebene „Gruppe 1“ mit der rechten Maus-Taste klickt und den Punkt „Fülloptionen…“ auswählt.

Hier könnt ihr munter herumtesten. Damit das Ergebnis aber im typischen „Knuddel-Stil“ angezeigt wird, klickt ihr auf „Kontur“ und übernehmt die abgebildeten Einstellungen.

Mit einem Klick auf „OK“ werden die Einstellungen übernommen.

---

Schritt 7:

Bevor es jetzt gleich zum Speichern der Grafik geht, müssen wir noch die Hintergrundebene ausblenden. Dafür klickt ihr bitte auf das Auge. Eure Arbeitsebenen müssten nun so aussehen.

Wenn eure Hintergrundebene Ausgeblendet ist, wählt ihr „Datei > Speichern unter…“ aus.

---

Schritt 8:

Übernehmt folgende Einstellungen, benennt euer Bild sinnvoll und achtet darauf, dass euer Bild das Format .PNG hat. Denn in diesem Format ist es möglich Transparenzen zu speichern.

Bevor euer Nicklist Icon aber gespeichert wird, kommt noch ein Fenster und eure Entscheidung ist gefragt.

---

Schritt 9:

Entscheidet euch für eine der beiden Möglichkeiten. Interlace bedeutet, dass euer Bild entweder Zeilenweise aufgebaut werden soll oder eben nicht. Dies kann von Vorteil sein, wenn ihr euer Bild schneller sichtbar haben wollt. Dies ist aber bei kleineren Bildern aber eher zu vernachlässigen. Egal wie ihr euch entscheidet, das Bild wird so oder so angezeigt werden.

---

Download:

Als Hilfestellung habe ich für euch eine PSD-Datei fertig gemacht, mit der ihr arbeiten könnt, falls ihr mit dem Tutorial nicht ganz so zurecht kommt wie erhofft. Ruft dafür einfach folgenden Link auf:

•  Download von github.com

---

Jetzt könnt ihr euer Bild in euren FTP-Ordner schieben und in eure App einbinden.

Weiterführende Links

• Dem User ein Icon verpassen
• Nicklisten-Icons und ihr Nutzen für Apps

Wenn du Fragen zum Erstellen von Nicklisten-Icons hast oder du dir ein anderes Tutorial wünscht, dann schrei es in die Kommentare und ich versuche es, so schnell wie möglich für euch umzusetzen. Ich bin darauf gespannt, was für lustige Nicklisten-Icons ihr zaubern werdet.