[Kritik] Mein erster Header-Button mit Inkscape

[Hellman]

Hallo Leute!

Da ich in Punkto Grafikerstellung nicht sonderlich bewandert bin, und nun doch einfach mal angefangen habe, wollte ich gerne einige konstruktive Kritiken einsammeln, die mein Können verbessern sollten - im Besten Fall eben.
Daher bitte ich eindringlich darum: Keine Kommentare a là "Was soll'n der Mist darstellen?", oder "Du Noob kannst nix - vergiss es!" zu posten!

Kritik ist erwünscht. Auch wenn's weh tut.
Aber dafür lernt man auch besser, was falsch gemacht wird
und dringend verbessert werden sollte.
Und hier ist er nun, mein erster Headergrafik-Button, den ich mit Inkscape erstellt habe:



Verzeiht mir den Spruch - mir fiel nix besseres ein.
Und hier nochmal ohne Spruch:

Hier sieht man auch ganz deutlich, dass da etwas nicht stimmen kann.

 

[acid]

Kritik ist erwünscht. Auch wenn's weh tut.

Mit Vergnügen.

Drei Dinge, die mir direkt unangenehm ins Auge sprangen:

A) Der Schwabbelfont
Der is eigentlich nicht zu retten. Nimm einfach nen anderen, schönen und versuch dich für einen Font zu entscheiden.

B) Das Farbschema
Passt eigentlich so nicht zusammen. Sowohl das "Gold" als auch das Blau des Fonts wirken fehl am Platz. Darüber hinaus finde ich persönlich Blautöne in der unmittelbaren Nähe von #0000FF ganz grausam. Darüber lässt sich aber sicherlich streiten.
Wenn du Schwierigkeiten bei der Auswahl hast, es gibt ne Menge Farbschemas im Netz. z.B. https://www.colorschemer.com/schemes/

C) Die blassen Stellen in "Klamm auf Ex".

So hast du insgesamt auch zu viele Spielereien auf zu kleinem Raum. Zwei Schriftarten, drei völlig unterschiedliche Farben, Glanzeffekte und alles ohne Zusammenhang. Weniger ist manchmal mehr.

Auf den zweiten Blick:
Der leere Button ist schon ganz okay. Imo sind die Konturen etwas zu weich.
Wirkt beim Betrachten als bräuchte ich ne Brille. Könnte sich relativieren, wenn du ihn etwas kleiner machst. Für nen "Button" ist er ziemlich riesig.
Der Glanzeffekt verschmilzt rechts oben beinahe mit dem Hintergrund. Könnte dort auch etwas mehr Kontrast vertragen.

 

[Hellman]

Mit Vergnügen.

Du Sadist.

Wenn du Schwierigkeiten bei der Auswahl hast, es gibt ne Menge Farbschemas im Netz. z.B. https://www.colorschemer.com/schemes/

Danke für den Link.

So hast du insgesamt auch zu viele Spielereien auf zu kleinem Raum. Zwei Schriftarten, drei völlig unterschiedliche Farben, Glanzeffekte und alles ohne Zusammenhang. Weniger ist manchmal mehr.

Darum ging es im Grunde auch.
Ich wollte eigentlich nur heraus finden, wie manch anderer diese Glanzeffekte hinbekommt, dass es so aussieht, als würde es eine helle Lichtquelle anstrahlen.

Für nen "Button" ist er ziemlich riesig.
Der Glanzeffekt verschmilzt rechts oben beinahe mit dem Hintergrund. Könnte dort auch etwas mehr Kontrast vertragen.

Jaaa, schon o.k. Ist ja im Grunde kein Button - höchstens ein "Monster"-Button.
Ich schätze mal, dass es so jetzt besser aussieht?...



Eine Frage: Wie würdest Du den oberen Glanzeffekt angehen?
Hast du denn Inkscape oder vielleicht Paint Shop Pro 10?
O.k., das waren jetzt zwei Fragen.

Danke für die Hilfe!

 

[acid]

Ich wollte eigentlich nur heraus finden, wie manch anderer diese Glanzeffekte hinbekommt, dass es so aussieht, als würde es eine helle Lichtquelle anstrahlen.

Dann musst du dir erstmal überlegen welche dreidimensionale Form dein Objekt hat / suggerieren soll, aus welcher Richtung das Licht kommt und wie es sich verhält.
Hab ma fix ne Szene aufgesetzt um es dir zu veranschaulichen. Zum vergrößern draufklicken.


Die Lichtquelle steht genau mittig über dem Rechteck und strahlt leicht von vorne (10°) auf die Objekte.
Das Rechteck ist leicht gewölbt (siehe 2. Bild).
Nun lassen sich zwei Dinge feststellen.
1. Der Farbverlauf beim Rechteck ist waagerecht. Bei deinem Button ist die Beleuchtung rund, was physikalisch wiedersprüchlich ist.
2. Im Vergleich zum Zylinder links außen: Umso stärker die Wölbung, desto härter der Übergang zwischen Schatten und Licht.

Betrachtet man rechts die Kugel und rechts außen die flachere "Dublone" kann man sehen:
1. Bei der Kugel ist das Highlight nahezu rund und mitten auf der "Stirn" platziert. Bei der "Dublone" dagegen zieht sich das weiße Highlight über die Kante.
2. Durch die flachere Wölbung ist die Schattenfläche kleiner und sitzt tiefer als bei der Kugel.
3. Durch den größeren Winkel zur Lichtquelle wandert der Schatten/das Highlight gegen den Uhrzeigersinn um den Mittelpunkt, je weiter man die Dublone nach rechts (von der Lichtquelle weg) verschieben würde.

