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! Aujourd'hui, nous poursuivons 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 troisième édition: Textures en fibre de carbone. Nous allons voir comment créer des modèles de fibre de carbone élégants et professionnels en commençant par une approche simple vanille, puis en suivant 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..
Assurez-vous de vérifier le premier post de la série si vous l'avez manqué!
Aujourd'hui est le troisiè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 modèle que nous allons couvrir aujourd'hui concerne la création d'une "texture de fibre de carbone" efficace pouvant être utilisée comme modèle dans Photoshop, ainsi que comme fond de mosaïque sur vos pages Web. Nous allons faire cela en 4 étapes:
Prêt? Faisons cela!
La texture de base en fibre de carbone est en fait assez simple à créer. Il existe une multitude de didacticiels pour ce modèle de base sur le Web, nous ne ferons donc rien de nouveau ici. Ce qui est important dans cette première étape, c’est de bien comprendre les principes de base que nous utiliserons aux stades les plus avancés. Les astuces principales sont:
Commençons notre version de base en créant un document 4x4:
Ensuite, prenez une sélection de 2x4 px de l’arrière-plan (illustré) et créez-en un nouveau calque (Ctrl + J):
Sur le nouveau calque 2x4px, ajoutons un dégradé de base à partir du panneau Styles de calque (double-cliquez sur le calque ou cliquez dessus avec le bouton droit de la souris et sélectionnez Styles de calque). Le dégradé que nous allons ajouter se déroulera du bas vers le haut et utilisera les couleurs Noir (# 000000) sur le fond en gris foncé (# 4f4f4f) au sommet:
Ce gradient va être la base de notre fibre de carbone? afin que vous puissiez toujours revenir à cette étape pour changer le résultat du produit final.
Ensuite, prenons une sélection de 1x4 pixels du calque dégradé à l'aide de l'outil Rectangle de sélection et créons un nouveau calque en le coupant (Clic droit> Calque par découpage)..
Maintenant, réglez l'opacité sur ce second calque sur 92%.
Pourquoi? Nous essayons de créer des variations très subtiles dans les tons de gris afin que la fibre de carbone semble avoir une source de lumière crédible. De toute évidence, il n’existe pas de véritable source de lumière et nous ne pouvons en créer une sans avoir une image massive (ce qui annule le sens du motif Web), mais de petits changements dans les ombres tromperont l’œil en lui faisant croire qu’il ya de la profondeur..
Fusionner les deux couches 1x4 px ensemble (ci-dessus) puis, en utilisant à nouveau l'outil Marque, prenez une sélection 2x2 en haut de la nouvelle couche:
Ensuite, pour créer notre effet de motif, intervertissez l'ordre de haut en bas des deux carreaux 2x2 px et inversement:
Notre modèle est maintenant complet! Enregistrez-le simplement dans votre bibliothèque de motifs en utilisant le Édition> Définir un motif outil. Donnez-lui un nom de votre choix et il apparaîtra à chaque fois que vous utiliserez le Styles de calque> Superposition de motifs bibliothèque.
Bien! Nous avons donc une fibre de carbone très basique complète? Passons à l'étape suivante, où nous allons créer des modifications sur cette idée.
La fibre de carbone de base peut être manipulée assez facilement. Dans ce court exemple, nous utiliserons exactement le même processus et les mêmes principes pour créer une texture de fibre légèrement plus grande..
Remarque: Je vais délibérément ignorer certaines des captures d'écran répétitives que nous avons examinées à la dernière étape. Je ne ferai donc que souligner les nouvelles techniques..
Commencez cette heure avec un document 8px par 8px.
Dans le premier motif en fibre de carbone que nous avons créé, nous avons utilisé un raccourci en créant un seul dégradé pour tout le côté gauche du document. Cela a fonctionné parce que le document n’était que du 4x4 et ne pouvait vraiment pas traiter plus de détails que ce que nous avons parcouru..
Dans cette deuxième version, nous allons devenir un peu plus méticuleux avec notre forme. Commencez sur votre document en ajoutant un rectangle 4x4:
Ajoutez un autre rectangle 4x4 pour l'espace du bas (je l'ai coloré pour que vous puissiez mieux le voir):
Nous devons maintenant ajouter un dégradé subtil au carré inférieur. Rappelez-vous, la région en bas à gauche est sombre? presque noir, utilisez donc un dégradé très sombre:
Répétez l’étape du dégradé pour la couche 4x4 supérieure, mais cette fois ce sera un dégradé léger:
Dupliquez les deux couches 4x4 et effectuez l'astuce "fliperoo" en échangeant la position de chaque carré sur les angles opposés du document..
Nous avons maintenant notre modèle de base en fibre de carbone, mais ajoutons un niveau de personnalisation en ajoutant un calque de réglage des niveaux. Faites cela dans le menu Couches en haut. Vous recherchez le bouton "Calque> Nouveau calque de réglage> Niveaux".
La couche de réglage des niveaux nous permettra de bricoler avec la luminosité et le contraste de notre structure de fibres. Lorsque vous avez terminé, définissez le motif (Édition> Définir le motif) et vous serez prêt à partir. Voici à quoi ressemblera votre motif:
Remarque: Lorsque vous essayez d'utiliser l'outil Définir un motif, assurez-vous que vous n'êtes pas sélectionné dans le calque de réglage? pour une raison quelconque, Photoshop ne vous laissera pas utiliser "Définir le motif" lorsque vous êtes sur des calques comme celui-ci (il sera grisé jusqu'à ce que vous sélectionniez un autre calque)..
Nous avons maintenant un deuxième motif en fibre de carbone complet! Vous pouvez utiliser ce même processus de base à plusieurs reprises pour créer vos propres variations. Essayez différentes tailles de document, en ajoutant de la couleur, en ajustant le contraste de vos dégradés, et tout ce que vous pouvez imaginer pour créer des effets uniques..
Ok, alors vous avez les bases? c'est génial! Dans cette prochaine étape, nous allons créer un motif en fibre de carbone diagonal en utilisant les mêmes principes de base que ceux que nous avons utilisés dans les deux premières étapes - mais nous allons utiliser une petite modification radicale de la disposition de la grille de notre motif pour créer une effet unique.
Commencez avec un document de 30 pixels sur 30 pixels. Une fois cette étape terminée, vous pouvez répéter le processus en utilisant une taille de document différente, mais cela devrait constituer un bon point de départ..
Nous allons travailler dans les cellules de "5px" en règle générale? Commençons donc notre modèle en créant un rectangle de 5 pixels de haut par 15 pixels de long.
Ensuite, ajoutez un dégradé sur notre première forme:
Ajoutez maintenant une forme carrée de 5px par 5px avec la couleur de # 191919 directement à côté de notre forme de rectangle.
Pointe: Utilisez l'outil "Convertir un point" (sous le panneau Outil crayon) pour ajuster ou accentuer les bords. Vos formes doivent se terminer exactement sur des pixels définis et ne pas afficher de "demi-pixels" flous.
Ce que nous avons ici est notre modèle de base que nous allons répéter plusieurs fois? convertissons donc ces deux formes en un seul "objet intelligent" afin de pouvoir toujours y revenir pour éditer le dégradé.
Remarque: Vous pouvez toujours revenir en arrière et modifier vos objets intelligents en cliquant avec le bouton droit de la souris sur le calque et en sélectionnant "Modifier le contenu". Cela modifiera chaque instance de l'objet intelligent? ce qui rend les modifications rapides et faciles lorsque vous avez au moins 10 doublons flottants.
Ensuite, nous devons dupliquer l’objet intelligent et le décaler de 5 pixels vers le bas et de 5 pixels vers la gauche..
Répétez le même processus "Dupliquer, puis Nudge" jusqu'à ce que vous ayez recouvert votre document. Reportez-vous à la capture d'écran si vous vous perdez, mais il devrait toujours y avoir une unité de mesure de 5 px entre toutes les parties principales..
Ajoutons maintenant un calque de couleur d’arrière-plan. J'ai utilisé un simple rectangle pour cela - définissez la couleur sur # 1e1e1e:
Enfin, pour plus de sécurité, ajoutons un autre calque d’ajustement de niveau fiable pour nous permettre de bricoler avec l’obscurité et le contraste à la volée..
Whallah! Vous pouvez maintenant utiliser l'outil Définir un motif à nouveau et utiliser le motif où vous voulez, comme ceci:
Pour cette dernière étape, nous allons utiliser à nouveau les mêmes principes de base? mais cette fois, nous allons retourner les choses de 45 degrés pour créer un autre effet de fibre de carbone diagonal unique.
Ce modèle final est en fait le plus facile à maîtriser. Ce devrait donc être une bonne piste si vous l'avez fait jusqu'ici.!
Commencez avec un document 8x8 et ajoutez une couleur d'arrière-plan. J'ai utilisé Black (# 000000), vous pouvez utiliser ce que vous voulez? gardez juste la couleur exacte à l’esprit pour la prochaine étape:
Ajoutez maintenant un rectangle mesuré à 4 pixels de large sur 8 pixels de haut:
Tout devrait être familier maintenant - ajoutez un dégradé subtil - la couleur de fin doit correspondre à notre couleur d'arrière-plan (mon dégradé ici est le # 555555 au # 000000). Notez l'angle - nous le fixons à 135 (ou -45 selon votre choix) pour qu'il corresponde bien à la rotation du calque:
Bingo! Nous avons notre modèle final? ajustez la taille du document et les couleurs du dégradé pour obtenir vos propres variations personnalisées:
? et le voici:
Bien! Alors maintenant, vous devez avoir une compréhension de base suffisante pour créer vos propres variations personnalisées de ces motifs en fibre de carbone - jouez avec les formes, 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, davantage de motifs basés sur des formes, 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