Gimp 2 Button

TwiiXoRino

Ensign
Registriert
Sep. 2014
Beiträge
198
Hallo erstmal,

ich hoffe ich bin hier im richtigen Abteil gelandet.
Meine Frage ist, ob mir jemand helfen kann, wie ich bei Gimp 2 am besten einen eingedrückten Button erstelle:/
Den Button, der herraussteht habe ich schon gemacht, doch beim eingedrückten muss der Schatten ja links oben auf dem Button liegen, da komm ich nicht weiter...

Danke im Vorraus!

Mfg Jens
 
Wir wärs mit mehr Infos? Button ist ja nicht gleich Button ... versteh jetzt auch nicht ob du technische oder kreative Hilfe brauchst. Zeig doch mal deinen "nicht gedrückten" Button.
 
4.png
der Button wird noch weiter verarbeitet von Design, es kommt noch ein Symbol in die Mitte, aber mir geht es erstmal darum, wie ich es mache, dass der Button eingerdückt wirkt.
 
Es fehlt ein Hinweis darauf, wie denn der Button (wenn es ihn gäbe) in der Wirklichkeit aussehen würde.

Ist der Knopf so groß, das er

- auch gedrückt über die umgebende Fläche ragt

- gedrückt mit der umgebenden Fläche abschließt

- gedrückt unterhalb der umgebenden Fläche liegt

Soll der Schatten den du da fabriziert hast, den Schattenwurf des Knopfes auf die Umgebung darstellen oder soll es die Wölbung des Knopfes sein.

Beides sieht momentan miserabel aus.

Es fehlt die Umgebung (Spalt, Licht, Schatten) sowohl um den Knopf als auch auf dem Knopf.

Wie wäre es wenn du dir mal ein paar Ideen und Anregungen aus dem Netz besorgst (Google kann auch nach Bildern suchen)


Nachtrag: Und es ist einfach ein Unding einen unfertigen, häßlichen Entwurf abzuliefern und dann auf Hilfe zu warten. Mach den Knopf soweit fertig, das man auch was erkennen kann. Bis jetzt ist das nur schlecht.
 
Zuletzt bearbeitet:
Der Knopf soll genau so aussehen, nur dass in die Mitte noch ein Symbol kommt. Ich soll die Variante nicht gerdückt und gedrückt entwerfen und meinem Kollegen dann geben, welche Umgebung fehlt, wenn es in ein programm kommt?!
 
Der Knopf ist erhaben. Er wird beleuchtet (offensichtlich von links oben).

Also

Der Effekt das der Knopf 2 Zustände hat wird vom Betrachter dadurch wahrgenommen, daß sich der Schattenwurf und ein Glanzlicht verändern.
Mal ist der Schatten groß (Knopf ragt raus) mal klein (Knopf gedrückt). Schatten und Glanzlicht ergeben nur dann einen optischen Kontrast wenn die Umgebungsfarbe nicht rein weiss oder rein schwarz ist, da der Effekt dann ja aufgelöst wird.

Wenn der Knopf genau so aussehen soll wie er jetzt ist, dann würde er um dedrückten Zustand ebenfalls so aussehen wie jetzt.
Das kann wohl nicht dein Ziel sein.


Ich mach gleich mal ein Beispiel, damit du siehst was die Umgebung ausmacht.
Dauert ein paar Minuten.
 
Knopf_gedrückt.png

Die Umgebung ist ein Grauton. Es wird ein Verlauf von Hellgrau nach Grau gesetzt um den Licheinfall zu simulieren.
Auch die Oberfläche des Knopfes hat einen Farbverlauf. Nimmt man einen radialen statt linearem Verlauf dann simuliert man einen gewölbten Knopf.

Der Knopf wird versenkt dargestellt, worauf der Schattenwurf verschwindet.

