Web Design -
Portfolios (Icons)


Online-Anleitung - Digital-Art und Grafik-Design
Icons und Buttons erstellen mit Photoshop
von Markus Agerer


In diesem Tutorial wird beschrieben wie man eigene Icons und Buttons mit Hilfe von Photoshop Elements erstellt. Icons und Buttons werden typischer Weise im Interface von Computer-Programmen oder für die optische Gestaltung von Websites verwendet.


In diesem Tutorial wird beschrieben wie man eigene Icons und Buttons mit Hilfe von Photoshop Elements erstellt. Icons und Buttons werden typischer Weise im Interface von Computer-Programmen oder für die optische Gestaltung von Websites verwendet.
Für die Rubrik Digital-Art und Grafik-Design habe ich z.B. als Button eine Computer-Maus erstellt, die einen Farbstrich bzw. Farbklecks malt. In diesem Tutorial zeige ich Euch wie ich diesen Maus-Button mit Photoshop Elements erstellt habe.


Buttons und Icons mit Photoshop erstellen


Icons und Buttons erstellen - Foto als Vorlage


Icons und Buttons erstellen - Nachzeichnen der Konturen der Fotovorlage


Icons und Buttons erstellen - In Photoshop nachgezeichnete Konturen


Icons und Buttons erstellen - Einstellungen im Dialogfenster "Farbton/Sättigung" und das Ergebnis daraus


Nachdem nun die Konturen (man kann auch Outlines sagen) unseres Icons / Buttons erstellt sind, geht es nun daran das Bild zu kolorieren.
Erst kommt die Rote Farbe unseres Maus-Buttons. Dazu erzeugen wir eine neue Ebene. Alle Bereiche des Icons, die rot werden sollen, werden mit einem Auswahlwerkzeug (z.B. Lasso oder Auswahlpinsel) maskiert. Dann malt man die maskierten Bereiche einfach rot aus.


Nachdem nun die Konturen (man kann auch Outlines sagen) unseres Icons / Buttons erstellt sind, geht es nun daran das Bild zu kolorieren.
Erst kommt die Rote Farbe unseres Maus-Buttons. Dazu erzeugen wir eine neue Ebene. Alle Bereiche des Icons, die rot werden sollen, werden mit einem Auswahlwerkzeug (z.B. Lasso oder Auswahlpinsel) maskiert. Dann malt man die maskierten Bereiche einfach rot aus.
Im Bild unten seht Ihr das Icon mit rot kolorierten Flächen. Außerdem habe ich bereits eine geschwungene orange Kurve gezogen, die eine Linie darstellen soll, die mit der Maus gezeichnet wurde (später habe ich für das Icon die Kurve mit einem gelben Farbklecks ersetzt).


Erst kommt die Rote Farbe unseres Maus-Buttons. Dazu erzeugen wir eine neue Ebene. Alle Bereiche des Icons, die rot werden sollen, werden mit einem Auswahlwerkzeug (z.B. Lasso oder Auswahlpinsel) maskiert. Dann malt man die maskierten Bereiche einfach rot aus.
Im Bild unten seht Ihr das Icon mit rot kolorierten Flächen. Außerdem habe ich bereits eine geschwungene orange Kurve gezogen, die eine Linie darstellen soll, die mit der Maus gezeichnet wurde (später habe ich für das Icon die Kurve mit einem gelben Farbklecks ersetzt).


Im Bild unten seht Ihr das Icon mit rot kolorierten Flächen. Außerdem habe ich bereits eine geschwungene orange Kurve gezogen, die eine Linie darstellen soll, die mit der Maus gezeichnet wurde (später habe ich für das Icon die Kurve mit einem gelben Farbklecks ersetzt).


Icons und Buttons erstellen - Button/Icon mit rot kolorierten Bereichen


Icons und Buttons erstellen - Button/Icon mit rot kolorierten Bereichen


Bei der blauen Farbe geht man genauso vor. Damit ist der Button/Icon schon mal farblich gestaltet.


Icons und Buttons erstellen - Maus farblich gestaltet


Icons und Buttons erstellen - Maus fertig koloriert und schattiert


Jetzt fehlt noch das I-Tüpfelchen auf unserem Button/Icon: Die Lichter.
Die hellen Bereiche sind Stellen, an denen das Licht von der Oberfläche der Maus leicht reflektiert wird. Durch die Darstellung dieser Bereiche gewinnt das Icon nochmals stark an Wirkkraft. Die Lichter erstellt man im Prinzip genauso wie die Schatten, nur das man dafür weiße Farbe verwendet. Das Ergebnis seht Ihr unten.


Jetzt fehlt noch das I-Tüpfelchen auf unserem Button/Icon: Die Lichter.
Die hellen Bereiche sind Stellen, an denen das Licht von der Oberfläche der Maus leicht reflektiert wird. Durch die Darstellung dieser Bereiche gewinnt das Icon nochmals stark an Wirkkraft. Die Lichter erstellt man im Prinzip genauso wie die Schatten, nur das man dafür weiße Farbe verwendet. Das Ergebnis seht Ihr unten.


Icons und Buttons erstellen - Fertiges Icon bzw. Button


Icons und Buttons erstellen - Fertiges Icon bzw. Button


Unten seht Ihr noch einige Variationen des erstellten Buttons/Icons in unterschiedlichen Größen:


Icons und Buttons erstellen - Variationen des erzeugten Buttons/Icons


Icons und Buttons erstellen - Variationen des erzeugten Buttons/Icons