Icons – Into the blue

In diesem Tutorial wollte ich euch einmal zeigen wie man diese Icons machen kann 

Happy

 Zur Freude aller gibt es dabei genau 3 Texturen und keine Farbe YAY 

Lol

[Bild: Rm1UrR1.png]

Da ich hier keine großen Resources brauche verlinke ich die einzeln und nicht in einem Ordner.

Textur1 von Pinterest
Textur2 von Pinterest
Textur3 von So-ghislaine
Für alle Icons nutze ich die Font Calibri und der Farbe #27a8c9  

Ich erkläre dazu jeden Icon einzeln. Zu beginn brauch ich tatsächlich für die Icons nur 1 einzige Textur. Textur1. Ich verkleinere sie etwas uns setze sie versetzt auf die Icons. Das sieht bei mir dann so aus.

[Bild: IUfDmbk.png]

Wie ihr seht ganz unspektakulär. Weiter geht es nun einzeln.

ACHTUNG WICHTIG!!! Da ich kein Coloring für die Icons nutze ist es hier äußerst wichtig, dass ihr auf die Farben eurer Bilder achtet. Also entweder den selben Shoot nutzen mit der selben Belichtung oder die Bilder angleichen das eben die Hautfarbe bei allen ähnlich ist. Sonst sieht das ganze nix aus.

Zitat:

ICON 1

Hier lege ich zuerst eine Person auf den Icon.

[Bild: UsnCeTO.png]

Dann erstelle ich mit dem Rechteck-Werkzeug 

[Bild: ZGp6Cre.png]

 ein Rechteck in der Farbe #19befb. Dieses Rechteck bekommt von mir einen Ebenenstil mit einem Verlauf und eine Kontur in der Farbe #f7f3ee.

[Bild: hslE2WO.png]

Ich lege ein zweites Bild auf den Icon und mache es schwarzweiß (Bild –> Korrekturen –> Schwarzweiß). 

[Bild: hF041TH.png]

Dann stelle ich die Ebeneneigenschaft auf Mutliplizieren

[Bild: tPbPNMz.png]

Da das im Moment ziemlich scheiße aussieht, wende ich eine Schnittmaske indem ich mit rechts auf das Schwarzweißbild gehe und Schnittmaske erstellen auswähle

[Bild: 9zSgehk.png]

Das Bild bekommt in der Ebenenansicht so einen kleinen Pfeil nach unten. Das heißt das Bild liegt nun nur noch auf der Ebene direkt darunter also auf meiner Form.

[Bild: 58bKNyn.png]

Danach sieht der Icons so aus

[Bild: nSpTjYI.png]

Dann erstelle ich mit dem Polygon-Werkzeug 

[Bild: k1LWJn2.png]

 drei 5-Ecke in der Farbe #e1dfdb und gebe ihnen eine Kontur mit der Farbe #27a8c9 und einer Größe von 1px.

[Bild: 5IGUXdd.png]

Noch Text dazu und dieser Icon is fertig

[Bild: JRGvo4x.png]

ICON 2

Wuuhiii der Icon hier geht Ratzefatze. Also erst einmal eine Person auf den Icon. Die darf hier ruhig etwas in der Luft hängen. Ich platziere sie dort wo ich den Strich aus der Textur hab.

[Bild: F86xCEI.png]

Jetzt leg ich den ersten Text auf den Icon.

[Bild: vPSQ9AP.png]

Und weil es so schön is, noch mal Text. Diesmal hinterlege ich den kleinen Text mit Balken in der Farbe #13a9e8 und #cccbc6 mein Text hat die selben Farben nur eben umgekehrt.

Und schon is der Icon fertig 

Lol

[Bild: OxdnQsh.png]

ICON 3

Der nächste is auch easy peasy. 

Happy

Wieder leg ich zuerst meine Person auf den Icon. Diesmal in schwarzweiß. Ich lasse links und rechts auf meinem Icons einen Rand von ein paar Pixeln, sodass man hier und da noch die Textur mit dem Strich drauf sieht

[Bild: N6G8Jw1.png]

Jetzt nehme ich wieder das Rechteck-Werkzeug 

[Bild: ZGp6Cre.png]

 und erstelle ein Rechteck in der Farbe #19befb. Das Rechteck bekommt von mir einen Verlauf und eine Kontur mit der Farbe #f7f3ee

Und damit is der Icon auch schon fertig 

Lol

[Bild: 0ssc4qL.png]

ICON 4

Der Icon is ein wenig kniffliger aber auch nicht wirklich wild 

