Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Tut-Masque-gif-Pino-18-04-04

VIEWS: 7 PAGES: 9

									  Utilisation des masques gif pour créer
   des scrolls avec effet dans Scrippy

                              Tutoriel de Pino
                           Traduit en français par Lorenza



Dans cet exemple sont confrontés deux cadres. Le plus extérieur est
un cadre simple fait avec des images jpg. Le plus interne est construit
avec un masque gif avec un con background brillant.
Le concept de bse de ce scroll est fondé sur l'utilisation d'un fichier
gif perforé avec transparence ((MASQUE GIF )) qui défile sur un
background qui met en relief la partie transparente du fichier gif.
Il est de fondamentale importance que le background du fichier gif soit
de type uniforme pour ne pas mettre en évidence la démarcation des
limites de l'image.
Donc nous devons préférer un background à tinte unie ou à la limite un
background avec texture uniforme qui se confonde bien au moment de
la superposition.
Dans cet exemple j'ai créé une texture 200 x 200 pixels de couleur
bleue #0F0C4F en appliquant une texture effet sable.




** un bon conseil c'est de ne pas créer de textures trop petites, parce qu'elles alourdissent le code
       html en remplissant une grande portion d'écran et en ralentissant le processus de calcul.
Le classique exemple de construire un mur de 10 mt avec des briques de 1 cm x 1 cm ou bien de le
construire avec des briques de 1 mt x 1 mt devrait rendre l'idée du travail en moins qu'évite de
faire l'ordinateur.
Le désavantage du plus grand poids en ko de la texture ira compenser pleinement la fluidité de
l'exécution du scrippy qui dans des structures complexes est très important. **
Ensuite nous devons choisir l'objet pour créer le masque.
Dans l'exemple en question, j'ai choisi un tube de division.


420 x 65 pixels

Il faut avoir le soin de trouver des objets qui n'aient pas de sections
trop proches ou trop grandes. De cette façon le masque final sera
moins grossier.
Redimensionons ce tube de telle sorte que puissent apparaître plus
d'éléments dans le scroll final.
En outre dans beaucoup de tubes il y a les ombres de l'objet, et celles-
ci devront être enlevées.
Je ne connais pas la méthode dans Paint Shop Pro, mais dans Adobe
j'utilise la sélection magique et je l'élimine.
                               217 x 30 pixel


Pour facilitare la création je rendrai cet objet symétrique, c'est-à-dire
que je pourrai le voir de tous les côtés de façon égale.
Puis dupliquer le calque de l'objet et transformer le calque dupliqué en
appliquant l'effet de reflet vertical.
Le dernier passage consiste à unir les 2 layers en un seul.
                        Oggetto 1 - 217 x 30 pixel


Pour créer l'objet vertical nous devons dupliquer cette image et la
faire tourner de 90° (dans n'importe quel sens).
Maintenant que nous avons les objets, nous devons créer les masques
gif.
Nous devons définir la texture que nous avons créée avant comme
pattern et avec celle-ci nous devons remplir un nouveau calque dans les
2 objets que nous venons de créer.
Ce nouveau calque sera placé comme fond des objets.
Exemple Photoshop :
°Avec votre programme de graphique sélectionnez la transparence du
calque (oggetto1).
° Placez-vous sur le calque du background avec la sélection activée et
effacez la partie sélectionnée.
Vous avez ainsi obtenu le masque gif pour le scroll horizontal qui se
présentera de cette façon:
                          Background horizontal


Cette image devra être enregistrée dans le format GIF avec
transparence et avec la plus grande qualité, en évitant d'appliquer le
dithering pour éviter la formation d'ennuyeuses nuances granuleuses..
Il peut arriver que la transparence présente de grands espaces vide,
comme dans ce cas le trou lassé dans la partie centrale.
Durant le scroll ce n'est pas plaisant de le voir, donc nous pouvons
résoudre ce problème en copiant la partie centrale depuis Oggetto1
(objet1) et le coller en Background Horizontal.
                Background Horizontal avec joyau central


Nous avons ainsi notre masque horizontal.
Même procédé pour le masque vertical.
Maintenant nous avons le problème des angles :
durant lo scroll les masques horizontales et verticales s'entrecoupent
en créant un très lait effet visuel.
Pour l'éliminer nous devons appliquer par dessus un cache qui couvrira le
désagréable effet de confusion.
Les dimensions du "cache" dovront être égales ou supérieurs à la
mesure en hauteur du scroll horizontal, ou de la mesure en largeur du
scroll vertical.
Dans notre cas nous avons la dimension minimum de 30 pixels.
Dans l'exemple j'ai créé une fleur avec le même objet, pratiquement en
superposant les 4 calques dupliqués de l'objet 1 (oggetto 1) e à leur




tour avec rotation rispectivement de 0° ,45°, 90°, 135° ....




                          +                    +                   +




   =
Pour exagérer j'ai dupliqué le calque du résultat et j'ai mis une rotation
de 23° environ (45° /2) en obtenant une rose plus complexe.
.
Maintenant vous pouvez nettoyer avec la gomme les lignes en dehors de
la rose; copier tout l'ensemble dans le clipboard et le recoller dans un
nouveau document. Ensuite redimensionnez l'image selon votre goût.
Dans l'exemple j'ai donné les dimensions de 50 x 50 pixels, plus que
suffisants pour couvrir le scroll des masques gif.
                             50 x 50 pixels



Avec le même procédé de Oggetto 1 créez un masque gif aussi avec ce
nouvel objet oggetto.



Maintenant il faut choisir une texture pour le scroll du fond des gif
avec masque.
Dans l'exemple j'ai utilisé cette texture pour chercher à donner un
effet de brillant au scroll..
                            Back gold 100 x 100




maintenant passons au schema du cadre tout entier :
La première action à faire est celle de construire un background qui
aille couvrir tout le scrippy.
Après nous devons créer un container général qui contienne tout le
cadre.
** C'est une bonne habitude de créer un container général qui
contienne un quelconque cadre constitué de plusieurs containers, pour 3
motifs :
1) Nous pouvons redimensionner le container général à n'importe quel
moment, et automatiquement les containers inséré s'adapteront à la
nouvelle dimension donnée. Nous ne serons pas obligés de
redimensionner chaque partie qui compose notre cadre.
2) Nous pouvons utiliser ce cadre dans un autre scrippy, semplement en
copiant le container général et en le collant dans un nouveau scrippy.
Théoriquement nous pouvons nous créer une librairie de modules
prédéfinis auxquels, une fois collés dans le scrippy qui nous sert, il
suffira de changer les images et redimensioner de façon opportune les
sous-containers.
3) La lecture de l'arbre de scrippy est très simplifiée quand celle-ci est
structurée en modules.
Cela détermine une petite augmentation de poids du fichier final, mais
souvent c'est un prix qu'on paie volontiers. **
Le container Général aura des coordonnées maximales :
left = 0; right = 0; Top = 0; Bottom = 0.
Les containers qui devront contenir les scrolls verticaux et horizontaux
seront dimensionnés sur la base des gifs qu'ils devront contenir.
En outre ils commenceront et finiront sur la base des dimensions des
gifs angulaires que nous appliquerons.




