Orb-Icons für Websites
Ihr kennt sie sicher schon, diese kleinen, kreis- oder kugelförmigen Buttons oder Icons, die aussehen als wären sie aus Glas... Schicke Dinger um vor allem Websites ein bisschen aufzupeppen, findet ihr nicht? In GIMP kann man solche Icons ziemlich einfach machen, ich zeige euch wie's geht!
Verwendete GIMP-Version: 2.3.15. Das Tutorial ist in
10 Schritte unterteilt; ein durchschnittlicher Benutzer benötigt
dafür ca. 10 min. Bisher 32379 Mal gelesen. Kategorie:
Buttons, Icons & Web, Schwierigkeit:
50 Kommentare wurden bisher geschrieben.
In anderen Sprachen:
-
1
Legt ein neues Bild an: 250 x 250 px. Füllt den HG mit der Farbe #828282.
Zum Vergrößern klicken -
2
Nehmt die elliptische Auswahl und zieht einen exakten Kreis auf. Legt danach eine neue, transparente Ebene an. Wechselt zum Verlaufswerkzeug (L). Wählt als VG #571f00 und als HG #ff5a00. Zieht nun einen Verlauf von oben nach unten.
Verstärken wir nun den Kontrast indem wir Farben / Helligkeit & Kontrast: 0 / +35 anwenden.
Das Ergebnis sollte dann ca. so aussehn:
Zum Vergrößern klicken -
3
Die Auswahl sollte noch aktiv sein (falls sie das nicht ist klickt rechts im Ebenendialog auf die Ebene und wählt "Auswahl aus Alphakanal").
Legt wieder eine neue leere Ebene an. Füllt die Auswahl mit Schwarz. Am schnellsten könnt ihr mit Schwarz füllen indem ihr die VG und HG-Farbe auf die Standardwerte zurücksetzt (D drücken) und nun mit der aktiven VG-Farbe füllt (STRG+,)
Geht nun auf
- Auswahl / Verkleinern: 1 Pixel.
- Auswahl / Ausblenden: 100 Pixel.
und drückt anschließend 2mal ENTF um den ausgewählten Teil wegzuschneiden.
Deselektiert die Auswahl: Auswahl / Nichts auswählen.
Zum Vergrößern klicken -
4
Wechselt auf die Ebene mit dem Farbverlauf.
Geht auf Filter / Licht und Schatten: Drop Shadow (bzw Schlagschatten). X/Y: 0/0. Deckkraft: 60%.
Zum Vergrößern klicken -
5
Wechselt auf die Ebene mit dem Farbverlauf. Wählt aus dem Kontextmenü des Ebenendialogs Auswahl aus Alphakanal.
Legt eine neue transparente Ebene an. Nehmt als VG-Farbe Weiß (am schnellsten geht das wenn ihr einmal D (Standard-Farben einstellen) und danach X (aktuelle VG und HG-Farbe tauschen) drückt).
Wählt das Verlaufswerkzeug. Stellt als Verlauf "VG-Farbe nach Transparenz" ein und füllt die Auswahl von oben nach unten.
Zum Vergrößern klicken -
6
Deselektiert die Auswahl. Nehmt das Scale-Tool (Transformieren-Werkzeug) klickt die Ebene an und stellt als neue Breite etwa 175 und als Höhe 150 ein. Klickt OK.
Zum Vergrößern klicken -
7
Nehmt das Bewegen-Werkzeug und schiebt den weißen Schein nun nach oben in die Mitte der Kugel.
Zum Vergrößern klicken -
8
Geht auf Filter / Weichzeichnen / Gausscher Weichzeichner: Wert: 5.
Zum Vergrößern klicken -
9
Im Prinzip wars das schon, ihr könnt nun noch einen Buchstaben oder ein Symbol hineinstellen.
Ich habe das Textwerkzeug genommen und einfach ein "?" gemacht und den Ebenenmodus auf "Faser Extrahieren" gestellt. Man könnte das Icon nun zB für eine F.A.Q.-Sektion einer Website verwenden. Diese Ebene ist über allen anderen ganz oben! Meine Ebenen sehen derzeit so aus:
Zum Vergrößern klicken -
10
Das wars! Viel Spaß beim Nachbauen ;)
Zum Vergrößern klicken
Dieses Werk unterliegt folgender Lizenz: Namensnennung-Keine kommerzielle Nutzung 3.0 Österreich
Kommentare
Hier können Sie Ihre Kommentare, Frage und Anregungen loswerden. Der Autor und die anderen Benutzer können Ihren Beitrag sehen und darauf antworten. Natürlich können Sie auch im Chat fragen.
http://www.gimpusers.de/tutorials/glossy-orb-icon.html 1 Bewertung(en) mit durchschnittlich 5.0 von 5 Sternen.
Die Kommentare sind chronologisch geordnet.