Créer une pub design pour téléphone portable

Voici un tutoriel pour créer une pub pour un opérateur téléphonique. Les effets utilisés sont plutôt simples à mettre en œuvre, ces techniques allient retouche photo et effet visuel graphique.

Ce tutorial se compose en deux articles :

Le premier vous explique les étapes de composition de la publicité et second article vous explique précisément comment créer les formes 3d (les cubes) utilisées à l’étape 7->http://www.wks.fr/Creer-des-formes-3d-simplement.html].

Comme d’habitude, je joins ci-dessous le fichier source Photoshop utilisé lors de l’élaboration de cet article, vous pourrez y retrouver les styles utilisés ainsi que la totalité des calques.

Photoshop - 10.8 Mo

Et vous avez même droit au PSD correspondant aux cubes 3d utilisés dans ce tutoriel :

Photoshop - 1.1 Mo

Commençons :

ETAPE 1

J’ouvre Photoshop et je crée un très grand document, je remplis le fond de noir et je crée un nouveau calque que je remplis également de noir, sur celui-ci j’applique un style de calque : menu calque > style de calque > incrustation de dégradé.

Voici la configuration de mon dégradé :

JPG - 108.2 ko

ETAPE 2

Avec un très large pinceau diffus je crée une zone sombre en haut à droite de mon image.

ETAPE 3

J’ajoute mon personnage principal, dans mon concept la fille qui tient un portable dans sa main est ultra contente (il suffit de voir sa position) car elle a dans son appareil une quantité impressionnante de musiques et justement c’est ce qu’on veut promotionner grâce à cette publicité.

Je copie et je colle mon personnage dans ma composition et je commence à le détourer.

Voici la photo que j’ai utilisé à la base :

ETAPE 4

Une fois que mon personnage est parfaitement détouré (si vous avez du mal je vous invite à relire les tutoriaux correspondants au détourage ici par exemple : http://www.wks.fr/Detourer-une-photo-complexe.html).

Je crée en dessous, un nouveau calque et grâce à un très large pinceau diffus je crée une lueur claire. Je passe le calque en opacité 50%.

ETAPE 5

Je crée un nouveau calque que je place juste au dessus de la lueur dernièrement créée et avec un rectangle que je duplique et re-duplique, je crée cette illustration du son (cela correspond à l’intensité du son sur une chaine hifi par exemple et donne une touche design à notre composition).

ETAPE 6

Je passe ce calque en mode de fusion incrustation et je peux me permettre de diminuer l’opacité de 10 ou 20 %.

ETAPE 7

Je place mes cubes 3d, chacun symbolisant une musique, bougre elle possède vraiment beaucoup de musiques dans son petit appareil ;)

Ah ! vous ne savez pas comment faire pour créer ces formes ? Pas de panique un tutoriel est là pour vous donner l’astuce : Créer des formes 3d, simplement, avec Photoshop.

ETAPE 8

Je vais colorer ces formes pour cela, je crée un calque juste au dessus des cubes et je le remplis avec l’outil pot de peinture, je place ce calque en mode couleur (voir le menu déroulant des modes de fusion dans la fenêtre des calques).

Attention pour ne colorer que les cubes vous devez récupérer la sélection de chaque cube, pour cela j’appuie sur Ctrl + clic sur un premier calque puis Ctrl + Maj + un Clic sur chaque calque correspondant au cube.

Ensuite menu sélection > intervertir et enfin touche Suppr.

ETAPE 9

