CADRE GLITTER


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 les 3 éléments suivants :
1) une image de votre choix que vous traiterez dans votre Paint Shop pro pour éliminer toute démarcation sur les quatre côtés: avec le filtre seamless tile de FM tile tools ou bien avec le filtre Mosaïque sans jointure dans PSP 8
Dans mon cas, je lui ai donné les dimensions suivantes: 800 par 965 pixels.
2) deux tuiles scintillantes (glitter) de votre choix. Voici celle que j'ai utilisées pour ma réalisation:




Voici un lien pour chercher des glitters: ICI .


PROCEDE DANS SCRIPPY

1) Ouvrez dans le logiciel Scrippy un nouveau document: File/New ou bien cliquez sur l'icône correspondante. Insérez un background de votre choix: Insert/background et insérez le papier créé précédemment dans PSP.

2) Insert/Positioned container et complétez dans la deuxième colonne: From Left: 0 ; From Right: 0; From Top : 0; From Bottom : 0.
C'est un positioned à 0, bien commode pour faire des regroupements de positioned containers qui eux seront placés à des endroits précis de la réalisation, comme vous pouvez voir dans la capture ci-dessous qui représente la première partie des cases de cette réalisation:



3) Insert/Positioned container (il restera décalé vers la droite par rapport au précédent).
Dans Horizontal Layout, cochez Set Position and Widht (c'est la première colonne qui sera complétée) : : From left: 50; Specified size : 10.
Dans Vertical Layout, Set Position and Height: from Top : 50 ; specified size : 60.

4) Insert/ background: et on va sélectionner comme background la tuile scintillante (glitter 1)
Dans Scrolling, mettez No Scrolling

5) Insert/frame. J'ai choisi : Style : groove; widht : 1; couleur : de votre choix (une couleur qui se détache de celle du glitter et de votre papier de fond (dans mon cas, j'ai choisi celle-ci: #E9F3FD). A vous de choisir les valeurs qui vous semblent les mieux adaptées à votre projet global.

6-8) On va commencer à faire du copier-coller.
Cliquez sur la case 3, et faites Edit/Copy positioned container. Cliquez sur la case 5 et cliquez sur l'icône Paste. Avec la souris appuyée sur la touche 6, déplacez-la vers la gauche en correspondance de la case 3.
Dans la case 6, modifiez seulement Right (au lieu de Left) donc vous aurez Right et Top.

9-11) Répétez la phase précédente, et maintenant cochez Bottom........donc vous avez Left et Bottom.

12-14) Répétez la phase précédente, et maintenant cochez Right et Bottom.

Ce premier regroupement permet d'avoir un petit rectangle avec glitter animé qui se répète dans les 4 angles de la composition. Cliquez sur Preview pour les voir.

15-27) Faisons maintenant un copier-coller de la case 2. Mettons-la bien complètement à gauche.
Modifiez dans les 4 positioned containers internes les mesures. Mettez les suivantes: 100/10/50/110.

28-40) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 28 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 150/10/100/110.

41-53) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 41 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 200/10/150/60.

54-66 ) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 54 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes : 60/40/50/10.

67-79) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 67 complètement à gauche dans le système des cases. .
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 60/40/100/10.

89-101) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 89 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 110/40/100/10.

102-114) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 102 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les positioned containers internes: 110/40/150/10.

115-127) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 115 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 160/40/150/10.

128-140) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 128 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers: 160/40/200/10.

141-153) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 141 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre: 120/10/30/60 dans les 4 positioned containers internes.
Mettez dans celui-ci le glitter 2.

154-166) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 154 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 130/40/80/10.
Mettez dans celui-ci le glitter 2.

167-179) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 167 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 170/10/80/60.
Mettez dans celui-ci le glitter 2.

180-192) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 180 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 40/40/120/10.
Mettez dans celui-ci le glitter 2.

193-205) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 193 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 80/10/120/60.
Mettez dans celui-ci le glitter 2.

206-218) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 206 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 90/40/170/10.
Mettez dans celui-ci le glitter 2.

219-231) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 219 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 140/10/10/60.

232-244) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 232 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 150/40/10/10.

245-257) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 245 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 150/40/60/10.

258-270) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 258 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 190/10/10/110.

271-283) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 271complètement à gauche dans le système des cases. br> Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 200/40/60/10.

284-296) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 271 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 200/40/110/10.

297-309) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 297 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 240/10/60/60.

310-322) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 310 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 60/10/140/110.

323-335) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 323 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 20/40/140/10.

336-348) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 336 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 20/40/190/10.

349-361) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 349 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 70/40/190/10.

362-374) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 362 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 70/40/240/10.

375-387) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 375 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 110/10/190/60.

386-398) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 386 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 10/10/140/60.

399-411) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 399 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 30/10/30/100.
Mettez le glitter 2.

412-424) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 412 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 40/80/30/10.
Mettez le glitter 2.

Les 4 angles sont complétés. On passe maintenant à construire les barres verticales et horizontales qui permettront de relier les 4 angles.

425-437) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 425 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes:
- dans le premier: colonne 2 : Left 180; Right 180; colonne 1: Top 130; Size: 10.
- dans le deuxième : colonne 2 : Left 180; Right 180; colonne 1: Bottom 130; Size: 10.
- dans le troisième : colonne 1 : Right 130; Size : 10; colonne 2: Top 170; Bottom: 170.
- dans le quatrième : colonne 1 : Left 130; Size : 10; colonne 2: Top 170; Bottom: 170.

Mettez le glitter 2.

438) Insert/Message Area: mettez-le bien à gauche dans la liste des cases.
Puisque qu'il faut tenir compte de la largeur des containers des bandes latérales, voici les bonnes marges du Message area : From Left : 160 ; From Right : 160 ; From Top : 220 ; From Bottom : 220.
N'oublions pas de mettre des couleurs au Scrollbar en cochant Overrid Scrollbar color et en choisissant 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.



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


Ce tutoriel a été créé le 25 octobre 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