Vektorisieren

Martinus33 · 24. Oktober 2014

Hallo,
Ich bräuchte für meine Website einen ansprechenden fünfzackigen, konturierten, goldenen Stern mit transparentem Hintergrund. Das Problem: Der Stern hat nur Deko-Zwecke, z.B. als Trenner und musss recht klein sein, zwischen 15 und 30px hoch.
Nach dem Verkleinern sieht auch der tollste Stern nach nichts mehr aus. Zum Teil weil selbst mit Nachschärfen die Kanten nicht sauber scharf bleiben (es braucht wohl Vektorgrafiken) und zum Teil, weil "Gold" nicht so ganz einfach herzustellen ist. Zum Teil ist es schlicht normal, weil bei solchen Größen das Auge vieles anders bzw. gar nicht mehr wahrnimmt.

Anbei ein bereits goldener Stern mit transparentem Hintergrund, der nach der Vektorisierung und verlustfreien Verkleinerung auf 15, 20 und 25px schon ganz ordentlich aussehen könnte, aber ich habe noch nie mit Inkscape gearbeitet, wo man vektorisieren kann. Da gibt es viele Optionen... und ich sehe in der Vorschau nichts... Kann mir jemand die richtigen Optionen/Einstellungen für diese Grafik nennen?

Vielleicht lasse ich es auch gegen Bezahlung machen. Wer mit solchen Sachen fit ist, braucht wohl nicht allzulange (wer mag, einfach melden).

Marius · 24. Oktober 2014

Winword --> Cliparts --> Stern --> nimm den Goldenen

tnoay · 24. Oktober 2014

http://www.autotracer.org/getfile.php?file=24198645-goldgut-transp-interlacing-ko2-glanzendes.svg

DjNDB · 24. Oktober 2014

Vektorisieren gibt nicht immer gute Ergebnisse, besonders bei Farbverläufen.

Einen relativ ähnlichen Stern gibt es hier schon ab 2$. Müsstest aber auf die Lizenzen schauen.

Ansonsten gibt es hier noch einen strukturell relativ ähnlichen. Da müsste man nur die Gradienten für die einzelnen Elemente erstellen, was nicht lange dauern sollte.

Martinus33 · 24. Oktober 2014

Vektorisieren gibt nicht immer gute Ergebnisse, besonders bei Farbverläufen.

Dann sind die etwas abgehackten Helligkeitsunterschiede beim Beispiel von tnoay kein Zufall, sondern genau das, was du meinst?

@Marius:
Word habe ich nicht, aber die üblichen Cliparts sehen meist nicht wirklich gut aus, spätestens nach dem Verkleinern. Ich habe schon ziemlich viel gesucht, aber irgendwas hat nie gepasst. Vom Goldeffekt war die gepostete Grafik wirklich die bislang beste.

DjNDB · 24. Oktober 2014

Ich hab da mal ein bisschen herumprobiert das nachzubauen anhand des SVG oben. Das hatte ein paar kleine Macken, die ich nur teilweise korrigieren konnte. Ich bin aber auch kein Grafiker

Den Rand habe ich erstmal weggelassen.
Hier ist das SVG und 2 exporte mit 15 und 30 Pixel Höhe als Vorschau.
Anhang anzeigen star.zip

Daaron · 25. Oktober 2014

Martinus33 schrieb:
Nach dem Verkleinern sieht auch der tollste Stern nach nichts mehr aus. Zum Teil weil selbst mit Nachschärfen die Kanten nicht sauber scharf bleiben (es braucht wohl Vektorgrafiken)

Daran wird auch eine Vektorgrafik nichts ändern. Egal ob du eine PNG in nativen 15px hast, ob du eine PNG von 150px auf 15px vom Browser runter skalieren lässt oder ob du eine Vektorgrafik 15px groß darstellen lässt: die tatsächlichen Unterschiede sind marginal. Es ist am Ende immer derselbe Browser, der mit Hilfe derselben Bibliotheken das Bild auf den selben Monitor bringt.

Martinus33 · 25. Oktober 2014

Ich hab da mal ein bisschen herumprobiert das nachzubauen anhand des SVG oben.

