Tutorial: Nicklist-Icons im Knuddels-Stil anlegen (Photoshop)

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:

Step1Erstelle eine Arbeitsfläche mit folgenden Maßen:

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

 

Schritt 2:

Step1.1 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:

Step1.2

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


Schritt 4:

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

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

TippMit 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:

Step3Wenn 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:

Step4Nicht 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.

Step5Hier 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:

Step6Bevor 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.

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


Schritt 8:

Step8Ü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:

Step9Entscheidet 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:


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

Weiterführende Links

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.

3 Gedanken zu “Tutorial: Nicklist-Icons im Knuddels-Stil anlegen (Photoshop)

  1. Ich halte ein Photoshop-Tutorial für unangebracht, weil die wenigsten App-Entwickler wohl dieses dermaßen überteuerte Produkt leasen wollen. Falls es jemandem was nützt, wird er mit hoher Wahrscheinlichkeit eine „Raubkopie“ besitzen. Wer wirklich so viel Geld für dieses Produkt ausgibt, wird es sicherlich so gut beherrschen, dass ihm dieses Tutorial nichts nützt.
    Ich wäre daher für eine Anleitung für eine kostenlose Bildbearbeitungssoftware, um die restlichen 95 % anzusprechen.

    Gefällt mir

    1. Hallo redorange,
      danke für die Anregungen. Ob solch ein Tutorial auch demnächst mit Freeware-Programmen kommen wird, muss sich erst zeigen. Fakt ist allerdings auch, dass gerade Photoshop CS2 als offizielle Gratisvollversion zu downloaden ist. Mit dieser Version sollten die oben genannten Schritte ebenfalls (soweit ich weiß) machbar sein.

      Gefällt mir

  2. redorange… Ich denke es sollte nicht dein Problem sein, woher die Leute Photoshop haben. Ich selbst nutze es auch und finde es super (ist jeden Cent wert!).

    danke für das Tutorial. Nachgemacht und hat alles super geklappt.

    Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s