«Gedanken teilen: Gestaltung und Dekoration von Titeltexten in Vorschaubildern»

Das diesjährige Thema ist «Gestaltung und Dekoration von Texten».

 

Ohne es zu merken, habe ich bereits über zehn Beiträge in den Clip Studio Tips veröffentlicht! Jedes Mal, abgesehen von der sorgfältigen Erstellung der schrittweisen Erklärungen, verbringe ich die meiste Zeit mit der Gestaltung des Thumbnails, das die Aufmerksamkeit auf sich zieht.

 

Da das Thema der diesmonatigen «TIPS des Monats» die Textdekoration ist, möchte ich in diesem Artikel meine Gedanken zur Gestaltung des Titeltextes in Vorschaubildern teilen, in der Hoffnung, dass diese Erfahrungen Ihnen nützlich sein werden!

 

Da die folgenden Beispiele und Demonstrationen hauptsächlich auf traditionellem Chinesisch sind, ist die automatische Übersetzung wahrscheinlich ungenau (insbesondere in Bezug auf Wortlaute, Satzzeichen usw.). Wir bitten um Ihr Verständnis.

【Grundprinzipien der Gestaltung von Titeltexten】

Bezüglich der Gestaltung von Titeltexten habe ich folgende Prinzipien:

 

• Schlüsselbotschaften vermitteln und hervorheben

• Blickfang sein, aber gleichzeitig die Lesbarkeit des Textes erhalten

• Wenn Text und Bilder in einem Bildschirm kombiniert werden, die Einheitlichkeit des Designstils beibehalten

• Die Verwendung von Bildern im Titel ist nicht zwingend, aber wenn sie verwendet werden, wird erwartet, dass diese Bilder helfen, die Botschaft zu vermitteln.

 

Da ich Text normalerweise in Bilder fülle, versuche ich, die Textdekoration so einfach wie möglich zu halten, um Verwirrung zu vermeiden.

In einigen textzentrierten Designs ist jedoch eine etwas komplexere oder aufwendigere Dekoration ebenfalls akzeptabel.

【Erläuterung verschiedener Titeldesign-Techniken anhand von Beispielen】

In diesem Abschnitt werden Vorschaubilder aus meinen früheren Beiträgen als Beispiele verwendet, um verschiedene Techniken des Titeldesigns zu erläutern.

 

Da in einem einzigen Titeldesign mehr als eine Technik verwendet werden kann, können Beispiele bei der Erläuterung verschiedener Schwerpunkte wiederholt vorkommen. Wir bitten um Ihr Verständnis.

---

🔴Level 1: Schriftfarbvariation

▶Hervorhebung von Textinhalten durch Farbe

Die einfachste Methode ist, verschiedene Farben zu verwenden, um wichtige Inhalte hervorzuheben.

 

Im folgenden Beispiel wurden für «Modellstil» verschiedene Farben verwendet, sodass der Betrachter auf den ersten Blick die Schlüsselwörter erkennt.

Zusätzlich verbessert die Trennung der Begriffe (Perspektive / Modellstil / Illustration) die Leseflüssigkeit.

▶Verwendung einer begrenzten Anzahl von Farben

Für Anfänger ist die Verwendung einer begrenzten Anzahl von Farben immer die sicherste Option.

 

Im folgenden Beispiel wurde die Anzahl der Farben bewusst auf Dunkelblau und Rosa beschränkt.

Nachdem Sie Ihre eigenen Farbgebrauchsgewohnheiten entwickelt haben, ist es natürlich absolut möglich, mehr Farben zu verwenden.

Im folgenden Beispiel wurde passend zum Thema Regenbogenfarben verwendet.

▶Farbwahl von Text und Illustrationen muss übereinstimmen

Zusätzlich müssen die Farben von Text und Illustrationen aufeinander abgestimmt sein.

 

Zum Beispiel ist der Bildteil von «Winterlandschaft» hauptsächlich blau, daher wurden auch für den Text ähnliche Farben gewählt, um eine farbliche Harmonie zu erreichen.

 