Lol

Ich erstelle mit dem Polygon-Werkzeug 

[Bild: k1LWJn2.png]

 ein 5-Eck, die Farbe is egal, da ich direkt ein Bild mit Hilfe einer Schnittmaske (mit Rechts auf das Foto) auf das 5-Eck lege

[Bild: 9zSgehk.png]
[Bild: I4Y42DM.png]

Danach mache ich das Bild schwarzweiß (Bild –> Korrekturen –> schwarzweiß)

[Bild: SthsI75.png]

Nun lege ich eine neue Farbfläche auf meinen Icon (Ebene –>Neue Füllebene –> Farbfläche) mit der Farbe #19befb. Die Ebeneneigenschaft stelle ich auf Multiplizieren.

[Bild: oC7Pqq2.png]

Nun dupliziere ich das 5-Eck vom Anfang einmal, schiebe das Duplikat in der Ebenenansicht ganz nach oben und gebe ihm eine Füllfarbe #19befb eine 1px Kontur in der Farbe #ffffff. Dann stell ich die Deckkraft der Fläche auf 0%

[Bild: 01Pm0nC.png]

Der Icon sieht dann so aus

[Bild: 8R1b9JV.png]

Jetzt dupliziere ich das 5-Eck einmal und drehe es um 180 Grad

[Bild: ZmoiZWz.png]

Und noch mal duplizieren und etwas neigen.

[Bild: H3GMCIl.png]

Jetzt erstelle ich noch mal zwei kleine 5-Ecke.

[Bild: dVrHWmf.png]

mit Hilfe einer Schnittmaske kommen da zwei kleine Bilder drauf. Diese lasse ich in Farbe.
Und damit ist der Icon fertig.

[Bild: YlAuxW7.png]

ICON 5

Für den Icon lege ich eine Person auf meinen Icon und mache sie schwarzweiß. Es sieht im ersten Moment nicht so aus aber ich hab sie freigestellt.

[Bild: gKRZqMr.png]

Jetzt nehme ich das Polygon-Werkzeug 

[Bild: k1LWJn2.png]

 und erstelle 5-Ecke. Einmal mit der Farbe #13a9e8, einmal mit der Farbe #e1dfdb. Beiden gebe ich eine Kontur in der Farbe #13a9e8. Macht vielleicht bei den blauen erst mal keinen Sinn aber wenn ich ein Foto darauf lege, sieht man die Farbe nicht mehr und nur die Kontur 

Lol

 daher macht es später einen Sinn.

[Bild: fhx0PLV.png]

Die 5-Ecke dupliziere ich nun beliebig viel und verteile sie auf meinem Icon so das sie zusammen passen

[Bild: PRkMXJh.png]

Ich dupliziere weiter und manchen davon geb ich mit Hilfe einer Schnittmaske (mit rechts auf das Bild klicken) ein farbiges Bild.

[Bild: 9zSgehk.png]

[Bild: RQgw3XN.png]

Nun gehe ich auf meine Große Frau zurück, gebe dem Bild eine Ebenenmaske und radiere sie hinter dem 5-Ecken weg.

Ohne die 5-Ecke würde es so aussehen.

[Bild: qPFtxoW.png]

Bei meinem Icon gibt es nicht viel Unterschied, je nach Bild und Bildfarbe kann aber euer Hintergrund hinter den 5-Ecken sehr dunkel oder unruhig sein, daher is das dann wichtig um ein sauberes Bild zu bekommen.

Und damit is auch dieser Icon fertig.

[Bild: 1pyUIwZ.png]

ICON 6

Letzter Icon 

Lol

Das is glaub ich auch der aufwendigste 

Happy

 aber das geht auch noch. Also los gehts. 

Happy

Zuerst leg ich eine schwarzweiße Person auf meinen Icon, stelle sie frei und schau das sie nur am linken Rand des Icons liegt.

[Bild: 6KHoQiX.png]

Dann erstelle ich mit dem Rechteck-Werkzeug 

[Bild: ZGp6Cre.png]

 ein Rechteck in der Farbe #19befb. Dieses Rechteck bekommt von mir einen Ebenenstil mit einem Verlauf und eine Kontur in der Farbe #f7f3ee.

[Bild: yrcU5wA.png]

Wie bei Icon 4 erstelle ich mit dem Polygon-Werkzeug 

[Bild: k1LWJn2.png]

 ein 5-Eck und gebe ihm eine Füllfarbe #19befb eine 1px Kontur in der Farbe #ffffff. Dann stell ich die Deckkraft der Fläche auf 0%.

