CADRES DORES ET IMAGES

Si vous voulez voir une réalisation avec la technique indiquée ici, cliquez : ICI .


Pour ce tutoriel, vous aurez besoin des éléments suivants:
- un cadre doré de 200 par 200 pixels, sans son image : cadre1
- un cadre doré de 400 par 300 pixels, sans son image: cadre2
- une image sans démarcation de 200 par 200 pixels : image1
- la même image que la précédente, mais inversée : image 2
- un texte écrit dans un rectangle fond de 400 par 400 pixels transparent dans PSP : texte.

Pour ce qui concerne les images qui passent sous les cadres, j'ai utilisé comme base une image de J.K. Bedrick, dont vous trouverez une galerie ICI.

Pour le texte en gif, faites un rectangle de 400 par 400 pixels fond transparent dans PSP;
choisissez un police et une couleur de votre choix et écrivez votre texte. Puis enregistrez dans le format gif optimisé.
Pour un texte plus long, augmentez la hauteur du rectangle. Modifiez éventuellement la taille de la police pour arriver au juste effet que vous voulez obtenir.
Pour ce qui me concerne, j'ai choisi la police French Script MT, taille 30.

Pour obtenir des cadres du type que j'ai utilisé dans la réalisation-scrippy, suivez la méthode des 2 méthodes indiquée dans mon tutoriel "Cadre doré" : ICI. En particulier, le passage qui explique quelle police et quelle lettre utiliser pour obtenir exactement le motif du cadre que j'ai réalisé ici.
Quand vous avez réalisé votre cadre, pour le réutiliser comme cadre sans l'image, ouvrez un rectangle fond transparent avec les dimensions désirées et faites Image/Cadres.
Recherchez-le dans la liste des cadres, puis appliquez-le.
Faites la sauvegarde dans le format gig optimisé.


DANS SCRIPPY


Ouvrez un nouveau document: File/New.

1) Insert/Background et mettez une couleur qui s'harmonise avec l'ensemble de la composition.
Ici pour un jeu de contraste, j'ai préféré une couleur assez sombre.

2) Insert/Positioned Container.
En Horizontal Layout, complétez dans la deuxième colonne: Left : 0 ; Right: 0.
En Vertical Layout, complétez dans la première colonne: Center : 0 ; Specified Size: 1000 (ce sera la hauteur globale de toute la réalisation).

3) Insert/Positioned Container. Il dépend du précédent: il restera dans la position occupée. Mettre tout à 0 dans la deuxième colonne pour Left, Right, Top et Bottom: il servira seulement pour regrouper les éléments que nous créerons dans la partie haute du scrippy.

4) Insert/Positioned Container. Il dépend du précédent: il restera dans la position occupée.
Complétez dans la première colonne: dans l'ordre : Left : 10 ; Size : 200 ; Top : 10 ; Specified Size : 200

De ce Positioned Container dépendant les 2 cases qui suivent.

5) Insert/Background. Cliquez sur Browse et mettez votre image 1. Scrolling: Down+Right.
Smooth Scroll; Pixels per move: 10; Pixels per second: 1.
Ne touchez rien au reste.

6) Insert/Positioned Image. Cliquez sur Browse et mettez votre cadre 1. Centre 0 en horizontal et en vertical.

7-9) Faites un copier-coller de la case 4, et mettez la case 7 obtenu vers la gauche, en correspondance de la case 4.
Changez seulement dans la case 7: mettez Left : 110; Top : 110.

10-12) Faites un copier-coller de la case 4, et mettez la case 10 obtenu vers la gauche, en correspondance de la case 4.
Changez les éléments suivants :
- dans la case 10: Right.
- dans la case 11, changez l'image: mettez l'image 2. Scrolling : Down+Left

13-15) Faites un copier-coller de la case 10, et mettez la case 13 obtenu vers la gauche, en correspondance de la case 4.
Changez les éléments suivants :
- dans la case 10: mettez Right : 110 ; Top : 110.

Nous venons de compléter la partie haute. Nous allons passer à la partie basse du scrippy.

16-28) Faites un copier-coller de la case 3 (dont dépendent 4 Positioned Container).
Mettez la case 16 vers la gauche, en correspondance de la case 3. Ne vous trompez pas de case!
Faites les changements suivants:
- cochez Bottom dans chacun des Positioned Container.
- modifiez la direction du scroll de l'image: mettez Up+Right pour les 2 premiers et Up+Left pour les 2 autres.

Nous venons de compléter la partie haute. Nous allons passer à la partie centrale du scrippy.

29) Insert/Positioned Container : de lui vont dépendre les 3 cases successives.
Mettez-le vers la gauche, en correspondance des cases principales 3 et 16.
Complétez dans la première colonne: dans l'ordre : entre: 0 ; Size : 400 ; Top : 10 ; Specified Size : 300

30) Insert/Background : Cliquez sur Browse et mettez votre image 1. Scrolling: Right.
Smooth Scroll; Pixels per move: 10; Pixels per second: 1.
Dans Advanced Options, cochez Layer with others objects.
Vertical Start : 50.

31) Insert/Background : Cliquez sur Browse et mettez votre texte dérourant dans le format gif. Scrolling: Up.
Smooth Scroll; Pixels per move: 10; Pixels per second: 1.
Dans Advanced Options, cochez Layer with others objects.

32) Insert/Background : Cliquez sur Browse et mettez votre cadre 2. No scrolling.
Dans Advanced Options, cochez Layer with others objects.

33) Insert/Message Area et mettez-le complétement à gauche. Il servira surtout pour colorer votre scrollbar.

Complétez avec Loading Message, Sound,Ticker et Options.

Bon amusement avec Scrippy!

Lorenza

Tutoriel écrit le 23 janvier 2003 dans le cadre des travaux du groupe franco-scrippy, fondé par Mario Panone et modéré par moi-même.

Pour ma section sur Scrippy, cliquez ICI
Pour ma section sur PSP, cliquez ICI.
Pour la page d'accueil de mon site, cliquez ICI.