App Icons in Photoshop erstellen: Ein Tutorial

Ein App Icon ist mehr als nur ein kleines Bild; es ist das Gesicht Ihrer Anwendung, der erste Eindruck, den potenzielle Nutzer gewinnen. Ein gut gestaltetes Icon kann entscheidend sein, um Aufmerksamkeit im überfüllten App Store zu erregen und zum Download zu animieren. Adobe Photoshop ist ein mächtiges Werkzeug, um beeindruckende Icons zu erstellen. In diesem umfassenden Tutorial zeigen wir Ihnen, wie Sie Schritt für Schritt ein ansprechendes App Icon gestalten, basierend auf dem Beispiel eines Icons für ein Billardspiel.

Grundlagen und Dokumenteneinrichtung

Bevor wir mit dem eigentlichen Design beginnen, ist es wichtig, die Grundlagen zu verstehen und das Dokument korrekt einzurichten. Die Größe und Auflösung sind entscheidend, damit Ihr Icon auf verschiedenen Geräten und in unterschiedlichen Kontexten gut aussieht.

Wahl der richtigen Größe und Auflösung

Während ein endgültiges App Icon in vielen verschiedenen Größen benötigt wird (von winzig kleinen Icons in Einstellungen bis hin zu großen Darstellungen im App Store), ist es ratsam, mit einer hohen Auflösung zu beginnen. Eine gängige und empfohlene Größe für die Master-Datei ist 1024x1024 Pixel. Von dieser Größe können Sie später problemlos kleinere Versionen ableiten, ohne Qualitätsverlust befürchten zu müssen. Auch 256x256 oder 512x512 Pixel sind mögliche Startgrößen, aber 1024x1024 bietet die größte Flexibilität.

Da App Icons ausschließlich auf Bildschirmen angezeigt werden, muss der Farbmodus auf RGB eingestellt sein. Der CMYK-Modus wird für Druckzwecke verwendet und ist hier nicht relevant. Die Auflösung sollte 72 Pixel pro Zoll betragen. Eine höhere Auflösung ist für Bildschirmgrafiken unnötig und würde die Dateigröße unnötig erhöhen.

Neues Dokument erstellen (Schritt 1)

Öffnen Sie Adobe Photoshop und erstellen Sie ein neues Dokument. Gehen Sie zu Datei > Neu (oder drücken Sie Strg+N / Cmd+N). Stellen Sie die folgenden Werte ein:

• Breite: 1024 Pixel
• Höhe: 1024 Pixel
• Auflösung: 72 Pixel/Zoll
• Farbmodus: RGB-Farbe, 8 Bit
• Hintergrundinhalt: Transparent oder Weiß (Transparent ist oft hilfreich)

Bestätigen Sie mit „Erstellen“. Sie haben nun eine quadratische Arbeitsfläche, die bereit ist, Ihr App Icon aufzunehmen.

Schritt-für-Schritt-Anleitung: Ein Billard-Icon gestalten

Nun beginnen wir mit der eigentlichen Gestaltung des Icons. Wir werden die Schritte aus dem Beispiel des Billard-Icons nachvollziehen und detaillierter erläutern.

Die erste Form zeichnen (Schritt 2)

Wählen Sie das Werkzeug für abgerundete Rechtecke (U) aus der Werkzeugleiste. Stellen Sie oben in der Optionsleiste sicher, dass Sie „Form“ ausgewählt haben (nicht „Pfad“ oder „Pixel“). Stellen Sie außerdem einen angemessenen Radius für die Ecken ein, z. B. 100 Pixel, um die abgerundete Form eines typischen App Icons zu erhalten.

Ziehen Sie auf Ihrer Arbeitsfläche ein Quadrat auf, das fast die gesamte Fläche ausfüllt, aber einen kleinen Rand lässt. Weisen Sie dieser Form eine Farbe zu, die als Basis für eine Holztextur dient, z. B. ein Braunton wie #b67032. Photoshop erstellt automatisch eine neue Ebene für diese Form.

Einen Holzeffekt erzeugen (Schritt 3)

