Pour la version anglaise de ce tutoriel, cliquez sur le drapeau :
Si vous voulez voir un exemple de scrippy créé avec la technique indiquée dans ce tutoriel cliquez ICI.
PREPARATION DU MATERIEL
Préparez dans Paint Shop Pro, les 6 éléments de base en suivant la méthode suivante :
1) Ouvrez dans PSP un nouveau fichier de 350 par 300 pixels (les mesures sont modifiables), fond transparent.
2) Ouvrez vos tubes en cliquant sur l'outil tubes à images et sélectionnez un tube avec la forme d'un coeur: en voici un que je vous offre
ICI que vous aurez mis au préalable dans le dossier TUBES.
Placez-le sur votre rectangle transparent en cherchant la juste dimension.
3) Faites Edition/copier et ensuite Edition/copiez comme nouvelle image.
4) Reprenez la nouvelle copie et placez-la comme nouveau calque sur un rectangle noir ayant les mêmes dimensions que votre premier rectangle. De cette manière la lettre décorative sera exactement au centre du rectangle noir.
Fusionnez tous les calques. Puis transformez en calque: Calques/transformez en calque.
5) Double-cliquez avec la pipette sur le coeur pour la sélectionner. Si la sélection ne recouvre pas tout le coeurs, faites Sélection/Modifier/Sélectionnes zones similaires.
Vous pouvez aussi sélectionner une toute partie partie rouge avec l'outil lasso et ensuite faireSélection/Modifier/Sélectionnez zones similaires.
Autre procédé : sélection une partie noire, sélectionner les zones similaires, puis invertir la sélection.
6) Tapez sur la touche CANC de votre clavier pour éliminer la sélection.
7) Fusionnez les calques visibles, mettez la couleur noire comme couleur d'arrière-plan, puis sauvegardez votre coeur dans le format GIF optimisé en le nommant coeur-1.
8) Reprenez le même fichier à peine sauvegardé et faites Image/Redimensionner et donnez-lui des dimensions plus réduites : 95 par 80 pixels environ. Sauvegardez-le avec un autre nom (motif 2), toujours dans le format gif optimisé.
Les 2 fichiers gifs sont maintenant terminés.
Créons maintenant les 4 tuiles indispensables pour obtenir l'effet dans le coeur.
9) Créez dans PSP une première tuile ayant les dimensions suivantes : 200 par 200 pixels. Voici une des miennes:
Sauvegardez-la comme tuile 1.
10) Réduisez cette première tuile aux dimensions de 50 par 50 pixels et sauvegardez-la comme tuile 2.
11) Créez dans PSP une deuxième tuile (avec des couleurs différentes) ayant les dimensions suivantes : 200 par 200 pixels. Sauvegardez-la comme tuile 3.
9) Réduisez cette deuxième tuile aux dimensions de 50 par 50 pixels et sauvegardez-la comme tuile 4.
donc on aura 2 couples de tuiles aux couleurs identiques avec des dimensions différentes.
PROCEDE DANS SCRIPPY
Voici la liste des cases principales de ce tutoriel:
1) Ouvrez dans le logiciel Scrippy un nouveau document: File/New ou bien cliquez sur l'icône correspondante. Insérez un background : Insert/background et sélectionnez la couleur noire.
2) Insert/Positioned Container et laissez-le dans cette position.
Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From Center: 0; Specified size : 350 .
Dans Vertical layout, toujours dans la première colonne, mettez From Top : 100 et Specified Size : 300.
Les 5 backgrounds (les 4 premiers étant les tuiles superposées) que nous allons ajouter dépendront de ce container: ils seront donc placés un sur l'autre de façon bien parallèle (voir capture).
3) Insert/ background : cliquez sur Browse pour aller chercher votre première tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Up+Left ; Pixels per Second : 10 ; Pixels per move : 1. Smoth Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
4) Insert/ background : cliquez sur Browse pour aller chercher votre deuxième tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Down+Right ; Pixels per Second : 40 ; Pixels per move : 2. Fast Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
5) Insert/ background : cliquez sur Browse pour aller chercher de nouveau votre première tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Up+Right ; Pixels per Second : 10 ; Pixels per move : 1. Smoth Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
6) Insert/ background : cliquez sur Browse pour aller chercher votre deuxième tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Down+Left ; Pixels per Second : 40 ; Pixels per move : 2. Fast Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
7) Insert/ background : cliquez sur Browse pour aller chercher votre fichier gif avec votre coeur de 350 par 300 pixels créé dans Paint Shop Pro.
Mettez Scrolling : No scrolling et ne modifiez rien.
Vous venez de réaliser le grand coeur central avec effets en transparence. Vérifiez-le en cliquant sur Preview.
Nous allons réaliser l'effet qui se trouve en haut à gauche.
8) Insert/Positioned Container et laissez-le dans cette position.
Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From Left: a 0; Specified size : 95 .
Dans Vertical layout, toujours dans la première colonne, mettez From Top : 10 et Specified Size : 80.
Les 5 backgrounds (les 4 premiers étant les tuiles superposées) que nous allons ajouter dépendront de ce container: ils seront donc placés un sur l'autre de façon bien parallèle (voir capture).
9) Insert/ background : cliquez sur Browse pour aller chercher votre première tuile colorée de 50 par 50 pixels.
Mettez Scrolling : Up+Left ; Pixels per Second : 10 ; Pixels per move : 1. Smoth Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
10) Insert/ background : cliquez sur Browse pour aller chercher votre deuxième tuile colorée de 50 par 50 pixels.
Mettez Scrolling : Down+Right ; Pixels per Second : 40 ; Pixels per move : 2. Fast Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
11) Insert/ background : cliquez sur Browse pour aller chercher de nouveau votre première tuile colorée de 50 par 50 pixels.
Mettez Scrolling : Up+Right ; Pixels per Second : 10 ; Pixels per move : 1. Smoth Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
12) Insert/ background : cliquez sur Browse pour aller chercher votre deuxième tuile colorée de 50 par 50 pixels.
Mettez Scrolling : Down+Left ; Pixels per Second : 40 ; Pixels per move : 2. Fast Scroll: coché.
Dans Advanced options mettez seulement 40 dans transparency (transparence). Ne cochez pas Layer with other objects
13) Insert/ background : cliquez sur Browse pour aller chercher votre fichier gif avec votre coeur de 95 par 80 pixels créé dans Paint Shop Pro.
Mettez Scrolling : No scrolling et ne modifiez rien.
Cliquez sur Preview pour vérifier si tout est correct.
Nous allons maintenant rapidement créer l'effet coeur aux 3 autres angles du scrippy.
14 - 19 ) Cliquez sur la case 8 (celle du Positioned container contenant le petit fichier gif de 95 par 80 pixels. Faites simplement Edit/copy Positioned container.
Cliquez sur la case 13, puis sur l'icône Paste: toute la série 8-13 va se coller en succession. Placez-vous alors sur la case 14 et déplacez-la complétement sur la gauche (voir capture).
Puis dans cette même case, changez seulement en cochant Right (donc vous aurez Right et Top cochés).
20 - 25) Répétez l'opération précédente et dans la case 20 cochez Left et Bottom.
26 - 31) Répétez l'opération précédente et dans la case 26 cochez Right et Bottom.
Prévisualisez pour vérifier.
32) Insert/Message Area et mettez cette case complètement à gauche. Nous allons calculer les distances pour bien mettre le message entre les différents effets. Voici les bonnes mesures des marges en fonction des mesures des autres éléments: Left : 100; Right : 100 ; Top : 500 (hauteur du motif principal et un peu de marge au dessus et en-dessous); Bottom : 120.
Cochez Override Scrollbar color et choisissez les 2 couleurs en harmonie avec les autres couleurs de la réalisation.
Vous pouvez compléter en ajoutant un sound (musique), un loading message et un ticker.
Sauvegardez votre réalisation comme fichier SSC ou comme fichier HTML.
CONSEIL : vous pouvez utiliser le même principe du procédé que j'ai indiqué ici pour travailler sur des lettres-dessins de certaines polices (dingbats) ou bien en découpant une image pour la rendre transparente.
******************
Ce tutoriel a été créé le 12 mai 2003 dans le contexte des travaux du groupe Franco-scrippy,
fondé par Mario Panone.
Si vous voulez des informations ultérieures sur ce groupe cliquez sur le logo:
Si vous voulez vous inscrire à ce groupe, cliquezICI.
Bon amusementl!
Lorenza p. s: si vous voulez m'écrire pour avoir des informations supplémentaires ou pour me suggérer des conseils, cliquez ICI
.
