Cette étape vous expliquera en détails comment modifier et personnaliser votre kit graphique web comme bon vous semble ou en fonctions vos impératifs ou ceux de votre client.

Modifiez votre kit graphique web

1. Préparation à la modification des textes en installant les nouvelles polices.
2. Modifier le Logo.
3. Changer les couleurs.
4. Ajouter ou Remplacer une ou des photos.
5. Découpe et exportation en HTML.

Préparation à la modification des textes en installant les nouvelles polices.

1. faites Démarrer>Paramètres>Panneau de Configuration> et ouvrez le répertoire Polices.
2. faites Fichier->Installer une nouvelle police.
3. Dans la fenêtre, localisez l'emplacement des polices contenues dans le répertoires FONTS de votre kit graphique web.
4. Cliquez sur Sélectionner Tout puis sur OK.
5. Fermez toutes les fenêtres : vos nouvelles polices sont installées.

Modifier le Logo.

1. Double-cliquez sur votre TEMPLATE.PSD pour l'ouvrir dans Photoshop.
2. Vérifiez bien que votre boite à outils et la boite d'options des outils soient bien ouvertes.
   Si ce n'est pas le cas, faites Windows > Outils & Fenêtres > Options pour les afficher.
3. Votre template s'affiche soit trop grand, soit trop petit par rapport à votre résolution d'écran. Pour l'ajuster, sélectionnez l'outil Zoom depuis la boite à outils. La fenêtre d'options pour l'outil ZOOM vous donnera plus de choix. Choisissez Recadrer la fenêtre et cliquez sur Pixels actuels.
4. Vérifiez que les Calques soient visibles.
   Si ce n'est pas le cas, sélectionnez Windows > Calques pour les afficher.
5. Sélectionnez l'outil Déplacer et faites clic-droit sur le mot "company" dans son coin superieur gauche.
   Dans le menu contextuel qui apparait, choisissez COMPANY. cela sélectionnera aussitôt le calque parmi les autres.
6. Soyez sûr d'avoir sélectionné le bon calque avant d'y faire des modifications.
   Pour le vérifier, cliquer sur l'icon EYE dans la fenêtre des calques, placè juste à gauche du claque. Normalement votre calque doit disparaitre de votre kit graphique web vous confirmant ainsi que vous êtes bien sur le point de modifier le bon calque. Réactiver l'icon Eye pour réafficher votre calque.
7. Toujours votre calque sélectionné, double-cliquez sur .
   Cette fonction vous permettra de passer directement à l'outil Type et mettra votre texte en surbrillance. Maintenant, cliquez sur votre texte "company" sur le kit graphique web et remplacez le mot "company" par votre propre nom.
8. Vous pouvez changer la police, la taille, la couleur, la position, la rotation, bref, tout ce que vous voulez faire sur votre logo.
9. Une fois que vous avez changez votre logo et compris la technique de modification des textes, vous pouvez changer tout ce que vous voulez dans votre kit graphique web et qui est constitué de texte.

Changer les couleurs.

1. Sélectionnez un calque de forme géométrique quelconque
2. Sélectionnez l'outil Paint . Cet outil repeint intégralement le calque sélectionné avec la couleur définie dans Photoshop tout en gardant les autres paramétres du calque.
3. Choisissez une autre couleur, puis avec l'outil Paint , cliquez sur le claque sélectionné.
4. Comme par magie, votre calque de forme géométrique change intégralement de couleur tout en gardant ces autres paramétres.

Ajouter ou Remplacer une ou des photos.

1. Choisissez Fichier > Ouvrir et sélectionnez une de vos photos située sur votre machine.
2. Sélectionnez Image > Taille de l'image pour voir apparaitre la fenêtre des dimensions.
3. Vérifiez bien que la fonction Conserver les proportions soit cochée pour ne pas déformer votre photo.
4. Entrez 120 en largeur et validez par OK.
5. Puis faites Select > Tout, puis Edition > Copier pour mettre votre photo en mémoire.
6. Fermez la fenetre de votre photo.
   Répondez NON à la demande de sauvegarde des modifications.
7. Placez vous sur votre Template et faites Edition > Coller. Un nouveau calque contenant votre photo perso vient automatiquement de se créer.
8. Cliquez-droit sur ce nouveau calque, choisissez l'outil Déplacer, puis placer votre photo où bon vous semble dans votre Template.

Découpe et exportation en HTML.

Après avoir modifié vos textes, logos, photos et avoir personnalisé votre interface, vous n'avez plus qu'à remodifier les découpes d'origine sur votre kit graphique web pour les faire coincider avec vos nouveaux élèments et exporter votre Template en tant que page web, afin qu'elle vous serve de "master" pour développer par la suite votre site web sous votre éditeur HTML.

1. Sélectionnez l'outil Slice et dessinez un rectangle autour de votre logo.
   Vous pouvez recadrer ensuite cette zone en sélectionnant l'autre outil Slice Selection
2. Dessinez une zone sur un bouton de lien. Sélectionnez cette zone et, toujours l'outil Slice Selection actif, faites Clic-droit. Dans le menu contextuel qui s'est ouvert, choisissez Edition Slice Options. Dans cette nouvelle fenêtre Options Slice, placez-vous dans la case URL et mettez-y l'adresse URL de la page web correspondant à ce bouton et validé par OK.
3. Faites ceci sur autant de boutons que votre kit graphique web contient.
4. Puis recadrez correctement toutes les zones Slices sur vos textes et photos modifiés afin que vos découpes soient le plus précises possibles pour l'exportation.
5. Sélectionnez Fichier > Sauver pour le Web pour afficher la fenêtre d'exportation.
   Faites-y les éventuelles modifications d'optimisation des images à exporter puis validez par OK.
6. Spécifier un emplacement d'enregistrement sur votre machine et le tour est joué !
7. Vous vous retrouvez avec votre page web personnalisée index.html + son répertoire "images" contenant toutes les images découpées de votre interface.
8. Double-cliquez sur cette page index.html créée pour la prévisualiser et découvrez votre propre interface pro personnalisée à vos logos, couleurs, photos et texte.

Ensuite, c'est tout simple !
Ouvrez votre éditeur HTML, Dreamweaver MX par exemple, et importez votre page index.html précédement créée.
Enregistrez-la comme Modèle.
Puis, pour créer votre site web en très peu de temps, il vous suffit juste de faire Fichier > Nouveau et de choisir Depuis un Modèle.
Vous pourrez ainsi créer toutes les pages de votre site web depuis ce modèle personnalisé.
Si demain vous voulez changer un elèment ou une photo, il vous suffira juste de modifier votre modèle pour que toutes les pages du site soient mises-à-jour automatiquement.

Vous êtes enfin prêt à mettre votre site ONLINE une fois que vous y aurez placé tout votre contenu dans les bonnes pages...

[ Retour ]