Umstieg von Pixelgrafik auf SVG

[Midnight Sun]

Vorweg sein gesagt, dass ich kein gutes Händchen für Grafiken habe!
(persönliche Einschätzung)
Aber erstellt werden müssen sie, so oder so!

Ich möchte dennoch damit anfangen (endlich), SVG-Grafiken zu verwenden und brauche da generell wohl mal die ein- oder andere Hilfe(stellung).

Ich verwende überwiegend Photoshop in der CS4 Version und mit dem Illustrator konnte ich mich bisher nicht wirklich gut anfreunden.
Gesucht wird daher eine sehr einfache und unkomplizierte Möglichkeiten diese Grafiken zu erstellen.

Neben dem Illustrator ebenfalls CS4, habe ich noch Gimp und Inkscape hier.
Ich würde aber gerne auf etwas, wenn möglich, einfacheres zurück greifen.


Was würdet ihr mir empfehlen?

 

[cruse]

ich würd illu oder psp nehmen

inkscape hab ich nie getestet.

in jedes programm musst du dich allerdings etwas einarbeiten....sollte klar sein.

 

[chrigu]

befreunde dich mit illustrator, ist ein mächtiges tool, muss aber zuerst erlernt werden. ist aber ähnlich wie photoshop nur eben nicht pixelorientiert sonder vektorbasiert.

 

[Midnight Sun]

Alles klar, dann werde ich es erneut mit dem Illustrator aufnehmen!

 

[Daaron]

Inkscape ist die ultimative Referenz, wenn es um SVG geht, schon allein deshalb, weil Illustrator allerhand proprietären Quatsch anbietet, den Browser (und die sollen die SVG ja am Ende darstellen) nicht oder nicht korrekt darstellen können. Inkscape hingegen erzeugt 100% saubere SVGs, die direkt im Browser verwendet werden können.... oh, und es ist quelloffen und kein Produkt eines Ausbeuterkonzerns, der mit Kundendaten Schindluder treibt.

Aber die Frage muss sein: WARUM willst du auf Vektorgrafiken umsteigen? Was für Grafiken willst du erzeugen? Was ist dein Masterplan dahinter?

 

[Midnight Sun]

Ich brauche eine paar gut, besser aussehende skalierbare Grafiken für Responsive Webdesign Templates.

Es geht dabei überwiegend um Logos, Banner oder z.B. ein PageTitel Bild für Facebook Seite.
Da sehen Vektor-Grafiken einfach besser aus.

Inkspace kann ich ausprobieren, habe damit aber bisher noch nicht wirklich was gemacht.

 

[Daaron]

Na ja, Banner oder sowas wie n FB-Titelbild wirst du kaum als SVG erstellen können. Ich würde z.B. nicht darauf setzen, dass du bei FB überhaupt ne SVG hochladen darfst. Und andererseits schränken dich SVGs in deinen gestalterischen Möglichkeiten stark ein. Schon dein Profilbild lässt sich als SVG kaum erstellen.

Bei Icons geh ich mit, wobei ich da lieber auf FontAwesome (und ähnliches) setze. Auch bei nem Firmenlogo geh ich mit, vorausgesetzt es ist nicht zu komplex. Bringt nix, wenn am Ende jedes Pixel ein eigener Vektor ist.

 

[John Reese]

Da sehen Vektor-Grafiken einfach besser aus.

Inwiefern sehen SVGs da "einfach besser" aus?

Der einzige Vorteil besteht wohl in der freien Skalierbarkeit?!

 

[Daaron]

Genau deshalb sehen sie ja auch besser aus. Gerade so n Kram wie das Firmenlogo und natürlich Icons (Social Links, Scrollpfeile,...) skalieren recht oft.

 

[Midnight Sun]

Ich bin im Moment noch etwas gehandicapt, daher kann ich nicht sehr viel schreiben.

Das bzgl. dem FB-Banner war nur ein Beispiel, da es doch mehr um die LOGOs bzw. Angebots-Banner auf einer Webseite geht.

 

[Daaron]

