Illustrator verfügt über eine Vielzahl an Werkzeugen, mit denen das Layout für Webseiten erstellt werden kann oder mit denen Webgrafiken erstellt und optimiert werden können. Sie müssen beispielsweise websichere Farben verwenden, einen guten Ausgleich zwischen Bildqualität und Dateigröße finden sowie das am besten geeignete Dateiformat auswählen. Sie können Webgrafiken mit Slices und Imagemaps versehen und vielfältige Optionen zur Optimierung nutzen. Außerdem steht Ihnen Device Central zur Verfügung, sodass Sie die Web-Anzeige Ihrer Dateien überprüfen können.

Wissenswertes zu Webgrafiken

Beim Erstellen von Grafiken für das Web spielen andere Überlegungen eine Rolle als beim Erstellen von Grafiken, die gedruckt werden sollen. 

Die folgenden drei Richtlinien helfen Ihnen dabei, beim Erstellen von Webgrafiken die richtigen Aspekte zu berücksichtigen:

Verwenden Sie websichere Farben.

Farbe gehört häufig zu den wichtigsten Aspekten bei der Erstellung von Bildmaterial. Die Farben, die Sie auf der Zeichenfläche sehen, sind jedoch nicht unbedingt mit den Farben identisch, die im Webbrowser eines anderen Systems angezeigt werden. Sie können Dithering (die Simulation nicht verfügbarer Farben) und andere Probleme mit Farben vermeiden, wenn Sie beim Erstellen von Webgrafiken die folgenden zwei Richtlinien beachten. Wählen Sie als Farbmodus immer „RGB“. Verwenden Sie websichere Farben.

Stimmen Sie die Bildqualität und die Dateigröße aufeinander ab.

Grafikdateien für das Web müssen möglichst klein sein. Bei kleineren Dateigrößen können Bilder schneller auf Webservern hochgeladen werden. Außerdem werden Bilder schneller heruntergeladen, wenn Ihre Website von einem Besucher geöffnet wird. Die Größe und geschätzte Download-Zeit einer Webgrafik wird im Dialogfeld „Für Web und Geräte speichern“ angezeigt.

Wählen Sie das für Ihre Grafik am besten geeignete Dateiformat aus.

Unterschiedliche Arten von Grafiken müssen in unterschiedlichen Dateiformaten gespeichert werden, um eine möglichst gute Anzeigequalität zu gewährleisten und eine für das Web angemessene Dateigröße zu erzielen. Weitere Informationen zu bestimmten Formaten finden Sie unter Optimierungsoptionen für Webgrafiken in der Illustrator-Hilfe.

Hinweis:

Illustrator bietet zahlreiche Vorlagen speziell für das Web, einschließlich Webseiten und -banner. Wählen Sie „Datei“ > „Neu aus Vorlage“, um eine Vorlage auszuwählen.

Wissenswertes zum Pixelvorschaumodus

Damit Webdesigner pixelgenaue Designs erstellen können, bietet Illustrator nun die Möglichkeit zum Ausrichten an Pixeln. Wenn die Eigenschaft zum Ausrichten an Pixeln für ein Objekt aktiviert ist, werden alle horizontalen und vertikalen Segmente im Objekt am Pixelraster ausgerichtet, wodurch Konturen geglättet werden. Wenn diese Eigenschaft für ein Objekt festgelegt ist, wird es bei jeder Transformation entsprechend den neuen Koordinaten am Pixelraster ausgerichtet. Aktivieren Sie diese Eigenschaft, indem Sie im Transformierenbedienfeld die Option „An Pixelraster ausrichten“ auswählen. Illustrator  bietet auf Dokumentebene auch die Option „Neue Objekte an Pixelraster ausrichten“, die für Webdokumente standardmäßig aktiviert ist. Wenn diese Eigenschaft aktiviert ist, wird bei neu gezeichneten Objekten die Eigenschaft zum Ausrichten an Pixeln standardmäßig verwendet.

Weitere Informationen finden Sie unter Zeichnen von an Pixeln ausgerichteten Pfaden für Web-Workflows.

Wenn Sie Bildmaterial in einem Bitmap-Format wie JPEG, GIF oder PNG speichern, wandelt Adobe Illustrator das Bildmaterial in Pixelbilder mit 72 ppi um. Wählen Sie „Ansicht“ > „Pixelvorschau“, um zu sehen, wie Objekte nach der Umwandlung in Pixelbilder aussehen. Dies ist besonders dann sinnvoll, wenn Sie die genaue Platzierung, Größe und Glättung von Objekten in einer in Pixelbilder umgewandeltenGrafik steuern möchten.

