32
Créer une pub très sexy pour son site Internet
Voici un tutoriel pour Photoshop pour créer un flyer de promotion sexy, vous pourrez travailler des techniques comme la création d’effets glossy, de boutons de navigation et autres effets de typographie. Tutoriel Photoshop à ne pas rater !
Vous allez apprendre aujourd’hui à créer une sorte de flyer à destination de l’Internet, parfait pour faire la promotion d’un nouveau service ou d’une soirée à thème un peu (beaucoup) sexy.
Tutoriel à classer dans la catégorie, j’apprends en me faisant plaisir 
Ce tutoriel se compose de 4 étapes essentilles : La première consiste à incruster la lady, la détourer puis en la mettant en valeur en utilisant un ou deux brushs. Puis vous ajouterez un slogan que vous ferez tenir dans un carré en jouant sur les caractéristiques de texte. Pour mettre en valeur ce texte vous allez créer un premier effet glossy sur l’une des lettres du slogan le plus gros et pour terminer vous ajouterez un bouton glossy pour inviter l’internaute à cliquer. Effet garanti
Voici le résultat final :
Bonne chance à tous et bon tutoriel sur WKS.fr
ETAPE 1
J’importe la photo de la lady dans Photoshop.
ETAPE 2
J’effectue un rapide détourage autour de sa silhouette de façon à pouvoir appliquer des effets design en arrière plan.
ETAPE 3
Puis je remplis de noir mon arrière plan en utilisant le pot de peinture.
ETAPE 4
Je cache le calque « lady ». Je crée un nouveau calque que je place dessous puis avec un très large pinceau diffus gris je crée une lueur en bas à droite de mon image.
ETAPE 5
Je crée un nouveau calque. J’utilise un brush rayon de soleil en rose que je place en bas à droite au dessus de la lueur précédemment créée.
Brushs disponibles à cette adresse :
ETAPE 6
Je crée un nouveau calque. J’utilise un second brush halftone en noir cette fois ci. Je passe le calque rayon de soleil en mode de fusion densité Couleur -.
Brushs disponible à cette adresse :
ETAPE 7
Je vais maintenant créer une ombre derrière la lady, pour cela je récupère la sélection de la silhouette, je crée un nouveau calque. Puis je remplis cette sélection de noir en utilisant le pot de peinture. Je vais ajouter maintenant un filtre. Je vais donc dans le menu filtre > atténuation > flou gaussien (5 px par exemple).
ETAPE 8
J’affiche à nouveau le calque lady pour terminer la première étape. Je vais maintenant passer au slogan.
ETAPE 9
Je vais commencer par placer des repères qui vont m’aider à structurer mon texte.
ETAPE 10
Puis je crée la première ligne par un très gros WKS.
ETAPE 11
J’ajoute ensuite le reste du texte. Attention pour que chaque ligne ait une même largeur je peux faire varier les différentes options de texte (options disponibles dans la fenêtre caractères de Photoshop. Pour l’afficher rendez-vous dans le menu fenêtre > caractère).
ETAPE 12
Maintenant je vais m’occuper à rendre la lettre S un peu glossy, pour cela je commence par récupérer la sélection du premier WKS (en faisant Ctrl + clic sur le calque) puis en gardant la touche Alt enfoncée je supprime la partie gauche de ma sélection de façon à ne garder que la sélection du S.
Enfin je crée un nouveau calque et je remplis le S de blanc. J’ajoute ensuite un style de calque. Menu calque > style de calque > incrustation de dégradé. J’applique un dégradé de rose clair vers rose foncé.
ETAPE 13
Je vais ici ajouter un effet glossy sur la lettre.
Comme l’étape peut paraitre un peu longue j’ai créé une image qui regroupe des screens à chaque étape de création. Voir ci-dessous.
- Petite étape 1 : je récupère la sélection de la lettre
- Petite étape 2 : je crée un nouveau calque, et je remplis de blanc la sélection
- Petite étape 3 : je crée une grande ellipse de sélection
- Petite étape 4 : j’appuie sur Suppr pour enlever les pixels de trop
- Petite étape 5 : j’ajoute un masque de fusion et je cache le bas droit du reflet
- Petite étape 6 : je récupère la sélection, je crée un nouveau calque que je remplis de blanc, je déplace cette sélection sur le bas de 2 px et sur la droite de 2 px puis je supprime.
- Petite étape 7 : j’ajoute un masque de fusion et avec un pinceau diffus noir je cache les extrémités de cette bordure blanche.
ETAPE 14
Pour ajouter un petit style je change la couleur de tous les S en rose.
ETAPE 15
Je vais maintenant ajouter un bouton glossy.
Et comme pour l’étape 13 j’ai créé une image explicative avec les petites étapes.
Voici cette image :
- Petite étape 1 : je crée un rectangle arrondi de la même largeur que le texte
- Petite étape 2 : j’ajoute une incrustation de dégradé puis une ombre portée
- Petite étape 3 : j’ajoute une lueur sur la bas du bouton en utilisant un pinceau diffus
- Petite étape 4 : je crée le reflet du haut, pour cela je récupère la sélection du rectangle, je crée un nouveau calque, je modifie la sélection en la contractant de 1 px (menu sélection > modifier > contracter > 1px). Je remplis de blanc, je déplace la sélection vers le milieu et je supprime.
- Petite étape 5 : j’ajoute un masque de fusion, j’utilise un dégradé noir 100% vers noir 0% d’opacité. Je crée un dégradé du bas vers le haut, puis de chaque côté, de gauche à droite et de droite à gauche.
- Petite étape 6 : pour terminer j’ajoute mon texte.
Et voila mon bouton glossy est terminé, ceci sonne la fin de mon image.
Plutôt cool non ? bien entendu vous pouvez vous amuser à modifier les couleurs, le style et l’ambiance de l’image en ajoutant ou en modifiant certaines techniques.
Bonne chance à tous, si vous avez des questions n’hésitez pas à poster vos messages dans les commentaires. Si vous réussissez le tutoriel, SVP, veuillez poster votre image dans la galerie, cela fera plaisir à toute la communauté
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
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 24 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.
-
27 mai 2009 02:22, par Kokokov
Très sympa ce tuto, simple et efficace, comme on aime. Merci
PS : ne dit-on pas « the most sexiest website » ?
Répondre-
27 mai 2009 08:07, par Wonka
Merci
Répondre alors most sexy ou sexiest, tout le monde sait qu’en anglais il suffit de rajouter est pour faire d’un adjectif un superlatif le mieux par exemple. Si le mot est long alors on ajoute most, most beautiful par exemple pour sexy je dirais qu’il est court donc sexiest ! Cependant c’est pas trop sexy comme mot alors j’ai écris most sexy, en plus sur internet apparemment on trouve plus de most sexy que de sexiest, donc ... je sais pas :o
-
-
27 mai 2009 21:05, par NynaO
En anglais correct, c’est « sexiest » ! Mais bon, on s’en fout, c’est pour un tuto, très instructif au passage !
Répondre-
14 octobre 2009 16:46, par olivierc
oui on s’en fout ! le tutoriel est super et la nana superbe ! depannage mac
Répondre
-
-
30 mai 2009 19:18, par Rechart
Sympa comme tuto^^ il en faudrait plus comme ça lol
sinon où trouves tu des photos de modèles aussi net avec fond uni ?
J’aimerais bien essayer
Répondre-
31 mai 2009 10:45, par Wonka
Cette photos ci a été trouvé sur fotolia il me semble ! sinon sur toutes les banques d’images il y a des photos sympas !
Répondre
-
-
31 mai 2009 10:42, par onblog
très sympathique comme tuto. et comme site, je bookmarque, merci !
Répondre -
1er juin 2009 23:16, par Chips
Super tuto, mais la tache noire en haut à droite, dû au détourage incomplet de la fille, c’est fait exprès ? :s
Merci en tout cas ^^
Répondre-
2 juin 2009 12:11, par Wonka
Une tâche mais quelle tâche ? Moi je vois rien
Répondre et oui c’est mieux de détourer complètement la lady. Mais bon chez moi j’avoue ne pas voir de soucis (surement mon calibrage de merde 
-
-
5 juin 2009 10:09, par Shinzoo
Vous pouvez aller voir mes créations ici : http://graff-mod.fr.nf/acc.php
Répondre-
5 juin 2009 16:14, par Wonka
Certaines de tes créas sont vraiments belles ! Pourquoi ne pas les partager en les publiant sur cette page ?
Répondre
-
-
12 juin 2009 23:30, par derly-one
salut a tous moi c derly et je vous invite tous sur mon site
Répondre -
14 juin 2009 19:54, par seb13
slt, BA MUA JE COMMENCE A PEINE PHOTOSHOP, et je cale deja sur le premier passage lol c’est pluto des tutos pour beubeu qu’il me faut lol
Répondre -
12 juillet 2009 23:55, par Corentin
Je découvre ce site très intéressant et très bien conçu. Le souci est que je me sens bien démuni devant mon ignorance sur le fonctionnement de base de Photoshop (je possède Photoshop Element 7). Ainsi, pour ce tutoriel, je bute dès la mise en oeuvre des « brushes ». Après avoir téléchargé les fichiers, PSE s’ouvre. J’ai alors supposé que les éléments ajoutés se situent dans l’icône représentant une éponge. Mais, impossible de comprendre comment les utiliser. De là à reproduire les effets que vous proposez, il me paraît y avoir un gouffre ! Pourriez-vous, soit m’indiquer où je pourrais perfectionner ma connaissance de l’outil avant d’envisager suivre les tutoriels sur votre site ou comment utiliser les fameuses « brushes » ? Merci et encore désolé pour ma question certainement élémentaire.
Répondre-
13 juillet 2009 11:44, par Wonka
Oui il est vrai qu’il manque quelques articles concernant l’utilisation de bases de photoshop. Cependant et pour le moment je n’ai pas le temps de les rédiger !
Répondre-
13 juillet 2009 18:45, par Corentin
Je comprends bien que la rédaction de ces tutoriels nécessite un important investissement et, sincèrement, je vous renouvelle mes félicitations. Pour mon problème de brushes, j’y ai passé une bonne partie de la nuit dernière pour comprendre comment les utiliser. Avec succès. Je me permets donc d’expiquer la méthode pour les « nuls » qui comme moi sont impatients de pouvoir mettre en application vos fiches techniques :
- télécharger le ou les fichiers « brushes » sur le site recommandé dans le tutotiel,
- ouvrir Photoshop/ éditer,
- cliquer sur le pinceau,
- cliquer sur le menu déroulant le plus à gauche dans le bandeau d’outils situé en haut (nommé « afficher les formes prédéfinies sélectionnées »),
- cliquer sur les deux flèches grises en bordure de la fenêtre précédemment ouverte,
- choisir « charger la forme »,
- récupérer le fichier téléchargé,
- les nouvelles formes de brushes apparaîssent alors dans la fenêtre. Il n’y a plus qu’à les utiliser !!!
-
-
-
-
7 septembre 2009 19:03, par Wonka
Euh faudra lui demander directement
Répondre Si tu parles de la photo alors oui, mais avec une licence payante fia fotolia !
-
-
5 novembre 2009 09:21, par Fifty
Tous tes tutos m’apprennent grave a me servir de photoshop , j’ai 15 ans jveux devenir infrographiste donc voila ca m’aide = D Ptite parenthese : Super rendu mais sur le calque de départ tu a laissé le noir derriere les cheveux de la Lady , et sur le result final on retrouve cette petite erreur mais a part ca, ca gere = ) Merci pour tout . Arnaud
Répondre -
2 décembre 2009 20:03, par Votre pseudonyme
Excellent tuto. par contre, je n’arrive pas à utiliser les repères comme dit ci dessus.
Comment fixer et les mettre en évidence les repères sur le graphique pour la partie texte ?
Répondre -
31 juillet 2010 12:24, par sado
la partie de la lettre n’est pas claire du tout pour les novices comment faire la selection de la lettre, comment faire un effet de reflet avec l’ellipse (de manière plus explicite)
Répondre -
13 décembre 2010 19:43, par Nyume
Un ptit coup de baguette magique et c’est réglé ! après près des cheveux plutôt la plume
Répondre
