Comment créer une affiche à la typographie subtilement grunge

Je reviens cette semaine avec une véritable pièce de Maitre ! Ok, je vais un peu baisser de ton… Mais vraiment, j’ai un tutoriel impressionnant en stock pur vous, qui j’espère servira à de nombreuses personnes.

Donc, tu nous a emmenés jusque là mais de quoi s’agit-t-il ?

Ce que c’est, c’est une affiche typographique incroyable. Tu peut répéter s’il te plait ?

Typography Poster Tutorial Preview 1

L’image ci-dessous est ce que nous serons capables de faire à la fin de ce tutoriel.

L’inspiration

L’inspiration pour cette affiche vient de différents éléments mais premièrement des quelques pièces qui suivent :

1st Inspiration

2nd Inspiration

3rd Inspiration

Allons-y

Avant de commencer, je dois prendre le temps de distinguer clairement les polices utilisées dans ce design. Des polices sans lesquelles je ne pourrais réaliser cela. Voici la liste et les liens des polices utilisées :

Étape 1

Typography Poster Step 1

La première étape consiste à ouvrir Illustrator. Choisissez un doucement de votre choix car cela ne représente pas une étape cruciale du tutoriel. Pour info, j’ai chois un format de feuille A4 juste pour avoir des dimensions respectant les proportions que je cherchais.

Étape 2

Typography Poster Step 2

Quand vous gardez le design intégral sur Illustrator, vous pouvez clairement remarquer les étapes qui représentent le plus de difficultés et le temps que nous allons devoir leur consacrer. J’ai commencé en partant du centre et en allant vers les bordures du design. Je n’avais pas de croquis initial pour ce design, c’est pourquoi l’expérimentation jusqu’à obtenir un résultat satisfaisant m’a pris un certain temps.

Étape 3

Typography Poster Step 3

Vous devenez devenir que nous allons débuter par l’élément principal de la pièce. J’espère que vous avez déjà récupéré la police Fat Hag Black de Petra Ojala mais si vous ne l’avez pas fait, je ne peux vous permettre de continuer sur ce tutoriel… Je plaisante évidemment ! Récupérez la police, écrivez le mot « Hell » en minuscules, donnez lui une taille de 140pt, une couleur de fond de #ED2524, un contour blanc d’une largeur de 1pt, alignez le contour sur le centre de la forme dans la fenêtre contour et c’est tout ce que vous aurez à faire pour cette troisième étape.

Étape 4

Typography Poster Step 4

Décomposons maintenant l’objet en cliquant sur Objet -> Décomposer l’aspect et dupliquez le en utilisant le raccourci clavier (Ctrl + C) et (Ctrl + V). Puis, en sélectionnant l’objet que nous venons de coller, nous allons le décaler en allant dans Effet -> Tracé -> Décaler le tracé et en appliquant un décalage de 6pt sans changer les autres paramètres. Envoyons le désormais à l’arrière en faisant un clique droit sur la forme et sélectionnez Disposition -> Arrière plan. Enfin, appliquez un dégradé linéaire horizontal en utilisant un rouge plus foncé avec la formule #560F0F pour le côté rouge et un rouge plus claire de formule #ED2524 pour le côté droit.

Étape 5

Typography Poster Step 5

Décalez l’objet sous-jacente vers la droite et alignez le avec l’objet du dessus comme sur l’image.

Étape 6

Typography Poster Step 6

Pour créer l’effet rayé nous allons avoir besoin de tracer quelques lignes. Vous l’aurez deviné, nous allons utiliser l’outil Trait. Créez donc un trait d’une longueur minimale de 500pt et avec un angle de 33°. En effet, cet angle précis est la valeur la plus plus précise que nous pouvons obtenir pour l’aligner correctement avec l’angle de la police. Appliquez maintenant une largeur de 1pt et une couleur de #560F0F au contour. Décomposez l’aspect de l’objet nous permet de travailler avec un contour bien travaillé et non avec un simple contour.

Étape 7

Typography Poster Step 7

En utilisant l’outil Dégradé de formes, nous allons créer une multitude de fils. Dupliquez le fil que nous venons de créer en appuyant sur (Ctrl + C) et (Ctrl + F) et en le décalant à une certaine distance, vers la droite du plan de travail. Cliquez maintenant sur Objet -> Dégradé de formes -> Options de dégradé. Dans la boîte de dialogue qui s’est ouverte, choisissez une distance spécifique avec un intervalle de 2pt.

