32
Effet de typographie sans serif
Voici un tutorial expliquant le jeu de typographie très largement utilisé dans le monde de la pub notamment sur des affiches d’allure « design ». Vous allez le voir, la méthode est simple et le plus souvent se base sur une police de caracètres en majuscule et sans serif. Dans mon exemple j’ai utilisé la font « Sensation » téléchargeable gratuitement sur le site dafont.com à cette adresse : http://www.dafont.com/theme.php ?cat=501&page=1&nb_ppp_old=10&text=DESIGN&nb_ppp=10&psize=m&classt=pop
Pour les curieux voici le fichier source Photoshop utilisé dans ce tutorial :
ETAPE 1
J’ouvre le logiciel Photoshop et je crée un nouveau document (fichier > nouveau) puis avec la police « Sensation », je crée mon premier texte, c’est sur celui-ci que je vais baser mon jeux de typo, alors choisissez de préférence un mot avec plus de 5 lettres.
ETAPE 2
J’ajoute un second mot que je fais varier de taille pour qu’il vienne s’adapter parfaitement à la taille d’une lettre (voir ci-dessous).
ETAPE 3
Je peux également ajouter deux mots sur une même lettre comme ci-dessous.
ETAPE 4
Et oui horizontalement ça marche aussi, on évite pour le moment d’utiliser du texte en diagonale.
ETAPE 5
Et ainsi de suite.... je remplis mon document (pas trop quand même, il faut que sa reste lisible ; )
ETAPE 6
Je crée un dossier dans la fenêtre des calques et je place l’ensemble des mes textes dans ce dossier. Ainsi il ne me reste plus qu’à cliquer sur le dossier et faire Ctrl + T pour pouvoir faire pivoter dans le même sens l’ensemble des calques textes.
ETAPE 7
Avec l’outil « pot de peinture », je remplis l’arrière plan de mon image.
ETAPE 8
En utilisant un brush, je commence à blanchir les zones où se trouve le texte.
Les formes des pinceaux utilisées dans ce tutorial sont téléchareable gratuitement ici : http://www.brusheezy.com/brush/959-Slpashes
ETAPE 9
Jusqu’à ce que chaque lettre soit sur fond blanc.
ETAPE 10
Avec ces mêmes brushs, je peux ajouter des taches noires.
ETAPE 11
Et enfin je crée un nouveau calque juste au dessus de mon arrière plan et je le remplis d’un dégradé très sombre afin de faire ressortir le texte !
Et voila ! ma carte est terminée, je peux l’envoyer à l’imprimeur et distribuer mon flyer pour promouvoir ma super compétition de skate ! Pas mal mais surtout très simple, non ?
Si jamais vous rencontrez un problème, utilisez les commentaires ci-dessous, mais si vous avez réussis à faire ce tutorial jusqu’au bout, vous pouvez publier votre image en utilisant la galerie et le formulaire disponibles en haut de page.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 47 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
13 novembre 2008 18:20, par biker82
j’ai toujours adoré les effets typo simple, juste avec du placement de texte. j’aime beaucoup, mais à la fin je trouve ça un poil trop surchargé..
mais très beau boulot quand meme !
Répondre-
13 novembre 2008 18:42, par paco
très bon tout sa
Voir en ligne : http://pacostudio.free.fr
Répondre
-
-
-
14 novembre 2008 23:07, par Subaru192
Bon tutoriel ! L’effet est sympa ^^
Voici ma petite version :
Répondre
-
15 novembre 2008 09:56, par gikoo
Superbe ! Merci. Je cherchais exactement ça . Encore merci pour l’inspiration
Répondre
-
-
15 novembre 2008 12:06, par Len
sympa comme tout ^^ et facile a modifier par la suiteà sa guise
Répondre
-
15 novembre 2008 12:49, par Wonka
Belle mise en scène en tout cas ! Bravo pour cette compo graphique.
Répondre
-
-
16 novembre 2008 12:06
Beau tuto mais je ne trouve pas la police Sensation sur Dafont ? Où peut on la trouver ? Merci et bravo
Répondre-
16 novembre 2008 12:09
Excuser moi mais je n’avais pas vu le lien début du tuto x) Désolé =, Merci pour ce tuto !!
Répondre
-
-
16 novembre 2008 12:16, par GuilleW
Super ! un bon tuto comme on les aime : Simple et efficace. Merci Wonka.
Répondre -
-
-
16 novembre 2008 21:28, par Wonka
J’aime beaucoup le dégradé utilisé sur cette image
Répondre
Bravo à toi !-
17 novembre 2008 19:16
moi jai un probleme jarrive pas a mettre les brushs quand je clique sa fait rien merci
Répondre-
17 novembre 2008 20:50, par Wonka
En double cliquant sur le fichier normalement les formes de pinceaux se chargent automatiquement, ensuite il suffit de les sélectionner dans les options (barre d’outil horizontale en haut de l’écran) en ayant au préalablement sélectionné l’outil pinceau.
Répondre
-
-
-
18 novembre 2008 09:49, par Wonka
Pas mal du tout, cependant cette fois j’aime moins le texte, trop petit, peu visible !
Répondre
-
-
-
-
-
19 novembre 2008 02:26, par Job
Mais pourquoi tant de morts ?
Hahahaha... Et merci pour le tuto !
Répondre-
19 novembre 2008 17:14, par Wonka
Je ne sais pas, mais votre composition vaut le coup d’oeil ! Percutant
Répondre Bravo !
-
-
21 novembre 2008 00:00, par al
j’ai passé mon dimanche apres-midi sur ce tuto.(chouette moment) merci wonka. que les dieux de la création et de l’inspiration continuent à veiller sur toi. car, en ce qui me concerne, y a longtemps qu’il m’ont oublier.@+
Répondre-
22 novembre 2008 11:32, par Wonka
Merci, mais ne t’en fais pas, ils vont revenir, un jour ou l’autre, ou si ce n’est pas le cas il faut les provoquer en regardant tout ce qui peux apporter de l’inspiration. Livre, site Internet, publicité, magazine etc. Tout est la autour de toi pour te donner les idées créatrices dont tu auras besoin pour réaliser de belles images !
Répondre
-
-
-
22 novembre 2008 11:33, par Wonka
Pas mal, bravo
NB : tu avais ajouté l’image deux fois dans la galerie, je vais donc en supprimer une !
Répondre-
22 novembre 2008 15:54, par al
j’avais oubliai de copier le code dans le 1er message... quant à tes commentaires, je te remercie. c’est très encourageant.@+
Répondre-
23 novembre 2008 01:27, par Boby
Merci pour ce tuto. Voici le mien fait pour un ami. http://xiplanoise.skyrock.com/photo...
Répondre-
25 novembre 2008 00:48
Génial pour les flyers J’aime ce tutoVoir en ligne : http://graph-ist.skyrock.com
Répondre-
25 novembre 2008 13:44, par Wonka
Avec les couleurs sa donne un rendu très très sympa, bravo à vous pour cette réalisation graphique.
Répondre
-
-
-
-
-
-
28 novembre 2008 10:40
sympa le tuto , j’aime bien la typo
par contre , la typo se nomme « sansation » avec un « a » , c’est étrange mais bon c’est comme ça ^^
voila ma ptite créa faite à l’arrache !
Répondre
-
28 novembre 2008 19:33, par Wonka
Vraiment sympa, j’aime beaucoup ton image même si tu dis l’avoir fait très rapidement.
Répondre
-
-
4 décembre 2008 00:47, par Ty2008
Tout d’abord je tiens à te féliciter Wonka. Car non seulement ce tutoriel est efficace, mais en plus il a le mérite d’être clair et simple. Ce qui une fois de plus rend ton tutoriel abordable à tout le monde, quelque soit la connaissance que l’on peut avoir de PhotoShop. Il est bien évident que certains le personnaliseront suivant leurs connaissances plus ou moins approfondies de PhotoShop, mais je trouve qu’en général tous les résultats qui ont été téléchargés dans la galerie rendent excessivement bien
Répondre Encore donc toutes mes félicitations et une bonne continuation dans tes tutoriels.-
4 décembre 2008 00:53, par Ty2008
Voici toujours mon essai, certains aimeront, d’autres moins, mais j’avoue que le résultat final me plaît beaucoup
Merci encore Wonka !
Répondre
-
-
4 décembre 2008 12:41, par kom1dune
Ça a tellement plu à mon client que j’ai décliné toute sa nouvelle communication visuelle en partant de ce tuto...
Merci Wonka !!!
Où faut-il que je te reverse une partie de ce que j’ai touché pour ces boulots ??? (lol)
Répondre-
4 décembre 2008 21:57, par Wonka
Bah pour le moment y’a pas de système de don pour le pauvre webmaster qui écris ces tutoriaux
Répondre
snif cependant tu peux toujours faire un don au téléthon demain, sa marche aussi -
21 décembre 2008 23:39, par Thib`
Bonjour à tous,
Je trouve ce tuto super mais les brushes sont pour psd CS 2 et j’ai psd 7.0 !
Que faire afin d’avoir le même rendu qu’à la fin du tuto ?!
Merci
Répondre
-
-
-
22 janvier 2009 15:36, par Mofo
Salut, voilà ma petite composition. je me suis donc inspiré de ce tutoriel. Merci Wonka A+
Répondre -
3 décembre 2009 09:04, par jeanne
c’est simpa et pluto efficace,mais avec certaine tache de peinture trop importante on ne li pas assez vite l’affiche,enfin certaine lettres sont troublées par des taches de la mm couleur.
une élève d’STI Arts appliqués
Répondre -
21 mars 2010 10:36, par Raihau
Franchement, je sais pas comment créer le dossier pour mettre les textes dedans :s need help
Répondre -
25 mars 2010 22:56, par OK12
Merci pour ce tuto mais les burshes ne sont pas compatible a Ps cs4 ....
Répondre -
5 avril 2010 13:44, par Votre pseudonyme
Merci pour ce super Tuto !! Mais à la fin, quant j’utilise l’outil dégradé, tout s’assombrit et on ne voit presque plus le texte (il n’y a pas l’effet d’éclat blanc en arriere plan ...) Je ne sais pas quoi faire ?... Merci
Répondre -
17 janvier 2011 08:17, par Acid
Super la maquette sauf que y’a une faute à sponsors en haut à gauche.
Répondre
