Gimp-Werkstatt

nach oben

Icons basteln

Für Webseiten, benötigt man häufig kleine Buttons oder Icons mit kleinen Symbolen etc.  Solche Icons herzustellen ist gar nicht so einfach, weil man im Prinzip gar nicht sehen kann, was man gerade macht. Bastelst du ein Icon in einer Größe von z.B. 300px mal 300px und skalierst dein Icon, ist es auch nicht mehr so schön. Am schönsten werden Bilder in Gimp, wenn man sie gleich in der richtigen Größe erstellt.

Fangen wir also an:

Starte Gimp mit einem neuen Bild 48px mal 48px.

Öffne eine neue Ansicht über Menü Ansicht - Neu. Zoome diese Ansicht auf 800% über die Anzeige am unteren Bildfensterran.

Deine 100% Ansicht legst du neben dein Bild. Darin wird dir dein Arbeitsschritt in orginalgröße angezeigt, so dass du siehst, wie deine Bearbeitung wirklt.

bild1

Ok, dann wollen wir jetzt mal den Button basteln:

Aktiviere das Rechteckwerkzeug. Einstellungen: Kanten ausblenden 2,0

Jetzt ziehst du mit dem Rechteckwerkzeug eine Diagonale über dein großes Bild, so dass eine Quadratische Fläche markiert ist. Fülle die Fläche mit schwarz.

Durch das Ausblenden werden die äußeren Pixel nicht in voller Deckkraft angezeigt.

bild2

Verkleinere die Fläche um 1 px und füge eine neue Ebene ein.

Fülle die Ebene mit einem Grau 84% (#d6d6d6)

So, jetzt haben wir die Fläche, auf der du den Button einfügst, fertig.


bild3

Ok, als nächsten gestaltest du den Ring um deinen Button.

Aktiviere das Ellipsen-Werkzeug und ziehe einen Kreis auf.

Fülle den Kreis auf einer neuen Ebene mit einem Verlauf von Hellgrau zu Dunkelgrau. Verlaufeinstellung: Linear


4

Verkleinere die Auswahl um 1px und fülle sie auf einer weiteren neuen Ebene in entgegengesetzte Richtung.


bild5

Für den Farbknopf auf dem Button verkleinerst du die Auswahl erneut um 1 Pixel und füllst die Auswahl auf einer neuen Ebene mit einem dunklen Blau


bild6

Füge eine neue transparente Ebene ein und male den Haken auf den blauen Kreis. Verwende hierfür das Pinselwerkzeug. Die Pinselspitze mit 1px Durchmesser reicht vollkommen aus.

Ändere die Vordergrundfarbe auf Weiß und male den Haken auf die leere Ebene.


bild7

Ok, fast fertig.

Zum Schluss fügst du noch einen Highligt ein, so dass der Button aussieht wie eine Kugel. Hierzu klickst du mit rechter Maustaste auf die blaue Ebene im Ebenendialog und wählst Auswahl aus Alphakanal.

Füge eine neue transparente Ebene ein und Fülle die Auswahl mit einem Verlauf.

Verlaufeinstellung: Form: kreisförmig, Farbe weiß zu transparent

bild8a

Reduziere die Deckkraft der Ebene anschließend auf ca. 30%. In deinem 100% Ansicht-Bild kannst du wunderbar sehen, wie stark du die Deckkraft senken musst.

bild8

Jetzt speicherst du den Button noch als png und fertig ist er

button

Hier findest du noch einmal den Screenshot vom Ebenendialog des fertigen Buttons.

bild9

Jetzt kannst du Die Ebene mit dem Haken austauschen um noch mehr Buttons zu machen, die zu deinem Haken passen.

z.B.

aktualisierendownloadoeffnenloeschenhaken-ok

oder du wählst eine andere Hintergrundfarbe für deinen Button.

Sperre hierzu die Ebene und fülle sie mit einer neuen Farbe:


bild10

Bei einem hellen Rot musst du die Deckkraft der Highligt-Ebene wieder anheben

bild11

Viel Spaß beim Nachbasteln!