Étape 8

Typography Poster Step 8

Tout ce que nous devons faire à présent est de dupliquez le premier texte que nous avons créé avec le célèbre raccourci (Ctrl + C) et (Ctrl + F). Récupérez les objets « fils » et placez les devant la nouvelle copie du texte créé en faisant un clique droit dessus et en choisissant Disposition -> Premier plan. Sélectionnez les deux objets, utilisez l’outil Pathfinder et cliquez sur Soustraction. La dernière étape ici est de la décaler légèrement en vérifiant que l’objet « fils » est bien positionné entre les deux objets texte précédemment créés.

Étape 9

Typography Poster Step 9

Ok, c’est un bon début ! Ce que nous allons maintenant tracer est un joli symbole satanique, mouhahahahah ! Non sérieusement je cherchais l’inspiration pour les différents ornements à utiliser dans ce design et j’ai tapé symboles sataniques sur Google. Regardez le symbole sur lequel je suis tombé. Vous avez probablement deviné ce que j’ai fait ensuite. J’ai juste tracé vulgairement cette forme en l’incluant comme un ornement pour décorer notre pièce de texte d’enfer. Rien de bien compliqué ici.

Étape 10

Typography Poster Step 10

Saisissez le nouvel objet créé, appliquez lui un contour d’une largeur de 1pt et de couleur #560F0F. Puis dupliquez l’objet et placez les comme vous pouvez le voir sur l’image. Utilisez si vous le souhaitez l’outil alignement pour un alignement précis entre les deux objets et l’objet texte.

Étape 11

Typography Poster Step 11

Occupons nous maintenant des éléments autour du texte en traçant un bel ovale avec l’outil Ovale, normalement cela suffit. Puis, utilisez l’outil Texte et texte curviligne. Ici, il doit être sur l’ovale que nous venons de tracer. Positionnez le texte au centre du bord supérieur et appliquez lui la formidable police Elevant avec une taille de 48pt et un espacement de 300.

Étape 12

Typography Poster Step 12

Pour le texte du bas, copiez juste l’objet créé dans l’étape 11 et ajustez le en conséquence.

Étape 13

Typography Poster Step 13

Avant de partir sur les ornements décoratifs des textes, nous avons besoin de faire une petite pause et de nous occuper d’un ensemble de contours personnalisés que nous utiliserons plus tard. Ci-dessous, ce sont les formes que j’ai utilisées pour créer les contours. Rien de bien compliqué ici, utilisez juste l’outil Dégradé de formes comme nous l’avons déjà fait pour créer les formes que vous voyez au dessus.

Étape 14

Typography Poster Step 14

Une fois les formes faites, il est temps de créer les contours personnalisés. Sélectionnez le groupe final d’objets que vous souhaitez utiliser comme contour en allant dans bibliothèque de formes et cliquez sur nouveau contour. Sélectionnez un nouveau style de contour dans la fenêtre qui s’est ouverte, nommez le comme vous voulez, vérifier l’orientation puis cliquez sur OK. Répétez le processus pour l’autre contour que vous souhaitez créer et c’est tout !

Étape 15

Typography Poster Step 15

Commençons avec les différents ornements se situant autour des éléments de texte. Avec l’outil Spirale et l’outil Plume, créez un trait simple comme dépeint sur l’image ci-dessus. Appliquez une couleur de #560F0F et une largeur de 1pt.

Étape 16

Typography Poster Step 16

Dupliquez le trait que vous venez de créer et réfléchissez le en faisant un clique droit et choisissez Transformation -> Miroir. Dans la boîte de dialogue qui s’est ouverte, sélectionnez Vertical et cliquez sur OK.

Étape 17

Typography Poster Step 17

Pour cette étape, il vous suffit de répéter les processus mentionnés dans les deux dernières étapes et de faire des ajustements par rapport aux subtiles variations que vous pouvez voir dans l’image.

Étape 18

Typography Poster Step 18

