Business Webicon mit Photoshop erstellen

In diesem Tutorial erläutere ich euch, wie man in den Programmen Illustrator und Photoshop gemeinsam ein Icon für eure Internetseite erstellen kann.

Schwierigkeitsstufe: mittel

Schritt 1

Erstellt als erstes ein Illustrator Dokument. Zeichnet nun mit dem Zeichenstift-Werkzeug (Apfel+P) eine halbe Silhouette eines Kopfes nach. Dupliziert diese und spiegelt Sie horizontal.

bild-39

Gebt dieser Silhouette die Konturfarbe #AFAFAF (1-Pixel) und einen Füllverlauf mit folgenden Farben, bei 0% (50% Schwarz), 35% (15% Schwarz), 42% (0% Schwarz) und bei 100 % (50% Schwarz).

bild-40

Schritt 2

Jetzt verpasst Ihr dem Icon noch einen Anzug. Hierfür müsst Ihr mit dem Zeichenstift-Werkzeug (Apfel+P) Linien ziehen, dies sollte in etwa so ausschauen wie unten auf dem Bild.

bild-41

Wie Ihr seht, habe ich dieser Fläche noch einen Verlauf Von 0% ( 79% Schwarz) zu 100% ( 100% Schwarz) hinzugefügt und dort dann die Art Kreisförmig.

Gebt dem Icon noch einen Hemdkragen und zieht mit dem Zeichenstift-Werkzeug (Apfel+P) eine Linie um das Kinn hervorzuheben, und speichert dieses Icon dann als .ai (Adobe Illustrator Format)  ab, um es im nächsten Schritt in Photoshop importieren zu können.

bild-43

Schritt 3

Erstellt ein neues Photoshop Dokument in einer beliebigen Größe. Platziert auf einer neuen Ebene eure zuvor abgespeicherte Icon.ai über (Datei > Platzieren > … ).

Nun könnt Ihr mit Hilfe von Photoshop euer Icon noch grafisch aufbereiten. Als erstes habe ich unter dem Hemdkragen einen kleinen Schatten hinzugefügt. Zieht über euer Zeichenstift-Werkzeug (Apfel+P) einen Pfad, diesen dann über Apfel + Klick auf den Pfad markieren. Als nächstes zieht Ihr einen Verlauf von Schwarz (#000000) zu Transparent und passt eure Farbe nach belieben an.

01_ps

Ihr könnt den Anzug etwas aufbereiten, indem Ihr eine Seidenstruktur darüberlegt, diese auf Graustufen stellt und dann etwas mit den Effekten und der Deckkraft herumexperimentiert. Verpassen wir dem Icon noch eine Krawatte, diese könnt Ihr ganz einfach mit Hilfe des Zeichenstift-Werkzeuges erstellen. Gebt dieser noch einen Verlauf und einen kleinen Shine am Krawattenknoten.

02_ps

Schritt 4

Wählt mit Apfel + Klick auf euer platziertes Vektoricon (Icon.ai) das Icon aus. Erstellt eine neue Ebene (Apfel+⇧+N) und füllt diese Auswahl mit einer beliebigen Füllfarbe. Entfernt einen Teil dieser Auswahl damit Ihr folgendes Ergebnis bekommt. Färbt dies in der Farbe Weiß (#FFFFFF) ein und gebt Ihr eine Deckkraft von 10%.

06_ps1

Schritt 5

Erstellt jetzt in Illustrator eine Anzugskragen, welchen Ihr dann wieder über (Datei > Platzieren > … ) platziert und dann an die Größe des Icons anpasst. Gebt dem Kragen einen linearen 90-Grad Verlauf mit folgenden Angaben 0% (#454545) zu 100% (#2b2b2b). Legt einen Weiß > Transparent Verlauf darüber, um den Kragen noch etwas hervorzuheben. Als letztes gebt dem Kragen noch einen schwarzen Schatten am Rand.

09_ps1

Endergebnis

Dupliziert den Kragen, spiegelt diesen horizontal und fertig ist euer eigenes Icon.

icon

Schreibe einen Kommentar

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