Antworten auf deine Fragen:
Neues Thema erstellen

Illustrator - Kleine Symbole (Icons)

DGraphix

Nicht mehr ganz neu hier

Hallo zusammen,

ich habe ein Problem. Ich soll kleine Symbole für eine Naviagtionsleiste machen. Die Symbole habe ich in Illustrator erstellt.

Da die Symbole png Format haben, speichere ich die fürs Web unter png 8 24x24px. Danach werden die super schlecht und man kann da nichts mehr erkennen.

Mach ich generell was falsch oder muss ich beim Speichern was beachten?

Dennis
 

Vektorprogramme

CUBEMAN

Polyboy

Du solltest die Icons besser in der Originalauflösung, in einem pixelorientierten Programm (Photoshop, Affinty Photo, o. ä.) umsetzen. Nur so kannst du deren Wirkung sicher einschätzen.
 

Rata

Zeig mal einen Deiner Entwürfe her.

Icons zu entwerfen ist längst nicht so profan, wie es (nachher) aussieht. Dabei muß man den Verkleinerungsfaktor ganz fest im Kopf verankert haben, während man werkelt.


Danach werden die super schlecht und man kann da nichts mehr erkennen.

Woooo werden die „schlecht“?
Im Entwurfsstadium oder sehen sie auf der Web-Site doof aus?


Lieber Gruß
Rata
 

DGraphix

Nicht mehr ganz neu hier

Unserer Programmierer möchte png... Das braucht er wohl.



Das sollte mal ein Kreis mit einem Ausrufezeichen sein... sollte!
 

pixelmaker

jeden Tag neu hier

Hallo
das ist ein Icon auf einer Arbeitsfläche von 24x24px aus Illustrator.

Hier geschieht folgendes.
• Da Illustrator nicht nach Pixeln ausrichtet sieht es immer so aus als würde das Bild nach rechts verschoben sein. Illustrator verschiebt (zumindest bei mir) das Bild immer etwas nach rechts unten. Bei so grober Auflösung müsste ich das händisch ausmitteln. Im PS wird nach Pixeln ausgerichtet da geschieht das nicht.
• Obwohl die Zeichnung mittig ist sieht es rechts aus als wäre es angeschnitten. Der Abstand Zeichnung zu Bildkante ist weniger als ein Pixel. Der Kreis ist nicht nach einer durch die Pixel teilbaren Größe angelegt. Bei der Umwandlung in ein Pixelbild wird ein Ei draus.
• Ein runder Punkt braucht mindestens 3x3 Pixel eher wird auf mehr gedithert. Der Punkt bekommt graue Pixel im Übergang, der Punkt ist im Pixelbild nicht mehr rund.
• Das Gleiche gilt für den Zwischenraum zwischen Balken und Punkt beim Ausrufezeichen. Ist der Abstand weniger als 3 pixel breit wird er grau und es fehlt der Kontrast.

Eine Auflösung von 24 x 24 px halte ich für zu klein. Es ist immer besser das Icon an sich größer zu lassen und bei der Darstellung auf die richtige Größe umrechnen zu lassen. Heute zeigt kaum ein Bildschirm mit 72dpi an, das sind nur noch letzte Röhrenmonitore die irgendwo rumdümpeln. Letztlich ist es der Browser der das Bild in endgültiger Größe anzeigt und zwischenwerte noch mal dithert.
Die Möglichkeit nimmst Du wenn Du so eine kleine Auflösung erstellst. Es sind auch immer die Stufen 16 x 16, 32 x 32, 64 x 64 a besten.

Wenn Du Icons erstellen musst dann musst Du erst mal wissen was geschieht beim Dithern, was bei der Darstellung evt. auch auf anderen Auflösungen, wie verändern sich die Farben und die Umrisse. Es liegt ein Wochenende voller lernen vor Dir. Ohne diese Kenntnisse wird die Erstellung jedes Icon zum rumprobieren.
Wenn Du die Icons in einem Pixelbild erstellst hast Du wesentlich weniger Probleme, da Ausrichtung und Abstände direkt in Pixel umgerechnet werden. Bei Illustrator hast Du die Bildschirmansicht in einer einstellbaren Vorschau, die aber nicht mit dem erzeugten Pixelbild überein stimmt.

grüße
ralf
 

pixelmaker

jeden Tag neu hier

besser kann man es nicht schreiben und erklären
Doch, kann man. das ist ein komplexes Thema. Ich weiß das Illu aus irgend einem Grund alles nach rechts unten versetzt, aber ich weiß nicht warum. Ich meide solche Probleme einfach.
Das Thema geht noch viel weiter, deshalb gibt es Spezialisten für das UI-Design.
Wenn ich das Icon von Dennis sehe gehe ich davon aus das Dither abgestellt war.
Warum man so etwas macht ohne zu wissen was geschieht verstehe ich nicht.
@: Mach doch mal einen Screenshot Deiner PNG Einstellungen.

grüße
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.447
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben