32
Créer un sticker qui se décolle pour son site Internet
Le but de ce tutorial est de créer une sorte de pliage pour donner l’impression que le bloc présent sur son site internet est une feuille, ou dans notre exemple une sorte de sticker collé sur l’écran.
Je trouve l’effet et le rendu plutôt joli, surtout que ce n’est franchement pas compliqué. Alors pourquoi se refuser ce petit plaisir :p
ETAPE 1
Je crée un nouveau document sur fond blanc, et avec l’outil sélection (sur un nouveau calque) je crée un rectangle que je remplis avec le pot de peinture noire.
ETAPE 2
Je vais dans le menu calque > style de calque > incrustation de dégradé, et je configure mon dégradé de bleu clair vers un bleu foncé (voir le fichier source PSD en haut de page pour retrouver la configuration exacte de mon exemple).
ETAPE 3
Je crée un nouveau calque et je remplis cette fois ma sélection avec un gris, puis je dispose ce nouveau calque sous le rectangle bleu (pour changer la place des calques ; je peux glisser et déposer mes calques dans la fenêtre des calques : si elle n’est pas affichée à l’écran je me rends dans le menu fenêtre > fenêtre des calques).
ETAPE 4
Je crée un nouveau calque par-dessus le rectangle bleu puis avec l’outil sélection polygonale, je crée une forme comme ci-dessous. Je remplis cette forme avec le pot de peinture noire.
ETAPE 5
Je supprime les pixels qui dépassent de mon rectangle bleu, puis je supprime le coin de mon rectangle bleu, voir l’image ci-dessous.
ETAPE 6
Je remplis ma petite forme en gris, et j’utilise l’outil sélection lasso pour rogner ma forme comme ci-dessous.
ETAPE 7
Attention étape précise et importante : Le but est de donner un effet de reflet sur notre décollement. Pour cela j’utilise l’outil lasso polygonal et je crée une fine bordure « gris foncé », puis une blanche, puis une grise, puis blanche, puis grise, et blanche.
Astuce : je prends l’outil loupe et je zoom sur le côté droit de mon rectangle pour travailler plus précisément.
ETAPE 8
Je fignole et je comble la partie bleue qui se trouve normalement sous mon décollement.
ETAPE 9
Je peux maintenant disposer mon texte des liens comme je le désire 
Bonne chance à tous.
Article publié par Wonka
Vous aimez cet article? Partagez le !
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 !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 23 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
-
21 novembre 2007 15:27, par Clemens
Pas des plus facile, mais des plus beau !!!!
Superbe ! Magnifique ! Géant ! J’y Kiff A Donf :D
Répondre-
23 novembre 2007 09:11
Je suis ravis que cet effet te plaise
Répondre
N’hésite pas à poster ta composition, je suis curieux :p
-
-
24 novembre 2007 18:05, par Virtual_dhx
Well, You’ve Maked A Very Beautiful photoshop tutorial ... Total Bilingue
Répondre
Non, srX sa gère 
GooD Job -
5 décembre 2007 13:26, par Ishtaria
Bonjour,
Votre tutoriel est bien sympathique. Bravo !
Par contre, étant débutante et autodidacte sur Photoshop, je ne comprends pas comment réaliser votre « ETAPE 5 » (Je supprime les pixels qui dépassent de mon rectangle bleu, puis je supprime le coin de mon rectangle bleu, voir l’ image ci-dessous). J’ai cherché dans différents endroits mais je ne sais pas à quelle fonction/manipulation vous faites référence.
Pourriez-vous mieux expliquer cette étape 5, avec les commandes exactes de Photoshop ?
Merci d’avance
Répondre-
5 décembre 2007 14:31, par Wonka
Pour l’etape 5 :
J’ai crée précédemment une forme noir sur un calque par dessus le calque contenant mon rectangle bleu. J’utilise l’outil sélection pour créer un rectangle de sélection collé au haut du rectangle bleu et j’appuie sur (suppr). Même chose sur la gauche du rectangle.
Tout cela pour que ma forme noir soit contenus dans ce rectangle (voir l’illustration de l’étape 5).
Bonne chance !
Répondre
-
-
22 décembre 2007 13:08, par Youssef HABIBI
bonjour trés simple et clair votre tuto j’aimerais l’avoir en format psd merci beaucoup
Répondre -
8 février 2008 15:17, par maxenter
salut merci pour ce tuto ... j arrive pas a rogner avec le lasso enfin c est moi qui suis nul j aurai aimer y arriver ^^
Répondre -
17 avril 2008 18:42, par lesloups
je trouve ça super classe
mon site est en pleine construction je compte installer un multidesign
donc je pense que cette effet sera mis sur le 2eme theme
Répondre -
14 mai 2008 08:14, par tokaido6
Bonjour
Il est super cool ce tutoriel puisque j’ai réussi au premier coup, mais comment l’animer au passage de la souris. (onmouseover et onmouseout) je sais pas comment je vais les utiliser à ce niveau.
svp aidez moi.
Merci d’avance.
Répondre-
14 mai 2008 11:40, par Wonka
onmouseOver c’est sur flash
tout depend comment tu veux l’animer si tu utilises CSS pour une page web il faut créer une classe :
.sticker {
width:125px;
height:125px;
background-image:url("mon image.png");
}
.sticker:hover {
background-image:url("mon image_hover.png");
}
Voila bien sur faut une image pour l’etat « normal » une autre pour l’etat hover.
Ensuite pour afficher le sticker dans la page :
<div class="sticker"></div>
Bonne chance n’hésite pas si tu as d’autres questions !
Répondre
-
-
23 août 2008 12:45, par BaiShin
Je viens seulement de télécharger la version d’essai de photoshop et j’ai vu ton tuto. Mais je n’arrive même pas faire un rectangle noir et à selectionner un claque... -_-’
help ?
Répondre-
18 septembre 2008 14:53
Baishin je te conseil ce site pour commencer au tout début, le tuto sur cette page n’est pas encore de ton niveau :
http://webmaster.lycos.fr/topics/graphic/paintshop/index.phtml
Répondre
-
-
19 février 2009 18:48, par boule
bon tuto mais ... « voir le fichier source PSD en haut de page pour retrouver la configuration exacte de mon exemple » : il est ou le psd ?? mersi wonka !
Répondre-
20 février 2009 13:22, par Wonka
Oublié ^^ le truc c’est que l’article est tellement vieux que je n’ai plus ce fichier
Répondre
-
9 février 2010 13:50, par Xitoo
Bonjour,
Je bloque à l’étape 6 du tuto, pour faire la forme avec le lasso y a t-il une technique particulière ? Car je n’arrive pas à avoir un rendu assez réaliste et ma forme n’est pas précise... En espérant avoir une réponse
Répondre
-
-
-
26 février 2011 17:28, par manu
Pour un effet plus réaliste, il faut mettre une ombre porté
Répondre -
24 août 2011 19:54, par Albino
Salut Wonka, excellent tuto, comme toujours, il y a-t-il un lien pour faire une donation par code SMS ? J’utilise tous tes tutos alors faut bien que je te remercie ( même si je sais que tu va pas faire fortune sur mes codes, et qu’en plus tu ne recevras pas la totalités du prix des sms.. mais c’est déja ca, non ? ) ! Merci encore pour tout ce que tu fais !
Répondre-
27 août 2011 17:11, par Wonka
Il n’y a pas de système de donation sur wks ^^ tu peux à la limite m’envoyer des bonnes ondes :D
Répondre
-