Récupérons l’un des contours personnalisés précédemment pour en faire bon usage ! Tracez un trait en suivant par dessus, le flow du trait original et appliquez lui le style de contour qui correspond. Appliquez lui la même couleur de contour que les autres et une largeur de 0.5pt. A présent, dupliquez le, réfléchissez le et positionnez le correctement.

Étape 19

Typography Poster Step 19

Pour les contours du bas, tracez simplement un trait incurvé, toujours en suivant le flow de sa forme appariée et donnez lui un aspect de contour pointillé. Utilisez une largeur de contour de 0.5pt et un espacement de 4pt.

Étape 20

Typography Poster Step 20

Ce design est un rêve pour designer fainéant. La symétrie a une part considérable dans ce design  et nous permet quelques raccourcis. Tout ce que vous devez faire pour l’élément de texte du bas est de copier les ornements que nous venons de créer, de les réfléchir et de les positionner convenablement, en utilisant les mêmes espacements que dans l’étape précédente.

Étape 21

Typography Poster Step 21

Nous faisons de bons progrès et nous allons continuer en nous occupant des principaux éléments de texte, du haut et du bas. Utilisez la police Eccentric et écrivez « If » en minuscules et appliquez lui la même couleur que celle des contours et une taille de 36pt. Alignez l’objet au centre du design comme montré dans l’image.

Étape 22

Typography Poster Step 22

Tracez un trait d’une largeur de 0.2pt, de même couleur que d’habitude et donnez lui un aspect de contour effilé trouvé dans les styles de contour par défaut. Dupliquez le maintenant et positionnez le à l’opposé du premier que vous venez de créer.

Étape 23

Typography Poster Step 23

Recréez les trois formes que vous pouvez voir au-dessus et alignez les avec précision sur le trait. Se servir des repères commencés ici, peut être très utile.

Étape 24

Typography Poster Step 24

Dupliquez les formes et alignez les avec le trait à gauche. Vous pouvez vous occuper d’un seul ornement et le dupliquer entièrement. C’est comme vous le sentez en fait.

Étape 25

Typography Poster Step 25

Pour l’élément texte du bas du célèbre auteur de la citation, nous allons simplement dupliquer tous les éléments créer au dessus et les coller ici. Écrivez « Winston Churchill », appliquez lui une taille de 14pt et une valeur d’espacement (tracking) de 300. Vous allez devoir réduire un petit peu la taille des contour pour coïncider avec la largeur du nouvel élément texte.

Étape 26

Typography Poster Step 26

Cool, donc nous avons fait tous les éléments texte et nous avons maintenant besoin de nous occuper des éléments se rapprochant des bordures. Voici au dessus une illustration du processus de création pour la forme centrale du haut et du bas. J’ai simplement créé un cercle et j’ai modifié certains de ses points d’ancrage avec l’outil de sélection directe. Tout ce qui reste à faire est de la dupliquer deux fois, réduire leurs tailles, leurs faire faire une rotation et les positionner de chaque côté de l’élément principal. Par ailleurs, la couleur de fond est la formule suivante : #A51E22.

Étape 27

Typography Poster Step 27

Une fois que les formes sont créées, dupliquez les et collez une copie en bas.

Étape 28

Typography Poster Step 28

Pour les éléments des bordures restants, nous allons d’abord nous concentrer sur l’on des coins et nous le dupliquerons trois fois pour les placer dans les trois autres coins. Je vous ai dit que ce design était fait pour les plus fainéants d’entre nous. Bref, créez simplement un trait comme vous pouvez le voir sur l’image, appliquez lui la même couleur de contour que les autres et une largeur de 1pt.

Étape 29

Typography Poster Step 29

Créez deux petits ovales et placez les sur l’extrémité droit du haut du trait. Évidemment, donnez leur la même couleur de fond que celle utilisez pour le contour sous-jacent.

Étape 30

Typography Poster Step 30

Faites une copie des formes utilisées pour les ornements placés à côté du principal élément de texte et placez les en bas à gauche du trait créé à l’étape 28. Ou bien vous pouvez simplement vous appuyer sur l’image ci-dessus et ignorer le charabia qui précède.

Étape 31

Typography Poster Step 31