Der von Clipart-box oder der etwas dünnere von clipart-best?

Mit 30px finde ich den schon ganz gut, danke für deine Mühe. Im Vergleich zum geposteten png wirkt er etwas matter, d.h., die Kontraste zwischen hellen und dunklen Stellen sind schwächer, aber viel besser als die üblichen Cliparts.

Je kleiner, desto schwieriger wird es vermutlich, noch erkennbare "Effekte" bzw. Gold (hell/dunkel, Glanz, 3-D hinzubekommen). Da gibt es Grenzen bzw. ist vielleicht "weniger mehr". Als SVG kann es zwar nicht so sein, aber der kleine Stern mit 15px "wirkt" unschärfer. Das wird vermutlich an den Rändern liegen, also wenn du noch ein wenig Lust hast...

Midnight Sun · 25. Oktober 2014

Das sieht mir sehr nach einem JPG aus, wie und/oder womit hast du die Größe geändert bzw. die Grafik bearbeitet und dann wie abgespeichert?

DjNDB · 25. Oktober 2014

Ich habe mich nochmal dran gesetzt und ihn noch ein ganzes Stück originalgetreuer gemacht. Die Farben sind echt schwierig, aber sie sind nun näher dran.
Allerdings muss ich sagen, dass man bei den kleinen Versionen nur wenig Vorteile bemerkt, wie Daaron es schon vorhergesehen hat.
Für mich war es vor allem ein kleines Übungsprojekt, insofern war es keine verschwendete Zeit.

Anhang anzeigen star4.zip

Martinus33 · 26. Oktober 2014

Ja, der große ist deutlich heller, der kleine etwas. Der erste Versuch war etwas mehr in Richtung Bronze, jetzt ist es "goldiger". Manchmal hilft es in solchen Fällen, Helligkeit und Kontrast hochzudrehen. Bei anderen Gelegenheiten habe ich das manchmal gemerkt.

Wobei das wahrsch. auch jeder anders sieht, entspr. seinem Monitor.

Je kleiner etwas wird, desto schärfer, kontrastreicher, detailloser und mit einfachen, klaren Strukturen versehen muss es sein. Ich habe die letzten Tage viele echt tolle Grafiken gefunden, z.B. ein schöner Stern mit einem Feuersaum am Rand. Kaum ist das Ding klein, erkennst du erstens kein Feuer mehr und noch schlimmer, erscheinen zweitens jetzt die Ränder rundlich-unscharf...

Mit 15, 20, 25 und 30 px habe ich etwas Auswahl und dann kann kann ich abhängig vom Platz, Hintergrund und allem anderen vielleicht mehr zu den größeren greifen.

Das Vektorisieren, also png --> svg, kommt nicht so gut bei Farbverläufen, wie wir gesehen haben, aber wenn eine Grafik mal vektorisiert ist, sollte ein Verkleinern keine Verluste mehr bringen, oder?

Hab dir eine PN geschickt.

DjNDB · 26. Oktober 2014

Martinus33 schrieb:
Das Vektorisieren, also png --> svg, kommt nicht so gut bei Farbverläufen, wie wir gesehen haben, aber wenn eine Grafik mal vektorisiert ist, sollte ein Verkleinern keine Verluste mehr bringen, oder?

Wenn es eine Vektorgrafik ist, dann hängt es noch vom Display ab. Je höher dessen Pixeldichte, um so besser sieht sie bei gleicher Darstellungsgröße aus.
Leider tut sich da bei PC Monitoren für Normalanwender nicht viel. Lange waren lausige ~100ppi normal, nun geht es langsam wenigstens in Richtung ~200ppi. Dagegen gibt es im Mobilbereich schon Displays mit >500ppi.
11520x6480 auf 24" (550PPI) wären sicher toll, aber bislang gibt es ja nicht mal einen Verbindungsstandard der das bei 60Hz schafft.

Ich habe den Stern gerade mal testweise in Größen von 2mm bis 12mm ausgedruckt (mit angeblich bis zu 9600x600dpi), und ab 3 mm sehen die alle scharf aus. Der 15 pixel hohe Stern im Anhang oben ist übrigens bei mir auf dem Bildschirm 4mm groß, zum Vergleich.

