Icons basteln

Hier findest du Anleitungen für GIMP 2.10
Antworten
Benutzeravatar
anke
Site Admin
Beiträge: 1999
Registriert: Fr 21. Aug 2020, 20:54
Wohnort: Osnabrück
Deine Galerie: https://gimp-werkstatt.de/werkstatt-galerie/eleanora/
Betriebssystem: XUbuntu
Kontaktdaten:

Icons basteln

Beitrag von anke »

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. Löse hierzu die Fenster in GIMP. Menü Fenster Deaktiviere den Einbild-Modus.

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

Deine 100 % Ansicht legst du neben dein Bild. Darin wird dir dein Arbeitsschritt in Originalgröße angezeigt, sodass du siehst, wie deine Bearbeitung wirkt.

Bild

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, sodass 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.

Bild

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.

Bild

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. Verlauf-Einstellung: Linear

Bild

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

Bild

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

Bild

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

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

Bild

Ok, fast fertig.

Zum Schluss fügst du noch ein Highlight ein, sodass 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.
Verlauf-Einstellung: Form: kreisförmig Farbe Weiß zu transparent

Bild

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.

Bild

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

Bild

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

Bild

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

z.B.
BildBildBildBildBild

Oder du wählst eine andere Hintergrundfarbe für deinen Button.
Sperre hierzu die Ebene und fülle sie mit einer neuen Farbe:

Bild

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

Bild

Viel Spaß beim nach Basteln!

Wer denkt, dass Administratoren administrieren,
und Moderatoren moderieren,
denkt auch das Zitronenfalter Zitronen falten :mrgreen:
Meine Galerie
Meine alte Galerie
Antworten