Photoshop Tutorial – Illustrator Box Icon erstellen



Hallo Leute!

Willkommen zu meinem neuen Tutorial “Wie erstelle ich ein Adobe-Kisten-Icon?”. Erstellt euer eigenes Kistendesign und benutzt euer Icon als Ordner für eure Dateien. Das ist alle mal besser als die schlichten und langweiligen, gelben Standardordner. Das könnt ihr alles auch ganz einfach in Illustrator bauen. Ich jedoch zeige es euch in Photoshop, da es hier wesentlich schneller geht.
Als kleine Orientierungshilfe solltet ihr euch die Screenshots genauer anschauen :-)

Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen

Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen
So, nun fangen wir aber mal an und öffnen ein neues Dokument in Photoshop! Folgende Maße solltet ihr benutzen: Größe: 1000px x 1000px und weißer Hintergrund. Nun zieht ihr ein  schwarzes Rechteck auf. Dabei bestimmt ihr gleich mal die Größe. Achtet auf die Einstellungen, die ihr oben machen müsst. Findet ihr in der Optionsleiste (könnt ihr auch an den Screenshots sehen, meine Maus steht bei den Einstellungen drauf). Dupliziert, also verdoppelt, nun die Ebene und stellt die ganz genau darüber! Diese Ebene, das obere Rechteck, transformiert ihr zuerst und verkleinert die Höhe auf 30%. Nun müsst ihr sie nur noch perspektivisch verkrümmen! Logischerweise wird es nach hinten enger. Perspektivisch anpassen könnt ihr das ganze auch unter »Bearbeiten«, »Transformieren«. Aber schwarz sollte die Kiste natürlich nicht sein, also bitte, wie sieht das denn aus ;)
Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen

Photoshop Tutorial – Illustrator Box Icon erstellen
Also geben wir der Kiste gleich mal einen dezenten Braunverlauf. Wählt zuerst die untere schwarze Ebene. Her geht ihr im Ebenen-Fenster auf das kleine “fx” dass ihr ganz unten im Fenster finden könnt. Hier ist es nämlich möglich für die Ebenen Einstellungen vorzunehmen. Also klicken wir drauf und gehen auf »Verlaufsüberlagerung«. Schaut euch auf jeden Fall die Screenshots an. Für die Farben gibt es folgende Werte. Verlauf von #ad8e56 nach #b59c70. Für den “Deckel” also die Oberseite des Kartons gebt ihr andere Brauntonwerte an: Verlauf von #e0cea4 nach #c1a368.
Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen

Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen
Kommen wir nun zur Beschriftung des Kartons! Erstmal ein schwarzes Rechteck aufziehen und das genau dort platzieren, wo ihr es auch haben wollt. Dem Rechteck geben wir natürlich zum einen, einen Schatten, zum anderen aber auch einen Farbverlauf! Ich entscheide mich für einen orangenen, da ich mir ein Adobe Illustrator Dock Icon basteln möchte. Das macht ihr auch auf der jeweiligen Ebene unter »fx«. Folgende Werte für den orangenen Verlauf: #d26c1e nach #fbb936. Beim Schatten auf jeden Fall die Einstellung »Multiplizieren« und -90°. Als kleinen Gimmik habe ich noch so eine geschwungene heller Fläche miteingebaut! Dazu einfach den Zeichenstift verwenden! Bogen ziehen und die Deckkraft ändern. So! Klebt nun irgend eine Schrift die euch gefällt auf euren Karton, wie hier bei diesem Beispiel passend zu Illustrator das “AI”. So, kommen wir nun zu der Kante und der Öffnung! Zieht einen schwarzen Strich an der Kante und an der Öffnung! Diese macht ihr genau so weit transparent, bis es euch gefällt und zu dem Braunton passt.
Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen

Photoshop Tutorial – Illustrator Box Icon erstellen Photoshop Tutorial – Illustrator Box Icon erstellen
Nun zücken wir zum Radiergummi und radieren mit einer geringen Deckkraft einige Stellen minimal weg um es realistischer zu machen. Viel mehr ist das nicht! Zu guter letzt noch der Klebestreifen! Zieht eine  hauchdünnen schwarzen Streifen. Diesen skaliert ihr nun in die Breite und so bekommt ihr automatisch diesen Klebestreifen-Effekt! Zieht einen weiteren auf die Vorderseite. Der Streifen auf der Vorderseite müssen wir nun an der Unterseite bearbeiten! Zoomt ran und zeichnet mit dem Lasso eine Auswahl, ruhig rund und ungenau! Denn so sehen meistens die gerissenen Klebestreifen aus. Nun noch die Auswahl entfernen. Die Oberseite müsst ihr jetzt noch perspektivisch anpassen. So, fertig ist das Icon! Ihr könnt noch Kleinigkeiten ändern, so z.b. unten einen Schatten setzen oder aber die Flächen noch dunkler machen. Wie ihr wollt. Na dann, viel Spaß noch!
Photoshop Tutorial – Illustrator Box Icon erstellen


wallpaper-1019588
Mit Kindern über gleichgeschlechtliche Liebe reden
wallpaper-1019588
[Comic] Seven Sons
wallpaper-1019588
Momentary Lily: Original-Anime angekündigt
wallpaper-1019588
LUCK LIFE: Band feiert Europapremiere auf der Connichi