Würde der Knopf noch tiefer gedrückt würde, dann müsste man einen Schatten auf die Innenkontur des Spaltes legen, da die Umgebung nun Schatten auf den Knopf wirft. Man kann den versenkten Knopf auch ohne Verlauf in reinem Grau darstellen um den Fokus noch von den anderen zu nehmen (der Knopf wirkt dann unscheinbarer und nicht so präsent).

Alles klar soweit ?


PS: Es macht optisch durchaus einen Unterschied, ob der Spalt breit oder schmal ist. Im obigen Beispiel ist er etwas zu breit aber ich wollte nicht 3 std daran rumwurschteln ;)

Viel Spass beim Nachbau
 
Zuletzt bearbeitet: (RS)
Wenn der Knopf aussehen soll als wäre er versenkt und auf einer Ebene mit dem virtuellen Panel, dann ja.

Das Problem bei deinem rein weissen Knopf ist ja, das er mit der Oberfläche verschmelzen würde. Du brauchst also eine Abgrenzung (wie hier der Spalt) um den optischen Eindruck nicht zu versauen. Alternativ kann man die Oberfläche des Knopfes farbig halten um ihn von der Umgebung weiterhin kenntlich zu machen.

Wie man das nun umsetzt ist Teil der künstlerischen Freiheit :)
 
Hast du einfach noch einen etwas größeren Kreis drum gemacht als Spalte?
Ergänzung ()

Auf die Oberfläche meines Knopfes kommt noch ein Smybol, kann man dir per E-Mail schreiben?
Ergänzung ()

Bzw. wie hast du denn den Spalt erstellt? sorry dass ich so viel Frage, aber dafür ist ein Forum ja da und jeder fängt mal klein an...
 
Falls du skalierbare Grafiken für das Web erstellen willst, dann empfehle ich dir Inkscape (falls es kostenlos sein soll) oder ein professionelleres Programm für Web-Design oder Vektorgrafiken. Manche davon gibt es als günstige Studentenversion.

Du wirst mit GiMP sehr schnell an die Grenzen stoßen.

Der Spalt hat aussen einen größeren Kreis in der Farbe der Umgebung, deren Verlauf nach innen dunkelgrau wird um die Tiefe des Spaltes zu erzeugen. (unterste Ebene)
Der Schatten besteht aus einen "schrägen zylinder" mit den Radien des Knopfes. Sein Farbverlauf ist Dunkelgrau -> Umgebung. (Er liegt auf der mittleren von 3 Ebenen.)
Auch der Knopf selbst besteht aus 2 Kreisen. Der Fläche (mit linearem Verlauf) und einem Rand, der wie beim Spalt mit einem radialen Farbverlauf, die Kante bildet. (oberste Ebene)
Ergänzung ()

Für Webgrafiken wie deine Buttons empfehle ich dir Macromedia Fireworks MX. Das Programm ist zwar alt aber dafür kostenlos und um Welten besser dafür geeignet als GiMP.

Hier der link zum Programm: http://download.macromedia.com/pub/fireworks/esd/fwmx_2004_en.exe

Adobe hat die Seriennummer gratis geschaltet: http://helpx.adobe.com/x-productkb/policy-pricing/macromedia-legacy-activation-error.html
Ergänzung ()

Fireworks hat auch ein Tutorial. Es lohnt sich die Schritte dort (auch wenn sie nix mit deinem Button zu tun haben) nachzumachen.
Der Funktionsumfang verleitet dazu wie auf einer Spielwiese alles auszuprobieren.
Die Oberfläche ist wie bei Photoshop mit Werkzeugleiste, Arbeitsfläche und Navigator.
Es gibt sehr viele Werkzeuge, die dir helfen, deine Knöpfe web-tauglich zu machen und zu exportieren. Die Vorschau erlaubt dir, deine Werke zu testen bevor du sie weitergibst.
 
