Icon gestalten mit PS – DIY App Grafik

Icon gestalten mit PS – DIY App Grafik

Icon designen für den Appstore – erstelle dein eigenes Icon

Einleitung – Um was geht es hier eigentlich?

In diesem Beitrag möchte ich euch meinen Workflow beim Designen dieses Icons zeigen.

Icon Speed Up 3D
App Icon für Speed Up 3D

Voraussetzungen

Ich arbeite grundsätzlich mit Photoshop (meine Version ist CC14, viele andere Versionen reichen aber auch aus). Zusätzlich benutze ich für den Mal-Effekt Topaz Impression. Beides ist kostenpflichtig. Alternativ zum Topaz Impression könnt ihr auch die in Photoshop enthalte Öl-Gemälde-Funktion nutzen. Ein Tutorial ist hier verlinkt: Tutorial PS Öl-Gemälde-Filter

Das App-Icon Template

Alles braucht man bei so einem App-Icon nicht selbst machen. Es gibt gute Vorlagen die man kostenlos als Grundgerüst verwenden kann. Ich nutzte das folgende Icon-Set http://Download via File-Upload.net.

Weiter gehts mit PS – Icon design leicht gemacht

Unnötige Ebenen deaktivieren

Ihr öffnet erstmal die PS-Datei. Danach deaktiviert ihr Text- und Backgroundebene mit einem Klick auf das kleine Auge im Ebenenfenster rechts unten.

App-Icon in PS
App Icon Template in PS

Nun öffnet ihr den Ordner 512×512. Ihr deaktiviert die Ebene Metal 1 und aktiviert die Gruppen „Simple metalic – Changable color“ und „Simple Plastic – Changable color“.

icon Rahmen
Icon mit passendem Rahmen

Um die Farbe des Rahmens zu öffnen geht ihr nun auf den „Simple metalic – Changable color“ Ordner und klickt auf die Ebene „Change Color“. Als Farbton hab ich -13 gewählt, als Sättigung +100.

Der Hintergrund

Ich habe einen Screenshot von Speed-Up 3D als Hintergrund für mein Icon gewählt. Das Bild habe ich einfach aus dem Screenshot kopiert und als Ebene unter den Rahmen und der Border-Ebene platziert.

App-Icon mit Hintergrund
Das Speed Up App Icon mit Background

Das S – Handarbeit

Beim Buchstaben könnt ihr euren Gestaltungskünsten freien Lauf lassen. Ich habe das Rechteck-Werkzeug gewählt und rechteckige Balken in Form eines S nachgebaut. Um die richtige Farbe kümmern wir uns nachher.

Rechteck-Werkzeug
Rechteck Werkzeug in Photoshop

Für den Pfeil oben benutzte ich das Eigene-Form Werkzeug und den Pfeil 6.

Eigene-Form-Werkzeug
Eigene Form Werkzeug Photoshop
Resultat
S mit PS

Danach habe ich alle Ebenen markiert und mit CMD-G zu einer Gruppe zusammengeführt. Die Gruppe kann man dann mit CMD-E zu einer neuen Ebene zusammenführen. Abschließend habe ich die unteren Ecken mit dem Radiergummi angespitzt und die anderen Ecken abgerundet.

S mit abgerundeten Kanten
S mit runden Kanten und Spitze

S Fülloptionen

Die Fülloptionen bestimmen unter anderem das Aussehen der Ebene. Diese erreicht ihr, wenn ihr einen Rechtsklick auf die Ebene macht unter dem Menüpunkt Fülloptionen. Ich habe für das S die folgenden Einstellungen gewählt.

"<yoastmark

"<yoastmark

"<yoastmark

"<yoastmark

Das Ergebnis
Das Ergebnis

Der Öl-Gemälde Filter – Dem Icon einen malerischen Look verleihen

Wir klonen die komplette Gruppe 512x512x mit CMD+J und fügen mit CMD+E alles zu einer Ebene zusammen. Mit Topaz Impression habe ich mir nun einen passenden Effekt herausgesucht. Der Effekt heißt Liquid Lines 1. Danach schaut das ganze dann so aus:

Liquid Lines 1
Filter in Topaz Impression

Jetzt wird einfach die Deckkraft der Ebene auf 50% reduziert und das ist das Ergebnis!

Deckkraft 50%
Deckkraft der Ebene muss auf 50% reduziert werden

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste