Créez un design grunge Photoshop pour votre site

Dans ce monde de dégradés, de reflets de logo, de rayures horizontales et de bords arrondis, le Web est devenu gonflé de sites obsédés par le Web 2.0, alors qu'en fait, le terme n'a pas de sens lorsqu'il est appliqué à l'esthétique pure. Lutter contre les sites Web blancs étincelants et leur éclat sans inspiration est le soi-disant look «grunge»; une esthétique plus intéressée par les textures sales, usées, rayées et déchiquetées. C’est une botte Doc Martens boueuse face à la propreté du Web 2.0. Cependant, obtenir un look authentique n'est pas facile et beaucoup se perdent en cours de route avec la façon de «gâcher» un site qui a une structure solide et décente à la base de sa conception. Eh bien lisez la suite!

J'ai deux mots pour vous: saleté et décomposition. Ce sont les éléments clés de l'esthétique grunge, et ils sont tout autour de nous, étant donné que la nature même de la plupart des objets du monde réel est de se dégrader avec le temps. C’est la qualité défectueuse de la décomposition qui distingue vraiment ce look des designs qui sentent la propreté stérile.



quelle marque de créateur a été fondée en 1968 et présente un lion dans son logo?

Et c'est la tâche de ce problème: créer une conception de site Web épurée dans Photoshop `` grunge '', en mettant de la cerise sur le gâteau en cours de route. Ou est-ce que ça devrait être de la boue?



1. Photoshop grunge

Commencez par créer un nouveau document Photoshop d'une largeur de 910 pixels et d'une hauteur de 700 pixels. Ajoutez des repères verticaux (Affichage> Nouveau guide) à 50 et 860 pixels, de sorte qu'il y ait une largeur intérieure de 810.

2. Créez trois colonnes

Ajoutez d'autres nouveaux guides, cette fois à 320 et 590 pixels. Cela nous donne trois colonnes centrales, toutes d'égale largeur (270 pixels). Cela rappelle les anciens journaux et diffère de la mise en page Web plus standard de colonnes inégalement larges.



3. La zone de contenu

Ouvrez un nouveau calque et appelez-le «wrapper». Avec l'outil de sélection, effectuez une sélection qui s'étend sur la hauteur du document du premier guide vertical à 50 au dernier à 860. Remplissez-le avec une couleur plate. Cette colonne centrale doit couvrir la largeur des mini-colonnes.

comment retourner l'image dans le raccourci Photoshop

4. Plantez un arbre

Ouvrez ‘tree.jpg’ et faites-le glisser sur votre document. Renommez le calque «arbre». Utilisez Transformation libre (Ctrl / Cmd + T) jusqu'à ce que l'image soit légèrement plus étroite que le canevas. Allez dans Image> Réglages et à partir de là, réglez la luminosité sur +10, le contraste sur +80 et la teinte sur -1555.

5. Polices grunge

Ajoutez un guide horizontal à 270 pixels. Déplacez l'arbre pour que le sol repose sur le guide. Tapez 'The Dead Designers'. Déplacez le calque de texte en haut à gauche. Changer la police - J'ai utilisé celui d'Eduardo Recife Polices méchantes et raccourcies - ou faites glisser les calques depuis ‘logo.psd’.



6. Texte de navigation

En utilisant la police de raccourci en rouge foncé, écrivez «news», «concerts», «musique», «info» et «contact», chacun sur une ligne distincte. Créez un calque nommé «lignes». À l'aide de l'outil Pinceau et de différents rayons, tracez des lignes irrégulières du coin supérieur droit du canevas vers l'arbre, en soulignant le texte.

7. Ajouter de la texture

Ouvrez 'Mountains.jpg' et faites-le glisser sur le canevas. Renommez-le «montagnes» et déplacez-le vers le haut de la pile de couches. Changez son mode de fusion en Multiplier dans le menu déroulant de la palette Calques, et vous verrez comment il donne à tout ce qui se trouve en dessous d'une excellente texture.

8. Ecrire les titres de page