Plaste schrieb:
Falls du skalierbare Grafiken für das Web erstellen willst, dann empfehle ich dir Inkscape (falls es kostenlos sein soll) oder ein professionelleres Programm für Web-Design oder Vektorgrafiken.
Wenn man n Button mit 3D-Effekt für Webseiten erstellen will, dann nimmt man gar keine Grafik, sondern arbeitet mit purem CSS3. Spart Ladezeit & ist viel flexibler.
 
Daaron schrieb:
Wenn man n Button mit 3D-Effekt für Webseiten erstellen will, dann nimmt man gar keine Grafik, sondern arbeitet mit purem CSS3. Spart Ladezeit & ist viel flexibler.


Er soll die Grafiken seinem Kumpel erstellen, er soll keine CSS skripte erstellen.
Du brauchst mich auch nicht falsch zu zitieren nur weil dir CSS in den Sinn kam.
Außerdem solltest du dann auch ein Bespiel anbringen, denn GiMP wird hier auch nix nützen.
Ich würde deine CSS-Grafik gerne mal sehen !! Bitte was aufwendiges und nicht "einen schwebenden Kasten" hinrotzen.
 
Willst du jetzt die ganze Litanei aus border-radius und box-shadow haben, evtl. noch kombiniert mit ner border? Dazu noch ein paar Gradienten, den Rest löst :hover. Wenn man jetzt noch etwas Glück hat, kann man den Kram über Transitions auch noch flüssig animieren. Man könnte natürlich auch noch sein Glück mit 3D-Transformationen versuchen, aber das dürfte wenig bringen.
 
Ich wollte keine Litanei hören, sondern ein Beispiel von dir sehen.

Aber mehr als heisse Luft kam bisher nicht.

Und "mit Glück 3D-Transformation" vorzuschlagen, die deiner Meinung nach nix bringt, ist einfach lächerlich.

Bist du hier zum helfen oder nur um Schaum zu schlagen ?

Der TE wollte etwas zum Thema "Knopf erstellen mit GiMP".

Wie wäre es also zur Abwechslung mit etwas mehr Bezug zum Thema ?

Derjenige der die Seite erstellt wäre wohl der richtige Addressat wenn es um CSS geht. Vielleicht kann der TE deine Vorschläge an denjenigen weiterleiten. Aber gib ihnen was brauchbares mit.
 
Für Bildbearbeitungsprogramme gab es jetzt schon mehr als genug Lösungsansätze. Es ist halt immer etwas Handarbeit von Nöten, um einen realistischen Schattenwurf hin zu bekommen. Hilfreich ist es, wenn man tatsächlich ein ähnliches Objekt als reale Vorlage hat oder zumindest eine nette Bleistift-Skizze zeichnet, die den gewünschten Effekt verdeutlicht.
Die Zauberworte heißen Radialverlauf und Ebenenmaske. Damit kriegt man auch bei runden Objekten einen durchaus akzeptablen Schattenwurf hin.

Aber für dich noch mal etwas präziser:
Über Border Radius lässt sich, wenn man selbigen auf 50% setzt, ein runder Knopf erzeugen, vorausgesetzt der Knopf ist hoch wie breit. Box Shadows pappen sich an selbigen Radius an, wodurch von Haus aus ein netter Schlagschatten um das Objekt entsteht. Dasselbe gilt für Border oder Outline. Über die Mehrfachnotation von Box Shadows kann man z.B. gleichzeitig einen äußeren Schlagschatten unten rechts und ein inneres Highlight (also: ein weißer halbtransparenter "Schatten") oben links erzeugen.

Und was 3D-Transformationen angeht: Damit ließe sich durchaus ein netter perspektivischer Effekt erzielen, den reine 2D-Grafik so nicht erreicht. Es wird nur sehr schwer, dann einen vernünftigen Schattenwurf hin zu bekommen. Andererseits: Wenn der Knopf selbst schon ein perspektivisches 3D-Objekt ist, ist die Sache mit den Schatten ziemlich nebensächlich. Selbige sollen ja vor allem Räumlichkeit simulieren, wo keine ist.
 
Zurück
Oben