Du könntest die Grafik auch direkt als SVG in deine Webseite einbinden, dann sieht jeder das für sein Anzeigegerät beste.
Dabei müsstest du eventuell berücksichtigen, dass einige ältere Systeme es nicht darstellen können, und dafür eine Fallback Lösung einbauen.

Ergänzung (26. Oktober 2014)

Hier noch mal Varianten mit zunehmend dickerem Rand. Das erhöht zumindest den Kontrast für die Kontur.

Anhang anzeigen star4_thick.zip

MaverickM · 27. Oktober 2014

Das hier ist schon wieder die gleiche Diskussion wie im anderen Thread des TE...

Mal abgesehen davon, dass die Grafik oben veraltet/kitschig daher kommt... Es wäre so viel einfacher, das ganze einfach als Iconfont einzubinden. Damit umgeht man sämtliche Probleme.

Martinus33 · 27. Oktober 2014

Das hier ist schon wieder die gleiche Diskussion wie im anderen Thread des TE...

Hier geht es darum, wie eine Bitmap-Grafik vektorisiert oder anderweitig in kleinen Maßen noch gut aussehen kann. Das ist die logische Folge davon, dass ich bei dem anderen Thread über Darstellung von Sonderzeichen zu dem Ergebnis gekommen bin, keinen Icon Font zu verwenden, aber auch kein Stern-HTML-Entity, das bei vielen Mobil-Geräten nicht angezeigt wird.
Wenn so etwas das Gleiche für dich ist und du das jedes Mal mitteilen willst, dann viel Spaß in Zukunft...

Mal abgesehen davon, dass die Grafik oben veraltet/kitschig daher kommt...

Du hast Recht, ich habe einen großen Fehler gemacht. Ich kenne meine User seit über 20 Jahren und habe eigene Vorstellungen bzw. einen eigenen Geschmack, aber ich hätte stattdessen alleine nach deinem Geschmack gehen sollen...

Midnight Sun · 27. Oktober 2014

Ich würde wohl auch eher zu den Icon Fonts greifen, aber warum nicht einfach da so eine Grafik einbinden!? Manche Dinge muss man echt nicht verstehen.

Mach das einfach, nutze sie, auch wenn du das verpixelte nicht ganz weg bekommst.

Midnight Sun · 28. Oktober 2014

Für den Fall das du es dennoch mal mit den IconFonts probieren möchtest: http://www.iconarchive.com/search?q=star

...mehr!

Martinus33 · 29. Oktober 2014

Ich habe mich jetzt für den größten Stern in 30px entschieden. Der sieht gut aus und weil er so viel Luft links und rechts lässt, hat sich auch die Sache mit dem Abstand nach oben/unten erledigt. Das heißt, es wirkt optisch insgesamt, rundherum, nicht zu eng, Stichwort Weißraum.

Ich behalte Icon Fonts im Hinterkopf, aber solange ich nur zwei oder drei solche Grafiken brauche... und dann wahrscheinlich trotz der CSS-Styling-Möglichkeiten nicht zufrieden wäre... aber danke trotzdem.

Midnight Sun · 29. Oktober 2014

Ich finde das schaut auch eigentlich ganz gut aus und der Rest ist ja auch wichtig.

MaverickM · 29. Oktober 2014

Martinus33 schrieb:
Der sieht gut aus und weil er so viel Luft links und rechts lässt, hat sich auch die Sache mit dem Abstand nach oben/unten erledigt.

Von so etwas wie margin und padding hast Du aber schonmal gehört!?

Midnight Sun · 29. Oktober 2014

Nicht ärgern, er möchte das doch so haben und die anderen Möglichkeiten wurden ihm bereits gesagt.

Vektorisieren

Lt. Commander

Admiral

Banned

Lt. Commander

Lt. Commander

Lt. Commander

Fleet Admiral

Lt. Commander

Commander

Lt. Commander

Lt. Commander

Lt. Commander

20k Fleet Admiral

Lt. Commander

Commander

Commander

Lt. Commander

Commander

20k Fleet Admiral

Commander