« Partage d'idées : Concevez et décorez le texte du titre sur l'image d'aperçu »

Le thème de cette édition est « Conception et décoration de texte ».

 

En un rien de temps, j'ai soumis plus de dix articles à Clip Studio Tips ! Outre la rédaction minutieuse d'explications étape par étape, la création de vignettes de soumission attrayantes est l'étape la plus chronophage.

 

Le thème des « CONSEILS DU MOIS » de ce mois étant la décoration de texte, je souhaite partager dans cet article mes réflexions sur la conception de titres dans les images d'aperçu. J'espère que ces conseils vous seront utiles !

 

Les exemples et démonstrations suivants étant principalement en chinois traditionnel, la traduction automatique est susceptible d'être inexacte (notamment au niveau des mots, de la position des phrases, etc.). Veuillez m'en excuser.

【Principes généraux de conception du texte du titre】

Concernant la conception des titres, je m'appuie sur les principes suivants :

 

• Démontrer et mettre en valeur les points clés

• Un texte accrocheur et lisible

• Lorsque vous combinez du texte et des images sur un même écran, veillez à la cohérence du style

• L'utilisation d'images dans les titres est facultative, mais si vous en utilisez, elles contribueront à la transmission du message.

 

Par ailleurs, comme j'ajoute généralement du texte à des images contenant de nombreuses images, j'essaie de simplifier au maximum les décorations afin d'éviter tout encombrement.

Cependant, dans certaines conceptions où le texte constitue le corps principal, il est possible d'utiliser des motifs décoratifs légèrement plus complexes ou sophistiqués.

【Expliquez les différentes techniques de conception de titres avec des exemples】

Dans cette section, j'utiliserai les images d'aperçu de mes précédentes soumissions comme exemples pour illustrer différentes techniques de création de titres.

 

Plusieurs techniques pouvant être utilisées pour un même titre, les exemples peuvent être répétés pour expliquer différents points. Veuillez m'en excuser.

---

🔴 Niveau 1 : Changement de couleur de police

▶Utilisez la couleur pour mettre en évidence le contenu du texte

Le plus simple est d'utiliser différentes couleurs pour mettre en évidence les points clés.

 

Dans l'exemple ci-dessous, « style de modèle » utilise différentes couleurs, ce qui rend le mot-clé visible au premier coup d'œil.

De plus, distinguer chaque mot de cette manière (perspective tridimensionnelle/style de modèle/illustration) peut également améliorer la fluidité de la lecture.

▶Utilisez un nombre limité de couleurs

Pour les débutants, utiliser un nombre limité de couleurs est toujours l'option la plus sûre.

 

Dans l'exemple suivant, le nombre de couleurs est volontairement limité au bleu foncé et au rose.

Bien sûr, une fois que vous avez défini vos propres habitudes d'utilisation des couleurs, il est tout à fait possible d'en utiliser davantage.

Dans l'exemple suivant, les couleurs de l'arc-en-ciel sont utilisées pour correspondre au thème.

▶Le choix des couleurs du texte et des illustrations doit être coordonné

De plus, les couleurs du texte et des illustrations doivent être coordonnées.

 

Par exemple, l'image de « Scène de neige hivernale » est principalement bleue ; le texte choisit donc une couleur similaire pour obtenir une harmonie des couleurs.

 

Outre l'harmonie des tons, vous pouvez également utiliser des principes d'harmonisation des couleurs tels que le contraste des tons. La partie anglaise de « Scènes nostalgiques » utilise le vert, qui est l'opposé de la partie principale (orange).

【 💡 POINT】

Vous n'êtes pas doué pour la correspondance des couleurs ? Pas de problème !

En plus d'apprendre les principes de la couleur, vous pouvez aussi utiliser la fonction [Mappage de dégradé] du [Calque de compensation des tons] pour obtenir facilement diverses combinaisons de couleurs et développer votre sens des couleurs !

Pour une utilisation détaillée de la correction de dégradé, veuillez vous référer à ce tutoriel officiel.