Neben der farblichen Harmonie können auch Farbtheorien wie der Farbkontrast angewendet werden. Im englischen Teil von «Nostalgische Szene» wurde Grün verwendet, das der Hauptfarbe (Orange) entgegengesetzt ist.

【💡TIPP】

Nicht gut im Farbabgleich? Kein Problem!

Neben dem Erlernen der Farbtheorie können Sie auch einfach die Funktion Farbverlaufskarte in den Tonwertkorrektur-Ebenen verwenden, um mühelos verschiedene Farbkombinationen zu erhalten und so Ihr Farbgefühl zu entwickeln!

Ausführliche Informationen zur Verwendung der Farbverlaufskarte finden Sie in diesem offiziellen Tutorial.

Geben Sie «gradient» in die Clip Studio Paint Materialbibliothek ein und stellen Sie die Suche auf «Farbverlauf» ein, um Farbverlaufsgruppen zu finden, die von anderen Benutzern geteilt wurden.

Informationen zur Installation von Farbverlaufsgruppen-Materialien finden Sie in diesem offiziellen Tutorial.

---

🟠Level 2: Variation der Schriftgröße, Anordnung

Nachdem Sie die Variationen der Textfarben verstanden haben, ist der nächste Schritt, die Schriftgröße zu variieren, um Designziele zu erreichen.

 

Die intuitivste Idee, wie die Schriftgröße der einzelnen Wörter bestimmt wird, ist natürlich: Je wichtiger das Wort, desto größer.

Dies sollte ohne weitere Erklärung verständlich sein.

Darüber hinaus breche ich den Text bewusst um, anstatt alle Wörter in eine Zeile zu setzen.

Im Allgemeinen benötigen Menschen mehr Zeit zum Lesen, wenn eine Textzeile zu lang ist, verglichen mit mehreren kürzeren Zeilen. Daher kann ein bewusster Zeilenumbruch die Leseeffizienz erhöhen.

Außerdem passe ich bewusst Schriftgröße, Zeichenabstand, Zeilenabstand usw. an, um eine geometrische Form zu bilden.

Position zum Anpassen der Parameter:

Alternativ kann man den Text selbst als Hintergrund verwenden, die Schriftart vergrößern und die Strichstärke erhöhen, um den positiven Raum in negativen Raum umzuwandeln und so ein besseres Designgefühl zu erzeugen.

(Das heißt, die Lücken an den nicht-Strichpositionen zu färben. Dies ist am Wort «圖» (Text auf der linken Seite) leichter zu verstehen: Der Umriss wird zum «negativen Raum» (leerer Raum), und die ursprünglich leeren Stellen im Inneren werden zum gefärbten «positiven Raum».)

---

🟡Level 3: Hinzufügen von Umrissen, Schatten etc. zum Text

Sie können auch mehr Variationen zu den Textfarben hinzufügen, zum Beispiel:

• Randeffekte

• Verlaufsfarben

• Umrandeter Text

• Muster

• Schatten

Diese Effekte helfen dem Text, sich vom Hintergrundbild abzuheben und erhöhen gleichzeitig die Lesbarkeit und heben die Schwerpunkte hervor.

【💡TIPP】

Das Hinzufügen von Rändern und anderen Effekten ist zeitaufwendig? Die Materialbibliothek von Clip Studio Paint enthält viele von Benutzern geteilte Auto-Aktionen für dekorativen Text, die nach der Installation einfach per Knopfdruck verschiedene Effekte liefern!

 

Geben Sie «text» in die Materialbibliothek ein und stellen Sie die Suche auf «Auto-Aktion» ein, um das gewünschte Material auszuwählen.

Zusätzlich können Randeffekte auch einfach durch Auto-Aktionen erzielt werden.

Geben Sie «outline» in die Materialbibliothek ein und stellen Sie die Suche auf «Auto-Aktion» ein, um das passende Material auszuwählen.

