Matériel : ICI
Créer avec PSP X et Dreamweaver CS 3
Ouvrir votre masque dans PSP
Capture d'image...redimensionner à 60 %
Voici votre masque avant la colorisation
![]() |
Ouvrir une nouvelle image
Largeur : 600
Hauteur : 450
fond transparent
Copier...coller votre masque comme nouveau calque
Calques
Fusionner les calques visibles
Supprimer le masque original
****************************************************
****************************************************
Après avoir colorié votre masque... aux couleurs de votre choix
Capture d'image...redimensionner à 60 %
![]() |
Ouvrir votre ...Animation Shop
Copier votre masque ...que vous avez colorié
**************************************************
Animationshop
Cliquer droit
Coller comme nouvelle animation
**************************************************
Effet... Insérer un effet sur une image
Cintrage
Durée : 10 secs
Images : 10 images
![]() |
Personnaliser
![]() |
Qui vous donnera une animation de... 11images
*************************************************
Choisir l'image no 6
Qui sera votre Top
Cliquer droit... sur l'image no 6
Copier
Cliquer encore à droite no 6
Coller comme nouvelle animation
**********************************************
Avec le pot de peinture
Emplir de noir
le haut et le bas de votre image
*********************************************
Cliquer à droite... Copier
Cliquer à droite
Coller comme nouvelle image
*********************************************
Faire la même chose avec l'image no 10
Ce sera votre...footer
********************************************
Activer votre image ( votre top )
Image...Redimensionner
Largeur : 850
Hauteur : 300
Inscrire votre nom... à l'intérieur
Et de chaque côté... placer un petit pinceau de votre choix
Calques
Fusionner les calques visibles
Capture d'écran...redimensionner à 60 %
![]() |
Activer votre image ( votre footer )
Image...Redimensionner
Largeur : 850
Hauteur : 300
Inscrire votre...Copyright
Et de chaque côté... placer un petit pinceau de votre choix
Calques
Fusionner les calques visibles
Capture d'écran...redimensionner à 60 %
![]() |
*************************************************
Activer votre image ( votre top )
Image...Taille du support
Cliquer...flèche du haut... au centre
![]() |
Copier...Coller votre footer... dans le bas
et bien le centrer... dans le bas de votre image
Capture d'écran...redimensionner à 60 %
![]() |
Calque...Nouveau calque
Glisser ce calque en bas des autres calques
Outil pot de peinture... emplir de la couleur noir
![]() |
Calques
Fusionner les calques visibles
***************************************************
Reprendre votre masque que vous avez coloré ( l'original )
Fenêtre...Dupliquer
![]() |
Image...Redimensionner
Hauteur : 118
Largeur : 60
Qui va vous créer votre ...bouton
![]() |
Copier...coller comme nouveau calque... sous votre ...Top
Dupliquer... le nombre de fois... que vous désirez
***************************************************
Reprendre encore...votre masque que vous avez coloré ( l'original )
Fenêtre...Dupliquer
Image...Redimensionner
Hauteur : 450
Largeur : 20
Vous aurez ceci :
Qui vous servira de séparateur
![]() |
Copier... votre séparateur
Coller comme nouveau calque et place sous vos boutons
Dupliquer
Placer-le au-dessus de votre ...footer
Bien centrer le tout
Fusionner les calques visibles
*****************************************************
Vous devriez avoir ceci
Votre top...votre footer
vos 4 boutons et 2 séparateurs
Toutes ces formes et couleurs créées...avec seulement...un masque
Capture d'écran...redimensionner 80 %
![]() |
Je vais fractionner mon image pour Dreamweaver
Fichier...Exporter...Image fractionnée
3 lignes ... 1 colones
![]() |
Que j'ai placé au centre... entre les 2 séparateurs
ne pas placer en bas de la ligne blanche
flèche rouge
![]() |
Optimiser la cellule...jpg
Enregistrer sous...dans le dossier que vous avez choisi
*****************************************************
Ouvrir votre document
Régles CSS
Bloc...centrer
Arrière-plan... noir
Couleur de votre police
***********************************************************
Cliquer entre les 2 séparateurs
pour activer votre image du centre
Cliquer sur ... td
pour écrire votre texte
td...Horz et Vert
![]() |
Le tutoriel est terminer
***********************************************
Amusez-vous bien
Bisou...Cowboy58