Hinterlasse einen bleibenden Eindruck. Wähle eine hochwertige Schrift aus, wende einen interessanten Schriftsatz an, und nutze eine einfache Technik zum Optimieren der Farbgebung.
Computer-Monitor, auf dem eine Website mit der großen Textüberschrift THIS MUST BE THE PLACE angezeigt wird.

Was du benötigst

Diese Beispieldatei enthält Elemente aus Adobe Stock, die nur zu Übungszwecken verwendet werden dürfen. In der ReadMe-Datei in diesem Ordner findest du die Bedingungen für die Verwendung dieser Datei. Adobe Stock bietet Zugriff auf mehrere Millionen lizenzfreie Bilder und Videos für gewerbliche Zwecke. Teste Adobe Stock einen Monat lang kostenlos – 10 Bilder gratis inklusive.

Neues Dokument anlegen.

Öffne Adobe Illustrator, und klicke auf der Startseite auf die Schaltfläche „Neu erstellen“.

Wähle im Fenster „Neues Dokument“ oben die Kategorie „Web“, und gib die gewünschten Abmessungen ein. Da wir eine Blog-Überschrift erstellen, verwenden wir eine Breite von 1040 Pixel und eine Höhe von 400 Pixel.

Klicke auf „Erstellen“. 

Fenster „Neues Dokument“. Im Bereich „Web“ sind die Abmessungen für die Breite auf „1040 px“ und die Höhe auf „400 px“ gesetzt.

Hintergrundbild platzieren.

Zuerst fügst du ein Hintergrundbild hinzu. Wähle eine einfache Struktur oder ein Bild mit genügend Platz für Text.

Klicke auf „Datei > Platzieren“, und wähle ein eigenes Foto oder das bereitgestellte Beispielbild aus. Klicke auf „Platzieren“.

Während das Bild an deinen Cursor angeheftet ist, klicke und ziehe, bis sich das Foto über die gesamte Zeichenfläche erstreckt. Keine Sorge, wenn das platzierte Bild die Ränder der Zeichenfläche überschreitet: Wir korrigieren dies im letzten Schritt.

Wenn du das Bild nach dem Platzieren neu positionieren möchtest, ziehe bei aktiviertem Auswahl-Werkzeug in der Mitte des Fotos.

Per Klicken und Ziehen auf der Zeichenfläche die Größe eines platzierten Bilds festlegen

Titel hinzufügen und formatieren.

Wähle das Text-Werkzeug aus, und klicke auf eine beliebige Stelle auf der Zeichenfläche, um eine Einfügemarke hinzuzufügen. Der Standardplatzhaltertext („Lorem ipsum“) wird angezeigt.

Wähle im Bedienfeld „Eigenschaften“ für „Zeichen“ einen hohen Schriftgrad aus (zum Beispiel 60 pt). Klicke für „Absatz“ auf das Symbol „Zentrieren“.

Ersetze den Standardtext durch eigenen Text. Drücke die Esc-Taste, um das Text-Werkzeug zu deaktivieren und das Textobjekt automatisch auszuwählen.

Während der Text mit dem Text-Werkzeug ausgewählt ist, wird im Bedienfeld „Eigenschaften“ für „Zeichen“ der Schriftgrad „60 pt“ ausgewählt.

Klicke im Bedienfeld „Eigenschaften“ auf das Dropdown-Menü für die Schriftfamilie. Wähle eine installierte Schrift aus, oder füge eine neue aus Adobe Fonts hinzu. Klicke auf „Mehr suchen“, und scrolle in der Liste, um dir alle für Creative Cloud-Abonnenten verfügbaren Adobe Fonts-Schriften anzusehen.

Wähle die Schrift „Raleway Bold“ aus, und aktiviere sie durch einen Klick auf das Wolkensymbol.

Wähle im Schriftenmenü „Raleway Bold“ aus.

Liste mit Schriften im Bedienfeld „Eigenschaften“ unter „Zeichen“. Die Schaltfläche „Mehr suchen“ für den Zugriff auf weitere Schriften aus Adobe Fonts ist hervorgehoben.

