Les puristes disent qu'il ne faut jamais altérer la typographie. Le lettrage doit apparaître comme prévu par le concepteur de types, ou vous devez sélectionner une police différente. Bien que cela soit généralement vrai, la seule exception concerne la tendance du texte en tranches.
L'effet astucieux donne l'impression que les éléments de type ont été coupés avec un outil de précision et peuvent ajouter un intérêt visuel aux logotypes, aux titres et aux simples blocs de texte. Les effets de texte découpés en tranches peuvent varier de très subtils (comme une petite lettre manquante) à la plupart des mots manquants.
La chose à garder à l’esprit lors de l’utilisation de texte en tranches est que les mots doivent toujours être lisible - quel point y a-t-il autrement? - et vous devez faire très attention afin que les combinaisons de lettres ou les mots non souhaités ne s'affichent pas à la suite d'un découpage en tranches. Voici comment le faire fonctionner pour vous avec quelques exemples de conceptions qui le font bien.
?Traditionnel? Tranche
Le texte découpé en tranches présente une apparence presque superposée avec un élément de texte, tel qu'un mot ou un petit groupe de mots, coupé et superposé sur deux plans. Cet effet crée de la profondeur et peut rendre visuellement intéressant un simple jeu de caractères.
Resoluut utilise cet effet en combinaison avec une esperluette pour attirer les utilisateurs au centre de la conception. Le texte en tranches reflète le message ci-dessous sur lequel l'entreprise se concentre: "design numérique avec attitude". parce que le texte découpé en tranches transmet une certaine ambiance plus tranchante qu’un lettrage direct.
Cette technique fonctionne mieux lorsque les jeux de caractères sont simples (pensez d'abord aux polices sans empattement) et lorsque les mots ont un point de rupture naturel où ils peuvent être coupés et où la lisibilité est préservée.
Tranche Texte et Photos
L'effet de superposition ne se limite pas à une combinaison de police et d'espace. Les concepteurs peuvent également utiliser des images et du texte pour créer un effet tranché sympa, comme dans l'exemple ci-dessus de The Shift.
Les combinaisons de tranches inclinées d'une seule image (également tranchée) avec un lettrage entraînent l'utilisateur dans la conception.
Bien que certains mots soient un peu plus difficiles à discerner au début, il y a suffisamment de temps entre les animations pour comprendre facilement le message.
Cette tendance convient bien aux agences numériques et aux sites de portefeuille en tant que moyen de mettre en valeur une apparence moderne et de mettre en valeur les atouts créatifs.
Slice avec animation
L'effet de texte en tranches peut également être combiné avec d'autres éléments de design tendance. Le fait de mélanger le découpage avec une animation peut générer un élément visuel intéressant.
Dans l'exemple ci-dessus, chacun des éléments de texte découpés constitue en réalité une navigation. Les utilisateurs peuvent cliquer sur l'un ou l'autre élément, mais ce qui est plus impressionnant, c'est l'action de survol, qui rassemble le texte découpé.
Pour les logotypes
Le texte en tranches peut être un moyen amusant de créer un logo lorsque les seuls éléments avec lesquels vous devez travailler sont du texte. Un logo amusant peut être plus qu'une marque de reconnaissance de la marque; il peut également s'agir d'un élément hautement graphique à usages multiples, tel que la conception de la chemise, ci-dessus.
Lorsque vous travaillez avec du texte découpé, recherchez une forme et une pente naturelles pour le découpage, de sorte qu’il soit intéressant de regarder tout en maintenant une lecture facile.
Faites attention à la manière dont le découpage crée un espace blanc. La conception ci-dessus utilise une large tranche d'informations supplémentaires à l'intérieur. L'usage le plus courant du découpage est souvent une ligne mince, mais les approches (comme vous pouvez le constater à partir des exemples de ce post) peuvent varier considérablement.
Créer de l'interactivité
Autorisez les utilisateurs à découper leur propre texte avec une combinaison de texte et de pinceau interactifs, comme dans l'exemple ci-dessus. Bien que le texte ne soit pas exactement découpé en soi, l'effet est créé lors du processus de création artistique.
Tous les outils permettant aux utilisateurs de modifier la conception peuvent entraîner des temps plus longs sur le site en raison du composant interactif.
Coupes verticales en tranches
Les tranches verticales ont tendance à être plus courtes car chaque coupe fait partie d'une seule lettre. Bien que la plupart des concepteurs semblent utiliser la tendance de la même manière avec une tranche plus orientée horizontalement, les coupes peuvent également être verticales.
Les tranches verticales ont tendance à être plus courtes car chaque coupe fait partie d'une seule lettre. Le truc pour faire fonctionner les tranches verticales est la cohérence. La façon dont les coupes sont faites doit se ressembler afin que les lettres ressemblent comme si elles allaient ensemble. Cette méthode de découpage doit ressembler presque à une partie prévue de la police. (Dans l'exemple ci-dessus, les tranches n'ont pas la même largeur d'une lettre à l'autre et les mêmes lettres ont les mêmes tranches.)
Établir un flux visuel
Les coupures créent presque un sentiment d’urgence de la lecture, de sorte que vous glissez sur les lettres et sur le visuel principal à l’écran. Une conséquence du texte en tranches - prévu ou non - est qu’il crée un flux visuel. L'œil de l'utilisateur suivra la direction de la tranche et de l'espace blanc qui l'entoure.
Regardez le logo dans l'exemple ci-dessus. Avec des tranches dans les R et o de Robocath (plus la partie manquante normale du c), il existe un tirant directionnel évident sur l’écran de gauche à droite.
La traction est plus forte que ce que vous associez à une lecture normale (également de gauche à droite) car les tranches vous poussent à travers les caractères rapidement. Les coupures créent presque un sentiment d’urgence de la lecture, de sorte que vous glissez sur les lettres et sur le visuel principal à l’écran.
Mettre l'accent sur le lettrage
La dernière - et peut-être la plus convaincante - raison d'utiliser la tendance de conception de texte en tranches consiste à mettre l'accent sur les lettres ou le message. Le découpage en tranches peut être à peu près n'importe quelle altération de lettres lorsqu'une partie d'un caractère manque dans le dessin.
MJND, ci-dessus, utilise plus d'un effet de superposition pour masquer ou découper des formes de lettre pour aider à mettre davantage l'accent sur le message. L'image peut facilement faire toute la communication ici, mais cet effet permet de ramener l'utilisateur à la messagerie principale. La combinaison est simple, efficace et visuellement intéressante.
Ressources d'apprentissage
Il existe plusieurs façons de créer des effets de texte découpés en tranches pour des projets, en fonction de ce que vous essayez de créer. Les options les plus courantes incluent la création manuelle de l'effet de texte à l'aide d'un logiciel d'édition ou l'utilisation de CSS pour créer l'effet pour des projets Web.
Voici des tutoriels pour chacune de ces options afin que vous puissiez essayer de créer un effet de texte en tranches à la mode:
- Vidéo: Comment créer du texte en tranches dans Adobe Illustrator
- Couper l'extrait d'effet de texte à l'aide de CSS
Conclusion
L'utilisation de la tendance de texte en tranches peut être un peu délicate, car elle implique de modifier les éléments de texte. Il est important que la lisibilité ne soit pas perdue ou vous pourriez perdre des utilisateurs avec cet effet.
Les effets de texte en tranches, cependant, peuvent être une solution amusante et permettent de générer un point focal. Ajouter une touche d'animation peut également vous aider à passer au niveau suivant. (De nombreux exemples cités dans ce message ne font que cela; assurez-vous de visiter ces sites Web et de cliquer autour de vous.)