[Bild: 01Pm0nC.png]

Dieses 5-Eck dupliziere ich zwei mal und drehe beide 5-Ecke so das sie unterschiedlich liegen.

Der Icon sieht dann so aus.

[Bild: D81l54F.png]

Jetzt erstelle ich mit dem Polygon-Werkzeug 

[Bild: k1LWJn2.png]

 wieder 3 5-Eck und gebe ihm eine Füllfarbe #19befb eine 1px Kontur in der Farbe #ffffff. Diese 5-Ecke mache ich klein.

[Bild: 8iBjC11.png]

Dann packe ich meinen ersten Text auf den Icon. Je nach Seite geb ich dem Text eine unterschiedliche Farbe

[Bild: trGo5kt.png]

Nun kommt meine zweite Person auf die Grafik.

[Bild: TPzpPvH.png]

Mit Hilfe einer Schnittmaske lege ich eine Farbfläche (Ebene –> Neue Füllebene –> Farbfläche) auf meine kleine Person. In der Farbe #dfdfdd.

[Bild: jLCK8Re.png]

Dann dupliziere ich meine Kleine Person noch einmal und schiebe sie über die mit der Farbebene . Ich versetzte sie einen Pixel nach rechts so das meine kleine Person einen hellen Rand bekommt.

[Bild: UtzvZ77.png]

Jetzt nur noch Text in die oberen beiden kleinen 5-Ecke und der Icon is fertig

[Bild: qFWKwAl.png]

FINISH

Dem aufmerksamen Tutorial-Bastler wird aufgefallen sein, dass es einen Unterschied gibt zwischen den Icons die ich eben beschrieben habe und denen die ich oben in den Start gepostet habe.

[Bild: k6cQoo6.png]

[Bild: Rm1UrR1.png]

Und damit habt ihr absolut recht 

Happy

 Es fehlen noch die beiden Texturen die ich am Anfang mit verlinkt habe 

Happy

Und die packe ich jetzt in meinem Finish auf meine Icons. 

Dazu mach ich meine Icons erst mal fertig. Sprich so wie sie jetzt gerade sind. Alle 6 einmal als PSD speichern. So habt ihr alle Icons einmal safe.

Jeden einzelnen Icon in seiner Datei auf eine Ebene reduzieren. (Ebene –> Auf Hintergrund reduzieren). Dann habt ihr 6 Dateien deren Ebenenanzeige so aussieht

[Bild: 8XY5PAM.png]

Ich nutze als Vorlage immer gerne alte Icons Sets von mir 

Lol

 dann sieht es immer gleich aus. Also öffne ich eine alte Grafik und ziehe die Icons da rüber

[Bild: DoHv5ct.png]

[Bild: wEiE7Q5.png]

Wenn alle Icons drüben sind sortiere ich meine Icons so das sie passen. Meine Ebenenvorschau sieht nun so aus. 1 mal mein altes Set und 6 neue Icons

[Bild: WxzS5wW.png]

Je nach Icon Set lege ich jetzt unter die neuen Icons eine neue Farbfläche (Ebene –> Neue Füllebene –> Farbfläche) 

[Bild: L7Yfmh3.png]

Bei jedem anderen Set würde ich jetzt noch Text drauf machen und fertig is das ganze aber hier will ich ja noch was anderes mit den Icons machen.

Also blende ich jetzt meinen alten Hintergrund und den neuen einmal aus.

[Bild: RP2UZqR.png]

Dann reduziere ich alle sichtbare Ebenen (Ebene –> Sichtbare auf eine Ebene reduzieren). Und dann müsste eure Ebenenansicht so aussehen.

[Bild: B34UMOA.png]

Und eure Icons haben dann keinen Hintergrund mehr. Sind aber quasi eine Grafik.

[Bild: ZXtSDfF.png]

Jetzt lege ich Textur 2 und Textur 3 auf meine Icons. Stelle bei beiden die Ebeneneigenschaft auf negativ multiplizieren. Beide Texturen verkleinere ich auf 50% und platziere sie so wie es mir am besten gefällt.

[Bild: UWbJV8Q.png]

Da ich die Texturen jetzt nur auf den Icons haben mag, geb ich beiden Texturen eine Schnittmaske (mit rechts auf die Texturen klicken)

[Bild: 61YVkP6.png]

Jetzt nur noch den Hintergrund wieder einschalten und dem ganzen Kind einen Namen geben und fertig is der Lack. 

Happy

[Bild: pe1p0nx.png]

>> Back to Icons