Auch Angebotsbanner auf Webseiten sind sehr selten Vektorgrafiken. Wenn ich da an unsere eigenen Shops denke, wir haben nicht selten Kollagen aus verschiedenen günstig in Szene gesetzten Produktfotos. Das ist definitiv eine Aufgabe für JPG.
Ich mach den Scheiß lange genug um dir sagen zu können: Am Ende bleiben MAXIMAL Firmenlogos und Iconsets. Die Firmenlogos kann man aber auch als Highres-JPG (doppelte Auflösung) hinterlegen und erreicht somit trotzdem eine ausreichend hohe Bildschärfe auf Retina-Displays. Iconsets holt man sich wahlweise aus Icon-Fonts wie Fontawesome, oder man verwendet eine CSS-Sprite. Bei SVGs musst immer noch einen Fallback schreiben, vorausgesetzt dein Projekt soll auf dem IE8 (5-10% Marktanteil, in manchen Branchen viel mehr) nicht einen Haufen leerer Stellen haben. Das ist die Mühe selten wert.

SVG einzusetzen, bloß weil man mal irgendwo gehört hat, dass das toll sein soll... Bin ich der einzige, der da an MongoDB denken muss? Das muss man auch überall verwenden, "'cause it is webscale!"

 

[Midnight Sun]

Ich komme mehr oder weniger gerade erst wieder aus dem KKH, bin demnach immer noch etwas gehandicapt, da ich nur mit einer Hand schreiben und nicht lange am Tisch sitzen kann...

"irgendwo gehört", nein das nicht...

IE8 bei Kundenwebseiten schon, bei meiner eigenen fällt das weg bzw. wird nicht mehr berücksichtigt.

Wenn ich wieder mehr schreiben kann, schreibe ich noch etwas dazu,

 

[Midnight Sun]

Heute mal ohne Schiene am Arm, am Arbeitsplatz

Ich bin dabei meine Webseite nur zu erstellen und da mir die Krativität etwa ausgegengen ist würde ich mich gerne um das Thema SVG kümmern.
Aktuell gibt nur es mein Logo was ich gerne als .svg umgesetzt hätte und ggf. bei zwei anderen Seiten, dort einen Banner.

Das mit der doppelten Größe bei Ratina hatte ich schon geselsen und werde ich daher auch berücksichtigen.
Der IE selbt, werde ich bei meiner Seite nicht extra unterstützen und/oder den ganzen Spaß generell auf Bootstrap aufbauen, so ganz ist das noch nicht klar.

Ich habe in den vergangenen Monaten auch echt wenig in der Richung gemacht und muss erst einmal gucken, in welche Richtung die Reise gehen soll.

Bisher bin ich mit Pixelgrafiken u.a. auch bei Logo sehr gut klar gekommen, aber eine Vector-Grafik sieht da schon einfach schöner aus und
zudem muss ich diese dann nur einmal erstellen und/oder sie muss dann nicht zwingend in welcheren Größen vorliegen.

 

[Gallo2000]

Je nach Logo kann auch PNG eine gute Wahl sein.
Um die Größe zu minimieren benutze ich das Programm "FileOptimizer". Das verkleinert verlustlos* alle gängigen Bildformate, also hauptsächlich für jpg und png zu gebrauchen.

Da FileOptimizer so gut wie alle Tools benutzt die es gibt um PNGs zu verkleinern, werden die PNGs dadurch auch kleiner als mit jedem anderen Programm was ich bisher getestet habe.
Das Computerbase Logo oben links wird damit z.B. 6% kleiner.


Je nach Bild kann man mit Irfanview auch die Anzahl der Farben reduzieren. Dann lässt sich die Größe des Bildes (PNG) natürlich noch weiter verringern.




*Das ImageMagick-Plugin habe ich als deaktiviert, weil jpg damit in Irfanview am Ende mehr/weniger gezählte Farben hat als das Original und ich nicht weiß ob das wirklich verlustlos ist. Dafür muss man das Plugin im Pluginordner einfach Löschen/Umbenennen. Aber auch ohne dieses Plugin werden jpg noch verkleinert.
PDF kann es zum Teil auch stark verkleinern, aber da sehe ich Teilweise deutliche Unterschiede zum Original...

 

