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, j'ai le plaisir de lancer une série de screencasts que je veux faire depuis un moment maintenant: comment créer des modèles Web qui fonctionnent à la fois dans Photoshop et sur le Web. Nous allons faire cela comme une série, en commençant par les motifs les plus fondamentaux et en passant à certains des motifs de fond les plus avancés que nous pouvons trouver, y compris les textures complexes..
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..
Soyons clairs: les idées derrière la création de motifs de fond sont assez simples. La plupart des motifs ne prennent que quelques étapes et peuvent donner des textures remarquablement efficaces. En fait, les pires modèles pour le Web sont généralement ceux qui "essaient trop" en essayant de trop adapter à l'intérieur de chaque tuile.
Pourquoi est-ce si mauvais? Parce que les motifs de fond (dans la plupart des cas) doivent être subtils et non abrasifs. Les textures dures détournent l'attention d'un utilisateur de la véritable star de tout design Web: le contenu.
Alors, pourquoi utiliser des textures?? Parce que, correctement utilisés, les motifs d'arrière-plan donnent à un site une impression de caractère et de personnalité capable d'éliminer les couleurs plates. Les motifs et les textures donnent de la profondeur et de la séparation au contenu, aident à développer une hiérarchie et peuvent donner aux sites Web (qui sont de nature plate) un sentiment de sensation tactile. Ils peuvent donner à un site un aspect soigné, raffiné et professionnel, ce qui permet de mettre en valeur le contenu et de le rendre mémorable..
Alors que les idées derrière la création de motifs sont simples? les amener à travailler parfaitement peut souvent être délicat. Soyez assuré que cette série de didacticiels va vous montrer toutes les astuces dont vous aurez besoin pour créer vos propres variations personnalisées à utiliser dans vos propres projets. Nous allons même distribuer des cadeaux en cours de route!
Aujourd'hui n'est que le premier jour de notre série. Nous allons donc commencer par quelques modèles ultra-simples, juste pour faire bouger nos cerveaux. Nous allons commencer par une simple grille, passer à un motif hachuré, montrer comment créer un motif diagonal de mise à l'échelle, puis nous aurons un peu de funky en vous montrant comment ajouter une couleur et une texture subtiles.
Prêt? Faisons cela!
La partie vidéo de ce didacticiel vous aidera à aplanir les étapes que vous n’avez pas suivies dans la version écrite (ci-dessous). De plus, il est parfois agréable de voir comment quelqu'un d'autre travaille, alors profitez-en!
Certains de ces modèles étant difficiles à identifier sur un screencast à résolution Web, je propose également un didacticiel écrit, étape par étape. Vous pouvez regarder la vidéo ou la version écrite (ou les deux!), C'est à vous de choisir la meilleure façon d'apprendre. Plongeons dedans?
Le modèle de grille de base est à peu près aussi simple que possible, il s'agit donc d'un point de départ fantastique. Commençons par ouvrir un document de 7px par 7px.
Pourquoi cette taille? Parce que nous allons créer un motif de grille avec une ligne 1px au centre? et nous voudrons avoir un espace égal de chaque côté de la grille. Ce n'est pas obligatoire pour ce modèle particulier (tant que la grille est un carré parfait, il se répète de manière transparente), mais c'est une habitude que nous voudrons avoir lorsque nous passerons plus tard aux modèles plus avancés..
Les étapes sont simples:
Voici les captures d'écran:
Une fois que vous avez votre modèle exactement où vous le souhaitez, nous voulons l’enregistrer en tant que modèle. Pour ce faire, sélectionnez dans le menu supérieur de Photoshop "Édition> Définir un motif". Ceci enregistrera automatiquement votre document en tant que modèle pouvant être utilisé à l'intérieur du"Styles de calque> Superposition de motifs" bibliothèque.
Maintenant que nous avons terminé les bases, vous pouvez bricoler avec cela beaucoup. Nous avons utilisé un document 7px, mais si vous voulez une grille plus serrée, vous pouvez descendre à 5px ou 3px. Si vous souhaitez une grille plus large et ouverte, vous pouvez également utiliser une taille de document plus grande. La largeur de trait, l'espacement et les couleurs sont tous à vous.
Pointe: Une couleur qui peut sembler subtile (contraste faible) sur le modèle de document peut sembler beaucoup trop intense lorsque vous les utilisez comme modèle dans un autre document plus volumineux. Le truc ici est de:
Pour ce deuxième motif, nous allons essentiellement faire pivoter nos lignes de 45 degrés. Rappelez-vous que l'espacement est crucial - nous allons donc devoir utiliser un peu de pensée critique pour que le motif se répète:
Ouvrez un nouveau document à 8 px par 8 px cette fois. Pourquoi 8px et pas 7px comme nous le faisions auparavant? Parce que nous voulons que nos lignes se rencontrent exactement à chaque coin et si nous utilisons et si nous utilisons 7px, les lignes ne fonctionneront pas tout à fait..
Voici les captures d'écran:
Portez une attention particulière à la dernière capture d'écran, car elle montre comment vous pouvez réellement changer l’image de la grille en l’espaçant ou en la réduisant. Un motif hachuré serré peut donner une belle texture aussi bien qu'un gros motif juteux. Jouez avec l'espacement et la largeur de ligne jusqu'à ce que vous soyez satisfait du résultat.
Ce motif suivant est assez facile car il utilise essentiellement les idées de motif hachuré (en utilisant une seule ligne au lieu de deux bien sûr!). Les simples motifs de lignes en diagonale constituent un excellent moyen d'ajouter une texture subtile derrière le texte (comme les titres), car ils ajoutent du caractère sans rendre le texte illisible..
Pour la ligne diagonale, continuez et commencez avec le document hachuré - mais cette fois, supprimez une des lignes avant de sauvegarder votre modèle (Edition> Définir un modèle). Dans ce cas, la taille du document sera cruciale, car elle est directement liée à la qualité de la liaison des lignes..
Les screenshots:
La deuxième image montre comment, en ajustant l'espacement du document, ainsi que l'épaisseur et la direction des lignes, vous pouvez obtenir une très grande variété de motifs. Pas trop compliqué hein?
Pointe: Pour les puristes, vous pouvez obtenir une ligne beaucoup plus nette et plus nette en parcourant votre ligne - pixel par pixel - et en supprimant tout "effet de contour" que nous avons vu dans le rendu de Photoshop. Cela est dû essentiellement au fait que Photoshop trace une ligne anti-aliasée dans laquelle nous souhaitons idéalement une ligne pixélisée. Les pixels sont si petits que, dans la plupart des cas, cela n'a pas d'importance. Voici juste une capture d'écran de la version très nette au cas où vous voudriez la voir.
Bon, alors nous avons les bases! Ajoutons maintenant un peu plus de personnalité en utilisant deux techniques plus rapides: Ajout de couleur et de texture.
La partie couleur est probablement assez facile si vous ne l’avez pas encore compris. Ajoutez simplement de la couleur à votre arrière-plan et à vos lignes jusqu'à obtenir l'effet souhaité. Mes conseils: Limitez le contraste - il n’ya rien de plus odieux qu’un motif trop vibrant.
La partie texture est un peu plus délicate. La texture a toujours été une chose notoirement difficile à maîtriser sur le Web. Pourquoi? Parce que dans la plupart des cas, la texture se répète? et la plupart des gens peuvent le repérer à un kilomètre et demi. Même les textures haute résolution répéteront et montreront les séparations de mosaïque à moins que vous n'utilisiez des images énormes (telles que 1920 x 1080)? ce qui n'est pas toujours une solution pratique.
Le truc avec des motifs texturaux?
Dans les parties suivantes de cette série de didacticiels, nous allons examiner comment créer des textures avancées. Mais pour résumer aujourd’hui, examinons un modèle très simple avec un peu de grunge. Les marches:
Et les screenshots:
Enfin, jetons un dernier regard sur les quatre textures que nous venons de créer:
Bonus Astuce 01: Lorsque vous enregistrez votre motif (Edition> Définir un motif), n'oubliez pas de masquer le calque d'arrière-plan si vous souhaitez créer un motif transparent. Parfois, vous voudrez peut-être enregistrer la couleur d'arrière-plan, mais d'autres fois, il peut s'avérer très pratique de pouvoir superposer un motif sur une autre couleur sans avoir à revenir au fichier d'origine et à apporter des modifications. Évidemment, utiliser le blanc ou le noir comme couleur de motif est votre meilleur choix pour prolonger la convivialité de ces motifs transparents..
Bonus Astuce 02: Nous avons expliqué comment transformer ces modèles en "Modèles" utilisables par Photoshop (ou Fireworks), mais comment les utilisons-nous sur le Web? En fait, c'est facile - il suffit de les utiliser pour les fichiers .GIF, .PNG ou .JPG (je recommande le format PNG pour les modèles transparents). Ensuite, ajoutez-les simplement à votre dossier Web et utilisez-les comme images d’arrière-plan via CSS! N'oubliez pas de définir la valeur "repeat" si vous voulez qu'ils se mettent en mosaïque sur toute la page..
Bien! J'espère donc que vous avez eu un petit quelque chose à sortir de cette première session. Vous devez maintenant avoir une bonne compréhension des concepts théoriques sous-tendant le fonctionnement des modèles - ainsi qu'une compréhension technique de la création et de l'utilisation de ces modèles dans Photoshop. 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 fond "bruyants" qui vous font jurer que vous pouvez les toucher. Nous verrons également comment créer des motifs de texture avancés, des motifs à base de spa, des motifs transparents, etc..
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