En résumé nous avons :
Masque Gif angulaire 50 x 50 pixel.




     Masque gif scroll horizontal 217 x 30 pixel




   Masque gif scroll vertical 30 x 217 pixel

Il premier container (horizontal supérieur) aura les coordonnées
suivantes :
left = 50; right = 50 / Top = 10; Size 30
**nota : Top = 10 pour pouvoir centrer le scroll horizontal con l'axe
central du fichier gif angulaire. **
Deuxième container (horizontale inférieur) = left = 50; right = 50 /
Bottom = 10; Size 30
Troisième Container (vertical gauche) = left 10; Size = 30 / Top 50;
Bottom 50.
Quatrième Container (vertical droit) = right 10; Size = 30 / Top 50;
Bottom 50.
Maintenant nous pouvons insérer le background du fond et le masque
gif dans chaque container.....
**Dans le schéma général dessiné ci-dessus, j'ai mis en évidence la
direction des scrolls.
Il n'est pas obligatoire, mais ce mouvement inversé du fond avec le
masque gif, donne une fluidité plus grande à la texture brillante.
Ne la prenez pas comme une règle, parce que sur la base de la texture
appliquée vous pourrez avoir des effets différents, donc le conseil est
de faire beaucoup d'essais et ne pas s'arrêter au premier résultat.
C'est seulement un concept de base, mais la fantaisie très souvent
bouleverse toutes les règles. ((( heureusement!))).**
Pour suivre l'exemple, appliquons la texture du fond avec un scroll dans
le sens anti-horaire (voir l'image ci-dessus).
Sur ce scroll appliquons le respectif masque gif pour chaque container,
en leur donnant un scroll contraire à celui du fond.
Maintenant c'est le moment de couvrir les angles vides en appliquant le
masque gif avec la forme de la rose.
Nous devons créer 4 containers avec des dimensions égales à celles de
la rose.
container supérieur gauche = left = 0; size 50/ Top = 0; Size 50.
container supérieur droit = right = 0; size 50/ Top = 0; Size 50.
container inférieur gauche = left = 0; size 50/ Bottom = 0; Size 50.
container inférieur droit = right = 0; size 50/ Bottom = 0; Size 50.
Ici aussi nous devons avant insérer un background et ensuite le masque
gif.
J'ai une conviction personnelle au sujet du background des angles: aux
scrolls des angles je donnne toujours un sens allant vers l'extérieur ou
allant vers l'intérieur.
Dans cet exemple ils vont tous vers l'extérieur.

                              Conclusions
L'utilisation des masques gif è una technique qui renforce de beaucoup
les qualités du logiciel Scrippy; quelquefois il réussit à rivaliser en
effets avec certains scripts.
C'est une des nombreuses applications qu'il a, et avec le temps,
j'espère vous montrer d'autres choses que l'on peut faire avec cette
technique. Sincèrement j'espère en trouver de nouvelles pour une
satisfaction personnelle, mais vous pouvez m'aider dans la recherche en
expérimentant vos idées.
La première impression que vous pourriez avoir de ce tutoriel, c'est
qu'il est très compliqué.
Je vous garantis qu'une fois que vous aurez appris le concept, cette
opération demandera seulement peu de minutes en vous épargant du
temps et de précieux kilobyte.


                             Bon travail!
                                Pino
Tutoriel écrit le 18-04-04

								
To top