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 poursuivons aujourd'hui notre série de didacticiels sur la création de motifs de fond pouvant être utilisés sur le Web (et pendant la phase de conception) avec notre deuxième édition. Nous verrons comment créer les motifs de "bruit" toujours populaires que nombre de sites Web utilisent depuis peu. Assurez-vous de vérifier le premier post de la série si vous l'avez manqué!
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..
Aujourd'hui est le deuxiè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 manqué les deux premières parties..
Le motif que nous allons couvrir aujourd'hui consiste à créer une "texture de bruit" 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:
Prêt? Faisons cela!
La première étape du didacticiel d’aujourd’hui est probablement la plus cruciale, car nous mettons en place les éléments de base. Il y a beaucoup de façons différentes de créer ces motifs de bruit? mais je vais vous montrer l'une des meilleures méthodes (et la plus flexible!) pour vous éviter frustration et maux de tête..
Commencez par ouvrir un nouveau document. La taille importe peu (nous utilisons 200px par 200px dans la démo), mais il est préférable de la maintenir au-dessus de 75px pour vous assurer que votre modèle de bruit est véritablement aléatoire. Les documents plus petits risquent de ressembler à des "mosaïques répétitives" - les documents beaucoup plus volumineux augmenteront la taille de votre fichier sans grande valeur ajoutée.
Ajoutons une forme de rectangle de base et nommons-la "Couleur de base" (l'organisation vous facilitera la vie plus tard!). Vous pouvez utiliser la couleur de votre choix (nous avons utilisé #EBEBEB), mais assurez-vous que le rectangle occupe tout l'espace.
Ouvrons maintenant une nouvelle couche et appelons-la "couche de bruit". C'est juste un calque vide en ce moment?
A l'aide de l'outil "Rectangle de sélection" (M), tracez une sélection dans l'intégralité de votre document alors que vous la sélectionnez dans la couche de bruit. Sélectionnez ensuite "Remplir?" Dans le menu contextuel (clic droit lorsque vous survolez la sélection - ou sous le panneau Modifier) et remplissons-le avec la couleur blanche..
Pointe: Ensuite, nous voulons convertir la "couche de bruit" en un objet intelligent. Vous pouvez le faire en cliquant avec le bouton droit sur le calque et en sélectionnant "Convertir en objet intelligent" ou en sélectionnant "Convertir en filtres intelligents" dans le menu Filtres..
Pourquoi en faire un objet intelligent? Cela nous permettra de conserver la possibilité de modifier ultérieurement l’intensité de la texture de bruit! Il y aura peut-être des étapes dans le futur où nous finirons par avoir besoin d'aplatir la texture, mais il est toujours préférable de garder les choses modifiables aussi longtemps que possible..
Très bien, objet intelligent à la main, nous voulons ajouter la texture de bruit.
Enfin, définissez le mode de fusion de la couche de bruit sur "Multiplier" afin que seuls les pixels de bruit les plus sombres soient visibles. Maintenant, vous pouvez changer la couleur sur la couche de base pour différentes couleurs bruyantes.
Whallah! Nous avons maintenant établi les éléments fondamentaux de notre modèle de bruit de base?
? et ce serait la fin de cet humble tutoriel si nous étions paresseux?
Cependant, dans les étapes suivantes, nous allons vous montrer comment inverser, modifier et ajouter de la profondeur et de la vivacité à votre motif de bruit pour le distinguer vraiment du lot.!
Avant de partir: Continuez et regroupez vos calques (le calque de base et le calque de bruit) en utilisant Ctrl + G pour créer un dossier de calques. Dupliquez-le une fois et cachez l'original afin que nous en ayons toujours une copie. Pour chaque nouvelle étape, nous allons créer un nouveau groupe de doublons. Ceci est juste une bonne habitude de base à avoir car cela garantit que vous avez toujours une sauvegarde de notre modèle de base.
Bon, allons maintenant transformer ce motif de bruit en quelque chose de sombre et de délicieux. Je vais vous montrer comment créer un motif de bruit inversé qui semble avoir un éclat subtil..
Commencez avec une copie du groupe de bruit d'origine (voir la fin de l'étape 01). La première chose que nous souhaitons faire est de faire en sorte que la couleur d’arrière-plan soit noire, alors allez-y et faites-le avec votre couche de base.
Ensuite, comme notre modèle de bruit est composé uniquement de pixels "sombres", nous devons essentiellement l’inverser. Malheureusement, nous ne pouvons pas faire cela comme un effet "intelligent", nous devons donc aplanir le motif de bruit. Assurez-vous que le niveau d'intensité est réglé sur ce que vous souhaitez, puis "Rasterisez" le calque. Vous pouvez le faire en cliquant avec le bouton droit de la souris sur la couche et en sélectionnant Rasteriser dans le menu contextuel ou dans le menu contextuel. Calque> Rasteriser> Rasteriser un calque menu.
Maintenant que nous avons essentiellement aplati notre schéma de bruit, nous voulons l’inverser. Faites cela depuis le "Image> Réglages> Inverser"panneau.
Qu'est-ce qui ne va pas? Vous ne pouvez plus voir le motif de bruit?
Nous aurons besoin de faire de légères modifications pour voir notre modèle de bruit inversé. Tout d’abord, définissez le mode de fusion sur la couche de bruit sur "Écran".
Ensuite, ajustez les "niveaux" de votre motif de bruit (Ctrl + Alt + L? Ou Image> Réglages> Niveaux).
Méthode alternative: Vous pouvez aussi simplement ajouter un calque de réglage pour les niveaux (Couche> Nouvelle couche de réglage> Niveaux). Vous préférerez peut-être cette option si vous souhaitez modifier l'intensité ultérieurement..
Presto! Nous avons maintenant un motif de bruit inversé brillant. De toute évidence, vous pouvez ajuster cela au contenu de votre coeur - le rendre plus sombre et plus discret - ou plus lumineux et plus intense. Vous pouvez même changer la couleur du calque de base en bleu foncé ou en rouge pour obtenir d'autres effets. Devenir fou!
Rappelles toi - vous enregistrez les en tant que "motifs" dans Photoshop en sélectionnant "Édition> Définir un motif". Faites-le et, plus tard, vous pourrez utiliser ces modèles encore et encore. Vous pouvez même enregistrer vos modèles en tant que bibliothèques et les partager avec vos amis et collègues..
Ensuite, nous allons vous montrer comment ajouter de la profondeur et de la vivacité à vos schémas de bruit.?
Ajoutons maintenant de la couleur et de la vivacité à notre modèle de bruit. Il est à noter que dans les étapes suivantes, nous utiliserons des techniques générales. vous n'avez pas besoin de les suivre à la lettre - gardez simplement chacun d'eux à l'esprit pour pouvoir créer vos propres motifs personnalisés.
Commencez par ajouter de la couleur à votre couche de base.
Créez maintenant une copie de votre couche de bruit et définissez les deux modes de fusion sur Color Burn. La couche dupliquée nous aidera à assombrir la couche inférieure. Cela nous donnera également la possibilité de décaler l'opacité sur une échelle plus fine plus tard.
Créez encore une autre copie, mais cette fois, nous allons la rastériser et l'inverser (voir Étape 2, Black Noise, pour plus de détails si vous l'avez manquée)..
Définissez le mode de fusion de notre nouveau calque sur Écran. Nous souhaitons également ajouter un nouveau calque de réglage (Calques> Nouveau calque de réglage> Niveaux) afin que nous puissions contrôler l'intensité du bruit lumineux.
Créons maintenant un décalage subtil en éloignant le calque clair du calque sombre (1px vers le haut et 1px à gauche) à l'aide de l'outil Déplacement (V) et de votre clavier..
Ensuite, ajoutez un masque de calque sur votre calque Light Noise afin que nous puissions en jouer..
En utilisant un pinceau grossièrement texturé (réglé à environ 130 pixels et en noir), nous voulons essentiellement masquer un peu de notre léger bruit en éloignant le masque de calque. Un coup de pinceau devrait faire l'affaire, mais utilisez votre propre jugement. L'idée ici est de créer un motif approximatif, aléatoire.
Définissez l’opacité du calque sur environ 45%. Vous pouvez faire moins ou plus selon vos propres préférences? nous essayons simplement de baisser l'intensité du contraste en arrière un peu si.
Nous avons maintenant un joli motif avec un peu de profondeur. Si vous ne creusez pas la profondeur, vous pouvez facilement bricoler en inversant le calque de bruit lumineux horizontalement pour supprimer le décalage et créer un simple effet "scintillant"..
Alacadabra! Pas mal hein? Voici ce que la texture finale serait:
Astuce Bonus: Si vous remarquez des "coutures" subtiles lorsque vous utilisez votre nouveau motif, essayez de le recadrer par 5 ou 10 pixels tout autour. Si Photoshop décide de regrouper les pixels de bruit plus sombres sur les bords de votre calque de bruit, vous obtiendrez souvent des joints, de sorte que le simple rognage des bords donnera un motif net et transparent..
Les deux prochaines étapes vont aller vite. A présent, nous avons défini les principes de base pour créer à peu près tout type de bruit que vous pouvez imaginer. Nous allons donc simplement vous montrer à quoi cette texture peut ressembler lorsque vous commencez à jouer avec la couleur et l'intensité du son. contraste. Regardons la version verte?
Commencez avec une copie du groupe de couches Blue Noise. Allez-y et changez la couleur de votre couche de base en vert.
Vous remarquerez une chose amusante en changeant les couleurs? le contraste provenant du bruit a tendance à passer du subtil au dramatique avec des couleurs différentes. Cela signifie essentiellement que nous souhaitons ajuster l'opacité des couches de bruit pour tenir compte de l'intensité du décalage. Il n’existe pas de règle précise pour cela. Il suffit de jouer avec les paramètres d’opacité jusqu’à ce que vous obteniez l’aspect recherché..
Enfin, voici le modèle de bruit fini:
Je le mentionnerai encore une fois pour plus de sécurité - si vous remarquez des coutures sur votre modèle lorsque vous utilisez une forme plus grande ou sur votre site Web, il vous faudra rogner environ 10 pixels tout autour de votre forme. supprimer les pixels "de bord" qui peuvent être plus sombres lorsque Photoshop les ajoute au cours de la toute première étape "Filtre> Ajouter du bruit".
Très bien, il ne me reste donc qu'un dernier tour pour ce tutoriel. Jusqu'à présent, nous n'avions ajusté le calque de base que lorsque nous voulions une nouvelle couleur. Tout va bien lorsque nous voulons un modèle de bruit de base? mais si nous voulons quelque chose avec un peu de vie supplémentaire?
Eh bien, cette dernière étape si pour vous les gars qui veulent juste cela - une couche de bruit à la teinte double qui a un peu "d'étincelle" à.
Allez-y et démarrez-le en changeant notre couleur d'arrière-plan. Ajustez votre niveau d'opacité sonore à votre guise (je ne l'ai pas du tout gaché pour cette démo en particulier).
Voici où nous lançons la balle courbe - ajoutons un nouveau calque de réglage (Calques> Nouveau calque de réglage> Teinte / Saturation) et en faire un masque d'écrêtage sur le calque "bruit léger". Maintenant, il suffit de modifier les paramètres jusqu'à obtenir une belle couleur dorée provenant de la couche de bruit léger..
L'effet final est ici:
C'est subtil, mais la "lueur" lumineuse provenant de cette couche de bruit supérieure va donner une belle vie à tous les projets dans lesquels vous l'utilisez. Profitez-en et créez vos propres variations!
Bien! J'espère donc que vous avez tiré quelque chose de cette deuxième session. Vous devez maintenant bien comprendre les schémas de bruit et savoir les utiliser dans vos propres projets. Vous pouvez enregistrer tous les fichiers que nous avons créés ici sous forme de fichiers .GIF, .PNG ou .JPG et les utiliser instantanément sur le Web? mais nous venons vraiment juste de commencer.
Dans le prochain niveau de cette série, nous vous montrerons comment créer des motifs de texture avancés, des motifs basés sur des formes, des motifs transparents, et bien plus encore..
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