Créer son propre kit graphique !

Les demandes ont été TRES nombreuses concernant ce sujet.

Mise en garde : Bien que la difficulté ne soit pas grande, les ecueils majeurs auxquels vous ferez face sont :

- L'inspiration (là, aidez-vous de sites existants, de thèmes annexes) sans toutefois "tout pomper" !).
- La gestion HTML du kit graphique (bien souvent on s'imagine qu'il suffit de cliquer sur un bouton pour avoir un kit fonctionnel.

Mais une page plus longue va entraîner un tableau plus grand que prévu, et des décalages vont apparaître dans les cellules voisines !
La parfaite connaissance des tableaux HTML, de leurs imbrications est essentielle !
Il faudra parfois tricher avec des images en fond de cellule qui peuvent se mettre en mosaïque... ou recréer de nouveaux tableaux !

Etape 1 : Conception graphique.

Là, le travail se fait uniquement sous ©Photoshop ! Créez un nouveau calque de taille souhaitée.
Attention pour un affichage 800x600, tenez compte des ascensseurs de l'explorateur, des bords de fenêtre etc... !)

Je ne considère pas mon travail comme exemplaire (les goûts et les couleurs !!!).
Mais je me servirai de ce projet pour travailler.

Commencez par définir vos zones de travail.
Ici :

• Une zone "logo" en haut,
• Une zone de texte (le site ne réclame que peu d'espace texte),
• un menu central,
• Bonus : le projet réclamait une zone animée (Flash) !

Travaillez en utilisant, par zone, les dossiers de calques.
Il vous permettront de vous y retrouver plus facilement.

En plus, on peut jouer simultanément sur l'opacité du groupe de calque, ou sa position ! Un bonheur quoi !

Cliquez simplement sur le dossier en bas de la palette.

Ensuite, glissez vos calques à l'intérieur.

QUOI METTRE DEDANS !!!

Là, l'inspiration vous laisse seul juge ! En général, je visite des sites similaires, voir ce qui se fait. Si possible, je visite des "GROS" sites...
Ici, le projet est celui d'une agence de détectives. Je me suis inspiré de sites sur James Bond pour le style général !

Le fond : j'utilise souvent des fichiers de textures "hand-made" : prenez une photo (évitez les photos d'extérieur), appliquez des :
niveaux (CTRL+L) pour adoucir l'image,
filtre/flou gaussien (forte valeur),
Filtre/flou radial/zoom (pourquoi pas ?)
Redéfinir la couleur (CTRL+ALT+U) (option redéfinir activée).
     A cela, des calques de nuages peuvent intervenir en utilisant des modes de fusion divers (produit / incrustation / Lumière douce etc...)

Placez le logo existant (ou créez-le ! Dur dur !! hein ?).

Placez des éléments en filigranne, qui vont occuper, meubler les espaces vides.
Images en simple transparence (réglage d'opacité), incrustation...

J'ai utilisé des éléments que l'agence m'avait demandé d'intégrer, ou que je connaissais faire partie de leurs hobbies (moto, belles-voitures !),
l'appareil photo, des photos, bref des éléments liés à leur travail.

N'oubliez pas une zone RECTANGULAIRE BIEN DEFINIE pour le texte !

(Jusque là tout le travail est entre vos mains, et je ne puis hélas pas vous aider des masses !! Tout est problème d'inspiration !)

AIDE : Le logiciel de 3D : Poser (www.metacreations.com) permet de créer facilement des images d'humains en situation. Une très bonne source d'images et d'inspiration ! D'autant plus que ce soft est très simple d'emploi. (Les enfants s'amusent beaucoup avec ! Si si !).

ETAPE 2 : DECOUPAGE

Là encore, un connaissance des tableaux HTML et de leurs imbrications vous permettront de découper au mieux vos images.

Je commence toujours par un découpage simple. Utilisez l'outil "TRANCHE" de Photoshop ou "SLICE". (ou touche "K").

Notez la présence d'une flèche noire en bas à droite de l'icone.
Un clic de 2 secondes fera appraître un outil lié, le "SELECTEUR DE TRANCHE".

L'affichage ou non des tranches : Affichage>Extras ou CTRL+H.

Activez le magnétisme pour une meilleure souplesse du "couteau" TRANCHE.
Affichage>Magnétisme>Tranche
Et activez le magnétisme par Affichage > Magnétisme

Je commence par un découpage simple en trois ou quatre parties principales, correspondant à des tableaux simples.

Ligne 1 : 1 cellule : L'en-tête

Ligne 2 : 3 cellules : Texte / Menu central / Flash

NB : Vous pouvez définir à ce stade, avec l'outil "SELECTEUR DE TRANCHE", en double-cliquant sur les tranches le type de sortie de chacune de celles-ci.
Image : ou
pas d'image : pour le texte !

Type de tranche : image
Nommez les de manière explicite !
Lien / Url possible !


Type d'image : aucune image.

Ensuite, j'exporte.
Fichier > Enregistrer pour le Web

Pour chaque tranche, choisissez le type de format "GIF" "JPEG", le taux de compression etc...
Bref, un travail aux petits oignons que Photoshop vous propose !

Etape 3 : Récupération avec DreamWeaver

Ensuite, ouvrez votre fichier HTML créé avec DreamWeaver ou votre editeur WySiWyG !
En général, je préfère redessiner mon tableau.
ici : 2 lignes / 3 colonnes.
Cell pading : 0
Cell Spacing : 0
Border : 0

Et je place mes images.


Etape 4 : AIDE A LA CREATION WEB
Pensez à placer des balises de commentaires pour repérer où commence votre zone de texte, et où elle termine !

Ici, 2 commentaires placés en haut et en bas permettront de modifier le contenu sans se tromper !
(si vous rajoutez des tableaux par la suite, celà evite des erreurs !).

ASTUCE ! Pour les ASP-PHP's scripteurs : Tout le code antérieur à la première balise peut se placer dans un fichier "top.php", et le code postérieur à la deuxième balise dans un fichier "bottom.php" !
Il suffit d'appeler dans votre fichier Index.php :

Ce qui fait que vous n'aurez plus qu'à modifier "top.php" et "bottom.php" pour CHANGER de kit graphique !
Cool non ?

Etape 6 : découpage multiple.
Ensuite, toujours avec l'outil tranche, vous pouvez, afin d'accélérer le chargement, ou afin de définir des boutons, découper encore plus chaque zone.
(Là encore, je travaille sur mon fichier HTML "propre" avec mon tableau, j'enlève la grosse image, et j'y réinsère les petites...

(Le travail n'est pas toujours faisable avec le fichier généré par Toshop ! La zone de texte ne pouvant pas toujours "s'étirer" à cause d'un découpage hasardeux).

Une fois ce travail fait, il est entièrement possible de modifier des éléments de la photo de départ (suppression ou remplacement d'incrustations etc...).
L'exportation pour le web conserve la taille des tranches et leur nom !
mise à jour instantanée des éléments de la page HTML !

Voilà à peu près tout ce que je peux vous dire sur la création d'un KIT graphique !
C'est à la fois simple et complexe, car il faut mettre en relation de nombreux concepts !

Enjoy ! Vous pouvez aller voir le site en "live" en cliquant ICI

Un kit graphique à modifier est dispo (03.2005)