Comprendre et réaliser le logo France Télévision

Voici un nouvel article concernant la reproduction et la compréhension des logos. Aujourd’hui j’ai choisi un logo que nous voyons tous les jours, il s’agit du logo du groupe France Télévision.

Ce logo n’est pas si vieux que cela, si mes informations sont bonnes, il a été mis en service en 2002, il se compose d’un rectangle arrondi (profilé en perspective) + France écrit avec la police de caractères HELDUSTRY* + le chiffre de la chaîne dessiné spécifiquement pour le logo (il ne s’agit donc pas d’une police mais plus d’une forme) + deux reflets donnant un effet glossy au support principal.

J’ai décidé de vous rédiger cet article car j’affectionne tout particulièrement leurs logos, simples, et pourtant très efficaces, ils collent parfaitement à notre époque.

*police de caractères téléchargeable sur cette page : http://www.dailyfreefonts.com/fonts/info/989-Heldustry.html

Bien entendu le fichier source Photoshop est disponible, présence des logos France 2, France 3, France 4, France 5, et France ô, le tout en format vectoriel !

Photoshop - 1.4 Mo

Commençons la réalisation graphique de notre premier logo France 3, les autres ne seront ensuite que des déclinaisons.

ETAPE 1

J’ouvre le logiciel Photoshop et je crée un nouveau document : menu fichier > nouveau. Dans mon exemple j’ai utilisé une image de 500 pixels de côtés sur fond blanc. Je sélectionne l’outil rectangle arrondi et j’en crée un sur le centre de mon document (pour le moment peu importe la couleur utilisée).

ETAPE 2

J’utilise l’outil perspective pour relever les côtés droits : menu édition > transformation > perspective, je sélectionne le côté haut droit et je déplace la souris vers le haut, normalement le côté haut droit se lève et le côté bas droit descend, donnant ainsi cette forme.

ETAPE 3

C’est maintenant que je change la couleur de ma forme, pour cela je vais utiliser le bleu : # 2d7da0, je passe donc par le menu calque > incrustation de couleur.

ETAPE 4

J’installe la police de caractères HELDUSTRY, puis avec l’outil texte, j’ajoute le titre « France » en haut à droite de ma forme.

ETAPE 5

J’ajoute maintenant le chiffre que j’ai dessiné avec la souris et l’outil plume. J’ai ensuite rajouté un dégradé gris vers blanc (le gris se situant en bas à droite).

ETAPE 6

Sur l’image du dessous vous pourrez remarquer une forme fuchsia, c’est celle-ci qui me permet de couper le reflet. Vous devez en créer une similaire puis dupliquer le calque forme bleue. Je supprime les styles de cette copie (clic droit avec la souris sur le calque puis supprimer les styles de calques) enfin je change la couleur en blanc.

ETAPE 7

J’ajoute un masque de fusion à cette forme blanche, puis je récupère la sélection de ma forme fuchsia en faisant Ctrl + clic sur le calque forme fuchsia. J’intervertis la sélection menu sélection > intervertir, et enfin avec le pot de peinture je remplis la sélection de noir.

Cette manipulation me permet de créer le reflet. Maintenant avec le dégradé noir, je camoufle le bas de mon reflet (bien évidemment j’utilise ce dégradé noir sur le même masque de fusion).

ETAPE 8

Je crée une seconde forme qui va me permettre avec la même technique de créer un second reflet.

ETAPE 9

Comme au dessus, j’utilise un masque de fusion pour créer et camoufler le reflet.

ETAPE 10

Je décale les reflets de quelques pixels pour ainsi créer une petite bordure en haut et à droite ainsi qu’en bas et à gauche.

ETAPE 11

En changeant, le chiffre, + la couleur, voici le logo France 2.

ETAPE 12

France 4.

ETAPE 13

France 5.

ETAPE 14

France ô, attention normalement le ô n’est pas ainsi, mais j’ai préféré utiliser le ô de la police de caractères HELDUSTRY.

ETAPE 15

Et voici, à la suite l’un l’autre, les logos que je viens de reproduire.

