Tipps für das Webdesign
Antialiasing: was machen die beiden Methoden?
Die beiden Methoden beim Antialiasing (Supersampling und Hinting) bewirken meist einen eher esoterischen Unterschied in der Darstellung. Für die Ausgabe von Mustern kann es sinnvoll sein, Supersampling zu verwenden, da es die feinen weißen Linien unterdrückt. Hinting wird nur bei ziemlich kleiner Schrift sichtbar.
Deswegen hat mich ein Ergebnis auch sehr überrascht. Die Grafik hat mit Supersampling deutlich unsaubere Ränder (ein Klick öffnet die Bilder in Originalgröße in einem neuen Fenster):
Mit der Einstellung Hinting sind die Ränder dagegen glatt.
Interessant ist nun, dass auch mit Supersampling ein besseres Ergebnis entsteht, wenn man ineine andere Größe umrechnen lässt.
Der verwendete Font ist nicht installiert, daher die etwas unpassende Schriftart.
7. August 2020, Link zu diesem Abschnitt
Warum sieht mein Logo im Web und auf Facebook so furchtbar aus?
Bildqualität im Web wird durch viele Faktoren beeinflusst. Neben den eigentlichen Einstellungen beim Speichern eines Bilds können noch ganz andere Spieler das Bild verändern. Als Designer muss man sich mit der kompletten Technik beschäftigen, um die Ergebnisse beurteilen zu können.
Diesen Beitrag habe ich für »Creative Aktuell« geschrieben. Abonnenten können dort weiterlesen.
17. September 2015
Illustrator-Dateien für das Web und Mobilgeräte wie Smartphones und Tablets exportieren
Wie andere Grafik- oder Bildbearbeitungsprogramme wird auch Illustrator dazu verwendet, Layouts und Grafik für Web-Seiten, Interfaces für Bildschirmmedien oder E-Mail-Newsletter zu gestalten. Das Problem dabei ist jedoch, diese Layouts anschließend in den betreffenden Auszeichnungssprachen (also etwa HTML für das Web) umzusetzen. Zu diesem Zweck konnte man bis vor Kurzem noch den Befehl »Für Web speichern« verwenden.
Diesen Beitrag habe ich für »Creative Aktuell« geschrieben. Abonnenten können dort weiterlesen.
5. Juni 2015
Adobes iPad-Apps: Unterwegs kreativ
Adobe bietet bereits seit längerer Zeit Apps für das iPad an. Bisher waren diese weitgehend isoliert und erlaubten Ihnen, Teilbereiche Ihrer Arbeit mobil durchzuführen, vor allem ging es um vorbereitende Arbeiten oder die Ideenfindung. Wir stellen heute einmal die aktuellen Möglichkeiten für mobile Grafiker und Nutzer von Tablets vor.
Diesen Beitrag habe ich für »Creative Aktuell« geschrieben. Abonnenten können dort weiterlesen.
25. Februar 2015
SVG und »Am Pixelraster ausrichten« in Illustrator CC
Eine der Neuerungen von Illustrator CC17.1 besteht darin, dass beim Öffnen eines SVG am Pixelraster ausgerichtete Objekte weiterhin am Pixelraster ausgerichtet bleiben. Das ist prinzipiell ein Fortschritt, denn gerade für Webgrafik wurde diese Option eingeführt.
Diesen Beitrag habe ich für »Creative Aktuell« geschrieben. Abonnenten können dort weiterlesen.
27. Oktober 2014
VectorScribe und „An Pixelraster ausrichten“
Die Option „An Pixelraster ausrichten“ ist für Objekte, die Sie mit dem Dynamic-Shapes-Tool von VectorScribe erstellen, automatisch deaktiviert. Ganz egal, ob sie im Dokument ansonsten aktiv ist. Das ist kein Bug, sondern eine sorgfältige Überlegung. Wäre diese Option für die Objekte standardmäßig aktiv, dann würden sie bereits beim Loslassen der Maus in den meisten Fällen minimal verformt, was wiederum dazu führen würde, dass sie alle ihre Live-Eigenschaften verlieren und nicht mehr voll editierbar sind – Sie könnten also z.B. nicht mehr die Anzahl der Spitzen eines Sterns ändern.
Abbildung: Obwohl im Dokument eingestellt ist, dass neue Objekte am Pixelraster ausgerichtet werden, ist der frisch erstellte Stern nicht am Pixelraster ausgerichtet.
Ich bin sehr begeistert.
13. Oktober 2011
Probleme mit verformter Grafik in Illustrator CS5
Die Option „Am Pixelraster ausrichten“ ist für so manche Irritation verantwortlich. Ich habe eine kleine Liste der Merkwürdigkeiten zusammengestellt.
Abbildung: Das kann aus einem Stern werden.
9. Juni 2011
Gemeinsamkeiten von Illustrator und CSS
Für Heiko Stiegerts Webstandard-Blog habe ich Illustrators Aussehen-Eigenschaften mal aus einem anderen Blickwinkel betrachtet. Vielleicht hilft es zum besseren Verständnis.
Adobe Flash Catalyst
Dieses Programm dient dazu, Illustrator- und Photoshop-Dokumente ohne große Programmierkenntnisse in interaktive Web-Inhalte zu bekommen. Momentan ist eine Beta-Version erhältlich:
Flash Catalyst Beta (Adobe ID erforderlich)
kostenloses Training bei Lynda.com
Fireworks-Linien-Rendering
Im Web-Design hat Fireworks die Nase in vielen Dangen vor Illustrator. Und besonders das Rednering von Pfaden ist überlegen, da Fireworks einen Automatismus für die Darstellung von Pixellinien besitzt. In diesem Knowledgebase-Artikel wird er beschrieben. Die Workarounds für den Umgang mit Pixellinien in Illustrator finden Sie auf dieser Seite weiter unten.
Mal was ganz anderes
Der Vektorgarten entsteht in Adobe Dreamweaver. Und nur deswegen auch dieser kleine Hinweis am Rande. Dreamweaver CS4 hat den Layout-Modus abgeschafft. Ich kann mich nicht erinnern, das überhaupt je verwendet zu haben, aber falls jemand bereits danach gesucht hat, jetzt wissen Sie, was los ist.
Dokumentprofile und Schnittbereiche
Beim Speichern von Webformaten ist Ihnen vielleicht einmal die Warnung begegnet, dass das Dokumentformat zu groß für die Funktion „Für Web speichern“ sei.
Meist reibt man sich verwundert die Augen, in der sicheren Annahme, ein Web-Dokument 800 x 600 Pixel angelegt zu haben. Und das soll plötzlich zu groß sein?
Dazu müssen Sie wissen, wie Illustrator CS3 mit den Dokumentprofilen und -formaten umgeht. Mit dem Dokumentprofil Web (und den Profilen Video & Film sowie Mobile Geräte) wird die gewählte Größe nicht mit der Größe der Zeichenfläche eingestellt. Stattdessen legt Illustrator eine Zeichenfläche in der maximalen Größe an. Das können Sie einfach feststellen, indem Sie „Dokument einrichten" aufrufen.
Das, was Sie unter „Neues Dokument“ als Größe eingestellt haben, ist nur ein Schnittbereich
Aber wie kommt es jetzt zu der Warnung?
Zwei Möglichkeiten. Entweder Sie haben den Schnittbereich gelöscht, weil Sie ihn für überflüssig hielten. Die Lösung wäre, ihn wieder anzulegen.
Die andere Möglichkeit ist vertrackter. In der Funktion „Für Web speichern“ gibt es eine Option „Ganze Zeichenfläche exportieren“.
Ist diese Option aktiviert, werden Schnittbereiche ignoriert und die oben erwähnte Warnung erscheint. Um diesen Fall zu lösen, gehen Sie folgendermaßen vor:
Wählen Sie Objekt > Slice > Ganze Zeichenfläche exportieren aus, sodass da ein Haken ist.
Und nun noch die wichtigste Frage: Warum sollte man nicht die Dokumentgröße des anfangs betroffenen Dokuments ändern? Ganz einfach: Beim Ändern der Dokumentgröße verstellen sich die Lineale und damit kommt eventuell das Pixelraster durcheinander.
Schwarzweißverlauf-Farbfelder und RGB
Wenn Sie im Dokumentfarbmodus RGB einen Schwarz-Weiß-Verlauf aus der Farbfelder-Palette anwenden, erhalten Sie kein „richtiges“ Schwarz. Das liegt daran, dass das enthaltene Schwarz im Farbmodus Graustufen definiert ist und nicht in RGB 000 konvertiert wird.
Störend wirkt sich das zum Beispiel aus, wenn Sie den Verlauf in einer Deckkraftmaske verwenden - Sie erhalten keine vollständige Transparenz. Schaffen Sie Abhilfe, indem Sie das Schwarz in der Farbe-Palette in den Farbmodus RGB bringen.
Abbildung: Verlauf nach RGB 000 (oben) und Original-Schwarz-Weiß-Verlauf (unten)
Nur Zeichenfläche speichern
Beim Speichern in Bildformate begrenzt Illustrator nicht automatisch auf die Zeichenfläche, sondern nimmt alle Objekte mit, die auf der Montagefläche liegen. Das ist natürlich in den meisten Fällen nicht erwünscht.
Um nur die Zeichenfläche zu speichern, haben Sie mehrere Möglichkeiten:
1. Die Option „Ganze Zeichenfläche exportieren“ unter Objekt > Slice oder die gleichnamige Option in den Einstellungen bei „Für Web speichern“
2. Alternativ verwenden Sie Slices und bestimmen damit den zu exportierenden Bereich.
3. Oder Sie legen einen Schnittbereich an, indem Sie ein Rechteck aufziehen und Objekt > Schnittbereich > Erstellen auswählen.
Verläufe in PDFs besser komprimieren
Das PDF-Speichern-Modul leistet eigentlich gute Arbeit beim Komprimieren von Grafiken. Leider ist es keine große Hilfe, sobald es um Verläufe geht. Das liegt nicht etwa daran, dass Verläufe in zig farbabgestufte Einzelteile zerlegt werden (so wie es beim Export in andere Formate der Fall ist).
Öffnet man das erzeugte PDF wieder in Illustrator, dann zeigen sich Verläufe als „Grafik aus Drittprogrammen“ (für die englische Version „Non-Native Art“). In dieser Form treten normalerweise Duplex-Bilder auf.
Haben Sie in Ihrer Grafik viele Verläufe und möchten diese wirklich komprimieren, um vielleicht das PDF auf Ihrer Website zum Download anzubieten, dann können Sie den Weg über den Effekt „In Pixelbild umwandeln“ gehen. Weisen Sie diesen den Verlaufobjekten zu, dann greifen die Bildkomprimierungseinstellungen im PDF-Dialog.
Effekt „In Pixelbild umwandeln“ auf ein Verlaufobjekt angewendet.
Exakte Pixellinien konstruieren
Das Problem beim Erstellen von 1-Pixel-Linien mit Illustrator besteht in der PostScript-Eigenart, eine Kontur immer zu beiden Seiten des Pfads anzulegen. Wenn Sie beim Webdesign mit aktivierter Pixelvorschau und der Einstellung „An Pixel ausrichten“ arbeiten - was ratsam ist - werden also die Linien nie auf ganze Pixel gelegt. Ärgerlich.
Abbildung: Konturstärke 1 Pixel (oben) - so wäre es gewünscht (unten)
Mit einem Grafikstil lässt sich aber Abhilfe schaffen. Benötigt werden die Effekte „In Form umwandeln“ und „Transformieren“. Und so wenden Sie die Effekte an:
Geglättete und Ungeglättete Texte für Web speichern
Im Webdesign ist es keine ungewöhnliche Anforderung, ungeglättete Texte verwenden zu wollen. Vor allem bei der Beschriftung von Buttons oder Grafiken mit Schriften in kleinen Graden sind nicht geglättete Schriften unter Umständen besser lesbar.
Es ist kein Problem, in einer Datei sowohl geglättete als auch ungeglättete Schriften anzulegen. Dazu dient der Effekt „In Pixelbild umwandeln“.
Auf das Aussehen der Schriften kann es auch einen Einfluss haben, ob die Pixelvorschau und „An Pixel ausrichten“ aktiviert sind.
An Pixel ausgerichtet, ohne Glättung als PSD exportiert
Nicht an Pixel ausgerichtet, ohne Glättung als PSD exportiert
Wenn Sie die Datei als PSD ausgeben, müssen Sie allerdings die Option „Glätten “ deaktivieren, damit der Effekt sich im exportierten Bild niederschlägt.
Voreingestellt ist die Option aktiviert.
Mit Glättung als PSD exportiert
Auch beim „Für Web speichern“ lässt sich die Glättung deaktivieren, falls nötig. Klicken Sie den Reiter „Bildgröße“ und nehmen das Häkchen bei der Option „Glätten“ heraus.
„Live“ unterschreiben
Ein gefragter Effekt, den Sie mit Symbolen, einer Angleichung und dem SWF-Export einfach herstellen können.
Zeichnen Sie zuerst den Linienzug, der animiert werden soll. Wenn Sie nur Illustrator zur Verfügung haben, können Sie nur „in einem Zug schreiben“. Verwenden Sie zusätzlich Flash, ist es natürlich möglich, mehrere Schriftzüge aneinanderzusetzen.
Mit einem Grafiktablett unterschreiben Sie am natürlichsten
Dann erstellen Sie einen Kreis - mit diesem lässt sich die Angleichung am effektivsten herstellen (Sie benötigen weniger Abstufungen). Den Kreis legen Sie als Symbol ab.
Angleichung zwischn zwei Instanzen des Symbols
Erzeugen Sie jetzt eine Angleichung zwischen zwei Instanzen des Symbols. Ersetzen Sie dann die Angleichungsachse durch Ihren Schriftzug.
Die Angleichungsachse wird durch den Unterschrifts-Pfad ersetzt
In den Angleichungs-Optionen bestimmen Sie die Anzahl der Stufen
Dann exportieren Sie die Datei als SWF. Die Angleichungen müssen Sie „Beim Aufbau“ animieren.
Das war’s auch schon. Viel Spaß!
Adobe stellt die Unterstützung für den SVG-Viewer ein
Der Viewer kann nur noch bis zum 1. Januar 2007 heruntergeladen werden (und
zwar hier). Details:
http://www.heise.de/newsticker/meldung/77828/from/rss09
http://www.adobe.com/svg/pdfs/ASV_EOL_FAQ.pdf
Slices mit nicht-bildlichem Inhalt
Wenn Ihr Webdesign Text enthält, sind Sie nicht gezwungen, diesen als Bild auszugeben. Aktivieren Die den Slice und wählen Objekt > Slice > Slice-Optionen.
Abbildung: Die Slice-Optionen in ImageReady. Dort werden sie in Form einer Palette angeboten. In Illustrator sind sie eine Dialogbox.
Imagemaps
Imagemaps können Sie direkt in Illustrator erstellen und mit der Funktion „Für Web speichern“ auch ausgeben. Verwenden Sie die Grafikattribute-Palette, um die Bereiche anzulegen:
Da die Ankerpunkte des Vektorobjekts als Punkte der Imagemaps verwendet werden, sollten Sie bereits beim Erstellen der Objekte darauf achten, dass diese nicht zuviele Punkte enthalten.
Bei der Ausgabe mit Hilfe des „Für Web speichern“-Dialogs verwenden Sie die Option HTML und Bilder.
Transparente GIF speichern
Damit die Kante eines Objekts glatt erscheint, muss die Transparenz des GIF auf die Hintergrundfarbe der Webseite berechnet werden.
Um die korrekte Berechnung beim „Für Web speichern“ zu erzeilen, können Sie natürlich vor dem Exportieren eine Fläche in der gewünschten Farbe hinter dem Motiv anlegen. Es geht aber eleganter:
Rufen Sie Für Web speichern auf und wählen unter „Hintergrund“ die Option „Andere“. Im Farbwähler geben sie die gewünschte Farbe ein.
Die Änderung können Sie sofort in der Farbpalette feststellen.
Illustrator-Tipps
- Illustrator CC
- Illustrator CS6
- Illustrator CS5
- Illustrator CS4
- Illustrator CS3
- Illu-CS3-Tipps
- Video-Tipps
- Fehleranalyse
- Konstruieren
- Illustrator iPad
- Stylish
- Interaktive Farbe
- Schrift & Typo
- Menübefehle d/e
- Workflow
- Scripting
- 3D und Perspektivenraster
- FreeHand-Umsteiger
- Vektorisieren
- Im- und Export
- Webdesign
- Anfänger-Tipps
- Literatur
- Illustrator-Links
sonstige:
Illustrator - Das umfassende Handbuch
ISBN 978-3-8362-9718-9
Rheinwerk-Verlag
Illustrator - Tipps, Tricks, Techniken
Für einen besseren Workflow
Für gekonnte Effekte
Illustrator - Das umfassende Handbuch
ISBN 978-3-8362-7292-6
Rheinwerk-Verlag
Illustrator 2022 Grundkurs
Vektorgrafiken, Werkzeuge, Workflow
LinkedIn Learning
Inkscape lernen - Vektorgrafiken zeichnen
LinkedIn Learning
Monika Gause (Hrsg.):
Illustrator Aktuell (als Teil von »Creative Aktuell«)
Verlag Mensch und Medien
Themenübersicht