Ouvrez 'promoBanner.psd' et faites glisser tous les calques sur votre document. Déplacez le calque 'montagnes' de sorte qu'il se situe entre 'acheter l'album' et 'ligne blanche'. Écrivez «acheter l'album» sur un nouveau calque et placez-le dans la colonne de gauche. Ajoutez plus de titres de page pour plus tard.

apprendre à dessiner sur une tablette

À l'aide de la petite flèche en haut à droite de la palette Calques, pixellisez les calques de texte, fusionnez-les et donnez au calque fusionné un trait de 1 pixel en utilisant les effets de calque invoqués en double-cliquant sur le calque. Donnez également un trait au texte de navigation pour l'aider à se démarquer.

10. Augmentez le canevas

Sélectionnez Image> Taille du canevas et modifiez la taille du canevas en 1 400 x 920. Assurez-vous de cliquer sur la flèche en haut au centre pour vous assurer que le canevas est agrandi à partir de ce point d'enregistrement.

11. Textures grunge

Ouvrez 'background.psd' à partir de vos fichiers de didacticiel, aplatissez l'image et faites-la glisser vers votre document principal. Nommez le calque «textures bg» et placez-le au bas de la pile de calques. Supprimez l'arrière-plan blanc par défaut qui s'y trouvait.

12. Côtés inégaux

Ouvrez 'côtés.psd' et faites glisser les textures vers le haut de la pile de calques. Ceux-ci ajoutent une bordure inégale sur le côté de notre conteneur de contenu. Comme ils sont semi-transparents, vous pourrez voir l'arrière-plan à travers les espaces. Lors du défilement, ce sera un effet sympa!

13. Enregistrer pour le Web

Votre fichier doit maintenant ressembler à 'complete.psd' sur vos fichiers source. Masquez tous les calques du PSD, à l'exception de l'image d'arrière-plan. Allez dans Fichier> Enregistrer pour le Web et choisissez JPEG dans le menu déroulant. Enregistrez-le en haute qualité et appelez-le «body.jpg».

14. Sans style

Dans un éditeur de texte, ouvrez 'step14.html' dans le dossier 'site'. Si vous prévisualisez ceci dans un navigateur, vous verrez que le contenu est présent mais qu'il n'y a pas de style. Prenez note du balisage et faites attention à la manière dont j'ai structuré le document.

15. Avec style

Ouvrez 'step15.html' et vous verrez que j'ai ajouté un style de base. Les styles de navigateur par défaut ont été réinitialisés et une mise en page de base a été établie. Le contenu principal sera réparti sur trois colonnes. Prévisualisez le fichier dans un navigateur pour voir où nous en sommes jusqu'à présent.

16. Afficher mes modifications

Ouvrez 'step16.html'. Les z-index étaient nécessaires pour positionner les éléments au-dessus des autres. J'ai déplacé l'image packshot en dehors de l'élément contenant via un positionnement négatif, et les bordures irrégulières du pied de page reflètent celles de l'arrière-plan de la bannière Masthead.

17. Style supplémentaire

Ouvrez 'step17.html' et notez le style. Les éléments h2 et h3 ont été remplacés par des images. Le texte de l'élément h1 se trouvait déjà dans l'image d'arrière-plan de la bannière Masthead. Je n'ai donc pas besoin de déclarer d'arrière-plan à cet endroit. Au lieu de cela, j'ai déplacé le texte hors écran et spécifié la largeur / hauteur pour correspondre au logo dans l'image de la bannière Masthead

meilleur moment pour publier sur dribbble

18. La navigation

Ouvrez 'step18.html' dans un éditeur de texte et un navigateur. Regardez le CSS que j'ai ajouté: le texte de navigation est remplacé par une image et la position de l'arrière-plan de l'image change en fonction de l'état du lien - vous voyez une partie différente de l'image lorsque le lien est survolé.

19. Travail terminé!

Ouvrez 'complete.html' et vous verrez que des marges subtiles, un remplissage et quelques bordures bien placées ont également contribué à clarifier les différentes sections de la page. Enfin, les images du crâne ont été flottées pour un look plus désirable et varié.