Share
Photoshop est souvent le bon outil pour la conception Web, en particulier si vous créez une conception utilisant de nombreuses images et effets de pinceau. Dans ce tutoriel, je vais vous montrer comment créer une conception complète de la page d'accueil Grunge. Nous concevrons l'en-tête, la barre latérale, le corps, le pied de page et tout ce qui va fonctionner dans un design très texturé et usé.
Cette fois, nous allons créer une conception Web complète en style grunge à l'aide de Photoshop et de nombreuses images. Comme il s'agit d'un tutoriel de niveau intermédiaire à avancé, je vais sauter l'explication de certaines étapes de base. Commencez par créer un nouveau document 950 px sur 800 px au format RVB 72 dpi. Affichez les règles et faites glisser quatre guides délimitant le document. Ce sera la zone optimale du dessin. Je prévois de garder une disposition de largeur fixe.
Allez à Image> Taille du canevas et augmentez beaucoup plus la largeur et la hauteur, 1200 px sur 1000 px est correct, ainsi nous allons concevoir pour des résolutions d'écran plus larges. Ajoutez ensuite d'autres guides dans lesquels vous prévoyez d'ajouter les conteneurs (en-tête, barre de navigation, barre latérale, pied de page)..
Imaginons que cette conception soit destinée à un modèle Wordpress. Nous aurons donc besoin d'un en-tête, d'une barre de navigation à l'intérieur de celui-ci et d'une barre latérale droite. Regardez au bas de l'image suivante. Ensuite, remplissez un fond avec cette couleur # 7A8173.
Nous allons maintenant créer un motif pour l'arrière-plan de l'en-tête, ce qui est assez simple. Créez un nouveau document 50 px par 300 px et dessinez quelque chose comme l’image ci-dessous. J'utilise des guides pour rendre ma forme aussi symétrique que possible. Ensuite, allez dans Edition> Définir un motif et enregistrez la forme sous "motif 1."
Sur un nouveau calque de notre fichier de dessin principal, tracez un rectangle de 300 px de hauteur à l'aide de l'outil Rectangle. Accédez à Filtres et ajoutez une superposition de motifs, recherchez votre nouveau motif et appliquez-le. Pour que le résultat soit correct, vous devez cliquer sur le bouton Aligner sur l'origine. Remplacez le calque Remplissage par 0%, créez un nouveau calque vierge au-dessus du calque de forme et fusionnez les deux pour que le motif soit prêt à lui ajouter des effets. Nommez ce calque "Motif 1."
Sélectionnez le calque "Motif 1" et appliquez-y certains styles de calque: Ombre portée, Surimpression en dégradé et Surimpression en relief. Essayez d’obtenir quelque chose de similaire au bas de l’image ci-dessous, en utilisant les valeurs suivantes.
Nous allons maintenant ajouter l’arrière-plan de la barre de navigation. Dessinez un rectangle masquant un peu du calque "Motif 1". Appliquez à ce rectangle une superposition de motif, une superposition de dégradé noir à rouge noir et une ombre portée douce. Utilisez les valeurs des images ci-dessous comme référence. Ensuite, ajoutez un masque de calque> Tout masquer, et tracez un dégradé réfléchi noir à blanc sur le masque de calque, vous obtiendrez quelque chose de similaire à l'image du bas ci-dessous..
Dessinez maintenant une ellipse (# 691E1B) au-dessus du calque "Motif 1", nommez-la "Lumière" et appliquez-lui un flou gaussien d'un rayon de 50 pixels. J'ai créé un guide supplémentaire pour dessiner la lumière au centre de l'en-tête. Supprimer tout sous la barre de navigation et changer le mode de fusion du calque en Color Dodge.
Pour terminer la première partie de la mise en page, nous allons dessiner l'arrière-plan de la barre latérale. Dessinez des repères pour délimiter la barre latérale et modifiez également les repères existants pour les adapter à la conception. Ensuite, dessinez un rectangle rouge (# 3D100B) et appliquez les styles suivants: une ombre portée, une superposition de couleurs et une superposition de motifs..
À ce stade, vous devez considérer la façon dont vous allez Couper l'image en HTML + CSS; C'est pourquoi j'utilise des ombres portées avec 0px de distance la plupart du temps, et uniquement des dégradés horizontaux ou verticaux. La texture dans ce cas a beaucoup de lignes horizontales. Il doit être facile de convertir cela en un fond répétitif pour de nombreux domaines. C'est également un bon point pour faire une pause et organiser les couches dans vos dossiers pour que tout reste organisé..
Maintenant, commençons par les détails, je veux ajouter le nom du site à un endroit bien en vue, c’est pourquoi je vais utiliser cette belle image de label grunge. Évidemment, vous devez extraire l'étiquette et la placer dans le coin supérieur gauche de notre conception. Essayez d’obtenir quelque chose comme la première image ci-dessous. Ensuite, utilisez l'outil Baguette magique pour sélectionner le petit cercle brun, puis Commande + Maj + I pour inverser la sélection. Ajustez les niveaux et la teinte / saturation en utilisant les valeurs indiquées ci-dessous.
À l’aide de l’outil Gomme et d’un pinceau irrégulier, supprimez certaines zones du bord de l’étiquette. Ajouter un papier découpé effet, sélectionnez l'outil Esquiver et utilisez la même forme de pinceau pour appliquer l'esquive à la bordure de l'étiquette..
Nous allons ensuite ajouter une ombre à notre étiquette. Pour cela, dupliquez le calque "Label", modifiez l'option Teinte / Saturation> Luminosité à -100 et appliquez un flou gaussien avec un rayon de 10 px. Ensuite, changez le mode de fusion "Copie d'étiquette" sur Multiplier et réglez l'opacité sur 75%.
Dernière retouche pour l'étiquette, changez la Saturation en -40 pour la rendre plus grise..
Nous allons maintenant ajouter quelques images d'assistance, essayer de trouver des images entourant un concept, mais comme il s'agit d'un tutoriel sur les techniques, je choisis un modèle aléatoire. Celui-ci est une belle image d'un train vintage ici dans les hautes terres de la Bolivie. Extraire la forme du train comme vous le souhaitez. Puis changez le mode de fusion du calque "train" en assombrir.
Ajoutons du texte, d'abord le nom de la page. Tapez quelque chose en utilisant un police grunge; vous pouvez en trouver d'intéressants ici. Pour le titre, utilisez un type de noir et changez le mode de fusion du calque en Superposition, puis dupliquez le calque et modifiez l'opacité de la copie à 75%. Pour obtenir un effet de flou minime, déplacez le calque copié d'un ou deux pixels vers la gauche ou la droite. Ajouter plus de texte en utilisant cette technique, comme un slogan ou quelque chose. C'est également un bon moment pour ajouter les liens de navigation..
Maintenant, ajoutez plus de choses, c'est du style grunge! J'ai téléchargé des pinceaux de Jenn B d'ici, ces pinceaux ont des restrictions. En utilisant ces pinceaux, ajoutez des chiffres, des coins, des rubans de masquage, etc., n'hésitez pas à faire ce que vous voulez dans cette étape. Rappelez-vous simplement d'ajouter tous les calques sous les calques "Label" et "Copie d'étiquette".
Nous allons maintenant commencer à ajouter les sections de page. Tout d'abord, dans l'en-tête, nous aurons besoin d'une barre de recherche. Tapez une étiquette de recherche. Ensuite, dessinez un rectangle rouge (# 6A0400) comme champ de saisie de la recherche, puis appliquez un effet de calque Trait et Motif superposé.
Nous allons maintenant ajouter le contenu principal de notre conception. Nous allons d’abord ajouter un champ sur lequel mettre un texte en vedette. Dessinez un rectangle gris foncé (# 0D0F0E) dans un calque sous la barre latérale. J'ai créé quatre dossiers pour que la disposition reste organisée: un pour "l'en-tête" au-dessus de tout, un pour la "barre latérale" en dessous de "l'en-tête", un pour le "contenu" sous les "en-tête" et "barre latérale" et le dernier un pour le "pied de page".
Vous pouvez ajouter ce rectangle dans la couche "Contenu", vous pouvez également ajouter autant de dossiers que nécessaire dans ces quatre dossiers. Une fois que vous avez placé le rectangle au bon endroit, appliquez les effets Ombre portée et Contour en utilisant les valeurs ci-dessous..
Téléchargez des coins et des bordures grunge à partir d’ici et collez-en un sur le fond gris. Ensuite, appliquez un effet de superposition au coin avec une couleur # 171612. Ajoutez également un autre coin sur l'arrière-plan de la barre latérale, mais cette fois, son opacité sera inférieure à 25%..
Ajoutons du texte. Vous pouvez ajouter n'importe quel exemple de texte, imaginez qu'il s'agisse d'une section de publications récentes liée au texte, ou d'une section de publication sélectionnée, quelque chose comme ça. J'utilise la même police d'affichage grunge que celle utilisée pour la barre de navigation avec la couleur # 4D0D0D et Arial avec une couleur de # 3F3F3F pour le corps du texte.
Appliquez un effet d'ombre portée au titre et ajoutez le même effet aux éléments de navigation. Lorsque vous convertissez ce fichier PSD en un fichier HTML + CSS, vous devez convertir ces titres en images. Vous pouvez donc ajouter davantage de styles à ces titres. Enfin, utilisez des guides pour placer les calques de texte au bon endroit.
Notre bar en vedette a l'air un peu vide, ajoutons donc une image d'assistance. Dans ce cas, j'ai utilisé un tir polaroid. Vous pouvez télécharger la photo polaroid à partir d'ici. Extrayez le polaroid, collez-le dans un calque au-dessus du fond gris et du coin grunge dans le dossier "Contenu", puis modifiez la teinte / saturation pour rendre le polaroid un peu plus sépia (sélectionnez l'option Coloriser).
Utilisez les mêmes techniques pour les bords du calque "Label" (étape 9). Effacer et esquiver les bords de l'image Polaroid. Enfin, ajoutez une ombre portée en utilisant la même technique que celle utilisée à l'étape 10 de ce didacticiel..
J'ai eu cette photo sépia de moi-même, donc je l'ajoute à la conception. Ajoutez n'importe quelle image dans un nouveau calque au-dessus du calque "Polaroid", sélectionnez le carré noir du polaroid, puis Commande + Maj + I pour inverser la sélection. Sélectionnez le calque d'image et supprimez tous les extras. Ensuite, vous pouvez ajouter plus de détails grunge, comme du ruban adhésif sur l’image, comme indiqué dans les images ci-dessous. J'ai également appliqué un effet Ombre portée de 1px à la bande ajoutée..
C'est un bon moment pour ajouter une icône RSS à la barre latérale. Dessinez un rectangle à coins arrondis (# 99917E), puis appliquez-lui les effets suivants: une lueur intérieure, une superposition de motifs et une ombre portée, utilisez les valeurs indiquées dans l'image ci-dessous. Ensuite, dessinez ou collez dans un nouveau calque au-dessus du rectangle la forme standard RSS et remplissez-le de noir. Enfin, changez le calque "Forme RSS" du calque Mode de fusion en Superposition.
Maintenant, placez l'icône RSS en haut à gauche de la barre latérale. Ajoutez du texte comme "RSS FEED". Dessinez un autre morceau de ruban adhésif et écrivez le nombre d'abonnés dessus. N'oubliez pas que nous travaillons maintenant dans le dossier "Sidebar".
Il est temps d'ajouter un seul post à notre conception. Il suffit d’écrire du texte aléatoire en tant que titre, une autre ligne pour la date, la catégorie et l’auteur. En outre, quelques mots comme le texte du post. La typographie est la plus importante dans cette étape. J'adore utiliser les polices Serif pour les titres et Sans-Serif pour le corps, mais ce n'est que moi. Décidez ce qui vous convient le mieux pour votre conception.
Pour donner un peu plus d'attitude à notre exemple de publication, nous allons ajouter une image d'aperçu, comme sur les sites TUTS, mais comme il s'agit d'un dessin grunge, nous devons ajouter un fond grunge à nos images. C’est aussi simple que d’ajouter du remplissage haut et bas avec CSS, puis de définir une image d’arrière-plan répétitive.
Cette image sera du film 35mm. Extrayez deux petites bandes du film et modifiez leur teinte / saturation en utilisant les valeurs de l'image ci-dessous. Ensuite, en utilisant une gomme irrégulière, supprimez certaines zones des rayures. Enfin, ajoutez une ombre portée à chaque bande. Lorsque vous avez terminé avec le film, collez une image sous les couches du film. J'ajoute une photo d'un de mes voyages. Enfin, appliquez un effet de trait (# 2F261D) à cette image..
Tracez une ligne rouge de 2 pixels sous la publication et du texte pour les commentaires. Il est judicieux d’ajouter toutes les couches liées à la publication dans un nouveau dossier appelé "Publication". Augmentez ensuite un peu la hauteur du document. Pour ce faire, utilisez l’outil de rognage. Faites-le simplement pour voir à quoi ressemblera notre conception si elle comporte deux ou trois publications. Dupliquez le groupe "Publier" et modifiez le texte et l'image, comme indiqué ci-dessous.
En fait, ça a l'air bien, ajoutez maintenant les titres des articles de la barre latérale. Vous pouvez également créer un dossier pour chaque élément..
Ajoutez maintenant une icône de liste. Vous pouvez utiliser n'importe quelle forme personnalisée. Ajoutez du texte aléatoire, j'utilise Georgia pour la barre latérale. Dupliquez les icônes et modifiez-en une pour représenter le flotter Etat. Faites la même chose pour chaque élément de la barre latérale.
Nous sommes presque finis. Ajoutez des détails grunge au bas de la barre latérale, en ajoutant des pinceaux grunge dans un nouveau calque situé au-dessus du calque d'arrière-plan de la barre latérale. Sélectionnez le calque d'arrière-plan de la barre latérale, puis sélectionnez Calque> Masque de calque> Tout révéler. Ensuite, masquez certaines zones en bas à gauche de l'arrière-plan de la barre latérale à l'aide d'un pinceau noir irrégulier..
Enfin, sélectionnez le calque d'arrière-plan de la barre latérale et copiez son style de calque. Dessinez un rectangle au bas du dessin dans le dossier "Pied de page" et collez-y le style de calque. Ensuite, extrayez et collez cette image au-dessus du fond du pied de page..
Ajustez la saturation pour la rendre un peu plus grise. Vous pouvez également appliquer à cette feuille de papier une ombre portée reprenant la technique de l'étape 10. Ajoutez du texte par-dessus le morceau de papier, par exemple un slogan ou autre. Et aussi ajouter un texte de pied de page, comme une barre de navigation rapide, et les informations de copyright.
La conception Web n'est pas un jeu d'enfant, mais j'espère que ce tutoriel vous aidera à améliorer vos compétences. À vous de jouer, concevez le vôtre ou inscrivez-vous à PLUS pour télécharger la source PSD et la jouer. J'aimerais voir des designs web grunge dans le groupe Psdtuts + Flickr. Vous pouvez voir l'image finale ci-dessous ou voir une version plus grande ici.
Abonnez-vous au fil RSS Psdtuts + pour les meilleurs tuts et articles Photoshop sur le Web.
Accentsconagua