Images de fond

ava7 patterns propose des « tuiles » (images pouvant être répétées horizontalement et/ou verticalement avec des raccords invisibles).

Exemple d'utilisation : télécharger sur son disque dur l'une des tuiles proposées, l'envoyer dans le répertoire des images du thème qu'on utilise, puis modifier la règle du fond de body comme ceci :

background: #fff url(images/nom-du-fichier-tuile);

Il faudra penser à affecter un fond de couleur (ou blanc) à la #page si ce n'est déjà fait, car si elle est transparente ça peut poser quelques problèmes de lecture ;-)

Retaille d'images

resizeimage.org propose de réduire vos images en ligne. Très utile pour ceux qui n'ont pas d'outil de retouche d'image sur leur ordinateur ou savent mal l'utiliser.

Exemple d'utilisation : on a sur son disque dur une image qui nous plaît bien (ou la photo du petit dernier) qu'on souhaite placer dans le top de la page mais elle est trop grande. Rendez-vous sur le site, appuyez sur le bouton « Parcourir » pour sélectionner votre image, puis sur le bouton « Upload » pour l'envoyer en traitement. Vous pourrez alors choisir small, medium ou large qui sont des formats prédéfinis, ou cliquer sur le lien « Advanced resize » qui vous permet de réduire manuellement (en conservant ou non les proportions). Puis cliquez sur le lien « Télécharger cette image » dans le menu de gauche : l'image retaillée s'enregistre alors sur votre disque dur. Envoyez-la dans le répertoire d'images de votre thème, placez-la en background du bloc où vous souhaitez l'afficher.

Note : si ce service est trop limité pour vous, essayez donc Dr Pic le même genre mais avec des options en plus (rotation, réglage de luminosité, etc.). Encore au-dessus dans le niveau d'intervention il y a pixlr, mais il faut déjà bien connaître ce type d'applications.

Icônes

De nombreux sites proposent des icônes gratuites (attention il existe cependant souvent une obligation de mentionner l'auteur des icônes, ne l'omettez pas, c'est une façon d'en remercier les auteurs). Je ne vais certes pas en faire une liste exhaustive mais voici quelques « sets » solides et réputés de petites icônes :

  • Silk, de Famfamfam
  • Fugue et Diagona, des icônes de pinvoke
  • twotinies, par Paul Jarvis
  • Sweety, de Joseph North
  • De toutes petites icônes : hohoho, offertes par Brandspankingnew.
  • nDesign présente un set de Mini Pixel Icons
  • Elles ne sont pas petites mais elles sont marrantes, les icônes de Smashing Magazine, notamment les icônes pour RSS : set 1 et set 2.

Favicon generator

Les favicons sont ces petites images qu'on voit à gauche de l'URL dans la barre d'adresse du navigateur. Pour être reconnues par tous les navigateurs elles doivent être d'un type spécial (.ico). Ce site vous permet de générer un fichier favicon.ico à placer via votre client FTP à la racine de votre hébergement et les boutons optionnels autorisent en sus la création d'une petite image de 32*32 ou 48*48 pixels pour décorer votre blog ou tout ce que vous voudrez.

Note : si vous voulez placer le favicon ailleurs qu'à la racine de l'hébergement (par exemple parce que vous ne souhaitez pas que tous vos site portent la même imagette) c'est une autre paire de manches car la reconnaissance « spontanée » ne fonctionne qu'avec un fichier nommé favicon.ico et placé à la racine de l'hébergement. Si l'un de ces deux critères n'est pas respecté, il faut alors ajouter du code dans vos pages. Je vous invite à lire ce tutoriel d'un gentil[1] utilisateur de Dotclear pour faire ça bien.

Banner Maker

Un site pour fabriquer en direct une bannière pour votre blog. Je regrette toutefois que l'interface de BannerMaker ne soit pas plus intuitive et comme j'ai égaré mes yeux un bon moment à comprendre où ça se passe, je vous livre le résultat de mes errances : les onglets de configuration de la bannière sont en bas de page (ah les joies du texte gris sur fond noir...).

Dans la même gamme, Logo Creator permet de créer une bannière (texte seulement) avec des effets so web 2.0.

Assortir ses couleurs

Il y a quarante-trouze mille outils web pour créer des palettes de couleurs. Je vous guide vers celui-ci parce que Colors on the Web offre un ensemble d'articles fort intéressants concernant les couleurs et que l'outil en ligne qu'ils proposent est de maniement simple.

Pour des palettes toutes faites, tournez-vous vers les deux sites de référence (du moins à mes yeux) : kuler (un site d'Adobe) et colourlovers

Voilà pour aujourd'hui. N'hésitez pas à signaler en commentaire de ce billet d'autres ressources simples et en ligne si vous avez vos incontournables à conseiller !

Notes

[1] Il est gentil pour de vrai, il aide toujours plein de monde.