Dans la bibliothèque Clip Studio Paint, saisissez « dégradé » et définissez la recherche sur « dégradé » pour rechercher des ensembles de couleurs de dégradé partagés par d'autres utilisateurs.

Pour savoir comment installer les matériaux du groupe de dégradés, veuillez vous référer à ce tutoriel officiel.

---

🟠Niveau 2 : Modification de la taille de la police, disposition

Après avoir compris les changements de couleur du texte, l'étape suivante consiste à utiliser les modifications de taille de police pour atteindre les objectifs de conception.

 

Pour déterminer la taille de police de chaque mot, l'idée la plus intuitive est bien sûr que plus le mot est important, plus il doit être grand.

Je pense que ce point est compréhensible sans autre explication.

De plus, je découperai volontairement le texte en lignes plutôt que de le placer sur une seule ligne.

En général, une ligne de texte trop longue est plus longue à lire qu'une ligne de texte plus courte. Par conséquent, des sauts de ligne délibérés peuvent améliorer l'efficacité de la lecture.

De plus, j'ajusterai délibérément la taille du texte, l'espacement des caractères, l'espacement des lignes, etc. pour former une forme géométrique.

Ajustez l'emplacement des paramètres :

De plus, vous pouvez également utiliser le texte lui-même comme arrière-plan, agrandir la police et épaissir les traits, transformer l'espace positif en espace négatif et renforcer l'impression de design.

(C'est-à-dire colorier les espaces qui ne correspondent pas à des traits. Ceci est plus facile à comprendre dans le mot « 图 » (le mot de gauche), où le cadre extérieur devient l'« espace négatif » (espace vide), et l'espace vide à l'intérieur devient l'« espace positif » coloré.)

---

🟡Niveau 3 : Ajouter des bordures, des ombres, etc. au texte

Vous pouvez également ajouter des variations de couleur au texte, par exemple :

• Effets de bordure

• Dégradé de couleur

• Encadrer les mots

• Motif

• Ombre

Ces effets permettent au texte de se démarquer des images d'arrière-plan tout en améliorant la lisibilité et la mise en valeur.

【 💡 POINT】

L'ajout d'effets comme les bordures prend-il du temps ? La bibliothèque de matériaux de Clip Studio Paint propose de nombreuses actions automatiques de texte décoratif partagées par les utilisateurs et téléchargeables. Après l'installation, vous pouvez facilement obtenir différents effets en un clic !

 

Saisissez « texte » dans la bibliothèque de matériaux et définissez la recherche sur « action automatique », puis sélectionnez le matériau souhaité.

De plus, des effets de bord peuvent être facilement obtenus grâce à des actions automatiques.

 

Saisissez « contour » dans la bibliothèque de matériaux et définissez la recherche sur « action automatique ». Vous pourrez alors choisir le matériau qui vous convient.

Après avoir téléchargé le matériel, veuillez vous référer à l'aide officielle pour la méthode d'installation des actions automatiques cet article.

---

🟢Niveau 4 : Ajoutez des formes et des cadres pouvant contenir du texte

En plus d'ajuster la couleur et la taille du texte, vous pouvez également ajouter des cadres supplémentaires pour le placer.

 

Parfois, un simple motif géométrique suffit !

 

【 💡 POINT】

En ajoutant des bordures, des ombres et d'autres modifications à des motifs géométriques simples, vous pouvez facilement créer une zone de texte simple et originale ! Vous pouvez tout dessiner à l'aide des outils de forme.

Ou vous pouvez ajouter des bords, puis les lisser en fonction du texte du titre pour en faire une zone de texte.

【 💡 POINT】

En plus de ces simples cadres de texte, vous pouvez également rechercher des cadres prêts à l'emploi dans la bibliothèque de Clip Studio Paint !

 

Dans la bibliothèque de matériaux, saisissez « Cadre » et définissez la recherche sur « Matériau d'image » pour sélectionner le matériau qui vous convient.

Vous pouvez également saisir des éléments de design comme mots-clés, tels que « Ruban », « Fleur », etc. pour affiner votre recherche.

Certaines bulles de dialogue simples, souvent utilisées dans les bandes dessinées, peuvent également servir à insérer du texte.

 

Saisissez simplement « dialogue » ou « bulle » dans la bibliothèque pour les trouver.

Outre les images, il existe également des outils de dessin de formes directement adaptés aux cadres de texte.

 

Recherchez « 后光 » pour trouver des ressources associées.

Exemples d'utilisation (à gauche : matériel d'image ; à droite : outil de forme)

