32
Créer la pub de l’Ipod nano chromatique avec Photoshop
Suivez ce tutorial Photoshop afin de tenter de reproduire la publicité d’Apple pour l’iPod nano chromatique. Vous apprendrez à reproduire à iPod puis à le mettre en situation. Ouvrez Photoshop et à vous de jouer.
A la suite de la sortie internationale du nano chromatique d’Apple je n’ai malheureusement pas résisté à la tentation de vous écrire un tutoriel vous expliquant : la création de ce nouvel Ipod ainsi que la mise en scène faite dans leur spot de publicité.
Le tutoriel se compose donc de trois parties, la création de l’Ipod et sa duplication, la création des coulées de peinture et la création du titre.
Le tutoriel n’est pas forcément très compliqué, mais il est un peu long et pourra paraître fastidieux pour les vrais débutants de Photoshop, pour les autres je vous invite à vous lancer, cela vaut vraiment la peine, faites moi confiance 
J’ai voulu faire bien, car en plus de cela, ce tutorial est le 400e article publié sur le site WonkaStudio ; une sorte de récompense. Voici donc le tutoriel « Créer un Ipod nano chromatique ».
Avant de commencer je propose à ceux qui aimeraient connaitre la technique en partant du fichier source Photoshop, deux fichiers à télécharger :
ETAPE 1
J’ouvre le logiciel Photoshop et je crée un nouveau document sur fond blanc. Je sélectionne l’outil rectangle arrondi et je crée sur mon document la base de mon futur Ipod.
ETAPE 2
Je vais lui ajouter un style de calque : menu calque > style de calque > incrustation de dégradé, dont voici la configuration : rien de bien spécial, j’ai repris le code couleur d’Apple !
ETAPE 3
Avec l’outil des formes personnalisées ellipse, je crée un premier rond au dessus de ma base verte (petite astuce : en sélectionnant les deux calques je peux les aligner correctement en aller dans le menu calques > alignement > aligner > centrer dans le sens horizontal).
ETAPE 4
Je crée un rond que je place par-dessus le premier et je le remplis de vert, ou j’utilise un masque de fusion pour vider l’intérieur du premier rond ! Je peux utiliser les outils d’alignement vus à l’étape 3 pour aligner parfaitement les deux ronds.
ETAPE 5
Tout simplement avec l’outil texte, j’ajoute le label menu en haut de mon sélecteur.
ETAPE 6
Je crée grâce aux formes personnalisées le contrôleur de droite. Je pense qu’il n’y a pas besoin de plus d’explications sur la création de deux triangles et une barre grise ?
ETAPE 7
Même chose pour tous les contrôleurs.
ETAPE 8
Avec l’outil des formes personnalisées : je crée un rectangle arrondi noir sur le haut de mon Ipod (celui-ci correspond à l’écran).
ETAPE 9
J’ajoute deux styles de calques, une incrustation de couleur et une lueur interne noire dont voici la configuration :
ETAPE 10
Je vais créer la partie supérieure de mon écran : très simplement, je crée un nouveau calque et sur celui-ci je crée une barre en haut remplie d’un gris clair et sur les bords gauche et droit, des parties plus sombres. Voir ci-dessous pour plus de détails :
ETAPE 11
J’ajoute le titre de mon album écouté sur mon Ipod (j’invente, de toute manière le titre n’est pas visible
ETAPE 12
J’ajoute la pochette de mon album préféré !
ETAPE 13
Je crée un nouveau calque sous ma pochette d’album, je récupère la sélection de la pochette, je descends la sélection et sur le calque dernièrement créé j’ajoute une lueur gris-claire.
ETAPE 14
J’ajoute une barre de progression, qui est tout simplement composée d’un rectangle gris-clair et de la même barre coupée mais en couleur bleue !
ETAPE 15
J’ajoute les informations de lecture tout autour de ma barre de progression, j’utilise tout simplement l’outil de texte.
ETAPE 16
Je vais maintenant créer la lueur qui se trouve derrière mon Ipod, je crée donc un nouveau calque que je place juste en dessous de la base verte de mon Ipod (dans la fenêtre des calques). Je récupére la sélection de ma base Ctrl + Clic sur le calque et je remplis la sélection avec le pot de peinture noire.
Je vais maintenant diffuser ma forme noire, pour cela je vais dans le menu atténuation puis flou gaussien, je sélectionne 3 px et je clique sur ok.
Et enfin j’ajoute un masque de fusion, je crée un dégradé de noir vers blanc du haut vers le bas, pour cacher toute la partie supérieure de ma lueur.
ETAPE 17
Avec la même technique et sur un nouveau calque je crée une ellipse noire qui va me permettre de créer une seconde ombre. Voir ci-dessous.
ETAPE 18
Comme à l’étape 17, je crée un masque de fusion pour camoufler les parties indésirables.
ETAPE 19
Je place tous mes calques dans un dossier que je duplique autant de fois que je veux avoir d’ipod sur ma composition. Il ne me reste plus qu’à modifier les couleurs de chacun pour donner ceci.
ETAPE 20
Je vais maintenant attaquer la seconde étape, la création de la coulée de peinture, pour cela très simple : une forme créée avec la plume et un style de calque pour le biseautage. Pour commencer je crée la forme.
ETAPE 21
J’ajoute mon style de calque : biseautage et estampage.
ETAPE 22
Je duplique ma forme et je la place en dessous de chaque Ipod. Je modifie bien entendu la couleur en conséquence.
ETAPE 23
J’ajoute un titre juste au dessus, pour un souci de police, j’en ai choisi une que tout le monde doit avoir, c’est Arial : )
ETAPE 23
Et pour terminer le tout, j’ajoute deux styles de calques : une incrustation de dégradés et un biseautage dont voici la configuration :
Et voici ma composition finale ! On s’y tromperai non ? Bon je suis sûr qu’il y a moyen de faire un mieux sur le rendu global et l’ambiance de la photo mais je vous laisse le soin de vous appliquer mieux que moi ; )
N’hésitez pas non plus à créer votre Ipod perso avec des couleurs plus originales que celle–ci et poster ensuite vos créations dans la galerie se trouvant en haut de cette page.
Pour toute question, vous pouvez poster vos messages dans le forum ci-dessous.
Bonne chance à tous pour la réalisation de votre Ipod nano chromatique.
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 54 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.
-
25 septembre 2008 18:19, par dragon09
Super tuto Wonka comme d’habitude ! J’ un plus tard !
Répondre-
19 janvier 2009 11:52
Salut tout le monde, je poste mon ptit truc ici, bon dsl j’ai commencer cs3 la semaine derniere et j’ai fais les ipods et le reste a ma facon. Pas que la technique de Wonka etait moins belle mais elle ne me plaisai pas et j’ai pu utiliser pas mal d’autres fonctions :p donc voila :
[url=http://img244.imageshack.us/my.php ?image=sanstitre2ku1.jpg][img=http://img244.imageshack.us/img244/9987/sanstitre2ku1.th.jpg][/url]
En tout cas merci a toi pour les tutos sa va beaucoup m’aider ^^ =)
Répondre-
19 janvier 2009 22:48, par Warez
désolé de reposter mais j’avais pas vu comment montrer mon image que voici donc =) :
Répondre
-
-
-
26 septembre 2008 16:23, par Nicolas SORET
Toujours le meilleur. Sérieux tu es toujours le meilleur à mes yeux.
Répondre-
27 septembre 2008 14:32, par tksd
Vraiment sympa ce tuto ^^ par contre wonka pas moyen de faire une coulure correct avec tes conseils
snifps : pb aussi a l’upload de ma créa (nu such file directory)
Répondre-
27 septembre 2008 21:02, par Wonka
Tu peux désormais uploader ton image, j’ai corrigé le problème
Répondre
-
28 septembre 2008 18:45
OK ça marche ^^ tu peux me filer quelques explications supplémentaire pour la coulure ? elles ressemblent à rien les miennes :S
Répondre-
29 septembre 2008 10:47, par Wonka
Bah je peux oui mais je vois pas ce que je pourrais dire de plus ? Une couleur c’est une couleur
Répondre Utilise la pipette de Photoshop pour récupérer les bonne couleurs à partir de la photo de apple a télécharger sur leur site !-
29 septembre 2008 11:27
lol je parlais pas de couleurs ^^ mais de coulures :D en fait je creer ma forme à la plume et quand j’applique mon biseautage et estampage l’effet n’est pas naturelle du tout
Répondre ta pas une idée ? merci encore-
29 septembre 2008 23:42, par Wonka
aaaaaahhhh ca change tout
Selon la taille de ton image il faut régler la taille du biseautage, fait attention aussi à voir les réglages en bas des options dans la fenêtre biseautage il faut augmenter le pourcentage des blancs et diminuer le pourcentage des noirs Regarde bien l’image des réglages dans le tutoriel !
Répondre-
2 octobre 2008 15:50, par Jazzh
tu recuperes le couleur avec un logiciel nommé : boite a couleur c’est un logiciel en fr gratuit, tu le taperas sur google telechargez boite a couleur un logiciel important et efficace pour recup tous les couleurs.
Répondre
-
-
-
-
-
-
-
-
27 septembre 2008 18:55, par Reckoner
Super tuto Wonka bravo ! Je l’attend depuis que j’ai vu la pub =P. Voila ma création :
Répondre
-
-
28 septembre 2008 20:59
oleke, j’espère que l’ipod resemble plus a celui de wonka que au tien
Répondre-
29 septembre 2008 21:43
[quote]oleke, j’espère que l’ipod resemble plus a celui de wonka que au tien [/quote]
Ben excuse moi de débuter m. le pro...
Répondre-
29 septembre 2008 23:41, par Wonka
Moi je trouve qu’au contraire pour un début c’est vraiment pas mal. Bonne continuation en tout cas
Répondre
-
-
-
-
-
10 octobre 2008 16:23, par Sayaka
Le tuto est génial comme d’habitude, mais j’aimerais savoir si tu pourrais expliquer comment ajouter le petit bouton en haut de l’Ipod. Merci d’avance. ^^
Répondre-
10 octobre 2008 18:23, par M@XimE
Bonjour !! je trouve ce tuto vraiment bien expliquer mais pouriez vous SVP juste m’expliquer l’étape 16 car je n’y arive pas du tout !!! merci
Répondre-
11 octobre 2008 18:02, par M@XimE
J’ai trouver comment faire et voila le résultat !
il y a mieu mais je vais l’arranger !
Répondre-
12 octobre 2008 21:14, par Aschen
Scusez moi, (je m’adresse à tous ceux qui ont fait un iPod nano-chrom’), avez-vous utilisé la police Myriad ou une autre (Arial, etc) pour les « textes » ?
Pour ma part voici ma création ^^
http://img413.imageshack.us/img413/1408/dorotheaiisipodminior6.jpg
Répondre
-
-
-
-
-
13 octobre 2008 17:08, par Royal
Salut, en fait c’est juste à la fin quand on duplique les « coulées », comment faire pour en faire des différentes étant donné que l’on duplique ?
Merci d’avance
Répondre-
-
-
-
29 octobre 2008 22:24, par Lily B.
Merci pour le tuto , j’ai utilisé deux trois méthodes a moins pour certain détails, sinon pour la coulure après bah j’ai pas été capable d’en faire un bien , j’ai fini par abandonner ^^
Voir en ligne : Mon oeuvre
Répondre
-
-
-
-
-
-
25 décembre 2008 23:58, par al
Répondre
bonjour, wonka. et merci pour ce tuto. ça m’a pris la tête pendant un moment. mais au final, je suis content, car en plus, je vais pouvoir m’en servir comme base, pour une carte de vœux... salut -
26 décembre 2008 14:32
Répondre
salut wonka, je me permet d’envoyer une 2ieme image presque identique, afin de te demander ton avis : pour une éventuelle carte de vœux(non virtuelle), est-il intéressant de laisser l’antenne et le câble, que je trouvai rigolos ? merci pour ta réponse et d’éventuelles critiques.-
26 décembre 2008 23:34, par Wonka
L’image est très sympa, par contre pour le câble est l’antenne c’est toi qui voit
Répondre personnellement je retirerais ces deux éléments qui de toute manière apporte pas grand chose à la composition globale, sinon c’est du bon travail -
-
28 décembre 2008 19:37
merci pour ce tuto
j’ai dérivé un peu sur la fin , j’ai mis quelques autres effets et pr moi ça donne ça http://img2.hostingpics.net/pics/166926Ipod_style.png
voili voilou
Répondre
-
-
-
-
22 janvier 2009 15:44, par titia6903
Très bon tutoriel ! Voila ma ptite créa ou plutot mon ptit recopiage en rajoutant ma touche perso
RépondreVos impressions ???
---> titia6903.skyblog.com -
22 janvier 2009 16:38, par titia6903
Voila ma créa..en blanc Vos impressions ?titia6903.skyblog.com
Répondre-
27 janvier 2009 16:05, par al
très joli, simple, et agréable à voir. j’adore le fonds(les arabesques)
Répondre
-
-
29 janvier 2009 17:24, par elYa
super tuto ! fort sympathique j ai poster ma créa encore bravo !!
Répondre -
-
5 février 2009 15:36, par Wonka
En voyant les 25 images dans la galerie des membres je trouve que le tutoriel est plutôt clair et suffisamment complet pour être compris
Répondre
-
-
4 mars 2009 19:44, par laurya
Répondre
Super tuto comme d’ab ! un tuto sur cs4 ? avec les options 3D ? -
4 mars 2009 19:46, par laurya
Répondre
Super tuto comme d’ab !! bravo ! a quand un tuto sur cs4 avec la 3d ?? -
28 juin 2009 00:10, par Shin
Tu as oublié d’expliquer comment créer le bouton au dessus x] Sinon c’est tout simplement merveilleux, superbe tuto, presque rien à redire >
Répondre -
20 juillet 2009 00:15, par iPodophobe
Pourquoi de la pub pour un tel gadget ? Mettez votre talent au service d’un autre produit ou d’une cause !
Répondre -
12 novembre 2010 22:14, par Rhody
Je bloque dès le début. C’est pour mettre le dégradé (couleur de mon ipod) Je ne trouve pas les bonnes couleurs pour faire à peu près pareil que l’exemple... Comment faire ? Je débute vraiment sur toshop et j’ai le CS5.
En fait ça fais plus clair au milieu mais plus foncé en BAS et EN HAUT et pas sur les côtés, voilà mon problème. Après, la suite, je pense pouvoir y arriver.
Merci d’avance.
Répondre -
8 novembre 2012 13:38, par Ellis
super tutoriel merci mais où est ce qu’on peu trouver les codes couleurs d’apple ?
merci d’avance
Répondre
