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 :

Photoshop - 418.2 ko
Photoshop - 2.7 Mo

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 !

JPG - 158.2 ko

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 :

JPG - 33.6 ko
JPG - 64.3 ko

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 :

JPG - 53.4 ko

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.

JPG - 73.7 ko

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 :

JPG - 76.1 ko
JPG - 154.6 ko

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.

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 54 commentaires publiés sur cet article
  • dragon09

    Super tuto Wonka comme d’habitude ! J’ un plus tard !

    Répondre
    • 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
      • Warez

        désolé de reposter mais j’avais pas vu comment montrer mon image que voici donc =) :

        Répondre
  • Clément

    Génial ! Merci Wonka !

    Répondre
  • Nicolas SORET

    Toujours le meilleur. Sérieux tu es toujours le meilleur à mes yeux.

    Répondre
    • tksd

      Vraiment sympa ce tuto ^^ par contre wonka pas moyen de faire une coulure correct avec tes conseils :( snif

      ps : pb aussi a l’upload de ma créa (nu such file directory)

      Répondre
      • Wonka

        Tu peux désormais uploader ton image, j’ai corrigé le problème ;)

        Répondre
        • OK ça marche ^^ tu peux me filer quelques explications supplémentaire pour la coulure ? elles ressemblent à rien les miennes :S

          Répondre
          • Wonka

            Bah je peux oui mais je vois pas ce que je pourrais dire de plus ? Une couleur c’est une couleur ;) 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 !

            Répondre
            • 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 :( ta pas une idée ? merci encore

              Répondre
              • 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
                • 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
    • Wonka

      Est bien Merci :)

      Répondre
  • Reckoner

    Super tuto Wonka bravo ! Je l’attend depuis que j’ai vu la pub =P. Voila ma création :

    Image hébergée par servimg.com

    Répondre
    • Oleke

      Vraiment sympa ce tuto, merci Wonka ! ;)

      Répondre
      • oleke, j’espère que l’ipod resemble plus a celui de wonka que au tien

        Répondre
        • [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
          • Wonka

            Moi je trouve qu’au contraire pour un début c’est vraiment pas mal. Bonne continuation en tout cas ;)

            Répondre
  • 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
    • 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
      • M@XimE

        J’ai trouver comment faire et voila le résultat !

        il y a mieu mais je vais l’arranger !

        Répondre
        • 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
  • June

    Répondre
    • 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
      • Image Hosted by ImageShack.us

        @ KoOp’ Art™

        Répondre
        • Wonka

          Pas mal, je me suis permis de l’ajouter à la galerie ;)

          Répondre
          • Pas de soucis =) Je m’en vois même flatté =P

            Répondre
            • 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
              • Goofi

                Merci pour ce tuto il est vraiment bien.

                Répondre
  • al

    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

    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.

    Répondre
    • Wonka

      L’image est très sympa, par contre pour le câble est l’antenne c’est toi qui voit ;) 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 :)

      Répondre
  • cleo

    Répondre
  • titia6903

    Très bon tutoriel ! Voila ma ptite créa ou plutot mon ptit recopiage en rajoutant ma touche perso :-)Vos impressions ??? ---> titia6903.skyblog.com

    Répondre
  • titia6903

    Voila ma créa..en blanc Vos impressions ?

    titia6903.skyblog.com

    Répondre
    • al

      très joli, simple, et agréable à voir. j’adore le fonds(les arabesques) :-)

      Répondre
  • elYa

    super tuto ! fort sympathique j ai poster ma créa encore bravo !!

    Répondre
  • Très bon tuto, voici le mien !

    Répondre
  • pas complet pour quelqun qui connait peu toshop

    Répondre
    • 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
  • laurya

    Super tuto comme d’ab ! un tuto sur cs4 ? avec les options 3D ?

    Répondre
  • laurya

    Super tuto comme d’ab !! bravo ! a quand un tuto sur cs4 avec la 3d ??

    Répondre
  • demon of dark

    super tuto tré bien déffini !!!!!

    Répondre
  • Sandrine

    Mon premier tuto réalisé sur wks ! ;-)

    Répondre
  • 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
  • iPodophobe

    Pourquoi de la pub pour un tel gadget ? Mettez votre talent au service d’un autre produit ou d’une cause !

    Répondre
  • Tensa

    Un iphone la prochaine fois ? x)

    Répondre
  • 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
  • Ellis

    super tutoriel merci mais où est ce qu’on peu trouver les codes couleurs d’apple ?

    merci d’avance

    Répondre
Ajouter un nouveau commentaire