Nach dem Herunterladen des Materials finden Sie Informationen zur Installation von Auto-Aktionen in dieser offiziellen Hilfe.

---

🟢Level 4: Hinzufügen von Formen, Rahmen etc. zur Aufnahme von Text

Neben dem Anpassen von Farbe und Größe des Textes selbst können auch zusätzliche Rahmen hinzugefügt werden, um den Text zu platzieren.

 

Manchmal ist es völlig in Ordnung, nur eine einfache geometrische Form zu verwenden!

 

【💡TIPP】

Durch das Hinzufügen von Rändern, Schatten und anderen Variationen zu einfachen geometrischen Formen können Sie ganz einfach einen einfachen, aber nicht langweiligen Textrahmen erstellen! Diese können mit dem Formwerkzeug gezeichnet werden.

Oder Sie können basierend auf dem Titeltext einen Rand hinzufügen und ihn dann glätten, um einen Textrahmen zu erstellen.

【💡TIPP】

Neben diesen einfachen Textrahmen können Sie auch in der Clip Studio Paint Materialbibliothek nach fertigen Rahmen suchen!

 

Geben Sie «Frame» in die Materialbibliothek ein und stellen Sie die Suche auf «Bildmaterial» ein, um das passende Material auszuwählen.

Sie können auch Designelemente als Schlüsselwörter eingeben, wie «Ribbon», «Flower» usw., um die Suche weiter einzugrenzen.

Einige einfache Sprechblasen, die in Comics üblich sind, eignen sich auch gut zur Aufnahme von Text.

Geben Sie «dialog» oder «bubble» in die Materialbibliothek ein, um sie zu finden.

Neben Bildmaterial gibt es auch einige direkt gezeichnete Formwerkzeuge, die sich als Textrahmen eignen.

Suchen Sie nach «Heiligenschein», um verwandtes Material zu finden.

Anwendungsbeispiele (Links: Bildmaterial; Rechts: Formwerkzeug)

---

🔵Level 5: Hinzufügen von dekorativen Symbolen

Darüber hinaus können Sie Textrahmen entwerfen und dekorative Symbole hinzufügen, basierend auf dem Textinhalt oder dem Thema der Illustration.

Und diese können natürlich auch mit Materialien erstellt werden!

【💡TIPP】

Die Position des Symbols kann nicht nur in den Ecken des Textes, sondern auch in der Mitte des Textes liegen.

Der Schlüssel ist, dass das Symbol die Lesbarkeit nicht beeinträchtigt.

 

Was das Größenverhältnis betrifft, würde ich empfehlen, dass das Symbol nicht mehr als ein Drittel des Textbereichs einnimmt.

Wenn das Symbol zu groß ist, kann man auch überlegen, es direkt in einen Rahmen umzuwandeln, um den Text aufzunehmen.

---

🟣Fallanalyse

Basierend auf den oben genannten Designprinzipien wollen wir ein Titeldesign kurz analysieren!

 

Das folgende Vorschaubild stammt aus meinem letzten Beitrag zu kleinen Tricks.

【Textteil】

• Nur drei Farben verwendet: Dunkelblau, Gelb, Rot.

• Bewusst Zeilenumbrüche vorgenommen: (Puppet/Warp), (DO's & / DONT'Ts).

• Text in verschiedenen Größen: Hilfstext „PuppetWarp“ verkleinert.

• Textanordnung zu einer geometrischen Form angepasst.

【Grafischer Teil】

• Textrahmen: Dreieckiges Gittermuster, das bei der Verwendung der Puppet Warp-Funktion erscheint. Um die „Verformung“ hervorzuheben, wurden die vier Ecken nach außen gezogen, um eine Form ähnlich einer konkaven Linse zu erzeugen.

• Dekoratives Symbol 1: Es wurde eine repräsentative „Stecknadel“ verwendet, die mit der Puppet Warp-Funktion in Verbindung steht.