---

🔵 Niveau 5 : Ajouter des icônes décoratives

Vous pouvez également concevoir des cadres de texte et ajouter des icônes décoratives en fonction du contenu du texte ou du thème de l'illustration.

Bien sûr, ces éléments peuvent également être réalisés avec des matériaux !

【 💡 POINT】

L'icône peut être placée dans un coin ou au milieu du texte.

L'important est que le graphisme ne gêne pas la lecture.

 

En termes de taille, je recommande que l'icône ne dépasse pas un tiers du texte.

Si l'icône est trop grande, vous pouvez également envisager de la transformer en cadre pour contenir le texte.

---

🟣Étude de cas

En nous basant sur les principes de conception ci-dessus, analysons brièvement l'un des titres !

 

L'image d'aperçu suivante est tirée de ma précédente contribution.

【Partie texte】

• Seules trois couleurs sont utilisées : bleu foncé, jaune et rouge.

• Sauts de ligne volontaires : (marionnette/transformation), (À FAIRE/À NE PAS FAIRE).

• Taille du texte : Réduisez la taille du texte auxiliaire « PuppetWarp ».

• Le texte est disposé selon une forme géométrique.

【Motif】

• Cadre de texte : Grille triangulaire apparaissant lors de l'utilisation de la fonction Déformation de la marionnette. De plus, afin de mettre en évidence la déformation, les quatre coins sont étirés vers l'extérieur pour créer une forme semblable à une lentille concave.

• Icône décorative 1 : L'épingle représentative de la fonction de transformation de la marionnette est utilisée.

• Icône décorative 2 : L'article traitant des choses à faire et à ne pas faire, des coches et des croix sont utilisées pour renforcer le message du titre.

En mettant les deux ensemble, nous avons terminé la partie conception du titre !

---

⚠️Projet NG

J'aimerais ici ajouter quelques points importants non mentionnés ci-dessus.

 

▶Veuillez limiter le nombre de polices

En plus de limiter le nombre de couleurs, il est également important de limiter le nombre de polices ! À moins de vouloir créer un effet collage, en règle générale, vous n'utiliserez qu'une ou deux polices dans votre titre, et pas plus de trois.

Un excès de polices peut entraîner confusion et inconfort lors de la lecture. Voir l'exemple suivant :

▶Veuillez limiter le nombre de mots dans le titre

L'un des objectifs du titre sur une image d'aperçu est d'attirer l'attention.

Un texte trop long rendra les points clés flous et augmentera le temps de lecture, rendant l'aperçu moins efficace pour les lecteurs.

 

L'exemple suivant illustre les conseils que j'ai partagés il y a six mois.

À l'époque, j'espérais que l'aperçu serait plus compréhensible, j'ai donc insisté pour y inclure les versions chinoise et anglaise du titre. De cette façon, non seulement les points clés ne sont pas mis en valeur, mais l'image devient aussi assez terne… Est-ce la couverture d'un rapport scolaire ?

 

De plus, le choix des couleurs est insuffisant.

Rose, bleu pâle, rouge, vert, jaune… trop de couleurs sont utilisées. Heureusement, il y a moins d'éléments à l'écran, ce qui n'est pas éblouissant.

 

Bien qu'il s'agisse de mon propre travail, je suis désolé de dire que ce n'est pas assez attrayant comme aperçu 😰

 

Alors ! Dans la section suivante, je vous montrerai comment repenser l'aperçu ci-dessus pour conclure cet article !

