> Le Site du Zéro - Informatique > Cours > Tutoriels > Graphisme > Photoshop > Les Motifs > Lecture du tutoriel

Les Motifs

Par

Rifleman

Mise à jour : 22/08/2008

331 visites depuis 7 jours , classé 307/777

Ce tutoriel est conçu pour tous ceux (celles) qui souhaiteraient apprendre à utiliser les motifs sous Photoshop.

Pour découvrir ce qu'est un motif et ce qu'entraîne son utilisation, lisez ce tutoriel qui vous sera utile pour de simples retouches comme pour de gros packs designs.

Alors, vous êtes prêts ? Commençons !

Retour en haut

Sommaire du tutoriel :

À la découverte des motifs
Une erreur à ne pas faire !
Allez, créons-le ce motif !
L'affichage du motif

Retour en haut

À la découverte des motifs

Aujourd'hui, vous allez apprendre à utiliser les motifs. Cette manipulation est relativement simple, et avec un peu d'entraînement, vous pourrez réaliser de belles choses.

Cool ! Mais c'est quoi, un motif ?

Un motif, c'est une image qui sera répétée par dessus un calque, pour par exemple, réaliser des diagonales ou des traits horizontaux.

Dans Photoshop, il y a des motifs par défaut, mais vous pouvez aussi créer les vôtres.

Voici des exemples de motifs par défaut.

Effet "bois". Aperçu.
Effet "bulles 3 dimensions". Aperçu.
Effet "damier illusionniste". Aperçu.

Des exemples de motifs par défaut

Il y en a d'autres, mais je ne vais pas tous vous les citer. En tout, il doit y avoir une bonne dizaine de fichiers contenant des motifs prédéfinis, avec dans chacun de ces fichiers, environs 15 à 20 motifs... Mais vous pouvez créer les vôtres. Et c'est plus à cela que l'on va s'intéresser !

Mais... Je rassure les plus paresseux, on peut importer des motifs. Du moins, leur création est très simple... :-°

Un exemple, *toutoutou*, un exemple, *toutoutou* !

Voilà, je vous ai fait quelques exemples d'images avant et après ajout de motifs.

Prenons cette image :

Quelques exemples, avant et après ajout de motifs

Avant :

Après :

Il est clair que si vous faites un site professionnel de vente de billets pour les Caraïbes, il faut éviter cette technique. On peut dire que les motifs servent de "décoration". Mais vous pouvez très bien l'appliquer pour le fond d'un design.

Exemple de motif utilisé sur le fond d'un design :

Image utilisateur

Vous voyez que l'on peut arriver à faire des choses qui, certes, ne plairont peut-être pas à tout le monde

. Mais cette technique va vous être utile à un moment ou à un autre, croyez moi

Retour en haut

Une erreur à ne pas faire !

L'une des erreurs les plus fréquentes et qui, malheureusement, fausse la qualité du rendu de l'image, c'est de mal juger la taille du motif. Par exemple, si vous souhaitez utiliser un fond de design avec un motif, il faut bien que le motif se répète un jour : rien de plus facile avec le CSS. Mais il faut calculer la taille du motif et de l'image pour que les motifs se répètent correctement, et ne donnent pas ce genre de choses :

Comment éviter que cette erreur se reproduise ?

Pour cela, j'utilise une méthode simple. Je tâtonne. Si vous voyez que vos motifs ne "concordent" pas, rapetissez l'image et retentez le coup jusqu'à l'obtention du bon rendu.

Retour en haut

Allez, créons-le ce motif !

Scanlines (diagonales)

Pour obtenir des scanlines moyennement serrées, créez un document de 5 * 5 pixels. Si, par la suite, vous souhaitez agrandir l'espace entre chaque diagonale, augmentez la taille du document.
Lorsque le document est créé, maintenez CTRL (Contrôle) et "+" (pavé numérique) jusqu'à un zoom maximal (x 1600) ; prenez l'outil crayon de taille 1 pixel.

Remplissez ensuite une diagonale de ce carré, comme ceci :

Le sens de la diagonale, c'est le sens de vos futurs scanlines.

Aperçu du futur rendu :

Image utilisateur

Et comment j'enregistre le motif, moi ?

Rien de plus simple : il suffit de cliquer sur "Édition" dans le menu du haut, puis "Utiliser comme motif...". Votre motif se trouvera alors dans la liste des motifs actuellement utilisés.

Traits horizontaux

Créez un document de 1 * 2 pixels. De la même manière, zoomez au maximum avec CTRL et "+". Remplissez un pixel sur les deux existants, comme ceci :

La position du pixel noir n'est pas réellement importante.
Enregistrez le motif avec "Édition", puis "Utiliser comme motif...".

Aperçu du futur rendu :

Image utilisateur

Points

Créez un document de 3 * 3 pixels. Encore une fois, si vous souhaitez que les espaces entre les futurs points soient plus ou moins grands, modifiez la taille du document. Encore une fois, zoomez au maximum avec CTRL et "+". Remplissez le pixel du centre, comme ceci :

Si vous modifiez la taille du document, pensez à utiliser toujours deux nombres égaux (pour donner un carré) et deux nombres impairs plus grands que 1. Par exemple, 7 * 7 et 9 * 9 pixels fonctionnent.