Merci à tous d’avoir lu ce nouveau tutoriel. Si vous avez un problème, une question n’hésitez pas à poster vos messages dans le forum ci-dessous. Réponse rapide assurée.

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

  • 2 décembre 2008 17:48, par Air’

    Ah, Wonka, tu as fait mon bonheur :-) Tout d’abord félicitations pour ce tutoriel, très réussi, très fidèle aux logos du groupe France Télévisions.

    Si je dit que je suis content, c’est parce que je suis avant tant un grand fan des habillages télévisuels, et des identités visuelles. Je connais donc un peu l’histoire de ces logos, et, si vous me le permettez, je vais vous raconter un peu l’histoire de ces logotypes.

    Comme l’a fort justement dit Wonka, les logos « trapèzes » de France Télévisions ont été mis en service en 2002, remplaçant les logos composés du gros chiffre avec le « France » en blanc. Ces nouveaux logos ont été conçu par l’agence Gédéon et ils représentent des écrans en perspective. Si vous regardez le logo du groupe France Télévisions, vous pourrez vous en rendre compte.

    En avril 2008, dans le cadre d’un nouvel habillage pour les chaînes du groupe France Télévisions, Gédéon à quelque peu revu ces logos, en ajoutant les reflets et le dégradé gris > blanc sur les chiffres. Avant 2008, ces logos étaient donc « plats ».

    Enfin, en ce qui concerne la typographie, il s’agit bien de la « Heldustry », mais celle utilisée à l’antenne est la « Heldustry FTV ». Elle se différencie par le fait que les accents sont collés sur les caractères. Evidemment, cette version étant utilisée par les différentes directions artistique de chaque chaîne du groupe, il est impossible de la trouver sur Internet.

    Pour finir, je vous conseille un excellent site, qui est la véritable référence des identités (télé)visuelles : Lenodal.com. Je fait d’ailleurs parti des membres des forums, sous le pseudo de Air’. Si vous voulez en savoir plus, je vous conseille d’y faire un p’tit tour ;-)

    Merci d’avoir lu ce (long) message, et encore bravo Wonka !

    Air’

    Répondre
    • 3 décembre 2008 00:54, par Wonka

      Merci monsieur pour ces précisions

      J’espère que vous parlez de nous sur ce forum ;) en tout cas j’irais jeter un œil sur ce site.

      Répondre
      • 3 décembre 2008 17:56, par Air’

        Olala, maintenant tu me vouvoies, la classe ;-) (ça ne me gêne absolument pas Wonka).

        Je n’hésiterai pas à te faire un peu de publicité à l’occasion. :)

        Air’

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

          Oué ça m’arrive de me tromper, je tutoie certaines et vouvoie d’autres, du coup je m’y perds :p

          Répondre
  • 2 décembre 2008 19:25, par Arteek

    Bonjour Wonka, tout d’abord je te félicite pour ce tutoriel toujours très facile d’accès et intéressant. Je t’écris en fait car j’ai vu un logo magnifique et j’ai tenté par tout les moyens de l’imiter sans succès. Je comptais donc sur ton aide et ton talent pour peut être proposer un tutoriel concernant ce logo.

    Merci Gordon, www.arteek.fr

    Répondre
    • 3 décembre 2008 00:51, par Wonka

      Il me semble que c’est une photographie non ? Ou est le logo ?

      Répondre
      • 3 décembre 2008 16:53

        Je ne suis pas sur si c’est une photographie ou non mais ce qui m’intéresse est le contenu de la boite, la forme orange. Penses-tu qu’un tel travail est réalisable sous photoshop ?

        Merci de ta réponse. Gordon

        Répondre
        • 3 décembre 2008 17:10, par Wonka

          Il y a un travail au niveau de la mise en scène puis une utilisation via Photoshop. Je pourrais par contre malheuresement pas faire de tutorial à ce sujet !

          Répondre
          • 3 décembre 2008 18:40

            Merci pour ce tuto ^^

            Mais le plus dur c’est de faire le 3

            Répondre
  • 4 décembre 2008 14:06

    Merci pour ce tutoriel original !

    Répondre
  • 5 décembre 2008 15:11, par Fix

    Très bien ce tuto, comme tous les autres d’ailleurs...^^

    Voici ma compo....

    Free Image Hosting at www.ImageShack.us

    À prendre au second degré hein ?! lol^^

    J’ai pas trop compris la technique pour les reflets ! :s J’ai fait avec une autre que je connaissais, c’est à dire, créer la même forme que tu as faite en fushia ou en rouge dans le tutoriel, la transformer en sélection, puis cliquer sur le calque de la forme « trapèzoïdale » tout en restant appuyé sur CTRL ou POMME+ALT+MAJ.... ce qui crée la sélection voulue pour le reflet. Ensuite j’ai suivi le tuto.^^

    Bien le merci pour le tuto ! Bravo pour ce travail ! Et bonne continuation !

    Répondre
    • 5 décembre 2008 19:29, par Krifa

      Bonjour merci pour ce tuto mais je n’ai pas compris l’étape avec les fuschia pour faire cette forme es-ce qu’il faut utiliser l’outil plume ? et pour mettre la couleur noir sur le masque de fusion au lieu de la couleur noir c’est la couleur bleu

      merci de bien vouloir me répondre

      Répondre
  • 6 décembre 2008 11:52, par Monk’

    Merci beaucoup Wonka, j’adore vraiment ce genre d’explication, on comprend mieux les logos télévisuels =D

    Et merci Air’ pour les précisions ^^

    Répondre
  • 23 décembre 2008 15:01, par Elsa

    Bonjour, je n’arrive pas à trouver le carré à bord rond dans Photoshop. Merci d’avance

    Répondre
    • 5 janvier 2009 13:00, par Fix

      Voilà pour l’emplacement de l’outil rectangle arrondi >>> Free Image Hosting at www.ImageShack.us

      Mais si tu bloques déjà à cette étape, tu risques rapidement de rencontrer de nouveaux problèmes !^^

      Bonne chance quand même ! ;)

      Répondre
      • 5 janvier 2009 16:30, par Wonka

        Même réponse, même commentaire ;) rien à dire de plus :p

        Répondre
  • 21 février 2009 14:32, par Whou

    Salut Wonka, je me demandais s’il n’était pas mieux de réaliser ce logo fort bien conçu par toi sur Illustrator ?

    Merci pour ce tuto !

    Répondre
    • 21 février 2009 17:48, par Wonka

      Probable que oui ;) mais bon le but est d’apprendre sur Photoshop du coup on utilise tous Photoshop !

      Répondre
  • 24 décembre 2009 11:00, par Afkalizebone

    Bonjour, J’ai un peu de mal à tracer les chiffres avec la plume de photoshop... serait-il possible d’avoir des détails sur la manière de procéder (notamment pour faire les courbes), ou existe-t-il une police dont les chiffres pourraient ressembler ? merci en tous cas pour vos tutoriaux, j’en suis encore qu’au début donc désolé si ma question est celle d’un débutant.

    Répondre
    • 24 décembre 2009 17:06, par wonka

      Vous pouvez effectivement utilisez une police de caractère pour créer les chiffres plus simplement.

      Répondre
  • 21 juillet 2010 19:42, par maxouel

    Ecrivez votre message ici...c’est un super site mais l’histoire du reflet j’ai pas trop compris donc si quelqu’un peut m’expliquer plus en detail qu’il me l’envoi a l’adresse mail suivante : mabylon@yahoo.fr merci

    Répondre
  • 30 juillet 2010 18:16, par maxouel

    j’ai pas trop bien compris le truc de la forme fuchia donc je pensait que quelqunpourait m’aider .voici mon adresse mail au cas ou:mabylon@yahoo.fr

    Répondre
  • 9 août 2010 12:32, par Malo $.

    slt je n’arrive pas tres bien a faire leffet de brillance avec le truc en violet !

    Répondre

Laissez un commentaire

Remplissez correctement le formulaire puis appuyez sur Validez.