Benutzerhandbuch Abbrechen

Empfehlungen zum Erstellen von Webgrafiken

  1. Illustrator-Benutzerhandbuch
  2. Illustrator kennenlernen
    1. Einführung in Illustrator
      1. Neue Funktionen in Illustrator
      2. Häufige Fragen
      3. Systemanforderungen für Illustrator
      4. Illustrator für Apple-Chip
    2. Arbeitsbereich
      1. Arbeitsbereich – Grundlagen
      2. Schneller lernen mit dem Bedienfeld „Entdecken“ in Illustrator
      3. Dokumente erstellen
      4. Symbolleiste
      5. Standardtastaturbefehle
      6. Anpassen von Tastaturbefehlen
      7. Einführung in Zeichenflächen
      8. Zeichenflächen verwalten
      9. Anpassen des Arbeitsbereichs
      10. Eigenschaftenbedienfeld
      11. Festlegen von Voreinstellungen
      12. Touch-Arbeitsbereich
      13. Unterstützung des Microsoft Surface Dial in Illustrator
      14. Rückgängig machen von Änderungen und Verwalten des Design-Verlaufs
      15. Drehen der Ansicht
      16. Lineale, Raster und Hilfslinien
      17. Barrierefreiheit in Illustrator
      18. Abgesicherter Modus
      19. Anzeigen von Bildmaterial
      20. Verwenden der Touch Bar in Illustrator
      21. Dateien und Vorlagen
    3. Werkzeuge in Illustrator
      1. Werkzeuge-Überblick
      2. Auswahl-Werkzeuge
        1. Auswahl
        2. Direktauswahl
        3. Gruppenauswahl
        4. Zauberstab
        5. Lasso
        6. Zeichenfläche
      3. Navigieren-Werkzeuge
        1. Hand
        2. Drehen der Ansicht
        3. Zoom
      4. Malwerkzeuge
        1. Verlauf
        2. Raster
        3. Formerstellung
      5. Textwerkzeuge
        1. Text
        2. Pfadtext
        3. Vertikaler Text
      6. Zeichnen-Werkzeuge
        1. Zeichenstift
        2. Ankerpunkt hinzufügen
        3. Ankerpunkt löschen
        4. Ankerpunkt
        5. Kurvenzeichner
        6. Liniensegment
        7. Rechteck
        8. Abgerundetes Rechteck
        9. Ellipse
        10. Polygon
        11. Stern
        12. Pinsel
        13. Tropfenpinsel
        14. Schraffur
        15. Shaper
        16. Slice
      7. Änderungswerkzeuge
        1. Drehen
        2. Reflektieren
        3. Skalieren
        4. Verbiegen
        5. Breite
        6. Frei transformieren
        7. Pipette
        8. Angleichen
        9. Radiergummi
        10. Schere
        11. Bemaßung
    4. Generative KI (nicht verfügbar in Festlandchina)
      1. Generieren von Vektorgrafiken mit einem Text-Prompt
      2. Neufärben von Grafiken mit einem Text-Prompt
    5. Schnellaktionen
      1. Retro-Text
      2. Neon-leuchtender Text
      3. Nostalgischer Text
      4. Neu färben
      5. Skizze in Vektor umwandeln
  3. Illustrator im Web (Beta)
    1. Überblick über Illustrator im Web (Beta)
    2. Häufig gestellte Fragen zu Illustrator im Web (Beta)
    3. Häufig gestellte Fragen zur Fehlerbehebung
    4. Tastaturbefehle für Illustrator im Web (Beta)
    5. Erstellen und Kombinieren von Formen im Web
    6. Hinzufügen und Bearbeiten von Text im Web
    7. Anwenden von Farben und Farbverläufen im Web
    8. Zeichnen und Bearbeiten von Pfaden im Web
    9. Arbeiten mit Cloud-Dokumenten im Web
    10. Einladen von Mitwirkenden zum Bearbeiten im Web
  4. Illustrator auf dem iPad
    1. Einführung in Illustrator auf dem iPad
      1. Illustrator auf dem iPad – Übersicht
      2. Häufige Fragen zu Illustrator auf dem iPad
      3. Systemanforderungen | Illustrator auf dem iPad
      4. Funktionsumfang von Illustrator auf dem iPad
    2. Arbeitsbereich
      1. Arbeitsbereich von Illustrator auf dem iPad
      2. Touch-Kurzbefehle und Gesten
      3. Tastaturbefehle für Illustrator auf dem iPad
      4. Verwalten von App-Einstellungen
    3. Dokumente
      1. Arbeiten mit Dokumenten in Illustrator auf dem iPad
      2. Importieren von Photoshop- und Fresco-Dokumenten
    4. Auswählen und Anordnen von Objekten
      1. Erstellen von Wiederholungsobjekten
      2. Angleichen von Objekten
    5. Zeichnen
      1. Zeichnen und Bearbeiten von Pfaden
      2. Zeichnen und Bearbeiten von Formen
    6. Text
      1. Arbeiten mit Text und Schriftarten
      2. Erstellen von Text-Designs entlang eines Pfads
      3. Hinzufügen eigener Schriften
    7. Arbeiten mit Bildern
      1. Vektorisieren von Rasterbildern
    8. Farben
      1. Anwenden von Farben und Farbverläufen
  5. Cloud-Dokumente
    1. Grundlagen
      1. Arbeiten mit Illustrator-Cloud-Dokumenten
      2. Freigeben und gemeinsame Bearbeitung von Illustrator-Cloud-Dokumenten
      3. Freigeben von Dokumenten für Reviews
      4. Upgraden des Cloud-Speicherplatzes für Adobe Illustrator
      5. Illustrator-Cloud-Dokumente | Häufige Fragen
    2. Fehlerbehebung
      1. Fehlerbehebung beim Erstellen oder Speichern von Problemen für Illustrator-Cloud-Dokumente
      2. Beheben von Problemen mit Illustrator-Cloud-Dokumenten
  6. Hinzufügen und Bearbeiten von Inhalten
    1. Zeichnung und Bemaßung
      1. Zeichnen – Grundlagen
      2. Bearbeiten von Pfaden
      3. Zeichnen pixelgenauer Grafiken
      4. Zeichnen mit dem Zeichenstift- oder Buntstift-Werkzeug und dem Kurvenzeichner
      5. Zeichnen von einfachen Linien und Formen
      6. Zeichnen rechteckiger und radialer Raster
      7. Zeichnen und Bearbeiten von Blendenflecken
      8. Bildnachzeichner
      9. Vereinfachen von Pfaden
      10. Symbol-Werkzeuge und Symbolsätze
      11. Anpassen von Pfadsegmenten
      12. Zeichnen einer Blume in fünf einfachen Schritten
      13. Erstellen und Bearbeiten eines Perspektivenrasters
      14. Zeichnen und Ändern von Objekten in einem Perspektivenraster
      15. Verwenden von Objekten als Symbole für die mehrfache Verwendung
      16. Zeichnen von an Pixeln ausgerichteten Pfaden für Web-Workflows
      17. Anzeigen und Einzeichnen von Bemaßungen
    2. 3D-Objekte und -Materialien
      1. Grundlagen von 3D‑Effekten in Illustrator
      2. Erstellen von 3D‑Grafiken
      3. Zuordnen von Bildmaterial auf 3D-Objekte
      4. Erstellen von 3D-Text
      5. Erstellen von 3D-Objekten
    3. Farben
      1. Wissenswertes zu Farben
      2. Auswählen von Farben
      3. Verwenden und Erstellen von Farbfeldern
      4. Anpassen von Farben
      5. Verwenden des Bedienfelds „Adobe Color-Themen“
      6. Farbgruppen (Harmonien)
      7. Adobe Color-Themen-Bedienfeld
      8. Bildmaterial neu färben
    4. Malen
      1. Wissenswertes zum Malen
      2. Malen mit Flächen und Konturen
      3. Interaktive Malgruppen
      4. Verläufe
      5. Pinsel
      6. Transparenz und Füllmethoden
      7. Anwenden einer Kontur auf ein Objekt
      8. Erstellen und Bearbeiten von Mustern
      9. Raster
      10. Muster
    5. Auswählen und Anordnen von Objekten
      1. Auswählen von Objekten
      2. Ebenen
      3. Gruppieren und Umwandeln von Objekten
      4. Verschieben, Ausrichten und Verteilen von Objekten
      5. Übereinanderlegen von Objekten    
      6. Sperren, Ausblenden und Löschen von Objekten
      7. Kopieren und Duplizieren von Objekten
      8. Drehen und Spiegeln von Objekten
      9. Objekte verflechten
      10. Erstellen realistischer Grafikmaterial-Mockups
    6. Ändern der Form von Objekten
      1. Freistellen von Bildern
      2. Transformieren von Objekten
      3. Kombinieren von Objekten
      4. Ausschneiden, Aufteilen und Zuschneiden von Objekten
      5. Formraster
      6. Skalieren, Verbiegen und Verzerren von Objekten
      7. Angleichen von Objekten
      8. Verformen mit Hüllen
      9. Ändern der Form von Objekten mit Effekten
      10. Erstellen neuer Formen mit den Shaper- und Formerstellungswerkzeugen
      11. Verwenden von interaktiven Ecken
      12. Verbesserte Workflows zum Ändern von Formen mit Touch-Unterstützung
      13. Bearbeiten von Schnittmasken
      14. Interaktive Formen
      15. Erstellen von Formen mit dem Formerstellungswerkzeug
      16. Globale Bearbeitung
    7. Text
      1. Hinzufügen von Text und Arbeiten mit Textobjekten
      2. Erstellen von Aufzählungslisten und nummerierten Listen
      3. Verwalten des Textbereichs
      4. Schriftarten und Typografie
      5. Konvertieren von Text in Bildern in bearbeitbaren Text
      6. Hinzufügen grundlegender Formatierungen zu Text
      7. Hinzufügen erweiterter Formatierungen zu Text
      8. Importieren und Exportieren von Text
      9. Formatieren von Absätzen
      10. Sonderzeichen
      11. Erstellen von Pfadtext
      12. Zeichen- und Absatzformate
      13. Registerkarten
      14. Suchen nach fehlenden Schriften (Typekit-Workflow)
      15. Arabische und hebräische Schrift
      16. Schriftarten | Häufige Fragen und Tipps zur Fehlerbehebung
      17. Erstellen eines 3D-Texteffekts
      18. Kreative Typografie-Designs
      19. Skalieren und Drehen von Text
      20. Zeilen- und Zeichenabstand
      21. Silbentrennung und Zeilenumbrüche
      22. Rechtschreibungs- und sprachspezifische Wörterbücher
      23. Formatieren von asiatischen Schriftzeichen
      24. Setzer für asiatische Schriften
      25. Erstellen von Textdesigns mit Angleichungsobjekten
      26. Erstellen eines Textposters mithilfe des Bildnachzeichners
    8. Erstellen von Spezialeffekten
      1. Arbeiten mit Effekten
      2. Grafikstile
      3. Aussehen-Attribute
      4. Erstellen von Zeichnungen und Mosaiken
      5. Schlagschatten, Schein und weiche Kanten
      6. Übersicht der Effekte
    9. Webgrafiken
      1. Empfehlungen zum Erstellen von Webgrafiken
      2. Diagramme
      3. SVG
      4. Slices und Imagemaps
  7. Importieren, Exportieren und Speichern
    1. Importieren
      1. Platzieren mehrerer Dateien
      2. Verwalten verknüpfter und eingebetteter Dateien
      3. Verknüpfungsinformationen
      4. Einbettung von Bildern aufheben
      5. Importieren von Bildmaterial aus Photoshop
      6. Importieren von Bitmap-Bildern
      7. Importieren von Adobe PDF-Dateien
      8. Importieren von EPS-, DCS- und AutoCAD-Dateien
    2. Creative Cloud-Bibliotheken in Illustrator 
      1. Creative Cloud-Bibliotheken in Illustrator
    3. Speichern
      1. Speichern von Grafiken
    4. Exportieren
      1. Verwenden von Illustrator-Grafiken in Photoshop
      2. Grafiken exportieren
      3. Sammeln von Elementen und Exportieren in Stapeln
      4. Dateien verpacken
      5. Erstellen von Adobe PDF-Dateien
      6. CSS extrahieren | Illustrator CC
      7. Adobe PDF-Optionen
      8. Bedienfeld „Dokumentinformationen“
  8. Drucken
    1. Vorbereitung für den Druck
      1. Einrichten von Dokumenten zum Drucken
      2. Ändern von Seitenformat und Ausrichtung
      3. Festlegen von Schnittmarken für das Zuschneiden oder Ausrichten
      4. Erste Schritte mit großen Arbeitsflächen
    2. Drucken
      1. Überdrucken
      2. Drucken mit Farbmanagement
      3. Drucken von PostScript-Dateien
      4. Druckvorgaben
      5. Druckermarken und Anschnitt
      6. Drucken und Speichern von transparentem Bildmaterial
      7. Überfüllen
      8. Drucken von Farbseparationen
      9. Drucken von Verläufen, Rastern und Farbübergängen
      10. Weiß überdrucken
  9. Automatisieren von Aufgaben
    1. Zusammenführen von Daten über das Variablenbedienfeld
    2. Automatisieren mit Skripten
    3. Automatisieren mit Aktionen
  10. Fehlerbehebung 
    1. Probleme mit Abstürzen
    2. Wiederherstellen von Dateien nach Absturz
    3. Dateiprobleme
    4. Unterstützte Dateiformate
    5. Probleme mit GPU-Gerätetreibern
    6. Probleme mit Wacom-Geräten
    7. Probleme mit DLL-Dateien
    8. Arbeitsspeicherprobleme
    9. Probleme mit der Voreinstellungendatei
    10. Schriftprobleme
    11. Druckerprobleme
    12. Absturzbericht an Adobe senden
    13. Leistung von Illustrator verbessern

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, um die bestmögliche Web-Anzeige Ihrer Dateien sicherzustellen.

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 umgewandelten Grafik 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 Sie auf 600 % 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 durch ganz 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.

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.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?