Den Titel farbig gestalten.

Du kannst ein Farbschema erstellen, indem du eine Farbe aus dem Hintergrundbild übernimmst.

Wähle auf der Werkzeugleiste das Pipette-Werkzeug aus. Klicke auf eine beliebige Stelle im Bild, um eine Farbe aufzunehmen und auf den ausgewählten Text anzuwenden.

Um die aufgenommene Farbe zu bearbeiten oder eine eigene Farbe auszuwählen, doppelklicke im unteren Bereich der Werkzeugleiste auf das Feld für Flächenfarbe, und wähle im Farbwähler einen anderen Farbton aus.

Beispielgrafik mit hervorgehobenem Pipette-Werkzeug und hervorgehobenem Feld für Flächenfarbe auf der Werkzeugleiste, mit dem eine andere Textfarbe ausgewählt werden kann

Dem Titel durch Typografie das gewisse Etwas verleihen.

Dein Titel nimmt allmählich Gestalt an. Jetzt kannst du mit den Buchstabenformen experimentieren. Klicke im Abschnitt „Zeichen“ auf die Schaltfläche „Mehr Optionen“ (drei Punkte).

Vergrößere den Abstand zwischen den Buchstaben, um den Titel lockerer und eleganter zu gestalten. Oder wende einen negativen Abstand an. Damit erhält der Text einen modernen Look. Experimentiere im Menü zum Einstellen der Laufweite mit Werten wie 50, -25 und -10.

Teste auch, wie der Titel in Großbuchstaben wirkt. Klicke hierfür einfach auf das entsprechende Symbol.

Die Textdarstellung verändern, indem im Bedienfeld „Zeichen“ die Laufweite auf „50“ gesetzt wird und dann das Symbol „Großbuchstaben“ gewählt wird.

Grafischen Effekt hinzufügen.

In diesem Schritt fügst du einen Effekt hinzu, damit der Titel plastischer wirkt.

Wähle bei ausgewähltem Text „Effekt > (Illustrator-Effekte) Stilisierungsfilter > Schlagschatten“. Experimentiere mit verschiedenen Modi und mit den Einstellungen für Deckkraft, Versatz, Weichzeichnen oder Farbe. Aktiviere „Vorschau“, um dir die Effekte live vorab anzusehen, und klicke dann auf „OK“.

Für den hier abgebildeten Schlagschatten mit scharfen Kanten haben wir diese Einstellungen verwendet:

Modus: Multiplizieren

Deckkraft: 50 %

x- und y-Versatz: 4 px

Weichzeichnen: 0 px

Fenster „Schlagschatten“ mit den Optionen für Modus, Deckkraft, x-Versatz, y-Versatz, Weichzeichnen und Farbe

Grafik für die Online-Anzeige exportieren.

Speichere nun dein Titel-Design in einem Web-Format.

Wähle „Datei > Exportieren > Für Bildschirme exportieren“. Lege einen Speicherort für die Datei fest, und wähle für eine optimale Qualität die Einstellung „JPG 100“. Klicke auf „Zeichenfläche exportieren“.

Im Dialogfeld „Für Bildschirme exportieren“ den Speicherort für den Export und die Option „JPG 100“ auswählen

Designe mit Grafiken und Typografie einen Web-Titel, mit dem dir die Aufmerksamkeit deiner Zielgruppe sicher ist.

Speichern Sie Ihr Titel-Design in einem Web-Format.

Wählen Sie „Datei > Für Web speichern“. 

Wählen Sie im Menü „Vorgabe“ die Option „JPEG Hoch“. Aktivieren Sie das Kontrollkästchen „Ganze Zeichenfläche exportieren“. Mit dieser Option werden die Bildbereiche entfernt, die über den Rand hinausgehen.

Optional: Wählen Sie im Pulldown-Menü „Glätten“ die Option „Schrift optimiert“, damit der Titel mit weichen Kanten angezeigt wird.

Klicken Sie auf „Speichern“.

09/02/2020

Adobe Stock-Anbieterin: Alisa, bongkarn

War diese Seite hilfreich?