• Dekoratives Symbol 2: Da der Artikel Inhalte zu „Was zu tun ist“ und „Was nicht zu tun ist“ enthielt, wurden Häkchen und Kreuze verwendet, um die vom Titel vermittelte Botschaft zu verstärken.

Beides zusammen ergibt den Titeldesign-Teil!

---

⚠️NG-Punkte (No-Go-Punkte)

Hier möchte ich einige NG-Punkte ergänzen, die oben nicht erwähnt wurden.

 

▶Bitte beschränken Sie die Anzahl der Schriftarten

Neben der Beschränkung der Farbanzahl muss auch die Anzahl der Schriftarten beschränkt werden! Sofern kein Collage-Effekt erzielt werden soll, werden in der Regel nur ein bis zwei Schriftarten im Titel verwendet, nicht mehr als drei.

Zu viele Schriftarten führen zu Verwirrung und Lesekomfortproblemen. Bitte sehen Sie sich die folgenden Beispiele an:

▶Bitte beschränken Sie die Anzahl der Titelzeichen

Einer der Zwecke eines Titels in einem Vorschaubild ist es, Aufmerksamkeit zu erregen.

Ein zu langer Text macht den Schwerpunkt unklar, erhöht die benötigte Lesezeit und schwächt die Wirkung des Vorschaubildes auf den Leser.

 

Bitte sehen Sie sich das folgende Beispiel an, das Vorschaubild aus meinem Tipps-Beitrag von vor über einem halben Jahr.

Damals wollte ich, dass mehr Leute das Vorschaubild verstehen, und bestand hartnäckig darauf, sowohl die chinesische als auch die englische Version des gesamten Titels gleichzeitig im Bild zu platzieren. Dadurch wurden nicht nur die Schwerpunkte nicht hervorgehoben, sondern das Bild wurde auch ziemlich langweilig… Ist das etwa ein Folientitelblatt für einen Schulbericht!?

 

Zudem war die Farbwahl nicht gut genug.

Rosa und Hellblau, dazu Rot, Grün, Gelb… Es wurden zu viele Farben verwendet. Zum Glück gab es weniger Elemente auf dem Bildschirm, sodass es gerade noch erträglich aussah.

 

Obwohl es mein eigenes Werk ist, muss ich leider sagen, dass dieses Vorschaubild wirklich nicht ansprechend genug ist 😰

 

Deshalb! Im folgenden Abschnitt werde ich zeigen, wie ich das obige Vorschaubild neu gestalte, um diesen Artikel abzuschließen!

---

【Praktisches Design von Titeltexten】

Nun zum praktischen Teil!

 

Hier werden nicht nur meine Überlegungen zur Neugestaltung des Vorschaubildes und seines Titeltextes festgehalten, sondern auch die dabei verwendeten CSP-Funktionen vorgestellt. Die hier vorgestellten Funktionen sind jedoch relativ grundlegend; Leser, die bereits Erfahrung mit der CSP-Bedienung haben, können diesen Teil gerne überspringen.

---

1. Titeltext festlegen

 

Zuerst muss natürlich der Titel festgelegt werden, d.h. die Anzahl der Titelwörter reduzieren.

Das Thema des Artikels ist «Wie man den Protagonisten in einer Komposition mit mehreren Personen hervorhebt». Die Schlüsselwörter sind «Komposition mit mehreren Personen» und «Protagonisten hervorheben», daher werde ich den Titel vorläufig als «Hervorheben des Protagonisten in einer Gruppenkomposition» festlegen.

 

Die unterstützende englische Übersetzung wird vorläufig «Group composition» sein.

(Tatsächlich müssten bei Englisch oder anderen westeuropäischen Sprachen als Hauptsprache wahrscheinlich noch mehr Wörter gestrichen werden…)

 

2. Hintergrundbild vorbereiten

 

Normalerweise verwende ich Illustrationen aus dem Artikel als Hintergrund für das Cover.

Im Gegensatz zu anderen Artikeln konzentriert sich dieser TIP jedoch nur auf «Komposition», sodass keine fertigen, hochwertigen Illustrationen zur Verfügung standen.

