Vous êtes ici : Accueil > Guide du rédacteur > Ajouter un logo
Par : FP
Publié : 14 novembre 2011
Format PDF Enregistrer au format PDF

Ajouter un logo

Participer au graphisme du site


Le logo des rubriques principales est déjà défini par l’administrateur du site. Les sous-rubriques, les articles et les brèves prennent par défaut le dernier logo de l’arborescence, mais il est possible d’ajouter un logo personnalisé si celui-ci n’a pas déjà été défini.


 


Charte graphique


L’aspect d’un logo doit répondre à quelques règles pour préserver l’unité graphique du site.

  • Forme : rectangle
  • Coins : arrondis et transparents
  • Taille : 95 x 70 px
  • Couleur : niveaux de gris
  • Caractéristique : transparent
  • Type de fichier : png


 


Outils graphiques


La conception d’un logo nécessite deux outils graphiques :


 


Chercher une image libre de droit sur le Web


 


Ouvrir l’utilitaire de retouche d’image en ligne

  • Ouvrir pixlr.com/editor/

    C’est un utilitaire de retouche d’image gratuit et très complet.


 


Ouvrir l’image dans l’éditeur

  • Valider "Ouvrir une image à partir de son URL",



 

  • Saisir coller l’URL dans la zone d’adresse
  • Valider "OK",



 

  • Agrandir la fenêtre de l’image en pleine page.


200 x 150 px
En couleur


 


Mettre l’image en niveau de gris

  • Valiver "Réglage", "Table de couleurs" dans le menu supérieur,



 

  • La première option proposée est le "niveau de gris", valider "OK".



 


200 x 150 px
Niveaux de gris


 


Redimensionner l’image

  • Valider "Image", "Taille de l’image..." dans le menu supérieur,


  • Saisir 70 dans la zone "Hauteur",
    (la largeur se règle automatiquement à 93 px)



 

  • Valider "Image", "Taille de l’image..." dans le menu supérieur,
  • Décocher "Conserver les proportions",
  • Saisir 95 dans la zone "Largeur", la déformation minime de 2 px sera invisible,
  • Valider "OK".



 


95 x 70 px


 


Régler la luminosité et le contraste

  • Valider "Réglage", "Luminosité & Contraste",


  • Déplacer le cadre "Luminosié & Contraste" au dessus de la pomme pour visualiser le résultat,



 



 


 

  • Régler la luminosité sur "10" et le contraste sur "20",
  • Valider "OK",



 



 


Sauvegarder l’image sous le nom "logo_pomme.png"

  • Valider "Fichier", "Enregistrer",


  • Dans le cadre "Sauvegarder l’image" :
    - Choisir "png"dans "Format",
    - Saisir "logo_pomme" dans "Nom",
  • Valider "OK",


  • Enregistrer sur le bureau.



 


Fermer "pixlr.com/editor/"

  • Fermer l’onglet "Photo editor online" de Firefox.


 


Ouvrir l’utilitaire de réalisation des coins arrondis


 


Ouvrir le fichier "logo_pomme.png" dans l’utilitaire

  • Valider "Parcourir",


  • Sélectionner le fichier "logo_pomme.png" depuis le bureau (double-clic),


  • Valider "Round it !",


  • Régler les paramètres du logo :
    - Round Size : 6,
    - Background Color : Transparent, png,
    - Qualité : 100%.
  • Valider "Round it !"



 

  • Valider "Download" pour télécharger le fichier,



 

  • Le logo est dans le dossier de téléchargement du navigateur.


1321294978.png


 


Renommer le fichier du logo

  • Ouvrir le répertoire de téléchargement du Navigateur avec l’explorateur,
  • Déplacer le fichier "1321294978.png" sur le bureau,
  • Renommer le fichier en "logo_pomme_arrondi.png",
  • Fermer l’explorateur.


 


Définir le logo d’un article (exemple)

  • Valider "Choisissez un fichier",


  • Sélectionner le fichier "logo_pomme_arrondi.png" depuis le bureau,


  • Valider "Télécharger",


  • Le logo de l’article est défini.



 


Conclusion


Cet exercice permet de maîtriser les principes de base de la création d’un logo qui répond à la charte graphique du site. Il faut adapter les manipulations en fonction de l’image d’origine dont on peut ne prendre qu’une partie par exemple. Cela peut paraître difficile au début mais avec quelques essais on domine rapidement son sujet.