Abschließend noch mit einer überwiegend frontalen Lichtquelle (wie sie im 2D-Bereich eher üblich wäre). Ich überlasse es diesmal dir die Unterschiede und Charakteristika rauszufinden.

Ich schätze mal, dass es so jetzt besser aussieht?...

Naja, Farbschema passt immernoch nicht und es wirkt immernoch verschwommen.

Eine Frage: Wie würdest Du den oberen Glanzeffekt angehen?

Physikalisch plausibel.

Hast du denn Inkscape oder vielleicht Paint Shop Pro 10?

Hab Inkscape, aber benutze es nur um Shapes nach Blender zu exportieren.

 

[Hellman]

Wow!!!
Da hat sich aber jemand richtig Mühe gegeben!
Vielen Dank auch für die ausführlichen Erleuterungen, wie sich das Licht auf den Oberflächen verhält. Allerdings hatte ich gehofft, dass du es weniger "physikalisch" angehst und mir einfach anhand von Beispiel-Screenshots zeigst, wie ich zum Beispiel sowas hinbekomme (ohne Text):

Dieser Glanz-Übergang sieht, meines Erachtens nach, doch sehr professionell aus! Und ich wollte lediglich wissen, wie man das mit Inkscape hinbekommt.

 

[acid]

Dieser Glanz-Übergang sieht, meines Erachtens nach, doch sehr professionell aus! Und ich wollte lediglich wissen, wie man das mit Inkscape hinbekommt.

Bin mit Inkscape wie gesagt nicht so bewandert.
Üblicherweise ist es aber immer die selbe Vorgehensweise.
1. Erstelle eine Form (Rechteck, Kreis etc.)
2. Lege einen Farbverlauf drüber.
2.b (optional) einen Schatten hinzufügen (z.B. durch ne äußere Form, Kontur mit Farbverlauf)
3. Erstelle einen Shape für die Highlights und leg sie übereinander.

Wann du welchen Farbverlauf und welche Form für die Highlights benutzt, damit es gut aussieht musst du wohl oder übel anhand deines geplanten Buttons selbst überlegen. Da kannst du dich aber wie gesagt an der Realität orientieren.

 

[Hellman]

3. Erstelle einen Shape für die Highlights und leg sie übereinander.

Was ist denn bitte ein Shape?
Sorry wegen der blöden Frage - bin halt ein Noob.

Ansonsten: Herzlichsten Dank für deine vielen Infos und die Zeit, die ich dir gestohlen habe.

 

[acid]

Was ist denn bitte ein Shape?

Die Umrisse einer Form, eines Objekts.
z.B. sowas

 

[Hellman]

Achsoooo ... Ich hab das immer "Kontur" genannt!
Danke!!

Hab jetzt mal was neues versucht, mit den Infos, die du mir gegeben hast:
Bitte nicht auf die grottenschlechte Speicher-Qualität achten

 

[Spoon]

So hast du insgesamt auch zu viele Spielereien auf zu kleinem Raum. Zwei Schriftarten, drei völlig unterschiedliche Farben, Glanzeffekte und alles ohne Zusammenhang. Weniger ist manchmal mehr.

Nimm dir das zu Herzen!

Hier hast du auch wieder viel zu viele Schriftarten, Farbe, Effekte.

Nebenbei würde ich (gerade bei einem Button) die Schrift zentrieren. Und ein bischen benutzerfreundlicher gestalten. Sprich: einfacher Font, nicht zu dunkle Farben, einfach zu lesen.

Nebenbei sehen runde Buttons in einem Design, in der Regel, eher minder professionell aus (nicht abgerundete - runde!)

//Ich habe mal veruscht anhand deiner Farb-/Formwahl es zu verdeutlichen, was ich meine.

MfG

 

[acid]

Hab jetzt mal was neues versucht, mit den Infos, die du mir gegeben hast:

Hmm, am besten suchst du mal nach konkreten Tutorials. Wenn du des Englischen mächtig bist, gibt es da ausreichend viele im Netz.
Als Video-Tutorials auf Englisch erscheint mir https://screencasters.heathenx.org/ auf den ersten Blick von geradezu überragender Qualität zu sein.

 

[Hellman]

Nimm dir das zu Herzen!

Mach ich doooch, mach ich doch!

Nebenbei sehen runde Buttons in einem Design, in der Regel, eher minder professionell aus (nicht abgerundete - runde!)

O.kay. Danke für den Tipp!
Werde ich mir merken.

//Ich habe mal veruscht anhand deiner Farb-/Formwahl es zu verdeutlichen, was ich meine.

Wow!!!
Das sieht ja mal richtig gut aus!
Bis dahin möchte ich auch mal irgendwann kommen!

Wenn du des Englischen mächtig bist, gibt es da ausreichend viele im Netz.
Als Video-Tutorials auf Englisch erscheint mir https://screencasters.heathenx.org/ auf den ersten Blick von geradezu überragender Qualität zu sein.

Nicht wirklich, aber egal. Um Video-Tutorials zu verfolgen, braucht man das nicht zwingend. Daher: Ganz, ganz lieben Dank für diesen Geilen Link!!!
Nach genau solchen Tut's habe ich gesucht. Nur bin ich am ende immer bei Youtube gelandet.