Zum Glück wurde in diesem Artikel die Verwendung von CSP 3D-Figuren vorgestellt, daher ist die Erstellung eines Hintergrundbildes mit 3D-Figuren eine gute Wahl!

 

Im Folgenden habe ich die im Artikel vorgestellte Komposition mit 3D-Figuren nachgebildet:

3. Visuelle Darstellungen, Bilder, Symbole usw. brainstormen, die mit dem Thema zusammenhängen

 

In diesem Schritt können Sie basierend auf den Schlüsselwörtern verschiedene Bilder brainstormen, die zum Thema passen.

 

Zum Beispiel –

• «Hervorheben»: Könnte dies durch Farbkontrast hervorgehoben werden? Oder könnte es die Bedeutung des Fokussierens durch den Fokusrahmen einer Kamera vermitteln?

• «Protagonist»: Könnte eine Krone als Symbol hinzugefügt werden? Könnte ein Heiligenschein hinter dem Kopf hinzugefügt werden, um den «Protagonisten-Heiligenschein» darzustellen? Oder ein Scheinwerfermuster oder -effekt?

• «Mehrere Personen»: Könnte durch wiederholte Objekte ausgedrückt werden?

• «Komposition»: Was kann Komposition darstellen? Neuner-Gitter (Drittel-Regel)? Goldener Schnitt-Dreieck?

4. Titeltext gestalten

 

Basierend auf den Bildern aus dem vorherigen Schritt beginnen Sie mit der Gestaltung des Titeltextes.

Im Folgenden ist mein Denkprozess während des Designs dokumentiert:

 

1. Beginn mit dem Text: Im Titeltext ist «Protagonist hervorheben» wichtiger als «Komposition mit mehreren Personen», daher habe ich die Schriftgröße des ersteren größer als die des letzteren angepasst.

 

2. Den Satz «in einer Komposition mit mehreren Personen» habe ich farblich abgesetzt, um «Komposition mit mehreren Personen» hervorzuheben.

 

🎨Farben: Ich habe beschlossen, zunächst das Rosa, Hellgrün und Dunkelblau des alten Designs beizubehalten. Diese können in späteren Schritten jederzeit geändert werden.

🔧Meine persönliche Angewohnheit ist es, zuerst eine neue Ebene hinzuzufügen und sie als Schnittmaske zum Färben einzurichten. Erst nachdem die Farbe endgültig festgelegt wurde, verwende ich das Textwerkzeug, um die Farbe zu ändern. Dies ermöglicht mehr Flexibilität bei Änderungen zwischendurch. Dieser Teil kann jedoch an Ihre Gewohnheiten angepasst werden.

3. Bildliche Darstellung überlegen: Der «Fokusrahmen einer Kamera» ist nicht nur einfach in der Form, sondern vermittelt auch stark die Botschaft «Protagonisten fokussieren», daher habe ich versucht, ihn bei diesem Design prioritär anzuwenden.

 

4. Obwohl das Hinzufügen des Fokusrahmens visuell ansprechend war, betonte es unbeabsichtigt die unklaren Wörter «出主» (heraustreten). Daher musste dies angepasst werden.

Da der Fokusrahmen quadratisch ist, habe ich den Text «凸出主角» (Protagonisten hervorheben) in zwei Zeilen (quadratisch) geteilt und eingefügt. Die Ausrichtungsfunktion wurde verwendet, um Text und Bild zu zentrieren.

5. Der Satz «in einer Komposition mit mehreren Personen» schien das Gleichgewicht ein wenig zu stören, egal wo er platziert wurde. Daher habe ich versucht, die Methode der «Wiederholung» anzuwenden, indem ich diesen Satz viermal kopierte und um den Fokusrahmen herum platzierte.

 

🔧Zur besseren Lesbarkeit des Demonstrationsbildes wurde hier diese Auto-Aktion verwendet, um einen Textrahmen hinzuzufügen.

