Illustrator - Homepage Logo beim Export unscharf

[sasclan]

Hallo zusammen,

nach ewigem Suchen in Google bin ich nun kurz vor dem verzweifeln.

Mein Firmen-Logo habe ich in Illustrator erstellt.
Im Programm selbst sieht alles wunderbar aus. Auch wenn ich das Logo als PDF drucke ist alles wunderbar scharf.

Jedoch beim Export in PNG werden die Kanten unscharf.
Ich muss es in PNG oder Jpeg für meine Website exportieren.

Ich kann hier in diesem Forum leider kein Bild hochladen

Hat einer von euch eine Idee wie ich dieses Problem beheben kann?

 

[DaKKK]

Hi,

mit welcher Version arbeitest du? Und wie speicherst du das PNG?

 

[sasclan]

Hi,

vielen Dank für deine Antwort!

Habe mir mal die aktuellste CC-Version als Testversion runtergeladen.
Ich speichere unter "Für Web speichern" lasse alle Einstellungen auf Standard

 

[DaKKK]

Mh, irgendwas ist beim Bildupload oder der Einbindung schief gegangen. Ich sehe zumindest keine Bilder.

 

[sasclan]

Stimmt irgendwas ist da schief gelaufen.
Du kannst rechtsklick-> Grafik anzeigen klicken, dann kommt das Bild

Auf dem ersten Foto ist das Logo
Und auf dem zweiten Foto, wie ich es speicher

Ich muss die Grafik von Illustrator etwas kleiner skalieren.
Das stelle ich aber schon beim "Für Webspeichern" Dialog so ein.

Kann es sein, dass dadurch das Problem entsteht?

 

[ph_o_e_n_ix]

Du kannst rechtsklick-> Grafik anzeigen klicken, dann kommt das Bild

Das funktioniert leider nicht - am besten bearbeitest du einfach deinen Beitrag und korrigierst die Links. Ist ja unsinnig, wenn jeder, der die Bilder sehen möchte, sich die Links über die Eigenschaften oder den Quellcode heraussuchen muss.

 

[sasclan]

Hier ein Foto von dem unscharfen Logo



Oben an dem Kreis sieht es einfach total unscharf aus

 

[DaKKK]

Also bei mir ging es mit Rechtsklick-> Grafik anzeigen ^^ Aber ist ja jetzt egal.

An der Skalierung kann es eigentlich nicht liegen, da Vektordaten beliebig verlustfrei skaliert werden können.

Ich frage einfach mal so, um sicher zu gehen: Es sind doch Vektoren, oder? Oder ist es eine simple Rastergrafik, die du in Illustrator platziert hast?

 

[rodemund]

140px Höhe sind für ein (eh recht kompliziertes Logo) einfach sehr wenig. Wo sollte die Schärfe denn auch herkommen bei 140px und ausschließlich runden Formen?
Unter diesen Bedingungen wird’s nicht schärfer werden.

 

[utnik]

hallo sasclan

wie rodemund schreibt, kannst du bei 140px keine wunder erwarten.
du kannst einfach entscheiden, ob du das logo geglättet (und somit leicht unscharf) oder scharf und mit pixeltreppen haben willst.



gruss
utnik

edit: die vorschau wird auch wieder unscharf – meine .png sieht anders aus. ()

 

[norre]

Hallo,
habe mit Web nicht die Ahnung aber, wäre SVG als Vektorformat für das Web eine Alternative?

 

[utnik]

wäre SVG als Vektorformat für das Web eine Alternative?

grundsätzlich: ja! – können wohl längst alle aktuellen browser damit umgehen.

die frage, wie das logo in der kleinen auflösung gerendert wird, stellt sich natürlich trotzdem. (allerdings erst beim darstellen der website…)

gruss
utnik

 

[virra]

Hallo,
habe mit Web nicht die Ahnung aber, wäre SVG als Vektorformat für das Web eine Alternative?

Das löst nicht das Darstellungsproblem von winzigen Kreisen auf dem Monitor. Da ist eben bei so wenigen Pixeln schnell Ende Gelände. Da hast du das selbe Problem wie bei sehr kleinen Schriften auf dem Monitor.

 

[rodemund]

du kannst einfach entscheiden, ob du das logo geglättet (und somit leicht unscharf) oder scharf und mit pixeltreppen haben willst.

Genau so ist es.
Abgesehen davon zeigt dieses Thema sehr schön die grundsätzliche Schwäche des Entwurfs, aber das nur am Rande.

 

[cythux]

Am einfachsten für die Webseite als svg speichern

 

[sasclan]

Vielen Dank für eure Unterstützung.

Werde mich wohl damit abfinden müssen.

Damit es aber nicht ganz so übel aussieht, werde ich es in Photoshop importieren und die drei Kreise mit einer Fülloption (Schein nach außen) versehen.
Dann überdeckt der Schein das pixelige recht gut.

Meint ihr das ist eine Lösungsvariante?

 

[rodemund]

Meint ihr das ist eine Lösungsvariante?

Nein. Ich würde einen mediengerechten Neuentwurf deutlich vorziehen.
Den ohnehin nicht sehr prägnanten Entwurf durch einen Schein nach außen weiter zu verwässern, halte ich für keine gute Idee.

 

[sasclan]

Was sollte ich bei einem Neuentwurf beachten?

 

[Mackymesser111]

kurz und simpel:
Das er (der Entwurf) klein auch funktioniert -> also mal Ausdrucken und von weiter weg anschauen und überlegen ob man nicht Details rausnehmen kann…

 

[rodemund]

Das Problem dabei ist, das Logoentwurf eigentlich eine Königsdisziplin in der Gestaltung ist.
Ein gutes Logo ist zwar (auch) einfach, aber leider nicht einfach entworfen – auch wenn es auf das unbefangene Auge so wirkt.
Realistischerweise hast du drei Möglichkeiten:
1. Du veränderst das vorhandene Logo, bis du damit leben kannst.
2. Du lässt es jemanden machen, der was davon versteht, und bezahlst sie oder ihn (an dieser Stelle klemmt es dann meist).
3. Du bildest dich in Sachen Logo fort, bis du es tragfähig hinkriegst (sicherlich der längste und steinigste Weg).
Unbenommen bleibt übrigens eine Prüfung, ob du überhaupt ein Logo brauchst.
Dies ist ein fruchtbares Thema über Logos, an dem ich teilnehmen durfte; da stecken viele gute Ansätze drin – insbesondere die Quellen, die Patrick_I nennt, sind wertvoll:
http://www.psd-tutorials.de/forum/threads/logodesign-die-erste-luxx-photography.146058/