Créer un macaron avec Photoshop

J’ai remarqué que sur pas mal de sites, surtout avec le style Layout 2.0, les designers avaient une fâcheuse tendance à ajouter un petit macaron pour afficher une nouvelle version, un prix ou encore un slogan. Avec ma découverte des formes définies de Photoshop voici un petit tutorial pour créer ce macaron.


Tutorial 116 - Fichier PSD: clic pour télécharger le fichier source PSD utilisé dans ce tutorial

ETAPE 1

Je crée un nouveau document et je vais sélectionner l’outil formes personnalisées (U). Puis je sélectionne la forme voulue, pour ce faire regardez l’image ci-dessous.

ETAPE 2

J’appuie sur Shift et je crée ma forme au milieu de mon document.

ETAPE 3

J’ajoute un dégradé, pour cela je clique dans calque > style de calque > incrustation de dégradé.

ETAPE 4

Je duplique mon calque et je le réduis de 5 % pour cela je clique sur édition > transformation > homotopie et dans les options j’entre 95 %. Sur le calque du dessous je modifie le dégradé en le rendant plus foncé.

ETAPE 5

Je récupère la sélection de ma forme, Ctrl + Clic sur mon calque, et je crée un nouveau calque que je place au dessus des autres. Je prends l’outil pot de peinture et je remplis ma sélection de blanc. Je vais dans sélection > modifier > contracter > et j’entre 4 pixels. J’appuie maintenant sur Suppr. Je devrais avoir un résultat comme ci-dessous.

ETAPE 6

J’ajoute un masque de fusion et j’applique un dégradé noir > blanc du bas vers le milieu (haut). Ensuite je diminue son opacité à 80%.

ETAPE 7

Je récupère comme précédemment la sélection de ma forme, puis je crée un nouveau calque, je remplis de blanc ma forme. Je désélectionne et avec l’outil sélection Ellipse (M) je crée un grand rond pour supprimer ensuite le pixel gênant, le tout pour arriver à ce résultat.

ETAPE 8

J’ajoute un masque de fusion, j’applique mon dégradé du bas vers le haut, et je diminue l’opacité de ce calque à 80 %.

ETAPE 9

J’applique une ombre portée sur le calque tout en dessous, opacité 50% taille 5 distance 10.

ETAPE 10

J’ajoute une photo, un texte, utilisation multiple, à vous de jouer maintenant !

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 11 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.

5 avril 2007 12:13, par Hervé

Toujours aussi efficaces ces tutos !

Cependant, pour ajouter au pédagogique de la chose, il serait sans doute bon, pour chaque étape, de préciser le pourquoi de chaque action. Ainsi, chaque opération serait mieux assimilée et pourrait spontanément être réutilisée par le visiteur sur d’autres projets.

Ca n’enlève rien au grand merci pour le partage de savoir
Répondre
- 5 avril 2007 13:11, par Wonka
  
  Oui le but final c’est qu’une fois le tutorial finie chaque personne soit à même de refaire ce style dans une autre composition et cela pour un but similaire ou quelque chose de complétement différent, le but est de comprendre Photoshop et petit à petit réussir n’importe quelle composition !
  Répondre
26 avril 2007 15:35, par Baldy

Je trouve le style joli mais je n’arrive pas à reproduire la totalité. Il me manque des infos, nottament sur les dégradés avec les masques de fusion. Je n’arrive pas à reproduire quelque chose d’aussi joli et c’est dommage
Répondre
- 26 avril 2007 15:58, par Wonka
  
  Ce n’est pas sorcier, tu ajoute un masque de fusion : calque > ajouter un masque de fusion > tout faire apparaitre.
  
  Ensuite avec un dégradé noir sur blanc tu en crée un de tel sortie que celui ci soit comme tu veux.
  
  Perso je fais toujours au moins 4 essaie avant d’avant d’avoir quelque chose de correct.
  
  Il ne faut pas se contenter d’un dégradé du bas vers le haut. Parfois il faut le commencer 30 pixels plus en bas et le finir 30 pixels plus en haut.
  
  A toi de trouver la nuance
  Répondre
3 août 2007 21:29, par AKD

Je trouve qu’il manque pas mal d’infos pour qu’un novice s’y retrouve.. si je puis me permettre.

Pour faire la forme au centre => créer un document 800x600 par ex puis tirer les règles. A l’intersection des 2 règles faire Alt+Shit pour créer une forme centrée

par ex Etape 1 : l’ajout du dégrader.. ne peut se faire si on garde le calque arrière-plan. Donc faut il créer un nouveau calque pour créer la forme ?

De petites précisions qu’un débutants aurait besoin car si pour toi les étapes intermédiaires sont évidentes cela ne le sera pas pour lui. Sinon bon tuto facile à prendre en mains.. pour un initié+
Répondre
23 novembre 2007 16:20, par coco

Merci pour tous tes tutos ! C’est vraiment un réel plaisir de pouvoir faire qq chose de correct sur photoshop :D

Par contre, je bloque sur une étape de ce tuto, l’étape 5..

“Récupérer la séléction de la forme” => prendre le premier macaron (calque1) ?

“ctrl + clic” => pour faire quoi ?

Quand je le fais, je me retrouve avec un calque vide, ça doit venir du “récupérer la séléction de la forme” que j’ai pas compris :o

Et quand j’essaies de contourner un peu le problème, il me demande de pixéliser le calque pour pouvoir le remplir avec le pot de peinture, c’est normal ?

Merci d’avance !
Répondre
- 23 novembre 2007 17:33, par Wonka
  
  Oui alors il faut faire ctrl + un clic sur le calque crée dans l’étape 4. Ensuite tu crée un nouveau calque et tu remplie de blanc.
  
  C’est assez simple non ?
  
  PS : Pour vérifier que ta sélection est bien récupérer il faut que tu voit les ponitillés autour de ta forme.
  
  Puis tu suis le reste de l’etape 5. Bonne chance
  
  Si tu as encore un problème n’hésite pas !
  Répondre
9 février 2008 20:24, par Jean-Alexandre

Petit probleme lors de l’étape 5. En effet, je n’arrive pas à créer le petit contour blanc : celui qui nécessite le nouveau calque rempli de blanc. Mon probleme se situe au niveau de la sélection du calque de l’étape 4 puisque lorsque je crée le nouveau calque (qui est vide) il ne reprend pas le calque que j’ai sélectionné et donc quand je le remplis de blanc il rempli le calque en entier cachant les calques du dessus. J’espere que tu as compris et que tu pourras m’aider.
Répondre
- 13 février 2008 00:43, par Jean-Alexandre
  
  Nous allons récupérer la sélection du corps de la femme ; pour cela faites un « Ctrl+clic » sur le calque « Elisha ».
  
  http://img148.imageshack.us/img148/8591/image175om.jpg
  
  Vérifiez que vous vous trouvez bien sur le calque « pluie copie » et appuyez sur la touche « Suppr ».
  Répondre
6 mars 2008 11:28, par >Bobinou

Vraiment pas pratique ton tutoriel. Je croyais justement que le but était d’apprendre quelque chose à l’utilisateur... Faut croire que c’était pas vraiment ton but. M’ enfin !
Répondre
- 24 mars 2008 19:10, par yoyo92
  
  Moi, je plante à l’étape 7. Mon élipse, j’en fais quoi ??? Elle me bouufe tout le bas de l’image et ne se borne donc pas au bord du « macaron » ??? Merci d’avance
  
  Voir en ligne : Problème avec l’élipse
  Répondre