Vous rappelez vous l’autre contour personnalisé que nous avons créé à l’étape 14 ? Et bien, c’est ici qu’il entre en jeu. Tracez un trait simple en suivant la courbe de celui qui est juste au dessus et appliquez lui le style de contour personnalité. N’oubliez pas non plus de lui donner une largeur de contour de 0.5pt.

Étape 32

Typography Poster Step 32

Comme promis, tout ce qui nous reste à faire à présent est de créer trois copies des ornements créés, de leurs faire faire des rotations autant que nécessaire et de les placer convenablement. Nous en avons fini avec Illustrator pour ce tutoriel. Oui oui ! Bon travail, donnez vous vous-même s’une petite tape sur l’épaule, allez prendre un café et finissons ça.

Étape 33

Typography Poster Step 33

Ouvrez Photoshop et créez un nouveau document. J’ai choisi un format A4 pour avoir les mêmes proportions que le fichier Illustrator mais toutes les dimensions que vous choisirez conviendront. Le fait est que c’est un fichier complètement vectorisé, ce qui permet pas mal de flexibilité.

Étape 34

Typography Poster Step 34

Allez sur Lost & Taken, une des meilleures ressources web en ce qui concerne les textures en tout genre, et effectuez une copie d’une jolie texture grange tout en finesse. Celle que j’ai prise est le #23 ou, pour rendre les choses plus faciles, la troisième en partant de la fin de la liste. Une fois la copie effectuée, copiez la simplement dans Photoshop en ajustant ses dimensions à l’intégralité de la zone de travail.

Étape 35

Typography Poster Step 35

Ajustons maintenant les ombres de la texture pour créer plus de contraste et de rugosité. Créez un calque Ajustement des courbes et appliquez le au calque de texture sous-jacent simplement en cliquant sur la séparation entre les deux tout en maintenant appuyée la touche (Alt). Puis, dans dans le champ Ombre, mettez la valeur de 145, ce qui déplacera suffisamment vers la droite pour obtenir l’effet que nous recherchons.

Étape 36

Typography Poster Step 36

Ok, à présent importons notre design d’Illustrator sur Photoshop par un simple copié-collé de tous les éléments sur votre document Photoshop. Attention à bien choisir objet dynamique dans la boîte de dialogue qui s’ouvrira et cliquez sur OK.

Étape 37

Typography Poster Step 37

La dernière étape du tutoriel, et oui, nous avons déjà fini, est de fignoler l’aspeCtrl de notre objet dynamique appliquant certaines petites touches grunges en utilisant ces Subtle Grunges Brushes From Média Loot. Créez un masque vectorisé sur le calque de l’objet dynamique et appliquez quelques touches pour recréer un aspect vieilli sur notre objet vectorisé. L’avantage d’utiliser un masque vectorisé et que nous pouvons garder l’objet dynamique complètement intacte et donc cela optimise notre fichier Photoshop pour des modifications ultérieures.

Et voila c’est terminé !

Typography Poster Tutorial Preview 1

Le meilleur aspect de cette technique est sa flexibilité. Vous pouvez drastiquement modifier l’aspect général de ce design simplement en changeant la largeur des contours des ornements. J’ai choisi de les laisser fins pour obtenir l’aspect minimaliste que je cherchais et pour l’emphase que je voulais donner au mot « Hell ». Vous pouvez aussi essayer différents arrières plan sur Photoshop et obtenir des effets tout aussi intéressants. Voici le même design avec un arrière plan continu plus discret.

Typography Poster Tutorial Preview 2

j’aime vraiment le fort contraste du rouge sur la texture blanche utilisée dans cette version. Qu’est ce que vous en pensez ?

Ceci conclut notre tutoriel. Voici ci-dessous un fichier zip contenant le fichier source Illustrator ainsi que le document final Photoshop. Respectez les « Conditions générales » applicables à l’ensemble des fichiers distribués sur ce site.

Télécharger le fichier zip

J’espère vraiment que vous avez apprécié ce tutoriel et j’adorerais entendre vos retours et pourquoi ce que vous en avez fait. Alors ne soyez pas timides et partagez votre expérience avec nous. Jusque là continuons le design !

Article précédent
Comment créer une affiche dynamique de style Rétro Pop sous Illustrator et Photoshop
Article suivant
Astuces sous Photoshop : comment créer des textures de bois personnalisées

Related Posts

Menu