Créer un bloc de contenus grunges & vieillots pour son site internet

Un prémisse à l’utilisation des pinceaux pour créer une atmosphère grunge et vieillot à un site internet. Cet aspect est repris largement sur la toile et est défini par : l’utilisation de brushs, l’utilisation de supplément graphique : tampon, déchirement, superposition de contenus, effet papier etc…, l’utilisation d’un code couleur précis ou encore de forme.

Voici donc une explication pour créer un bloc de contenus avec une photo accolée.

Remarque au lien de la punaise, j’aurais pu utiliser un bout de scotch mais ceci sera l’affaire d’un prochain tutorial

Fichier source photoshop .psd

clic pour télécharger le fichier source photoshop utilisé dans ce tutorial

ETAPE 1

Je crée un nouveau document et sur celui-ci je trace un rectangle arrondi (radius : 40pixels) avec la couleur : #debd63.

ETAPE 2

J’ajoute un masque de fusion, et avec un dégradé noir blanc je cache légèrement le bas droit de mon rectangle. Sur les contours, j’utilise une forme de pinceau un peu grunge pour créer un effet de dégradation (j’utilise la couleur noire pour utiliser le pinceau et sur le masque de fusion).

Je peux télécharger ce fichier qui contient les brushs utilisés dans ce tutorial.

ETAPE 3

Avec la même technique je crée un header qui me permettra de placer mon titre.

ETAPE 4

J’ajoute mon titre et mon texte : dans mon exemple j’ai utilisé la police de caractère : Lauren Script téléchargeable à cette url : http://www.dafont.com/lauren-script.font

ETAPE 5

J’importe ma photo sur mon document, je vais créer un calque par-dessous. Je récupère la sélection de ma photo et je la déplace de 10 pixels à droite et je la remplis de blanc. 10 pixels en haut et je remplis de blanc, ainsi de suite pour créer une bordure blanche de 10 pixels autour de ma photo. Enfin je fais pivoter légèrement ma photo et mon cadre sur la gauche (ctrl + t pour la transformation libre, je n’oublie pas de sélectionner les deux calques avant d’effectuer la transformation : calque photo + contour).

ETAPE 6

Sur un nouveau calque, je récupère la sélection de ma photo et avec un très large pinceau diffus, je crée une lueur blanche sur le bord haut droit de ma photo.

ETAPE 7

Je crée un petit rond noir et j’ajoute la punaise, ceci est une icône png que j’ai trouvée sur le site : http://www.customxp.net/PngFactory/icone-png-9976-punaise-lemathurin.html vous pourrez également la retrouver dans le fichier psd disponible au téléchargement en haut de cette page !

ETAPE 8

Je vais maintenant créer un nouveau calque sous la punaise, je récupère la sélection de celle-ci et je la remplis de noir. Je vais faire édition > transformation > horizontale et je la déplace en dessous. Avec un masque de fusion je cache discrètement cette ombre.

ETAPE 9

Et pour finir je vais créer une ombre à ma photo, je crée donc un calque sous le contour blanc, je récupère la sélection de celui-ci et je remplis de noir (avec le pot de peinture). Avec l’outil édition > transformation > perspective je descends légèrement ma forme noire en bas. J’ajoute un filtre > atténuation > flou gaussien (2 ou 3 pixels) et je diminue l’opacité du calque à 70%.

Et le tour est joué, pas mal non ? Bloc de contenus pour un carnet de voyage ou un blog de vacances ou de tourisme.

Bonne chance à tous pour la réalisation de ce tutorial.