Je rajoute le nom de la marque plus les slogans et le tour est joué. Pour information : j’ai utilisé la police de caractères « Sensation » (une police que déjà utilisée dans ce tutorial : http://www.wks.fr/Effet-de-typographie-sans-serif.html

Et voila c’est terminé, pour toute question, merci d’utiliser le forum ci-dessous.

Pour voir cette image en full size merci de cliquer ici : Voir l’image finale en HD !

Et si jamais vous avez réussis à faire ce tutorial jusqu’au bout alors n’hésitez pas une seconde à nous faire partager votre composition en utilisant la galerie se trouvant en haut de cette page.

Merci à tous d’avoir lu ce nouvel article.

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 !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

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

  • 20 novembre 2008 17:44, par flomac

    Juste pour signaler qu’il manque le lien vers le tuto « comment créer des cubes sur photoshop ». ;)

    Répondre
    • 21 novembre 2008 10:13, par Wonka

      C’est réparé !

      Répondre
  • 21 novembre 2008 10:17, par Wonka

    Juste pour signaler la suppression d’un message, non pas que la critique me dérange bien au contraire, mais l’image qui était présente dans ce commentaire faisait de beau dégât dans la mise en page du site.

    Récapitulatif : cette image mettait en avant le file coupé et un défaut de détourage à droite du personnage en dessous des cheveux.

    Et je réponds coupable aux deux fautes, la première volontaire dans le but de transformer un ipod en téléphone ^^ et la seconde, je ne l’avais tout simplement pas remarqué.

    Cependant je vais revoir ces problèmes et vous éditer une nouvelle image, histoire de faire les choses proprement ^^

    En tout cas merci à cet auteur anonyme qui décidément à l’œil affuté ;)

    Répondre
    • 21 novembre 2008 11:33, par Wonka

      Pour information voici l’image explicative par notre inconnu :

      Free Image Hosting at www.ImageShack.us

      Répondre
        • 21 novembre 2008 19:14

          Bien mon cher wonka. Ps : je ne souhaitez pas détériorez ton site. Mais l’image était tros volumineuse que je ne pouvait pas l’uploader. Ps : l’image de fin est-elle pas plus belle.

          Répondre
          • 22 novembre 2008 11:35, par Wonka

            Oui j’avais bien compris le problème d’upload, oui sans doute qu’elle est plus belle :) Enfin je pense, et toi le penses tu ? ;)

            Répondre
            • 22 novembre 2008 13:50

              bien sur. C’est sur des petit détail comme sa que un projet entier peut crouler. Enfin. Le problème a été régler donc c’est bien.

              Répondre
  • 24 novembre 2008 01:31, par starket

    Voici la première création que je publie sur le site. Une de mes meilleures bien que facile. En tout cas merci pour tous ces tutos géniaux. C’est de loin un des meilleurs, si ce n’est le meilleur, site de graphisme.

    Répondre
    • 24 novembre 2008 10:14, par Wonka

      Et j’espere que ce ne sera pas la dernière, merci pour ton commentaire ainsi que pour ta participation graphique.

      Répondre
  • 4 décembre 2008 13:26, par kom1dune

    En m’inspirant de ce tuto j’ai créé ça...

    Encore merci pour les idées Wonka ^^

    Répondre
    • 4 décembre 2008 21:53, par Wonka

      Mais de rien, et le concept de ta publicité est intéressante ;)

      Répondre
  • 21 décembre 2008 13:26

    sa serai simpa de mettre en ligne un tutorale de la technique de tilt-shift... merci

    Répondre
  • 17 juillet 2009 23:29, par aldau18

    Super tuto, j’adore ce que tu fait, ton site est génial. J’apprends de jour en jour grâce a toi, merci.

    Voila ce que j’ai réussi à faire, (je débute ^^)

    http://aldau18.free.fr/Pub.png

    Dite moi ce que vous en pensez.

    Répondre
  • 20 juillet 2009 18:13, par InFy

    ds le lien pour creer une forme simple en 3d tu as une erreur

    le lien fourni dirige vers la http://www.wks.fr/Effet-de-typographie-sans-serif.html

    et non vers celui-ci http://www.wks.fr/Creer-des-formes-3d-simplement.html

    Ptite correction a apporté mais je chipotte sinon je kiff bien ton site bien expliqué et tout continu ;)

    Répondre
  • 17 août 2009 03:05, par Votre pseudonyme

    bonjour j’adore la tuto et le site est genial. je suis debutant dans photohop et je voudrais savoir pour l’etape 5 je n’arrive pas a dupliquer les carres blanc moi je fait le rectangle -> clique droit -> remplir et je choisis la couleur blanc. et je deplace mon conttour de rectangle avec les touches flechés et je repete l’operation plein de fois mais ça ne donne pas un resultat tres saisfaisant. aussi pour l’etape 4 quand je veux faire l’éclaircissement on voit trop la ligne ou j’ai tracer avec le pinceau. voila en esperant etre assez claire. merci c’est genial ce site

    Répondre
  • 17 août 2009 12:42, par Wonka

    Pour créer les carrés blancs il faut simplement une sélection en rectangle et le remplir de blanc, déplacer la sélection et remplir de blanc, déplacer et remplir etc. bonne chance !

    Répondre
  • 2 novembre 2009 14:20, par Nathoo

    Super sympa ce tuto =D

    voici mon rendu

    Répondre
  • 4 août 2011 15:39, par switch

    Bonjour Wonka,

    Est-ce que l’image finale est libre de droit ? Nous souhaiterions l’utiliser pour l’une de nos campagnes publicitaires sans trop la modifier.

    Merci par avance Jonas Katz

    Répondre

Laissez un commentaire

Remplissez correctement le formulaire puis appuyez sur Validez.