[Donnerkind]

Ich mach den Scheiß lange genug um dir sagen zu können: Am Ende bleiben MAXIMAL Firmenlogos und Iconsets. Die Firmenlogos kann man aber auch als Highres-JPG (doppelte Auflösung) hinterlegen und erreicht somit trotzdem eine ausreichend hohe Bildschärfe auf Retina-Displays.

Nur der Vollständigkeit halber: Logos auf jedsten als PNG speichern und nicht als JPG, weil letzteres Artefakte produziert. Gerade bei Logos, die aus farbigen Flächen bestehen (also nicht so komplex wie Fotos sind), kann PNG seine Stärken ausspielen: Alphakanal, verlustlose Kompression und gute Kompression farbiger Flächen.

Es ist natürlich trotzdem möglich, Banner zunächst als Vektorgrafik zu erstellen (gut für Farbverläufe, weiche Linienführung u.s.w.). Hinterher wird dann eben nach PNG exportiert. Das hat den Vorteil, daß man später viel leichter größere Versionen herstellen kann.

 

[Daaron]

Ich bin dabei meine Webseite nur zu erstellen und da mir die Krativität etwa ausgegengen ist würde ich mich gerne um das Thema SVG kümmern.

Was soll dir SVG bei Kreativitätsmangel helfen?
Ein bestehendes Logo nachträglich zu vektorisieren KANN übrigens klappen, WIRD aber meistens nicht.

Der IE selbt, werde ich bei meiner Seite nicht extra unterstützen und/oder den ganzen Spaß generell auf Bootstrap aufbauen, so ganz ist das noch nicht klar.

Klingt, als wäre deine Seite wahlweise zwanghaft Buzzword-Complete, oder du willst hier das Bullshit-Bingo gewinnen.

Bisher bin ich mit Pixelgrafiken u.a. auch bei Logo sehr gut klar gekommen, aber eine Vector-Grafik sieht da schon einfach schöner aus

Wenn die Auflösung hoch genug ist merkst du den Unterschied in realistischen Szenarien kaum. Wie oft zoomen deine Besucher auf 2-300% ran?

Um die Größe zu minimieren benutze ich das Programm "FileOptimizer". Das verkleinert verlustlos* alle gängigen Bildformate, also hauptsächlich für jpg und png zu gebrauchen.

PNG ist per Definition verlustfrei, JPG hingegen per Definition verlustbehaftet.

Nur der Vollständigkeit halber: Logos auf jedsten als PNG speichern und nicht als JPG, weil letzteres Artefakte produziert. Gerade bei Logos, die aus farbigen Flächen bestehen (also nicht so komplex wie Fotos sind), kann PNG seine Stärken ausspielen: Alphakanal, verlustlose Kompression und gute Kompression farbiger Flächen.

Jop, zumal ein Logo ja selten irgend so ein 2-4MPix-Monster ist. Beim Logo opfert man gern ein paar KByte mehr für ne etwas schärfere Darstellung.
Wenn das Firmenlogo eine Struktur aufweist, bei der PNG signifikant schlechter komprimiert als JPG, dann ist das Logo einfach Mist.

 

[Gallo2000]

@Daaron:

Das Programm kann bestehende jpg Bilder verkleinern, ohne etwas am Inhalt zu ändern (Metadaten entfernen usw.) Von daher stimmt es schon, dass es auch jpg verlustlos verkleinert.

 

[Daaron]

Toll. Das macht GIMP auch... und für Puristen gibts das Exiftool. exiftool -all= humppa.jpg

 

[Midnight Sun]

@Daroon

SVG hilft mir bei Kreativitätsmangel in keinster Weise, aber ich habe dann halt etwas zu tun.

Wie oft gezoomt wird kann ich dir nicht sagen.

Bzgl. dem IE, ne hatte ich eigentlich nicht vor.