Photoshop c'est bien... mais il y a trop de boutons, trop d'options, trop de réglages, trop de paramètres. Au final, si on n'a juste à retoucher une image tous les deux mois, on galère comme un furieux parce qu'un investissement personnel en formation de plusieurs semaines, le temps de s'accaparer l'outil, n'est pas rentable.

Il n'empêche que savoir manier un tel logiciel présente un intérêt appréciable. Qui n'a pas tenté de retoucher une image, de faire un effet de fou genre surface boisée, balle transparente, objet enflammé, effet sanglant, ... et a fini par abandonné parce, je me répète, trop de boutons, de menus, de machins-qu'on-sait-pas-à-quoi-ça-sert.

Eh bien réjouissez vous les enfants, votre calvaire est en parti terminé. Grâce à elitebydesign.com vous bénéficiez dorénavant de 23 magnifiques tutoriaux à même de vous mettre le pied à l'étrier en design.

Allez zou ! Au boulot.

Pour mémoire, parce que ça peut toujours servir, Sweetie offre plusieurs packs d'icônes toutes plus belles les unes que les autres.

Je continue ici mon exploration du CSS tout fait, celui qui épargne quelques trop longues heures à se questionner sur la raison qui pousse deux blocs à ne pas s'aligner correctement.

Cette fois, c'est un élément important du design de site, dont il est question, puisqu'il s'agit des menus.

Un menu CSS, c'est souvent au-dessus de tout, en dessous-de tout (donc invisible) ou même décalé tant est si bien qu'on peut avoir du mal à raccrocher l'élément visuellement à la section souhaitée en affichage.

CSS Menu Maker propose en chargement libre et gratuit, après personnalisation, un panel de menus convenant aux sites basiques comme à ceux dotés du clinquant web 2.0.



Une bonne adresse de plus à se garder sous coude.

Lorsque l'on conçoit une feuille de style, lors de la conception d'un site, 3 éléments entrent en compte :

• - le positionnement des éléments
• - le choix des couleurs appliquées à l'ensemble
• - les polices de caractères

C'est ce dernier aspect qui intéresse typetester.



Ce service permet de sélectionner 3 fontes simultanément et de les comparer en taille, espacement de caractères, décoration... et donc de se faire une idée avant d'intégrer les propriétés dans la feuille CSS.

Bref, du pratique à bookmarker.

Dans la logique web2.0, la grande mode est à l'ajax. Il y en a dans tous les coins.

L'un des avantages de cette mode, c'est que les sites actuels sont nettement moins moches de ceux d'antan. L'inconvénient est pour les concepteurs, il leur faut rivaliser d'ingéniosité pour dégôter le petit truc en plus, arrondir les angles et faire du "Ooooh que c'est jôliiiii", même si ce qui est codé s'avère bancal et/ou inutile^[1], mais ça n'est pas le propos de ce billet

Ces sites new-tech, donc, mettent parfois du temps à charger le jeu de données requêté et nous voyons apparaître, lors de cette phase, un petit gif animé en barre ou circulaire indiquant qu'il faut poireauter patiemment.

Créer un gif, sauf à être un pro de photoshop ou de The Gimp, c'est chiant. Créer un beau gif, ça l'est encore plus.

C'est ici qu'intervient ajaxload.info :



En 3 clics, vous avez prêt au chargement un gif animé de la forme et couleur (transparente ou non) souhaitées. Un exemple du résultat obtenu tourne actuellement dans le coin supérieur droit de ce billet.

Simple et efficace, un petit outil comme je les aime.

Ca n'est plus un secret pour personne, je suis particulièrement hermétique au CSS. Bâtir et aménager une template de site relève à chaque fois du défi.

Longtemps, j'ai cherché du modèle simple, bien expliqué. Bref, du basique grâce auquel je pourrais retrouver mes jeunes.

Eh bien, j'ai trouvé.

Imaginons que vous souhaitiez vous baser sur une ossature de 3 colonnes dynamiques. Simple ! Cliquez sur la vignette correspondant à votre modèle et admirez le travail :

Génial, non ? Ca se passe chez mycelly.com où 12 magnifiques exemples de templates n'attendent plus que vous.

Choisir les coloris d'un site n'est pas chose aisée. Les tatonnements sont nombreux et le résultat pas toujours probant.

Colourlovers propose une large gamme de palettes, brossées chacune en 5 couleurs assorties, dans lesquelles on peut piocher afin d'agrémenter au mieux sa présentation.

Un must !

Qui n'a pas ramé un jour pour construire une présentation de site ou blog digne de ce nom ? Qui n'a pas eu des envies de meurtre à l'encontre du type maudit qui a pondu le CSS, alors qu'il tentait d'aligner correctement deux colonnes à côté d'un bloc principal ?

Dans un autre registre, le CSS, c'est aussi merdique que le Javascript. Personnellement, c'est ma bête noire.

Un espoir poind ! Il s'agit de Blueprint, le framework CSS.



Ce projet n'en est qu'à sa version 0.3 à l'heure où j'écris ce billet mais il est prometteur. Imaginez ! Une grille prédéfinie sur laquelle vous appliquez votre présentation et qui vous crache le CSS de la structure souhaitée. L'extase !

Bon, c'est perfectible, les concepteurs préviennent qu'il n'a pas été testé pleinement sur toutes les versions de navigateurs. Il n'en reste pas moins que c'est une belle avancée qu'on ne peut que saluer, soutenir et encourager.

Ca s'appelle blueprint, et c'est disponible ici.

Invariablement, lorsque l'on crée un site ou que l'on aménage une feuille de style, on se heurte au problème du choix des couleurs : couleurs de la police, couleur du fond, couleur des bordures...

Il est souvent très difficile de choisir la bonne alliance de tons, et la tâche est d'autant plus ardue avec le nommage hexadécimal. Comment s'y retrouver facilement quand les couleurs sont #990000 ou #FCFCFC, voire #3456AE ?

Facile ! En les nommant par leur petits noms. J'ai longtemps pensé que seuls le blanc (#FFFFFF), le bleu (#0000FF) ou les rouges, cyan et autres couleurs basiques étaient nommées et nommables afin d'être correctement interprétée.

Je m'étais planté !

Voici donc une liste de 140 couleurs avec leurs noms. (Avouez que mediumorchid est beaucoup plus joli à écrire que HEX: #BA55D3 ou RVB : 186,85,211)