icon : erstelltes ai. grafik als icon (png) abspeichern

[paul1ol]

hallo,

hab in Illustrator eine Grafik erstellt, daraus soll ein icon erstellt werden für ein Softwareprogramm.
in 64 x 64 pixel größe.
wenn ich es als png-8 speichere ( > Menü; Datei > exportieren; für web speichern )
ist das icon aber unscharf ! die Linien von Grafik wirft schatten
..woran liegt das ? gibt es einen anderen weg ?

Grüße

 

[liselotte]

die Linien von Grafik wirft Schatten

Was sollen wir uns darunter vorstellen?
Vielleicht ein Beispiel
MfG

 

[buerzel]

Wie sieht's denn in der Pixelvorschau in Ai aus? Btw: PNG8 beherrscht keine Transparenzen.

 

[paul1ol]

hallo Liselotte,






die Linien vom Rechteck wirft schatten

 

[paul1ol]

so sieht es in der pixelvorschau aus

 

[liselotte]

Sorry für mich sieht es ok aus
MfG

 

[pixelmaker]

Die "Schatten" entstehen weil Linienbreiten und Abstände nicht mit den Größen eines Pixels überein stimmen.
Bei 72 ppi wäre die Größe eines Pixels 35.27777. Nur wenn Linienstärken und Abstände ein Vielfaches dessen ist wird eine scharfe Linie angezeigt. Du mußt also verhindern das die Darstellung in Pixeln weich gezeichnet wird. Beim Export als PNG muß die Kantenglättung ausgeschaltet werden.


grüße
ralf

 

[Andre_S]

Speichere es als PNG-24 über "Exportieren - für Web speichern" ab.
PNG-8 idst wie ein Gif und beherrscht keine Teiltranzparenzen.

 

[pixelmaker]

Speichere es als PNG-24

Bei einem PNG24 kann man die Glättung ebenfalls ausschalten um die "Schatten" zu vermeiden. Das Ergebnis ist dann das Gleiche wie bei einem PNG8 nur das ein PNG24 3 Mal so groß wird.

grüße
ralf

 

[Andre_S]

nur das ein PNG24 3 Mal so groß wird.

Sogar 4 mal so groß, da noch der Alphakanal hinzukommt.
Ich hatte das Beispiel erst später gesehen und lag mit meiner Glaskugelantwort daneben,
da ich unter "Schatten" etwas anderes verstehe.


Neue Antwort:
In den Voreinstellungen erst mal sicher stellen das Formen an Pixelkanten ausgerichtet werden.
Dann gleich eine 64x64px große Datei anlegen und darin arbeiten (evtl. auf 200 oder 400 % Zoom stellen).

 

[pixelmaker]

Dann gleich eine 64x64px große Datei anlegen

Hier geht es doch um das konvertieren einer Illustrator Datei, also um Vektoren. Die Größe in ppi wird beim Export festgelegt und dann wird nichts mehr bearbeitet.
Es ist natürlich eine Herausforderung die dünnen Linien mit dem späteren Raster überein zu bringen. Liegt eine Linie mittig zwischen zwei Pixeln (beim Export) dann wird sie normaler Weise weich gezeichnet und erhält das was vom TE als Schatten bezeichnet wird. Ist die Glättung ausgestellt dann wird die Linie dementsprechend dicker. Ich würde übrigens das Glätten der Linien und die Entstehung eines Schattens den ungeglätteten Linien vorziehen.

grüße
ralf

 

[Andre_S]

Die Größe in ppi

Die ppi spielt hier keinerlei Rolle, hier geht es nicht um den Druck sondern um screendesign für ein Programm.

 

[pixelmaker]

Die ppi spielt hier keinerlei Rolle, hier geht es nicht um den Druck sondern um screendesign für ein Programm.

Hallo
genau die unterschiedliche Auflösung der Monitore wird zum Problem wenn man ohne Glättung arbeitet.
Mein großer Monitor hat eine Auflösung von 193ppi. Jeder Pixel hat also einen Abstand von 0.13160 mm.
Wenn ich eine Linie mit 0.2mm Dicke habe kann ein Pixel sie nicht mehr darstellen. Wenn keine Glättung verwendet wird wird sie in der Dicke gerundet und dadurch von bis zu drei Pixeln dargestellt, aber immer im Vollton.
Wenn Glättung verwendet wird werden Pixel in Halbtönen daneben gelegt. Die Linie wird zwar auch über die 3 Pixel dargestellt erscheint aber nicht dicker.
Habe ich Linien mit geringem Abstand dann laufen die auf niedrig aufgelösten Monitoren zusammen. Habe ich dünne geglättete Linien dann werden sie auf Monitoren mit niedriger Auflösung nicht in der gewünschten Farbe dargestellt sondern nur als Halbton. Man sollte also schon wissen was man macht.
Ich kann die Liste jetzt fortführen, es gibt viele Effekte die man einschätzen muß, gerade wenn Vektorgrafiken in Pixelbilder konvertiert werden.

grüße

 

[Andre_S]

Mein großer Monitor hat eine Auflösung von 193ppi. Jeder Pixel hat also einen Abstand von 0.13160 mm.
Wenn ich eine Linie mit 0.2mm Dicke habe kann ein Pixel sie nicht mehr darstellen.

Im screendesign arbeit man ja auch nicht mit mm sondern mit px als Maßeinheit (auch für die Lineale).
Mit der Monitorauflösung hat es also auch nichts, aber auch gar nichts zu tun. 64 px sind 64 px - auf jedem Monitor. Wie groß das dann erscheint steht auf einem andererem Blatt und hat mit der Dateierstellung nichts zu tun.

 

[pixelmaker]

Es geht hier um die Konvertierung einer AI Vektor-Datei in eine Pixelgrafik.
Hätte der TE die AI Datei in Pixeln angelegt, Linienstärken auf Pixel eingestellt, Schriftgrößen in Pixeln statt in pt eingestellt und wüßte welche Effekte entstehen wenn das alles nicht der Fall ist, dann hätte er sich sicher nicht über die "Schatten" gewundert und diesen Beitrag nicht erstellt.


grüße

 

[kobii]

Ich als Ai Neuling grätsche jetzt einmal in eure Unterhaltung rein

Jedenfalls konnte ich von dieser Unterhaltung profitieren. Ich habe bei meinen Grafiken diese Schatten auch bemerkt und weiss jetzt was ich ändern muss.

Jetzt einmal abgesehen von den Einstellungen seitens Export ist es auch wichtig das man die Grafiken in Pixel anlegt, richtig?
Sprich, ich muss im Ai bei Erstellen des Dokuments in der Dokumentenvorgabe auf Web?

Was ist bei der Vorgabe der Rastereffekt bzw. welchen wählt man für screen und webdesign am Besten?

Lg