Um besser nachvollziehen zu können, wie Objekte in Illustrator in Pixel unterteilt werden, öffnen Sie eine Datei, die Vektorobjekte enthält, wählen Sie „Ansicht“ > „Pixelvorschau“ und vergrößern Sie das Bildmaterial so, dass Sie die einzelnen Pixel deutlich erkennen können. Die Platzierung der Pixel wird durch das Pixelraster auf der Zeichenfläche bestimmt, das die Zeichenfläche in 1 Punkt (1/72 Zoll) große Teile zerlegt. Sie können das Pixelraster anzeigen, wenn Sieauf600 % einzoomen. Beim Verschieben, Hinzufügen bzw. Transformieren von Objekten wird das Objekt vom Pixelraster „magnetisch“ angezogen. Das führt dazu, dass die Glättung an den Rändern des Objekts, die am Gitter ausgerichtet sind (zumeist an den linken und oberen Rändern), verloren geht. Deaktivieren Sie nun den Befehl „Ansicht“ > „An Pixel ausrichten“ und verschieben Sie das Objekt. Jetzt können Sie das Objekt auch zwischen den Gitterlinien positionieren. Beachten Sie, wie sich dies auf die Glättung des Objekts auswirkt. Wie Sie sehen,lässt sich durchganz kleine Veränderungen die Art und Weise ändern, wie Objekte in Pixelbilder umgewandelt werden.

Deaktivierte (oben) und aktivierte Pixelvorschau (unten)
Deaktivierte (oben) und aktivierte Pixelvorschau (unten)

Hinweis:

Das Pixelgitter ändert sich, wenn sich der Ursprung des Lineals (0,0) ändert. Wird der Linealursprung verschoben, ändert sich die Art und Weise, wie Illustrator Bildmaterial in Pixelbilder umwandelt.

Verwenden von Adobe Device Central mit Illustrator

Mit Device Central können Illustrator-Benutzer in einer Vorschau sehen, wie Illustrator-Dateien auf verschiedenen mobilen Geräten aussehen werden.

Beispielsweise kann ein Grafiker Illustrator verwenden, um einen Hintergrund für Mobiltelefone zu entwerfen. Wenn die Datei erstellt ist, kann sie der Grafiker auf zahlreichen Mobiltelefonen testen. Der Grafiker kann anschließend Änderungen vornehmen, z. B. die Datei so ändern, dass sie auf vielen Mobiltelefonen gut dargestellt wird, oder zwei separate Dateien erstellen, die einen Großteil verbreiteter Telefonbildschirmgrößen abdecken.

Zugriff auf Illustrator aus Adobe Device Central

  1. Starten Sie Device Central.
  2. Wählen Sie „Datei“ > „Neues Dokument in“ > „Illustrator“.

    In Device Central wird das Bedienfeld „Neues Dokument“ mit den angemessenen Optionen angezeigt, um ein neues mobiles Dokument in der gewählten Anwendung zu erstellen.

  3. Nehmen Sie die erforderlichen Änderungen vor, z. B. die Auswahl der Player-Version, die Anzeigegröße, Flash-Version oder den Inhaltstyp.
  4. Führen Sie einen der folgenden Schritte durch:
    • Wählen Sie für „Alle ausgewählten Geräte“ die Option „Eigene Größe“ aus und geben Sie eine Breite und Höhe ein (in Pixel).

    • Wählen Sie ein oder mehrere Geräte aus der Liste „Gerätegruppen“ oder „Verfügbare Geräte“ aus.

  5. Wenn Sie mehrere Geräte ausgewählt haben, wählt Device Central ein Format für Sie aus. Wenn Sie ein anderes Format auswählen möchten, klicken Sie auf ein anderes Gerät bzw. eine andere Gerätegruppe.
  6. Klicken Sie auf „Erstellen“.

    Die gewählte Anwendung wird mit einem neuen mobilen Dokument geöffnet, das sofort bearbeitet werden kann.

Erstellen von mobilen Inhalten mit Adobe Device Central und Illustrator

  1. Wählen Sie in Illustrator „Datei“ > „Neu“.
  2. Wählen Sie unter „Neues Dokumentprofil“ „Mobil & Geräte“.
  3. Klicken Sie auf „Device Central“, um das Dialogfeld in Illustrator zu schließen und Device Central zu öffnen.
  4. Wählen Sie einen Inhaltstyp.

    Die Liste „Verfügbare Geräte“ auf der linken Seite wird aktualisiert und zeigt die Geräte an, die den gewählten Inhaltstyp unterstützen.

  5. Wählen Sie in Device Central ein Gerät, mehrere Geräte oder eine Gerätegruppe aus.

    Auf Grundlage des gewählten Geräts (der gewählten Geräte) und des Inhaltstyps schlägt Device Central eine oder mehrere zu erstellende Zeichenflächengrößen vor. Um ein Dokument nach dem anderen zu erstellen, wählen Sie eine vorgeschlagene Dokumentgröße aus (oder wählen Sie für „Alle ausgewählten Geräte“ die Option „Eigene Größe“ aus und geben eine Breite und Höhe ein).

  6. Klicken Sie auf „Erstellen“.

    Es wird eine leere AI-Datei mit der angegebenen Größe in Illustrator geöffnet. Bei der neuen Datei sind standardmäßig folgende Parameter eingestellt:

    • Farbmodus: RGB

    • Rasterauflösung: 72 ppi

  7. Fügen Sie der leeren AI-Datei in Illustrator Inhalt hinzu.
  8. Wählen Sie anschließend „Datei“ > „Für Web und Geräte speichern“.
  9. Wählen Sie im Dialogfeld „Für Web und Geräte speichern“ das gewünschte Format aus und ändern Sie die Exporteinstellungen nach Bedarf.
  10. Klicken Sie auf „Device Central“.

    In der Registerkarte „Device Central Emulator“ wird eine temporäre Datei mit den angegebenen Exporteinstellungen angezeigt. Zum Fortsetzen des Tests doppelklicken Sie in den Listen „Gerätegruppen“ oder „Verfügbare Geräte“ auf den Namen eines anderen Geräts.

  11. Wenn Sie Änderungen an der Datei vornehmen müssen, nachdem Sie die Vorschau der Datei in Device Central angesehen haben, kehren Sie zu Illustrator zurück.
  12. Nehmen Sie im Illustrator-Dialogfeld „Für Web und Geräte speichern“ Änderungen vor, beispielsweise durch Auswahl eines anderen Exportformats oder einer anderen Exportqualität.
  13. Um die Datei mit den neuen Exporteinstellungen zu testen, klicken Sie auf die Schaltfläche „Device Central“.
  14. Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie im Illustrator-Dialogfeld „Für Web und Geräte speichern“ auf „Speichern“.

    Hinweis:

    Um Device Central einfach von Illustrator aus zu öffnen (anstatt eine Datei zu erstellen und zu testen), wählen Sie „Datei“ > „Device Central“.

