Les ateliers du klafoutis

Ima­ges de fond

ava7 pat­terns pro­pose des « tui­les » (ima­ges pou­vant être répé­tées hori­zon­ta­le­ment et/ou ver­ti­ca­le­ment avec des rac­cords invi­si­bles).

Exem­ple d’uti­li­sa­tion : télé­char­ger sur son dis­que dur l’une des tui­les pro­po­sées, l’envoyer dans le réper­toire des ima­ges du thème qu’on uti­lise, puis modi­fier la règle du fond de body comme ceci :

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

Il fau­dra pen­ser à affec­ter un fond de cou­leur (ou blanc) à la #page si ce n’est déjà fait, car si elle est trans­pa­rente ça peut poser quel­ques pro­blè­mes de lec­ture ;-)

Retaille d’ima­ges

resi­zei­mage.org pro­pose de réduire vos ima­ges en ligne. Très utile pour ceux qui n’ont pas d’outil de retou­che d’image sur leur ordi­na­teur ou savent mal l’uti­li­ser.

Exem­ple d’uti­li­sa­tion : on a sur son dis­que dur une image qui nous plaît bien (ou la photo du petit der­nier) qu’on sou­haite pla­cer dans le top de la page mais elle est trop grande. Ren­dez-vous sur le site, appuyez sur le bou­ton « Par­cou­rir » pour sélec­tion­ner votre image, puis sur le bou­ton « Upload » pour l’envoyer en trai­te­ment. Vous pour­rez alors choi­sir small, medium ou large qui sont des for­mats pré­dé­fi­nis, ou cli­quer sur le lien « Advan­ced resize » qui vous per­met de réduire manuel­le­ment (en con­ser­vant ou non les pro­por­tions). Puis cli­quez sur le lien « Télé­char­ger cette image » dans le menu de gau­che : l’image retaillée s’enre­gis­tre alors sur votre dis­que dur. Envoyez-la dans le réper­toire d’ima­ges de votre thème, pla­cez-la en back­ground du bloc où vous sou­hai­tez l’affi­cher.

Note : si ce ser­vice est trop limité pour vous, essayez donc Dr Pic le même genre mais avec des options en plus (rota­tion, réglage de lumi­no­sité, etc.). Encore au-des­sus dans le niveau d’inter­ven­tion il y a pixlr, mais il faut déjà bien con­naî­tre ce type d’appli­ca­tions.

Icô­nes

De nom­breux sites pro­po­sent des icô­nes gra­tui­tes (atten­tion il existe cepen­dant sou­vent une obli­ga­tion de men­tion­ner l’auteur des icô­nes, ne l’omet­tez pas, c’est une façon d’en remer­cier les auteurs). Je ne vais cer­tes pas en faire une liste exhaus­tive mais voici quel­ques « sets » soli­des et répu­tés de peti­tes icô­nes :

• Silk, de Fam­fam­fam
• Fugue et Dia­gona, des icô­nes de pin­voke
• two­ti­nies, par Paul Jar­vis
• Sweety, de Joseph North
• De tou­tes peti­tes icô­nes : hohoho, offer­tes par Brand­span­kin­gnew.
• nDe­sign pré­sente un set de Mini Pixel Icons
• Elles ne sont pas peti­tes mais elles sont mar­ran­tes, les icô­nes de Sma­shing Maga­zine, notam­ment les icô­nes pour RSS : set 1 et set 2.

Favi­con gene­ra­tor

Les favi­cons sont ces peti­tes ima­ges qu’on voit à gau­che de l’URL dans la barre d’adresse du navi­ga­teur. Pour être recon­nues par tous les navi­ga­teurs elles doi­vent être d’un type spé­cial (.ico). Ce site vous per­met de géné­rer un fichier favi­con.ico à pla­cer via votre client FTP à la racine de votre héber­ge­ment et les bou­tons option­nels auto­ri­sent en sus la créa­tion d’une petite image de 32*32 ou 48*48 pixels pour déco­rer votre blog ou tout ce que vous vou­drez.

Note : si vous vou­lez pla­cer le favi­con ailleurs qu’à la racine de l’héber­ge­ment (par exem­ple parce que vous ne sou­hai­tez pas que tous vos site por­tent la même ima­gette) c’est une autre paire de man­ches car la recon­nais­sance « spon­ta­née » ne fonc­tionne qu’avec un fichier nommé favi­con.ico et placé à la racine de l’héber­ge­ment. Si l’un de ces deux cri­tè­res n’est pas res­pecté, il faut alors ajou­ter du code dans vos pages. Je vous invite à lire ce tuto­riel d’un gen­til^[1] uti­li­sa­teur de Dot­clear pour faire ça bien.

Ban­ner Maker

Un site pour fabri­quer en direct une ban­nière pour votre blog. Je regrette tou­te­fois que l’inter­face de Ban­ner­Ma­ker ne soit pas plus intui­tive et comme j’ai égaré mes yeux un bon moment à com­pren­dre où ça se passe, je vous livre le résul­tat de mes erran­ces : les onglets de con­fi­gu­ra­tion de la ban­nière sont en bas de page (ah les joies du texte gris sur fond noir…).

Dans la même gamme, Logo Crea­tor per­met de créer une ban­nière (texte seu­le­ment) avec des effets so web 2.0.

Assor­tir ses cou­leurs

Il y a qua­rante-trouze mille outils web pour créer des palet­tes de cou­leurs. Je vous guide vers celui-ci parce que Colors on the Web offre un ensem­ble d’arti­cles fort inté­res­sants con­cer­nant les cou­leurs et que l’outil en ligne qu’ils pro­po­sent est de manie­ment sim­ple.

Pour des palet­tes tou­tes fai­tes, tour­nez-vous vers les deux sites de réfé­rence (du moins à mes yeux) : kuler (un site d’Adobe) et colour­lo­vers

Voilà pour aujourd’hui. N’hési­tez pas à signa­ler en com­men­taire de ce billet d’autres res­sour­ces sim­ples et en ligne si vous avez vos incon­tour­na­bles à con­seiller !