| Création et utilisation d'icônes pour les sites |
|
|
|
Ce sont les petites images que l'on peut voir dans les barres d'adresse ou dans les listes de liens dans les favoris, qui vous permettent ainsi de reconnaitre au premier coup d'oeil.. Pas tous les sites ne disposent de ces icônes (mis à part les sites importants du style Adobe, Ebay...). Bien que ce ne soit pas la partie la plus importante d'un site, ces icônes vont permettre de créer un repère visuel à vos visiteurs et ajouter un petit plus. Voici comment ca se passe....
Étape 1: Photoshop ne permet pas de sauvegarder des fichiers dans le format nécessaire (.ICO) ou du moins, pas dans ses options de base. Pour cela on a besoin de ce petit plugin : Telegraphics
qu'il faut donc installer avant d'aller plus loin. C'est gratuit et il permet de créer des fichiers .ICO en modes 1, 4 et 8-bit Indexed ou RVB 24-bit , ainsi que les icones 32-bit "XP" . De ce fait, ce plugin est plutôt essentiel si vous voulez vous lancer dans une carrière de créateur d'icônes et plus sérieusement d'une grande aide même pour l'utilisateur lambda.
Note : Après avoir installé ce plugin, si votre photoshop est en marche il vous faut le redémarrer afin qu'il prenne en compte le plugin.
|
Étape 2: Ces icônes ont une taille standard de 16*16px. Beaucoup pensent qu'il est extrêment difficile de faire quoi que ce soit dans une si faible surface mais il y a 2 possibilités en fait : - Vous pouvez faire votre image pixel par pixel, ou alors travailler sur une image un peu plus grande (64*64px) et la réduire après. Si vous choississez la seconde option, n'oubliez pas quecertains détails risquent d'être invisible lors de la réduction de votre image.
|
Étape 3: Lorsque vous avez fini avec votre oeuvre, il vous est nécessaire de la sauvegarder : Fichier > Sauvegarder sous... et sélectionnez le format nécessaire, .ICO. Enfin, uploadez le sur votre ftp, dans le même dossier que le fichier index de votre site.
|
|
Étape 4: Certains navigateurs recherchent directement "Favicon.ico" ou"favicon.ico" (attention aux majuscules d'ailleurs) sur votre site et mettent directement votre image. Les autres nécessitent quant à eux un lien sur dans votre code HTML. Pour que la fonction soit fonctionnelle à 100%, n'hésitez pas à copier ce code dans toutes vos pages:
<link rel="Shortcut Icon" href="/favicon.ico">
|
Si vous êtes sous Linux, il est OBLIGATOIRE, que votre fichier et votre balise <link> soit absolument identiques.
Note : Je tiens à préciser que certains navigateurs sont assez gonflant avec ces icônes. Microsoft IE6 pour Windows, par exemple, ne montre pas l'icône tant que l'adresse n'est pas mise dans les favoris.
Note supplémentaire : Bien, voici pour vos icônes de site :) Ils permettent de faire ressortir votre site dans un historique d'adresses et ne surchargent en rien le serveur, il n'y a donc pas de raison de ne pas les utiliser. Si vous avez besoin d'inspiration regardez cette collection... visitez quelques sites. Qui sait, votre imagination peut se réveiller d'un seul coup..... |
- Tutorial written by Man1c M0g
- Translation by Bana
|

|
|
 |
LED cherry tree light Author: net99200 Posted: Jan 07th, 8:22am Activity: 0 replies, 4 views
|  | My new home on the web Author: synthetic Posted: Jan 06th, 9:14pm Activity: 4 replies, 30 views
|  | Sketching tut Author: Ratatoskr Posted: Jan 06th, 11:12am Activity: 4 replies, 53 views
|  | Notification of Obsolete Data Purge - IMPORTANT! Author: Man1c M0g Posted: Jan 05th, 11:44pm Activity: 0 replies, 43 views
|  | Multiples Prevention Author: Man1c M0g Posted: Jan 05th, 9:40pm Activity: 0 replies, 9 views
|  | Yeshua crucified on the Cross - pencil art painted Author: horseman Posted: Jan 04th, 2:38am Activity: 6 replies, 108 views
|  | Make a Shape from a JPG Author: dgonzales Posted: Jan 03rd, 10:38pm Activity: 2 replies, 125 views
|  | Premium Subscribers System Author: Man1c M0g Posted: Jan 03rd, 6:00pm Activity: 12 replies, 113 views
|  | Imitating Pencil Shading Author: Chamenas Posted: Jan 03rd, 3:32pm Activity: 0 replies, 80 views
|  | help : How to draw A screw in Rhino 3d Author: Raphy Posted: Jan 01st, 9:39pm Activity: 1 replies, 101 views
|  | bored Author: c-fish819 Posted: Dec 31st, 9:35pm Activity: 1 replies, 101 views
|  | Need A/C in your auto? Author: synthetic Posted: Dec 31st, 3:17pm Activity: 2 replies, 101 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 210 |
| Total Downloads: | 413 |
| Linkbase Links: | 243 |
 |
|
 |
 |
|