DIVIDERS COLORES


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 5 éléments de base en suivant la méthode suivante :
1) Ouvrez dans PSP un nouveau fichier de 350 par 60 pixels, fond noir.
2) Sélectionnez une couleur différente (par exemple le rouge) pour l'avant-plan et pour l'arrière-plan.
3) Cliquez sur l'outil Texte et choisissez une lettre d'une police qui vous permette d'avoir une barre plutôt longue qui pourrait servir de division et en même temps de décoration, comme paR exemple la lettre P (majuscule) de la police Deco Dividers que vous pouvez télécharger ICI
Toutes les lettres de cette police peuvent être utilisée pour ce tutoriel.
Mettez la taille 36 et cliquez sur Ok.
4) Avec l'outil déplacement, déplacez la sélection lettre vers le centre.
5) Faites Edition/copier, puis collez-la comme nouvelle image sur votre plan de travail.
6) Reprenez la nouvelle copie (rouge) et placez-la comme nouveau calque sur le rectangle noir (où vous aurez au préalable éliminé la lettre sélectionnée). De cette manière la lettre décorative sera exactement au centre du rectangle noir.
Fusionnez tous les calques.
7) Double-cliquez avec la pipette sur la fleur pour la sélectionner. Si la sélection ne recouvre pas toute la fleur, faites Sélection/Modifier/Sélectionnes zones similaires.
Vous pouvez aussi sélectionner une toute partie partie rouge avec l'outil lasso et ensuite faire Sélection/Modifier/Sélectionnes zones similaires.
8) Calques/transformez en calque.
9) Tapez sur la touche CANC de votre clavier pour éliminer la sélection.
10) Sélection/Modifier/Contracter. Et écrivez 5.
11) Calque/Ajoutez un calque bitmap et remplissez-le avec du noir en utilisant le pot de peinture.
12) Fusionnez les calques visibles et sauvegardez dans le format GIF optimisé en le nommant motif 1.
Le premier motif décoratif.
13) Reprenez le même rectangle à peine sauvegardé et faites Image/Renverser sauvegardez-le avec un autre nom (motif 2), toujours dans le format gif optimisé.
14) Reprenez le même rectangle à peine sauvegardé et faites Image/Rotation - direction: droite ; 90 °. Sauvegardez-le avec un autre nom (motif 3), toujours dans le format gif optimisé.
15) Reprenez le même rectangle à peine sauvegardé et faites Image/Retourné et sauvegardez-le avec un autre nom (motif 4), toujours dans le format gif optimisé.
Vous avez ainsi obtenu les 4 rectangles noirs décoratifs qui serviront pour les pourtours de la réalisation.
16) Choisissez une tuile très colorée (plus de couleurs vous aurez plus la réalisation sera suggestive. Donc amusez-vous à chercher des couleurs qui vous plaisent) de 200 par 200 pixels ayant un effet qui se répète sur les 4 côtés. Il est possible d'en créer avec le filtre Ulead/Art texture. Voici celle que je me suis créée et que j'ai utilisé dans ma réalisation:





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 Left: 0; Specified size : 60 (c'est la largeur d'une décoration construite avant dans Paint Shop Pro).
Dans Vertical layout, dans la deuxième colonne, mettez From Top : 0 et From Bottom : 0.
Les 2 backgrounds que nous allons ajouter dépendront de ce container: ils seront donc placés un sur l'autre de façon bien parallèle.

3) Insert/ background : cliquez sur Browse pour aller chercher votre tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Down+Left ; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects

4) Insert/ background : cliquez sur Browse pour aller chercher votre fichier gif fond noir avec le motif 1 (celui qui sera destiné à la gauche de la réalisation).
Mettez Scrolling : Up; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects

5 - 7) Cliquez sur la case 2 et faites Edit/Positioned Container. Placez-vous sur la case 6, puis cliquez sur Paste. Puis déplacez la case du container complètement vers la gauche (tenez la touche gauche de la souris appuyée pour le faire).
Changez dans la case 5 : cochez Right. Dans la case 7, Scrolling: Down et sélectionnez votre fichier gif - motif 2 (celui qui est destiné à droite).

Cliquez sur Preview: vous devriez voir un motif ascendant sur la gauche et un motif descendant sur la droite avec un jeu de couleurs procuré parle passage de la tuile utilisée en-dessous de la transparence du motif.
Nous allons maintenant construire la partie centrale comprenant le message area et les décorations sur la partie haute et basse.

8) Insert/Positioned Container : et complétez dans la deuxième colonne : From Left : 150 ; From Right : 150 ; From Top : 50 ; From Bottom : 50.

9) Insert / Background : cliquez sur Browse pour aller chercher votre tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Down+Left ; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects

10) Insert / Positioned Container et dans la deuxième colonne, cochez : Left 3 ; Right : 3 ; Top : 3 et Bottom : 3. (c'est la marge colorée que nous allons construire pour le message area).

11) Insert/background et sélectionnez la couleur noire. Elle servira de fond à l'espace du message.

12) Insert/Positioned Container et tirez-le complètement à gauche.
Dans Horizontal Layouta (deuxième colonne) : From Left: 153; From Right : 153 (c'est la largeur de la marge latérale et du bord coloré du message area)
Dans Vertical layout, dans la première colonne, mettez From Top : 53 et Specified Size : 60.
Les 2 backgrounds que nous allons ajouter dépendront de ce container: ils seront donc placés un sur l'autre de façon bien parallèle.

13) Insert/ background : cliquez sur Browse pour aller chercher votre tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Up+Left ; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects

14) Insert/ background : cliquez sur Browse pour aller chercher votre fichier gif fond noir avec le motif 3 (celui qui sera destiné haut de la réalisation).
Mettez Scrolling : Left; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects

15 - 17) Cliquez sur la case 12 et faites Edit/Positioned Container. Placez-vous sur la case 14, puis cliquez sur Paste. Puis déplacez la case du container complètement vers la gauche (tenez la touche gauche de la souris appuyée pour le faire).
Dans la case 15, cochez Bottom. Dans la case 17, sélectionnez le quatrième motif décoratif et dans Scrolling, mettez Left. 18) 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 et de telle sorte que l'espace du message s'adapte en fonction de la longueur du message écrit. Voici les bonnes mesures des marges en fonction des mesures des autres éléments: Left : 170; Right : 170 ; Top : 130 (hauteur du motif principal et un peu de marge au dessus et en-dessous); Bottom : 130.
Cochez Override Scrollbar color et choisissez les 2 couleurs en harmonie avec les autres couleurs de la réalisation. Moi, j'y ai mis une des couleurs de la tuile récupérée avec la pipette dans Paint Shop Pro.


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.



******************


Ce tutoriel a été créé le 05 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, cliquez ICI.

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 .



Va à la Home Page du site Va au document précédent Va à la section principale Va au document successif