🔧Text-, Farb- und Rahmenebenen kopieren und einfügen und die Transformationsfunktion (Strg+T) verwenden, während die [Shift]-Taste gedrückt gehalten wird, um sie in den passenden Winkel zu drehen.

🔧Mit der Ausrichtungsfunktion ausrichten.

6. Der Zwischenraum zwischen den vier Sätzen «in einer Komposition mit mehreren Personen» ist etwas störend. Ich möchte ihn füllen, um ein Gefühl der Stabilität zu schaffen.

 

7. Ich habe versucht, den Zeichenabstand der Sätze anzupassen, aber das Ergebnis sah nicht gut aus. Daher habe ich ein weiteres Quadrat hinzugefügt, um die vier Sätze miteinander zu verbinden.

8. Insgesamt war es immer noch etwas eintönig, daher beschloss ich, einen hellgrünen Hintergrund, einen weißen Rahmen und einen rosa Außenrahmen hinzuzufügen.

 

9. In den vier Ecken wurden weiße Kreuze hinzugefügt, die nicht auffällig sind, aber dem Leser bei genauerem Hinsehen ein Gefühl für Details vermitteln.

10. Da das Ganze quadratisch war, wirkte es immer noch etwas zu statisch und eintönig. Deshalb habe ich in der oberen linken Ecke ein Kronensymbol hinzugefügt, was zum einen das Thema aufgreift und zum anderen die quadratische Form durchbricht.

 

Der Haupttiteltext ist fertiggestellt!

Danach wird der Titeltext in das Hintergrundbild eingefügt.

Da sich dieser Beitrag nur auf das Design des Titeltextes konzentriert, wird der Gedankengang in diesem Abschnitt etwas ausgelassen.

11. Basierend auf der aktuellen Komposition wurde die Position des englischen Hilfstextes festgelegt.

Da sich in der oberen linken Ecke des Titelmotivs ein Kronensymbol befand, platzierte ich den englischen Text in der unteren rechten Ecke des Motivs, um das Bild auszugleichen.

 

💭📝Das Hinzufügen von Hilfstext oder kleinen Symbolen erst nach der Kombination mit dem Bild kann eine flexiblere Anpassung der Gesamtkomposition ermöglichen.

Zum Beispiel im Vorschaubild von «Puppet Warp»: Da sich der Titeltext auf der rechten Seite des Bildes befand, waren die kleinen Symbole alle am rechten Rand platziert. Im Gegensatz dazu wäre die Position nicht so, wenn man nur den Titeltext betrachtet hätte.

 

12. Den englischen Text kursiv gesetzt, um die Steifheit des Bildes zu reduzieren.

Fügen Sie weitere Fokusrahmenmuster und Drittel-Regel-Hilfslinien hinzu, um das Bild zu bereichern.

Fertig!

---

【Fazit】

Vielen Dank, dass Sie bis hierher gelesen haben!

 

Obwohl der Titel dieses Artikels über dekorative Texte für «Vorschaubilder» handelt, können Sie diese Techniken definitiv auch für andere Kreationen anwenden, wie Plakate, Grußkarten oder sogar Charakterillustrationen, um Ihren Texten mehr Originalität zu verleihen!

 

Darüber hinaus habe ich in meinen früheren CLIP STUDIO TIPS detailliertere Erklärungen zu einigen Textverarbeitungsvorgängen, einschließlich Vektorebenen, Textverformung und weiteren individuellen Materialempfehlungen gegeben. Sie sind herzlich eingeladen, diese zu besuchen:

Dieser Artikel sind lediglich einige meiner Gedanken und Ideen, es gibt immer noch Raum für Verbesserungen. Denken Sie daran, dass es definitiv noch viele kreativere Wege gibt, Textdekorationen zu erstellen!

 

Wie fanden Sie diesen Beitrag?

Hinterlassen Sie gerne einen Kommentar und lassen Sie es mich wissen! Ich hoffe, dieser Inhalt war hilfreich für Sie.