Um der ersten Form eine Holzmaserung zu verleihen, nutzen wir den „Fasern“-Filter. Stellen Sie vor der Anwendung des Filters sicher, dass Ihre Vordergrundfarbe auf den Braunton (#b67032) und die Hintergrundfarbe auf einen komplementären oder dunkleren Braunton (im Beispiel #72319b, was eher lila ist – hier wäre ein dunkleres Braun wie #704020 passender, aber wir folgen dem Beispiel) eingestellt ist. Gehen Sie zu Filter > Renderfilter > Fasern. Experimentieren Sie mit den Einstellungen „Varianz“ und „Stärke“, um eine überzeugende Holzmaserung zu erzeugen. Bestätigen Sie mit OK.

Die zweite Form zeichnen (Schritt 4)

Wählen Sie erneut das Werkzeug für abgerundete Rechtecke (U). Zeichnen Sie eine zweite Form, die exakt die gleiche Breite wie die erste hat, aber etwas kürzer ist (im Beispiel ca. 6 Pixel vom unteren Rand der ersten Form entfernt). Sie können Hilfslinien (Strg+R / Cmd+R, dann aus den Linealen ziehen) verwenden, um die Ausrichtung zu erleichtern. Diese Form wird eine Vertiefung oder Kante simulieren.

Erste Ebene auf die zweite Form kopieren (Schritt 5 & 6)

Wir möchten, dass auch die zweite Form eine Holztextur hat. Wählen Sie die Miniaturansicht der zweiten Formebene in der Ebenenpalette aus (Alt + Klick auf die Miniatur), um eine Auswahl der Form zu erstellen. Gehen Sie nun zur ersten Ebene mit der Holztextur und kopieren Sie den ausgewählten Bereich (Strg+C / Cmd+C). Fügen Sie ihn auf einer neuen Ebene ein (Strg+V / Cmd+V). Sie haben nun zwei Ebenen mit Holztextur, aber unterschiedlicher Höhe.

Um Tiefe zu erzeugen, machen wir die untere (erste) Ebene mit der Holztextur dunkler. Wählen Sie diese Ebene aus und gehen Sie zu Bild > Korrekturen > Gradationskurven (Strg+M / Cmd+M). Ziehen Sie die Kurve nach unten, um die Ebene abzudunkeln. Bestätigen Sie mit OK.

Tiefe mit Ebenenstilen hinzufügen (Schritt 7 & 9)

Ebenenstile sind ein mächtiges Werkzeug, um schnell Effekte wie Schatten, Glanz und Konturen hinzuzufügen. Doppelklicken Sie auf die erste (dunklere) Holzebene in der Ebenenpalette, um die Ebenenstil-Optionen zu öffnen.

Wählen Sie „Innerer Schatten“ und „Innerer Schein“. Passen Sie die Einstellungen an, um eine leichte Vertiefung oder einen Randeffekt zu erzeugen. Für den inneren Schatten wählen Sie eine dunkle Farbe, stellen Sie den Modus auf Multiplizieren, reduzieren Sie die Deckkraft und spielen Sie mit Abstand, Überfüllen und Größe. Für den inneren Schein wählen Sie eine leicht hellere Farbe oder einen hellen Braunton, stellen Sie den Modus auf Normal oder Negativ Multiplizieren und passen Sie Deckkraft, Überfüllen und Größe an. Diese Stile simulieren, dass die zweite Form leicht auf der ersten aufliegt oder eine Kante bildet.

Wenden Sie nun Ebenenstile auf die zweite (hellere) Holzebene an (Schritt 9). Doppelklicken Sie darauf und aktivieren Sie „Innerer Schein“. Verwenden Sie hier einen helleren Farbton und passen Sie die Einstellungen an, um einen subtilen Glanz oder eine Kante am oberen Rand der zweiten Form zu erzeugen.

Zusätzliche Tiefe mit dem Pinselwerkzeug (Schritt 8 & 16)

Manchmal reichen Ebenenstile nicht aus, um den gewünschten Tiefeneffekt zu erzielen. Sie können Tiefe auch manuell mit dem Pinselwerkzeug (B) hinzufügen. Erstellen Sie eine neue Ebene über der ersten Holzebene und setzen Sie den Mischmodus auf „Multiplizieren“ oder „Weiches Licht“. Wählen Sie einen dunkleren Braunton als die Holztextur und malen Sie vorsichtig an den Rändern, um Schatten zu erzeugen. Verwenden Sie einen weichen Pinsel mit geringer Deckkraft oder Fluss, um die Effekte schrittweise aufzutragen. Wiederholen Sie dies bei Bedarf auf einer weiteren Ebene mit einem helleren Farbton (Mischmodus „Ineinanderkopieren“ oder „Negativ Multiplizieren“) für Highlights.

Ähnlich verfahren wir mit der grünen Tischoberfläche später (Schritt 16).

Die dritte Form zeichnen (Schritt 10)

Erstellen Sie eine neue Ebene. Zeichnen Sie mit dem Werkzeug für abgerundete Rechtecke eine Form, die die Abmessungen der Billardtischoberfläche hat und auf der zweiten Holzform platziert wird. Für die abgerundeten Ecken der Tischfläche können Sie entweder den Radius anpassen oder separate Kreise an den Ecken platzieren und die Formen kombinieren. Im Beispiel werden sowohl abgerundete Rechtecke als auch Ellipsen verwendet, um die Form zu erstellen. Ziel ist eine Form, die wie die grüne Oberfläche eines Billardtisches aussieht, mit den entsprechenden Rundungen an den Ecken.

Zweite Ebene auf die dritte Form kopieren (Schritt 11)

Ähnlich wie in Schritt 5 kopieren wir eine vorhandene Textur (diesmal von der zweiten Holzebene) auf die neu gezeichnete dritte Form. Wählen Sie die dritte Formebene aus, erstellen Sie eine Auswahl (Alt + Klick auf Miniatur), gehen Sie zur zweiten Holzebene, kopieren Sie (Strg+C / Cmd+C) und fügen Sie auf einer neuen Ebene ein (Strg+V / Cmd+V). Diese neue Ebene hat nun die Größe der dritten Form und die Textur der zweiten Holzebene.

Verdunkeln Sie auch diese Ebene leicht mit Gradationskurven (Strg+M / Cmd+M), um einen Unterschied zur unteren Holztextur zu erzeugen.

Grüne Fläche erstellen (Schritt 12 & 13)

Duplizieren Sie die dritte Ebene (Strg+J / Cmd+J). Füllen Sie die duplizierte Ebene mit einer grünen Farbe, die für Billardtischfilz typisch ist (z. B. #005e20). Nennen Sie diese Ebene „Grüne Form Ebene“. Verschieben Sie sie leicht nach unten, um eine Kante oder einen Schatten zu simulieren.

Um sicherzustellen, dass die grüne Fläche exakt in die Form der dritten Ebene passt, erstellen Sie eine Auswahl aus der dritten Ebene (Strg + Klick auf die Miniatur). Wählen Sie dann die „Grüne Form Ebene“ aus und löschen Sie den Bereich, der außerhalb der Auswahl liegt (drücken Sie Entfernen). Die grüne Fläche ist nun perfekt an die Form der dritten Ebene angepasst und liegt leicht versetzt darunter.

Ein Billardloch erstellen (Schritt 14)

Erstellen Sie eine neue Ebene. Wählen Sie das Ellipsenwerkzeug aus (U). Zeichnen Sie einen Kreis, der die Größe eines Billardlochs hat, und füllen Sie ihn mit Schwarz. Platzieren Sie ihn an einer der Ecken der grünen Fläche.

Ebenenstile für die dritte Ebene anwenden (Schritt 15)

Gehen Sie zurück zur dritten Ebene (der Ebene mit der Holztextur, die unter der grünen liegt). Doppelklicken Sie, um die Ebenenstile zu öffnen. Wenden Sie einen „Äußerer Schein“ an. Wählen Sie eine dunkle Farbe (z. B. Schwarz oder Dunkelgrau) und stellen Sie den Mischmodus auf „Multiplizieren“. Passen Sie die Größe und Deckkraft an, um einen weichen Schatten zu erzeugen, der dem Billardtisch mehr Tiefe verleiht und ihn vom Hintergrund abhebt.

Rauschen hinzufügen (Schritt 17 & 18)

Um dem grünen Billardtischfilz eine realistischere Textur zu geben, fügen wir Rauschen hinzu. Wählen Sie die „Grüne Form Ebene“ aus. Gehen Sie zu Filter > Rauschfilter > Rauschen hinzufügen. Wählen Sie eine geringe Stärke (z. B. 5%) und den Verteilungsmodus „Gleichmäßig“ oder „Gaußsch“. Aktivieren Sie „Monochromatisch“, um Farbrauschen zu vermeiden. Bestätigen Sie mit OK.

Fügen Sie auch dem schwarzen Loch und den Lichtern, die Sie später hinzufügen, Rauschen hinzu, um eine konsistente Textur zu erhalten.

Highlights und Details hinzufügen (Schritt 18)

Um das Billardloch realistischer zu gestalten, können Sie weitere Details hinzufügen. Platzieren Sie einen etwas kleineren schwarzen Kreis über dem ersten, um eine innere Kante zu simulieren. Verwenden Sie das Pinselwerkzeug (B) mit einem weichen Pinsel und einem dunkleren Farbton, um Schatten innerhalb des Lochs zu malen und Tiefe zu erzeugen. Mit einem sehr kleinen, weichen Pinsel und einem hellen Farbton können Sie auch einen subtilen Glanz am Rand des Lochs hinzufügen. Wenden Sie auch hier den Rauschfilter an, um die Textur anzupassen.

Eine einfache Kugel zeichnen (Schritt 19)

Erstellen Sie eine neue Ebene für die Billardkugel. Verwenden Sie das Ellipsen-Auswahlwerkzeug (M), um einen perfekten Kreis aufzuziehen (halten Sie dabei die Umschalttaste gedrückt). Füllen Sie die Auswahl auf einer neuen Ebene mit Weiß.

Wählen Sie nun das Pinselwerkzeug (B) mit einem weichen Pinsel und einem dunkleren Farbton (z. B. #9d956e, ein dunkles Beige/Grau). Malen Sie vorsichtig am Rand des Kreises, um einen sanften Farbverlauf zu erzeugen, der die Kugel rund erscheinen lässt. Verwenden Sie dann einen kleineren Pinsel und einen helleren Farbton, um eine zweite, kleinere Highlight-Zone zu malen.

Für ein scharfes Glanzlicht können Sie das Zeichenstift-Werkzeug (P) verwenden, um eine tropfen- oder bogenförmige Pfad zu erstellen. Wandeln Sie den Pfad in eine Auswahl um und füllen Sie ihn auf einer neuen Ebene mit Weiß oder einem sehr hellen Grau. Passen Sie die Deckkraft oder den Mischmodus an, um den Glanz realistisch wirken zu lassen.

Einen Schatten für die Kugel erstellen (Schritt 20)

Der letzte Schritt für die Kugel ist das Hinzufügen eines Schattens. Erstellen Sie eine neue Ebene unter der Kugelebene. Zeichnen Sie mit dem Ellipsenwerkzeug einen schwarzen Kreis, der etwas breiter und flacher ist als die Kugel, und platzieren Sie ihn dort, wo der Schatten fallen soll (auf der grünen Tischfläche). Gehen Sie zu Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner. Stellen Sie einen Radius ein, der den Schatten weich und realistisch erscheinen lässt. Passen Sie die Deckkraft der Ebene an, um die Intensität des Schattens zu steuern.

Damit ist das grundlegende Design des Billard-Icons abgeschlossen.

Wichtige Designprinzipien für überzeugende App Icons

Die technische Umsetzung ist nur ein Teil des Prozesses. Ein erfolgreiches App Icon muss auch bestimmte Designkriterien erfüllen, um effektiv zu sein.

• Einfachheit: Ein gutes Icon ist sofort verständlich und nicht überladen. Vermeiden Sie zu viele Details oder Texte. Es muss auch in sehr kleinen Größen erkennbar sein.
• Wiedererkennungswert: Das Icon sollte einzigartig sein und sich von anderen Icons abheben, aber gleichzeitig die Funktion oder das Thema der App klar kommunizieren.
• Skalierbarkeit: Da Icons in vielen Größen angezeigt werden (von 16x16 Pixel bis 1024x1024 Pixel), muss das Design in jeder Größe funktionieren und lesbar bleiben.
• Konsistenz: Das Icon sollte visuell zum Design und der Marke Ihrer App passen.
• Farbe und Kontrast: Verwenden Sie Farben, die ins Auge fallen und gut miteinander harmonieren. Stellen Sie sicher, dass genügend Kontrast vorhanden ist, damit das Icon auch auf unterschiedlichen Hintergründen gut sichtbar ist.

Standardgrößen für App Icons

Wie bereits erwähnt, benötigen Sie das Icon in vielen verschiedenen Größen für verschiedene Betriebssysteme und Verwendungszwecke. Es ist üblich, das Master-Icon in 1024x1024 Pixel zu erstellen und dann davon alle benötigten Größen abzuleiten. Hier ist eine Tabelle mit einigen gängigen Größen:

Dies ist nur eine Auswahl der wichtigsten Größen. Die genauen Anforderungen können sich ändern, daher sollten Sie immer die aktuellen Richtlinien der jeweiligen Plattform (Apple Human Interface Guidelines, Android Developer Guidelines, etc.) konsultieren.

Häufig gestellte Fragen (FAQs)

Was ist die beste Größe, um mit dem Design zu beginnen?

Die empfohlene Größe ist 1024x1024 Pixel. Dies ist die Größe, die für den App Store (iOS) und andere Listings benötigt wird und ermöglicht eine detailreiche Gestaltung, von der kleinere Größen verlustfrei abgeleitet werden können.

Warum sollte ich 72 dpi für ein App Icon verwenden?

72 dpi ist die Standardauflösung für Bildschirmgrafiken. Da App Icons nur auf Bildschirmen angezeigt werden, ist eine höhere Auflösung (wie z. B. 300 dpi für den Druck) unnötig und würde die Dateigröße unnötig erhöhen, ohne einen visuellen Vorteil zu bieten.

Sollte ich RGB oder CMYK verwenden?

Immer RGB. CMYK ist für Druckzwecke gedacht. RGB ist der Farbraum für digitale Anzeigen und Bildschirme.

Wie exportiere ich das fertige Icon in den benötigten Größen?

In Photoshop können Sie die Funktion „Datei > Exportieren > Für Web speichern (Legacy)“ oder „Datei > Exportieren > Exportieren als...“ verwenden. Mit „Exportieren als...“ können Sie das Icon in mehreren Größen gleichzeitig exportieren, was sehr praktisch ist. Stellen Sie sicher, dass Sie das Format PNG wählen, da es Transparenz unterstützt und für Icons das Standardformat ist.

Sollte mein Icon Text enthalten?

In den meisten Fällen lautet die Antwort Nein. Text in einem App Icon ist in kleinen Größen oft unlesbar und kann das Icon überladen. Der Name der App wird in der Regel unter oder neben dem Icon angezeigt.

Wie kann ich testen, ob mein Icon auf verschiedenen Hintergründen und in verschiedenen Größen gut aussieht?

Erstellen Sie nach dem Export verschiedene Simulationen. Legen Sie das Icon über Screenshots verschiedener Hintergründe (z. B. ein Foto, ein einfarbiger Hintergrund). Platzieren Sie es neben anderen App Icons, um zu sehen, wie es sich abhebt. Überprüfen Sie es in den tatsächlichen Größen auf verschiedenen Geräten.

Was macht ein Icon „cool“ oder erfolgreich?

Ein cooles oder erfolgreiches Icon ist einprägsam, kommuniziert die Essenz der App klar, sieht in allen Größen gut aus, folgt den Designrichtlinien der Plattform, ist einzigartig und visuell ansprechend. Es sollte Neugier wecken und Vertrauen aufbauen.

Fazit

Das Erstellen eines App Icons in Photoshop erfordert Geduld und Liebe zum Detail, aber wie dieses Tutorial zeigt, ist es mit den richtigen Werkzeugen und Techniken gut machbar. Von der sorgfältigen Einrichtung des Dokuments über die Nutzung von Formen und Texturen bis hin zur Anwendung von Ebenenstile und Filtern – jeder Schritt trägt zum Endergebnis bei. Denken Sie immer an die wichtigsten Designprinzipien wie Einfachheit und Skalierbarkeit und berücksichtigen Sie die benötigten Auflösung und Größen für verschiedene Plattformen. Ein gut gestaltetes App Icon ist eine Investition, die sich auszahlt, indem sie Ihre App hervorhebt und Nutzer anzieht. Probieren Sie die Techniken aus und experimentieren Sie, um Ihr eigenes, einzigartiges Icon zu schaffen!

Hat dich der Artikel App Icons in Photoshop erstellen: Ein Tutorial interessiert? Schau auch in die Kategorie Design rein – dort findest du mehr ähnliche Inhalte!