Share
Vous êtes-vous déjà demandé comment créer des motifs de fond parfaits et homogènes qui fonctionnent sur Photoshop et sur le Web? Ne cherchez pas plus loin, car aujourd'hui, nous allons le décomposer - étape par étape. Vous allez créer vos propres motifs d'arrière-plan en un rien de temps!
Heya tout le monde! Nous continuons aujourd'hui notre série de tutoriels sur la création de motifs de fond pouvant être utilisés sur le Web (et pendant la phase de conception) avec notre quatrième édition: Textures synthétiques. Nous verrons comment créer des modèles de tissu crédibles et pouvant être mis en mosaïque en commençant par une approche classique, puis en appliquant les mêmes principes pour créer des versions avancées..
Notre objectif est simple: Enseigner à quiconque comment créer des motifs de fond destinés au Web (mais pouvant également être utilisés facilement lors du processus de conception). Nous allons être "agnostiques", ce qui signifie que la plupart des astuces fonctionneront à la fois dans Photoshop et Fireworks..
N'oubliez pas de consulter le reste de la série, y compris la fibre de carbone, les arrière-plans bruyants et l'intro aux motifs!
Aujourd'hui est le quatrième jour de notre série - mais il convient de mentionner que tous ces tutoriels sont "autonomes" - ce qui signifie que vous devriez être en mesure de passer directement à la partie 4, même si vous avez raté les deux premières parties..
Le motif que nous allons couvrir aujourd'hui consiste à créer une "texture de tissu synthétique" efficace pouvant être utilisée comme motif dans Photoshop ainsi que comme fond en mosaïque sur vos pages Web. Nous allons faire cela en 4 étapes:
Au cours des derniers mois, les textures subtiles et bruyantes ont été très populaires auprès des concepteurs Web (consultez notre didacticiel pour les créer ici). Au cours des dernières semaines cependant, j'ai remarqué de plus en plus de textures de bruit "avancées"? c'est-à-dire que les gens vont au-delà de la simple approche «ajouter un motif de bruit» et essaient des effets plus amusants. Il y a deux choses principales que j'aimerais souligner:
1: Les textures que nous allons couvrir aujourd'hui sont toutes créées à 100% dans Photoshop. Nous verrons comment créer des textures photographiques dans notre prochain tutoriel..
2. Ces textures doivent être subtiles et utilisées avec parcimonie. Rien ne crie 1995 comme une texture de fond moche utilisant des filtres Photoshop puissants.
Bien? tu as été prévenu. Faisons cela!
Cette texture d’introduction est incroyablement simple à créer, mais elle peut être utilisée pour obtenir des résultats très professionnels, à condition d’être utilisée correctement..
Par exemple, vérifiez la texture derrière le pied de page du thème WordPress 'qop':
Pas mal non? Nous allons commencer avec une toile vierge. Définissez la taille sur 400 x 400 pour l'instant. La taille peut être modifiée ultérieurement, mais vous ne voulez pas qu'elle soit trop petite, car nous aurons besoin d'espace sur les bords pour travailler..
Créez un nouveau calque et remplissez-le avec Noir Couleur.
Allez-y et nommez-le la couche noire juste pour des raisons d'organisation.
Nous souhaitons maintenant appliquer un filtre rapide pour établir le fondement de notre texture de trait rugueux. Sur le calque noir, appliquez le filtre suivant: Filtres> Esquisse> Papier d'eau.
Vous pouvez ajuster les paramètres jusqu'à obtenir votre propre effet personnalisé, mais la texture de démonstration utilise les paramètres suivants:
Définissez le mode de fusion du calque noir sur Écran de sorte que seules les lignes blanches apparaissent. À ce stade, vous pouvez également ajouter un rectangle d’arrière-plan pour définir la couleur de votre texture. Notez que vous pouvez changer la couleur à tout moment de ce processus..
On ne peut pas vraiment voir autre chose que du blanc maintenant? ajoutons donc un simple rectangle coloré et nommons-le notre couleur de fond. J'ai utilisé la couleur # 242d34, mais n'hésitez pas à utiliser ce que vous voulez.
Ah, beaucoup mieux! Maintenant nous pouvons voir notre texture. C'est un peu plat cependant. Ajoutons donc un peu de profondeur à notre texture - nous le ferons en créant un nouveau calque et en le remplissant de noir (à nouveau). Nommez ce calque "Blanc" (vous verrez pourquoi dans les prochaines étapes).
Maintenant, nous allons ajouter le Filtres> Esquisse> Papier d'eau encore une fois, mais cette fois, nous voulons ajouter beaucoup plus de luminosité et de contraste aux paramètres:
Maintenant, il suffit d’inverser les couleurs de ce même calque (Image> Réglages> Inverser) et réglez le mode de fusion sur Multiplier. Réduisez l'opacité de la couche à environ 90% pour que l'effet ne soit pas trop abrasif.
Whallah! Pas trop mal droit?
L'étape suivante consiste à réduire les bords de ce motif, car Photoshop a tendance à être un peu lourd à la main. Recadrer à environ 50 px de chaque bord en utilisant le Surgir outil.
Pourquoi avons-nous recadré cela dans? Parce que Photoshop a tendance à être un peu lourd sur les bords du filtre Water Paper, ce qui signifie que si nous essayons d'en faire un motif, nous aurons des "coutures" évidentes. Le recadrage à partir du bord nous aide à éliminer ces coutures visibles lorsque nous allons l’utiliser comme motif ou sur le Web..
La dernière étape est simple: il vous suffit de définir la couleur d’arrière-plan sur la couleur souhaitée, de régler l’opacité de chaque calque filtrant jusqu’à ce que vous obteniez le niveau de texture souhaité, puis d’en faire un motif (Edition> Définir un motif). Terminé!
Et, le produit final devrait ressembler à ceci lorsqu'il est utilisé comme motif:
C’est peut-être un peu trop spectaculaire en termes de contraste à utiliser (je règle habituellement l’intensité pour que les tutoriels rendent les effets évidents), alors n'hésitez pas à jouer avec l’opacité des calques de texture pour obtenir le résultat idéal. votre propre conception particulière.
Pour personnaliser cet effet: Les principales choses qui pourraient vous intéresser sont les "longueurs de fibre" du filtre Water Paper et la couleur de fond. De plus, il peut être amusant de jouer avec l’échelle du motif final. Une fois que vous avez rogué, essayez de redimensionner l’ensemble de l’image pour modifier la densité de la texture (et utilisez l’outil Netteté pour affiner sa netteté)..
Cette texture suivante est probablement la plus simple des quatre aujourd'hui. Trois étapes faciles complèteront l'effet:
Commencez par créer un nouveau document (400 x 400) et tracez un rectangle de couleur sur le document. Nous l'utiliserons plus tard pour ajuster la couleur du motif final.
Créez ensuite un nouveau calque, remplissez-le de noir et ajoutez le filtre: Filtre> Texture> Texturizer. Utilisez les paramètres suivants:
Définissez le mode de fusion de ce calque sur Écran..
Ensuite, créez un nouveau calque, remplissez-le de blanc cette fois. Ajoutez le même filtre exact: Filtre> Texture> Texturizer. Utilisez les paramètres suivants:
Il suffit maintenant de définir le mode de fusion de ce calque sur Color Burn pour pouvoir voir à travers la couleur d'arrière-plan..
Enfin, ajustons la couleur de fond à quelque chose de plus subtil. Notez que lorsque vous ajustez la couleur d'arrière-plan, vous pouvez également vouloir ajuster les modes d'opacité et de fusion des deux calques supérieurs jusqu'à ce que l'effet soit comme vous le souhaitez..
Le modèle final comme indiqué dans la démo:
Vous pouvez créer le motif à partir d'ici (Edition> Définir le motif) ou jouer avec la couleur d'arrière-plan, l'opacité des calques de filtre et le rognage jusqu'à obtenir un motif homogène et adapté à votre motif..
Cette texture suivante est un peu plus avancée, alors faites particulièrement attention si vous souhaitez recréer cet effet..
Commencez avec un nouveau document (400 x 400) et commencez par dessiner un rectangle bleu (# 2b4891) comme arrière-plan. Vous pouvez choisir n'importe quelle couleur, mais nous avons l'habitude de voir le denim bleu. Nous allons donc nous en tenir à cela pour l'instant..
Ensuite, créez un nouveau calque et Remplir avec 50% de gris (vous pouvez utiliser la touche de raccourci Maj + Retour arrière / Supprimer). Donnez-lui le nom de couche horizontale pour l'instant.
Ensuite, réglez le Premier plan et Contexte couleur par défaut en noir et blanc en appuyant sur ré. Nous devons ajouter le fondement de notre motif en jean. Sur notre couche grise, appliquez le filtre: Filtre> Esquisse> Modèle en demi-teinte.
Utilisez les paramètres suivants:
Cela devrait produire un motif de ligne de base? mais le denim est "flou", nous allons donc vouloir gâcher un peu cela en utilisant un autre filtre: Filtre> Pixéliser> Mezzotint. Définissez le type sur Points fins.
Maintenant, créez une copie de cette couche (Ctrl + J) et nommez-le "couche verticale".
Utilisez l'outil de transformation gratuite (Ctrl + T) pour le faire pivoter de 45 degrés ET l’échelonner suffisamment pour qu’il rencontre tous les coins de notre document. Il m'est arrivé de monter à 145% au cas où vous essayez de faire correspondre le mien exactement.
Ne vous inquiétez pas, une mise à l'échelle si grande du motif créera des imperfections de trame. Nous voulons réellement ceux-ci. En fait, continuez et ajoutez du flou supplémentaire (Filtre> Flou Gaussien réglé sur 0,3) à la fois pour cette couche et pour la première couche non transformée.
Enfin, définissez le mode de fusion de la couche diagonale sur Plusieurs avec 70% d'opacité -- et définissez le mode de fusion du calque à rayures horizontales sur Lumière douce avec 60% d'opacité.
Cela complète l'effet denim! Vous pouvez bricoler les couleurs d’arrière-plan, puis en faire un motif (Édition> Définir un motif).
Remarque: Si vous remarquez des coutures évidentes dans votre motif, vous devrez jouer un peu avec le recadrage. Le truc ici consiste simplement à s’assurer qu’il n’y a pas de lignes anormalement claires ou sombres près des bords. Essayez quelques recadrages différents jusqu'à ce que le motif soit transparent.
Si vous avez suivi la démo à la lettre, vous pouvez simplement réduire la hauteur de votre document à 400 px par 396px. Ceci éloignera les coutures (ci-dessous):
Whallah! Comment cela marche-t-il? Si vous vous souvenez de notre premier tutoriel sur les motifs, l’idée générale est que les derniers pixels situés à droite et en bas de notre motif doivent toujours être liés aux côtés à gauche et en haut du document. Découper ces 4 pixels dans ce cas aide le bas pour correspondre au haut. Puisque la droite et la gauche sont déjà en place, nous sommes prêts à partir!
Bien! Nous sommes arrivés à la texture finale de la journée. A présent, nous avons eu recours à des techniques assez délicates. Cette dernière étape semblera donc assez simple..
Créer un 200 x 240 document. Continuez et faites glisser les trois couches brutes que nous avons utilisées pour notre motif en denim (les deux couches de texture + la couleur d'arrière-plan).
Regrouper ces couches (Ctrl + G) et définissez un masque large de 50 px sur l’ensemble du dossier du groupe. Si vous n'avez jamais créé un masque de groupe comme celui-ci auparavant, rien de plus simple: utilisez simplement le bouton Chapiteau Rectangulaire outil de sélection pour dessiner une sélection de 50 pixels de large qui remplit le document de haut en bas (regardez le Info panneau pour vérifier votre mesure). Cliquez ensuite sur le bouton "Ajouter un masque de vecteur" en bas du panneau des calques:
Pourquoi 50px? Parce qu'avec un document de 200px de large, nous allons vouloir adapter 4 bandes de 50px.
Ensuite, dupliquez ce groupe de calques, déplacez-le vers la droite du premier groupe, puis retournez-le (éventuellement) horizontalement pour créer un motif en diagonale opposée..
Pour ajouter un peu de contraste dans les rayures, changez simplement la couleur de fond (les changements subtils sont préférables ici) en quelque chose d'un peu plus clair ou plus foncé que la couleur d'origine).
Enfin, dupliquez les deux de nos groupes de bandes et déplacez-les dans l'espace vide de notre document..
Nous avons déjà terminé - pour ajouter un intérêt visuel, dissocions les masques de groupe pour ces deux dernières bandes, puis déplacez les 3 couches de denim à l'intérieur d'environ 100 pixels pour créer une striation légèrement différente. Le résultat final n’est pas radicalement différent, mais les personnes à la recherche de coutures dans votre modèle seront décontenancées par cette dernière étape..
Félicitations! Sélectionner Édition> Définir un motif, et commencez à utiliser cela dans vos propres projets. En conclusion, vous pouvez évidemment faire beaucoup plus avec cela en ajoutant vos propres personnalisations. L'exemple ci-dessous modifie les couleurs en une teinte marron, puis réduit également le "tricot" du motif en réduisant la taille de l'image. Découvrez notre dernier exemple:
Bien! Alors maintenant, vous devez avoir une compréhension de base suffisante pour créer vos propres variations personnalisées de ces modèles de fibres synthétiques - jouez avec les niveaux, les couleurs, la taille des documents et bien plus encore pour ajouter votre touche personnelle à ceux-ci. Heck, vous pouvez même inverser l'ombrage pour créer des motifs subtils, de couleur claire.
Dans les prochaines parties de cette série, nous vous montrerons comment créer des motifs de texture avancés basés sur des photos, davantage de motifs de forme, des motifs transparents et bien plus encore dans le futur..
Abonnez-vous ou revenez sur le site pour voir toutes les mises à jour de cette série au fur et à mesure qu'elles se produisent!
Accentsconagua