---

[Conception pratique du texte du titre]

Passons maintenant à la partie combat à proprement parler !

 

En plus de présenter mes idées pour la refonte de l'image d'aperçu et de son titre, je présenterai également la fonction CSP utilisée. Cependant, les fonctions présentées ici sont relativement basiques. Les lecteurs ayant une certaine expérience des opérations CSP sont invités à passer cette étape.

---

1. Choisir le texte du titre

 

Tout d'abord, il faut bien sûr choisir un titre, autrement dit, réduire le nombre de mots.

Le thème de cet article est « Comment mettre en valeur le protagoniste dans une composition à plusieurs personnes ». Les mots clés étant « composition à plusieurs personnes » et « mettre en valeur le protagoniste », je l'intitulerai provisoirement « Mettre en valeur le protagoniste dans une composition à plusieurs personnes ».

 

La traduction auxiliaire anglaise est provisoirement définie comme « Composition de groupe ».

(En fait, si l'anglais ou d'autres langues d'Europe occidentale sont utilisées comme langue principale, il faudra peut-être supprimer des mots…)

 

2. Préparer l'image d'arrière-plan

 

J'utilise généralement les illustrations de l'article comme arrière-plan pour la couverture.

Cependant, contrairement à d'autres articles, celui-ci se concentre uniquement sur la « composition » et, par conséquent, aucune illustration de haute qualité n'est disponible.

Heureusement, comme l'article présente l'utilisation des marionnettes 3D CSP, utiliser des marionnettes 3D pour créer des images d'arrière-plan est une bonne option ! Ci-dessous, j'ai reproduit la composition présentée dans l'article avec des poupées 3D :

3. Réfléchissez à des expressions visuelles, des images, des diagrammes, etc. en lien avec le sujet

 

À cette étape, vous pouvez réfléchir à différentes images qui pourraient correspondre au thème en fonction des mots-clés.

 

Par exemple :

• « Prominent » : Pouvez-vous utiliser le contraste des couleurs pour le mettre en valeur ? Le cadre de mise au point de l'appareil photo peut-il également servir à exprimer la mise au point ?

• « Protagoniste » : Peut-on ajouter une couronne comme icône ? Peut-on également ajouter un halo derrière la tête pour exprimer le « halo du protagoniste » ? Ou ajouter un motif ou un effet de projecteur ?

• « Plusieurs personnes » : Peut-on utiliser des objets répétés pour exprimer plusieurs personnes ?

• « Composition » : Qu'est-ce qui peut représenter une composition ? Le rapport de grille à neuf (règle des tiers) ? Le triangle d'or ?

4. Concevoir le texte du titre

 

À partir de l'image obtenue à l'étape précédente, commencez à concevoir le texte du titre.

Voici un résumé de ma réflexion :

 

1. Commencez par le texte : dans le texte du titre, « mettre en valeur le protagoniste » est plus important que « composition à plusieurs », j'ai donc ajusté la taille de police du premier pour qu'elle soit plus grande que celle du second.

 

2. Dans les mots « dans une composition à plusieurs », j'ai utilisé de la couleur pour distinguer la « composition à plusieurs ».

 

🎨 Concernant les couleurs, j'ai conservé le rose, le vert pâle et le bleu foncé de l'ancien design. Vous pourrez les modifier à tout moment lors des étapes ultérieures.

🔧 J'ajoute généralement un nouveau calque et le définit comme calque d'écrêtage avant la mise en couleur. N'utilisez l'outil Texte pour modifier la couleur qu'une fois la couleur finalisée. Cela vous offrira plus de flexibilité pour les modifications en cours de route. Cependant, cette étape dépend de vos habitudes.

3. Pensez à l'image : le cadre de mise au point dans l'appareil photo est non seulement simple par sa forme, mais il transmet aussi fortement le message de « mise au point sur le protagoniste », c'est pourquoi je lui donnerai la priorité dans cette conception.

 

4. Bien que l'effet visuel soit satisfaisant après l'ajout du cadre de mise au point, le sens flou du mot « hors du corps principal » est mis en évidence de manière dissimulée, ce qui nécessite un ajustement.

Le cadre de mise au point étant un carré, divisez le texte « Mettre en valeur le protagoniste » en deux lignes (carrés) et insérez-les. La fonction d'alignement permet de centrer le texte et les images.

5. « Dans une composition à plusieurs personnes », cette phrase perturbe légèrement l'équilibre, quel que soit son emplacement. J'ai donc essayé d'utiliser la technique de la « répétition », en copiant cette phrase en quatre phrases et en les plaçant autour du cadre de mise au point.

 

🔧 Afin d'améliorer la lisibilité de l'image de démonstration, cette action automatique est utilisée ici pour ajouter une bordure de texte.

🔧 Copiez et collez les calques de texte, de couleur et de bordure, puis utilisez la fonction Transformer (Ctrl+T) tout en appuyant sur la touche [Maj] pour les faire pivoter à l'angle approprié.

🔧 Utilisez la fonction Aligner pour aligner.

6. Les espaces entre les quatre phrases « dans une composition à plusieurs personnes » sont un peu gênants. Je voudrais les combler pour me sentir plus en sécurité.

 

7. J'ai essayé d'ajuster l'espacement des phrases, mais le résultat n'était pas très esthétique. J'ai donc ajouté un autre carré pour relier les quatre phrases.

8. Le design général est encore un peu monotone, j'ai donc décidé d'ajouter un fond vert clair, un cadre blanc et un cadre rose et rouge.

 

9. L'ajout de croix blanches aux quatre coins ne sera pas accrocheur, mais donnera une impression de détail lorsque le lecteur regardera attentivement.

10. L'ensemble étant carré, il est encore un peu trop stable et monotone. J'ai donc ajouté une icône en forme de couronne dans le coin supérieur gauche, pour faire écho au thème et rompre avec la forme carrée.

 

Le corps du texte du titre est terminé !

Ajoutez ensuite le texte du titre à l'image d'arrière-plan.

Ce partage se concentrant uniquement sur la conception du texte du titre, le processus de réflexion de cette partie sera légèrement omis.

11. En fonction de la composition actuelle, décidez où ajouter le texte auxiliaire en anglais.

Comme une icône en forme de couronne se trouve dans le coin supérieur gauche du corps du titre, j'ai placé le texte en anglais dans le coin inférieur droit afin d'équilibrer l'image.

 

💭 📝 L'ajout de texte auxiliaire ou de petites icônes après la fusion avec l'image peut permettre une plus grande flexibilité dans l'ajustement de la composition globale.

Par exemple, dans l'aperçu de Puppet Warp, comme le texte du titre est à droite de l'écran, les petites icônes sont toutes sur le bord droit. À l'inverse, si vous ne regardez que le texte du titre, il ne sera pas à cette position.

 

12. Ajustez le texte en anglais en italique pour atténuer la rigidité de l'image.

Ajoutez davantage de modèles de cadre de mise au point et de guides de tiers pour compléter l'image.

Finition!

---

Conclusion

Merci beaucoup d'avoir lu jusqu'ici !

 

Bien que le titre de cet article concerne le texte décoratif pour les « images d'aperçu », vous pouvez tout à fait utiliser ces techniques pour ajouter de la fantaisie au texte d'autres créations, comme des affiches, des cartes de vœux et même des illustrations de personnages !

 

De plus, concernant certaines méthodes de traitement de texte, notamment les calques vectoriels, la déformation de texte et les recommandations de matériaux spécifiques, je les ai expliquées plus en détail dans les CONSEILS que j'ai publiés précédemment. N'hésitez pas à les consulter :

Cet article n'est qu'un partage de mes réflexions, et il est encore possible de l'améliorer. N'oubliez pas qu'il existe certainement des façons plus créatives de créer des décorations de texte !

 

Qu'en pensez-vous ?

N'hésitez pas à me laisser un message ! J'espère que ces informations vous seront utiles.