Le nuancier

Premier pas dans la création de design du site, il me sert de base de départ. Pourquoi utiliser des grand rectangles en lieu et place d'une palette Inkscape personnalisée ? Tout simplement que je ne sais pas faire ... C'est ici que je vois si mon jeu de couleur s'accorde, étape primordiale pour créer un thème qui me plaise.

Le gabarit

Après le choix des couleurs, il faut commencer par quelque chose... Je fait une sorte de "capture d'écran" du site. Il faut tout de même penser à prendre des précautions :

• penser aux contraintes dues aux choix de base pour le site : j'ai choisis pour ce site un design de type "fluide" représentant 85% de la largeur disponible avec un maximum de 1000 pixels et un minimum de 750 pixels . La représentation dans Inkscape fait donc 1000 pixels de large pour me permettre de créer des éléments graphiques adaptables à toutes les résolutions (pour les bandeaux haut et bas par exemple).
• penser a grouper les partie servant à la création d'une même image au final facilitant l'exportation (les différents objets servant au bandeau du haut par exemple)

Les éléments graphiques

Une fois le gabarit fini, je copie les différents éléments graphiques un à un pour les exporter en png. Au lieu de créer une image svg par élément, je préfère mettre tout les éléments dans un seul et même fichier, et enregistrer chaque partie grâce à l'option "enregistrer la sélection" dans la fenêtre Exporter en Bitmap.

Si vous regardez vous verrez que bien des éléments n'apparaissent pas dans le gabarit. au fur et à mesure de l'avancée du site, il me manquait des éléments...

En conclusion...

Après avoir dessiné le gabarit, exporter les différents éléments, il faut les intégrer dans les pages (ou dans mon cas, le thème Dotclear). Maîtriser un minimum le couple XHTML/CSS est nécessaire, voir même le langage permettant de créer le thème de votre CMS favori (boucles SPIP par exemple).