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

vendredi 14 mars 2008
Article écrit par : Wonka
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
WonkaStudio

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 ;)

Photoshop - 975.5 ko
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.

La galerie des membres

Url de l'image : http://www.wks.fr/stockpix/463/2289.jpg Url de l'image : http://www.wks.fr/stockpix/463/2677.jpg Url de l'image : http://www.wks.fr/stockpix/463/4408.jpg

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 11 messages dans le forum)
Ajouter un commentaire à cet page

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.