Tipps zum Erstellen von Bildern für mobile Geräte mit Illustrator

Um grafische Inhalte für mobile Geräte zu optimieren, speichern Sie die erstellte Grafik mit Illustrator in einem beliebigen SVG-Format (einschließlich SVG-t, das speziell für mobile Geräte entworfen wurde).

Mithilfe der folgenden Tipps können Sie sicherstellen, dass mit Illustrator erstellte Bilder auf mobilen Geräten gut angezeigt werden.

  • Verwenden Sie für die Erstellung von Inhalten den SVG-Standard. Wird SVG verwendet, um Vektorgrafiken auf mobilen Geräten zu veröffentlichen, führt dies zu einer kleinen Dateigröße, Displayunabhängigkeit, besserer Farbkontrolle, Zoomfähigkeit und bearbeitbarem Text (innerhalb des Quellcodes). Da SVG zudem XML-basiert ist, können Sie interaktive Funktionen in Bilder integrieren, wie beispielsweise Hervorhebungsfunktionen, QuickInfos, Spezialeffekte, Audiosequenzen und Animationen.

  • Arbeiten Sie von Anfang an im endgültigen Format Ihres Zielgeräts (Ihrer Zielgeräte). Auch wenn SVG skalierbar ist, wird mit der Bearbeitung in der richtigen Größe sichergestellt, dass die endgültigen Grafiken hinsichtlich Qualität und Größe für das Zielgerät (die Zielgeräte) optimiert werden.

  • Stellen Sie den Farbmodus in Illustrator auf RGB. SVG wird auf RGB-Rasteranzeigegeräten wie beispielsweise Monitoren angezeigt.

  • Um die Dateigröße zu reduzieren, versuchen Sie die Anzahl der Objekte (einschließlich Gruppen) zu reduzieren oder die Datei weniger komplex zu gestalten (weniger Punkte). Wenn weniger Punkte verwendet werden, wird der Umfang an Textinformation reduziert, der für die Beschreibung der Grafik in der SVG-Datei benötigt wird. Um Punkte zu reduzieren, wählen Sie „Objekt“ > „Pfade“ > „Vereinfachen“ und probieren Sie unterschiedliche Kombinationen aus, um ein Gleichgewicht zwischen Qualität und Punktanzahl zu finden.

  • Verwenden Sie nach Möglichkeit Symbole. Symbole definieren die Vektoren, die ein Objekt einmal anstatt mehrmals beschreiben. Dies ist hilfreich, wenn Grafiken Objekte wie Schaltflächenhintergründe enthalten, die mehrfach verwendet werden.

  • Wenn Grafiken animiert werden, beschränken Sie die Anzahl der verwendeten Objekte und versuchen Sie Objekte nach Möglichkeit wieder zu verwenden, um die Dateigröße zu reduzieren. Wenden Sie Animationen auf Objektgruppen anstatt auf einzelne Objekte an, um Wiederholungen von Codes zu vermeiden.

  • Ziehen Sie die Verwendung von SVGZ, der gzip-komprimierten Version von SVG, in Betracht. Je nach Inhalt kann die Dateigröße durch Komprimierung erheblich reduziert werden. Text kann in der Regel stark komprimiert werden, wohingegen binär codierte Inhalte wie eingebettete Raster (JPEG-, PNG- oder GIF-Dateien) nicht wesentlich komprimiert werden können. SVGZ-Dateien können von jeder Anwendung dekomprimiert werden, die gzip-komprimierte Dateien entpackt. Um SVGZ erfolgreich zu nutzen, überprüfen Sie, ob Ihr mobiles Zielgerät gzip-komprimierte Dateien dekomprimieren kann.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie