Créer l’affiche de la série télé FRINGE

Voilà un tout nouveau tutoriel dans tutsps nous allons créer l’affiche de la superbe série télévisée Fringe en abordant des nouvelles techniques pour la 3D de Photoshop cs5. Avant de commencer téléchargez le pack suivant

et voilà un aperçu du rendu final

Creer_l_affiche_de_la_serie_fringe57Ouvrez un nouveau document dans Photoshop Cs5 de 1920×1080 pixels Résolution 72Dpi couleur RVB/8 Bit avec un fond Noir

Prenez l’outil dégradé (G) et dessinez un dégradé radial en partant du bas de votre doc ver le centre avec #5fa6c6 ver transparent comme couleur

créer l'affiche de la série télé FRINGE avec photoshop cs5

Puis allez dans Menu > Filtre > Atténuation > Flou Gaussien

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Réduisez l’opacité de ce dernier à 30%

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ensuite créez un nouveau calque (Ctrl+Shift+N), prenez l’outil pinceau (B) dureté 0% puis dessinez des ronds avec la couleur jaune (#fbec00)

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Créez un autre calque et remplissez le avec du noir en utilisant l’outil pot de peinture (G) puis allez dans Menu > Filtre > Artistique > Grain photo puis changez le mode de fusion de ce dernier en Superposition

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Maintenant importez la texture grunge bleu dans votre document

créer l'affiche de la série télé FRINGE avec photoshop cs5

Changez son mode de fusion en lumière tamisée et réduisez son opacité à 63%

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Tapez le nom de la série « FRINGE » en utilisant la police Helvetica avec 160pt pour la taille du texte

créer l'affiche de la série télé FRINGE avec photoshop cs5

Pour cette étape vérifiez que le pilote de vos cartes graphiques est à jour, allez dans Menu > 3D > Repoussé > Calque de texte

créer l'affiche de la série télé FRINGE avec photoshop cs5

Si vous n’avez pas la matière métal allez dans l’onglet matière puis sur tout ensuite sur la petite flèche et pour finir cliquez sur charger des matières

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ensuite basculez l’interface de Photoshop cs5 de conception ver 3D dans le menu tout en haut

créer l'affiche de la série télé FRINGE avec photoshop cs5

Cela va modifier l’interface de travail de Photoshop

créer l'affiche de la série télé FRINGE avec photoshop cs5

Allez dans l’onglet 3D (éclairage), cliquez sur le bouton Créer un éclairage puis sur Nouvel éclairage directionnel

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ensuite cliquez sur le bouton Désactiver/Activer les extras 3D et cliquez sur éclairage 3D pour l’activer

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ensuite cliquez sur l’outil mise à l’échelle de l’objet 3D (K)

  créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Retourner à votre onglet 3D (éclairage) puis cliquer sur l’outil panoramique de l’éclairage 3D

  créer l'affiche de la série télé FRINGE avec photoshop cs5

Puis déplacez l’éclairage comme ceci

créer l'affiche de la série télé FRINGE avec photoshop cs5

Maintenant prenez l’outil Rotation de l’éclairage 3D dans le même menu puis faite une petite rotation sur votre éclairage comme ceci

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Basculez ver l’onglet 3D (scène) allez dans Qualité et choisissez Ebauche de lancé de rayon et attendez un peu, cela dépond de la vitesse de votre ordinateur

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Et voilà le résultat de votre texte 3D

créer l'affiche de la série télé FRINGE avec photoshop cs5

Dupliquez votre texte 3D et pixellisez-le en allant dans Menu > Calque > Pixellisation > 3D

Ensuite allez dans Menu > Filtre > Esthétiques > Contour lumineux

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Changez son mode de fusion en lumière tamisée

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ensuite créez un nouveau calque en dessous des deux derniers calques de texte, prenez l’outil pinceau (B) avec une forme avec une dureté de 0% et dessinez un ombre porté comme ceci

créer l'affiche de la série télé FRINGE avec photoshop cs5

Créez un autre calque en dessous du calque de l’ombre, toujours avec votre outil pinceau essayez de dessinez une forme radial avec des contours progressifs avec la couleur suivante #fefecd

créer l'affiche de la série télé FRINGE avec photoshop cs5

Allez dans Menu > Filtre > Atténuation > Flou gaussien

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Réduisez l’opacité de ce dernier à 50%

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Nous allons maintenant ajouter un reflet à notre texte pour le faire dupliquez les deux calque de votre texte puis fusionnez-les (Ctrl+E) puis allez dans Menu > Edition > Transformation > Symétrie axe vertical et déplacez votre calque ver le bas

créer l'affiche de la série télé FRINGE avec photoshop cs5

Réduisez son opacité à 50% et effacez la partie inférieur avec l’outil gomme (E) pour obtenir ceci

créer l'affiche de la série télé FRINGE avec photoshop cs5

Maintenant créez un autre calque mais au dessus de votre texte, prenez l’outil dégradé (G) et dessinez un dégradé radial avec la couleur #76cef5 ver transparent

créer l'affiche de la série télé FRINGE avec photoshop cs5

Réduisez son opacité à 30%

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ouvrez l’image de la pomme suivante dans Photoshop, détourez la pomme en utilisant juste l’outil de sélection rapide (W) puisque le fond est noir ça devrait être facile et importez la dans votre document

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ensuite allez dans Menu > Image > Réglages > Teinte et saturation

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Créez un nouveau calque et dessinez dessus les formes suivantes avec l’outil pinceau (B) et la couleur rouge

créer l'affiche de la série télé FRINGE avec photoshop cs5

Changez son mode de fusion en Superposition

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ouvrez l’image du papillon et la grenouille détourez les puis importez les dans votre document (les images sont disponible en grande format avec le pack en haut)

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Fusionnez-les puis allez dans Menu > Image > Réglages > Teinte et saturation

créer l'affiche de la série télé FRINGE avec photoshop cs5

créer l'affiche de la série télé FRINGE avec photoshop cs5

Ajoutez un petit ombre à la grenouille avec une faible opacité

créer l'affiche de la série télé FRINGE avec photoshop cs5

Et voilà le travaille l’authentique affiche de FRINGE

créer l'affiche de la série télé FRINGE avec photoshop cs5

cliquez ici pour voir l’image en grande format

 

46 COMMENTAIRES

  1. je ne peut pas faire de rendu 3D ma carte graphique n’est pas valide c’est dommage 🙁 !! Quelqu’un peut m’aider ? j’ai besoin de OpenGl nouvel version … O-)

  2. Bonjour, @NiG t’as quoi comme carte graphique ?
    @Jérôme et oui c’est une nouvelle série qui passe sur TF1 je suis vraiment accro à cette dérnière, et c’est pas facile d’attendre pour savoir la suite.
    par contre ça fait longtemps que je t’es pas vu Jérôme.
    Merci et très bonne continuation 🙂

  3. Il va falloir que je me mette à la page !!! Sinon mon trés cher Grafolog, je suis tjs connecté sur Msn et c’est clair que ça fait un bye que l’on a pas refait le monde durant nos conversations ! @ bientôt !

  4. Merci, mais est-ce que ci l’on a la CS4?, cela peut marcher, au pire la 3D, je peux la faire avec blender puis l’introduire dans photoshop.
    Je ne sais pas si tu as vu le premier zode de la saison 3 mais il est superbe, ça promet pas mal de chose 😀

  5. Salut Grafolog, sa fait déja un moment que je viens sur ton site et c’est du super bon boulot, J’adore , tu m’as vachement aider. Je suis moi meme étudiant en infographie en derniere année de secondaire, et j’ai pas mal d’avance et de technique par rapport a ceux de la classe grace a ton site et tes tutos, je les ai déja tous refait :D, par contre la 3D ne fonctionne pas sur mon PC :S et je trouve sa trop trop dommage car sa a un super bon rendu,voici les caractéristique de mon pc , puis je en tirer quelque chose ?

    Systeme d’exploitation : windowd 7
    BIOS InsydeH2O version V1.02
    Processeur : Intel(R)Core(Tm)i3 CPU M330 @ 2.13GHz(4CPUs),~2.1GHz
    Mémoire : 4096RAM
    DirectX 11

    PERIPHERIQUES :
    Nom : Intel(R) Graphics Media Accelerator HD
    Type de processeur :Intel(R) Graphics Media Accelerator HD (CORE i3)
    Mode d’affichage: 1366 x 768 (32bit) (60Hz).

    Je sais pas si tout ce que je viens de t’écrire t’es utile ou si tu as ce dont tu as besoin pour me donné une réponse car je sais utilisé Les suite Adobe mais question ordinateur , tout ce qui est performance , carte grpahique etc.. je suis une moule ^^. Donc voila , Si jamais tu n’as pas toute les infos , mon ordinateur c’est le ACER Aspire 5741.
    Merci d’avance pour ta réponse , et bonne continuation :).

  6. han Adnan le flood c’est moche^^
    Sinon normalement sa devrais marché j’ai un ami avec un vieux pc avec une vielle ATI de Serie sa fonctionne…

    Sinon Super Tuto Graf 😀

  7. Bonjour, @fafar ça ne marche pas avec cs4 sauf si tu utilises un autre logiciel pour la 3D style Blender, 3Dsmax ou Cinema4D… 

    @Adnan je pense que ça doit venir ta carte graphique essaie de maitre à jour le pilote de cette dernière ça marche sur plusieurs carte parce que ce genre de soft utilise beaucoup les ressource graphique et il marche très bien avec les deux super marque ATI et Nvidia
    Merci et très bonne continuation 🙂

  8. grafolog juste une idée ,je trouve que sa serai sympa de fair des “concours” tu lance un theme avc des image un truk dans le genre… aprés tu n’a peut etre pas le temps vu que les tuto doive en prendre pas mal deja en tout cas merci pour tout c’est tuto
    double D !-(

  9. Merci beaucoup pour vos tuto ! Ils sont vraiment bien expliqué et c’est un plaisir de les reproduire. ça fait un moment que je suis votre blog maintenant.

    J’ai juste une question qui me taraude. Jusqu’à maintenant, je n’utilisais jamais des images en tant que texture comme par exemple ce fond grunge de couleur bleu pour l’affiche de Fringe. Est-ce que vous êtes l’artisan de toutes ces textures ou est ce que vous les récupérer sur d’autres sites ? Si vous en êtes le créateur, est-ce que l’on pourrait espérer avoir un tuto pour faire un fond crédible ? ^^

    merci encore,

  10. Bonjours, j’ai un problème.. je n’ai pas les même textures pour la 3D… j’ai suivit l’explication et j’ai cliquer sur charger matière… mais quand je fais cela… mon pc me redirige vair une fenêtre ou je dois charger un fichier… je travail sur un mac, je ne sais pas si ces different… mais je ne crois pas alors.. y aurait-il un moyen pour téléchargé les matières ? Merci

  11. @Lol-hipop, tu dois avoir un pop up alerte qui te laisse le choix, et il devrai y avoir un bouton aller et tu va etre diriger sur le site toshop 3D….

  12. Oui mais je l’ai zaper et j’ai mi ne plus affiché :siffle: … j’ai était visité le site d’adobe mais je ne trouve pas… est-ce que je pourrait avoir un lien svp ? Merci

  13. Bonjour,
    Tout d’abord je souhaiterais vous remercier pour le travail effectuer sur ce site.
    Qui malgré le temps qui passe, n’a jamais régressé au niveau de la qualitée des tutos, ainsi que dans leurs présentation.
    Ensuite j’aimerais savoir si vous pouviez me renseigner au niveau de la 3D !?!
    En fait tout fonctionne sans soucis, sauf qu’une fois que j’applique la 3D à mon texte avec quelques réglages que ce soit, les lettres perdent en qualité…
    Plus exactement les courbes, ainsi que les tracés en biais de mon texte ressortent pixellisés (pas net quoi…).
    Contrairement au résultat que j’ai pu constater sur votre réalisation. (Qui est très chouette d’ailleurs).
    Je vous remerci d’avance, Tchaô.

  14. super beau rendu, bravo une fois de plus LOL
    j’y vois juste un petit défaut, et je voulais savoir s’il est possible de le modifier, car sur votre rendu final, on y voit le reflet qui n’est pas en relief, c’est a dire que si on regarde la lettre “F” par exemple, le relief du reflet n’est pas parallèle au bas de la lettre, j’espere que vous me comprenez :-/

    merci encore pour les tutos 🙂

  15. Merci beaucoup pour ce tuto cependant j’ai un soucis avec le dégradé, je vois plein de traits d’étape de mon dégradé…
    J’ai un écran LED dernière génération et une GTX260 en CG…

  16. Salut,

    Pour ceux qui n’ont pas les bonnes forme métallique 3D voici la solution:

    Une fois que vous avez cliquer Charger les matières (Load materials) vous tombez sur une fenêtre ou vous devez charger vos propre fichier.
    Allez dans votre dossier photoshop puis: App/photoshopCS5/preset/materials puis charger la matières nommée Default (for Ray Tracer).p3m

    et voilà vous avez les bonnes matières dans votre liste de matières 3d pour ce tuto 🙂

    Good luck à tous

  17. Oh merci Nel , sans toi je n’aurai pas eu les bonnes matières !
    Et oui , pas évident de dl sur le site adobe quand on a la version crackée.
    Merci aussi pour tous ces tutos , vraiment j’apprends pleins de choses !

  18. Merci Grafolog, ce tuto est extrêmement bien éxpliqué.
    Simple et tres beau rendu.
    Bonne continuation, beaucoup de gens comme moi, font du progré sur photoshop grace a vous.

  19. Merci beaucoup Grafolog. Je viens de découvrir votre site et j’ai réussi très facilement à réaliser cette affiche. Je vais m’attaquer aux autres ^^. J’aurais juste une petite question technique. Lors de la création de l’image, vous parlez de 72 Dpi pour la résolution. Ne serait-ce pas plutôt des Ppi(pixel per inches)? Je croyais que les Dpi(Dot per inches) étaient plutôt utilisés pour les imprimantes et scanners. Merci d’avance!

  20. Coucou tout le monde !
    Tout dabors bravo pour ce tuto (et les autres d’ailleurs…).

    Je rencontre un petit problème lors de la réalisation de ce tuto. En effet au moment de faire le réglage de teinte/saturation sur le quartier de pomme je ne peu pas mettre “192” comme valeur en teinte. CS5 me dit que je dois mettre une valeur en -180 et +180…?
    Un peu le même problème avec les papillons et le crapeau, lorsque ils sont ensemble et que je met une valeur de teinte, les papillons ont “la bonne couleur” mais le crapeau resort bleu foncé en non “turquoise”…? Je dois le travaillé sur un calque indépendant pour lui donné une couleur équivalente.

    D’où peut venir mon problème ?

    Merci d’avance LOL

LAISSER UNE RÉPONSE