32
Créer un bloc d’information rouge pour son site internet
Créer un bloc d’information pour son site internet dans un style sombre / rouge bordeau !
- Fichier source Photoshop tutorial 247
- clic pour télécharger le fichier source photoshop utilisé dans ce tutorial
ETAPE 1
Je crée un nouveau document sur fond blanc, je sélectionne l’outil des formes personnalisées et je crée un rectangle arrondi (10 pixels).
ETAPE 2
J’ajoute des styles de calques : calque > style de calque > incrustation de dégradé + contour + ombre portée (pour la configuration des styles voir le fichier psd disponible au téléchargement en haut de page).
ETAPE 3
Je crée un nouveau calque par-dessus les autres puis je récupère la sélection de mon rectangle arrondi (ctrl + clic sur le calque) puis je prends l’outil pinceau et je modifie les options pour obtenir un très large pinceau diffus (au moins 300 pixels) et je crée une lueur claire en haut à droite.
ETAPE 4
Je crée un nouveau calque par-dessus les autres. Je récupère la sélection de mon rectangle puis je le remplis (grâce au pot de peinture) en blanc ! Je vais maintenant modifier la sélection : sélection > modifier > contracter > 2 pixels (voir trois selon la taille de votre image).
J’appuie sur la touche suppr pour supprimer l’intérieur de mon rectangle blanc précédemment créé.
J’ajoute un masque de fusion sur ce calque : calque > masque de fusion > tout faire apparaître. Je fais disparaître progressivement le haut puis le bas pour créer un contour blanc sur la gauche et la droite seulement (sur le masque de fusion j’utilise un dégradé noir opacité 100% vers un noir 0% d’opacité.
ETAPE 5
Je vais ajouter maintenant un reflet : attention cette étape est plutôt délicate !
Je crée un nouveau calque que je place par-dessus les autres, je récupère la sélection de mon rectangle, puis je la remplis de blanc. Je me retrouve donc avec un rectangle blanc recouvrant les autres.
Je crée une très grande ellipse de sélection pour supprimer le bas de ce rectangle blanc. Je me retrouve donc avec la forme blanche de mon reflet.
Je vais maintenant camoufler le haut puis la gauche et la droite de mon reflet : en utilisant comme d’habitude le masque de fusion et un dégradé noir 0% / noir 100% d’opacité !
ETAPE 6 – Deuxième étape du tutorial : création du bouton
Je crée un nouveau dossier de calque (seulement pour les versions CS celui-ci contiendra les calques servant à créer le bouton). Je prends l’outil des formes personnalisées et je crée un rectangle arrondi en bas à droite.
ETAPE 7
J’ajoute une incrustation de dégradé et un contour (voir les styles de calque) et j’ajoute mon texte qui correspond à l’action de mon bouton.
ETAPE 8
Je crée un nouveau calque et je récupère la sélection du rectangle, j’utilise ensuite le pot de peinture pour remplir la sélection en blanc puis je supprime la moitié basse, j’utilise ensuite un masque de fusion pour camoufler légèrement par le bas.
ETAPE 9
J’utilise l’outil texte pour donner un peu de contenu à mon bloc (celui-ci est factice et sera retiré lors de la découpe CSS).
ETAPE 10
Pour finir j’ajoute une icône bulle glossy créée à partir de ce tutorial : http://www.wks.fr/Creer-une-bulle-glossy-methode-2.html
Bonne chance à tous pour la réalisation de ce tutorial.
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 14 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.
-
12 février 2008 00:16, par Black bot
Super tuto, comme d’habitude Wonka !
Rapide, efficace, design !
j’essaie de tester ça demain !
Répondre -
12 février 2008 08:06, par jahrule
Merci Wonka pour ce tutoriel toujours aussi bon. Mais je ne trouve pas le fichier psd en haut de la page, est ce que je suis seul dans cette situation. Merci
Répondre-
12 février 2008 09:24, par Wonka
Desolé j’avais oublié d’ajouter le fichier psd en haut de la page, cependant il est disponible des maintenant
Répondre
-
-
13 février 2008 15:05, par Toinousp
j’aime bien le rendu final c’est vraiment super j’aurais pu le faire pour mon site mais... c’est un peu trop tard je me suis lancé dans le flash ...
En tout cas très bon tuto
Répondre -
13 février 2008 19:11, par johann
Très bon tuto.
Juste une petite question : comment modifier le texte du psd en dehors de Photoshop, dans dreamweaver par exemple ?
Répondre-
14 février 2008 14:16, par Toinousp
il faut faire des tranche dans photoshop puis exporter pour le web Mais je crois qu’il ne faut rien écrire dans photoshop et tout écrire directement dans Dreamweaver (ou tout autre logiciels du genre...) j’espère avoir répondu à ta question ...
Répondre
-
14 février 2008 18:42, par johann
Oui tu as bien répondu a ma question !
Je me lance ! Merci !
Répondre
-
-
-
14 février 2008 17:59, par Toinousp
Moi j’ai fait le mien !! le voici :
j’aime bien ce tuto je m’amuse avec ...
Répondre -
22 février 2008 21:53, par Kiowa
ALors j’ai essayé le tutoriel que j’ai vraiment adorer d’ailleurs, bien sûr j’ai personnaliser mon « bloc d’information »... mais j’ai bien aimé
Répondre -
7 décembre 2008 20:28
Salut, Je suis un débutant et j’apprends petit a petit à gerer toshop. J’ai réussis avec succès quelques un de vos tutos, mais sur celui ci je bloque à l’etape 4 : « Je vais maintenant camoufler le haut puis la gauche et la droite de mon reflet : en utilisant comme d’habitude le masque de fusion et un dégradé noir 0% / noir 100% d’opacité ! »
Pourriez vous détaillez un peut plus la commande à réaliser ? Merci d’avance Et Encore bravo pour votre travaille
Répondre-
8 décembre 2008 00:03, par Wonka
Il faudrait voir le tutoriel dédié au reflet, car il n’y as pas plus d’explication que cela pour utiliser un masque de fusion, le tutoriel se trouve ici : http://www.wks.fr/Mille-et-une-facon-de-creer-un.html Après la lecture de cet article vous pourrez répondre vous même à votre question, bonne chance
Répondre
-
-
4 mai 2010 17:24, par bilal
salut a tous beau tuto c vrai. petite question est-il possible de diffusé des informations du style flux rss en défilement sur le bloc. si oui, comment faire pleaz. ou je peut trouvé le code source
Répondre -
5 mai 2010 11:30, par bilal57
est-il possible d’y intégrer des flux rss, peut-on faire défiler des information quelconques sur ce bloc ? c’est pour mon site
Répondre