Enregistrez ensuite le motif avec "Édition" et "Utiliser comme motif...".

Aperçu du futur rendu :

Image utilisateur

Alors, ça vous plaît ?

Retour en haut

L'affichage du motif

Et une fois le motif créé, comment l'applique-t-on sur notre image ?

J'allais y venir.

Héhé. Alors, créez un nouveau document avec une photo, par exemple, copiez-collez celle-ci :

Image utilisateur

Dans la fenêtre des calques (si vous ne la voyez pas, cliquez sur "Fenêtres" (en haut) puis sur "Calques"), faites un clic droit sur le calque où se trouve l'image à motifisitionner (notez le superbe mot

), puis cliquez sur "Options de Fusion...".

Ensuite, cochez la case "Incrustation de motifs" et cliquez sur ce texte :

Sélectionnez ensuite dans le petit menu (en cliquant sur la flèche noire) le motif souhaité. Par exemple, prenons les points, et mettons-les en opacité 35 %.

Voici le résultat :

Image utilisateur

Maintenant que vous comprenez le principe, je pense que je vais vous laisser vous débrouiller seul(e)s

.

Bon : allez, deux - trois explications pour la route :

baissez l'opacité pour éviter un résultat trop visible
ne touchez pas à l'échelle : du moins, laissez là à 100 %, car sinon, elle risque de réduire la qualité de vos motifs.

Retour en haut

Votre apprentissage des motifs est désormais terminé : vous pouvez encore découvrir pas mal de choses par vous-mêmes, vous avez désormais de bonnes bases bien fondées :-°

.

Pensez toujours à ce qui suit

Créez votre document, prenez le crayon de 1 pixel avec la couleur de votre choix, et appliquez le motif souhaité en "miniature". Pour faciliter la création du motif, zoomez au maximum avec CTRL et "+".
La taille de votre document pour la création du motif, pour éviter les "bavures".
Réfléchissez avant d'enregistrer votre motif ("Édition" puis "Utiliser comme motif...") pour que le résultat soit impeccable.
Allez dans les options de fusion du calque où vous voulez appliquer le motif, et rendez-vous dans la rubrique "Incrustation de motifs...".
Réglez l'opacité après avoir sélectionné votre motif.
Ne touchez pas à l'échelle, elle rend la qualité de votre motif médiocre.

1) Pour appliquer des motifs en couleurs, créez-en avec le crayon, toujours, mais cette fois-ci, ne le prenez pas en noir.
2) Pour importer un motif, créez un document de la taille du motif à importer, et collez l'image. Puis enregistrez le motif comme d'habitude.
3) N'hésitez pas à créer des motifs par vous-mêmes !

Voilà : j'ai adoré faire ce tutoriel et j'espère en faire d'autres prochainement. J'espère aussi que les motifs n'ont plus de secret pour vous, et que vous avez apprécié ce tuto

.

Je vous souhaite à tous et à toutes une bonne continuation.

Dernière information bonus... si vous souhaitez plus de motifs déjà installés dans Photoshop, lorsque vous choisissez un motif, cliquez sur la petite flèche bleue à droite de la liste, et vous aurez accès à des fichiers contenant pleins de motifs prédéfinis !

Retour en haut

Retour en haut

22 commentaires pour "Les Motifs"

Note moyenne : 3.27 / 4 (11 votes)

Pseudo	Commentaire
berli888	# Posté le 21/07/2009 à 21:37:14
Celsius Online Ville : Noisiel Pays : France métropolitaine Études : SUPINFO Île-de-France à Paris	Merci pour ce tutoriel assez simple mais très utile notamment pour créer des fonds pour des sites web Merci, merci et encore merci !!!!!!!
planete.game57	# Posté le 09/08/2009 à 17:57:44
Blog Twitter close Études : IRIS	Je te félicite ! Vraiment bravo ! Simple à comprendre, bien expliqué ! Moi qui pensais au début que c'était compliqué, c'est excellent pour les sites web ! A bientôt! Bien sur, fais en encore des tutos ! xHTML/CSS \|\|\|\|\|\|\|\|\|\| 100% \| PHP/MySQL \|\|\|\|\|\|\|\|\|\| 100% \| Langage C \|\|\|\|\|\|\|\|\|\| 8.5% Python \|\|\|\|\|\|\|\|\|\| 100% \| JavaScript \|\|\|\|\|\|\|\|\|\| 5.5% \| Photoshop \|\|\|\|\|\|\|\|\|\| 0.0% Smarty \|\|\|\|\|\|\|\|\|\| 100%
le0deszéro	# Posté le 26/11/2009 à 16:09:23
Groupe : Bannis	merci, pour ce tutoriel .
SpinN	# Posté le 14/05/2010 à 14:57:11
	Les motifs sont très pratiques quand on pratique du 3D ou des images que l'on fait sois même , sinon c'est très bien !
bwebinf	# Posté le 15/07/2010 à 23:12:42
Avis : Très bon	salut,excellent tuto, pratique simple et concis, merci Celui qui pose une question est idiot 5 minutes . Celui qui n'en pose pas le reste toute sa vie.