couche 1 : background de couleur noir.
couche 2 : bouton blanc (objetprédéfini). 
couche 3 : texte "?" exceptionnellement en police "Symbol", car le "?" de "Comic Sans MS" est laid. Ce signe symbolise assez bien le questionnement et permet à l'utilisateur d'accéder à des informations, soit concernant la page où il se trouve, soit sur une aide plus générale concernant la navigation. "Effects > 3D effects > drop shadow". Notons, ainsi que pour les boutons suivants, qu'il est difficile de rendre un effet 3D avec un texte aussi court! C'est pour cette raison que je me suis rabattu sur l'effet "ombre". Il m'a fallu également du temps pour comprendre la différence entre du texte "vecteur" et "floating", car les effets ne fonctionnent que dans le deuxième cas!

couche 1 : background de couleur noir.
couche 2 : bouton blanc (objet prédéfini). 
couche 3 : texte ">" et "°" agrandi et retourné dans tous les sens. Ce signe symbolise le mouvement à partir d'un état initial "°". Il reprend la symbolique des quatre points cardinaux.

couche 1 : background de couleur noir.
couche 2 : bouton blanc (objet prédéfini). 
couche 3 : j'ai en vain essayé de créer à l'aide de formes simples une pelicule de film... Mon ego en a pris un coup, mais bon! J'ai ensuite recherché sur le web des images de pelicule. Je suis enfin tombé sur une image toute simple, mais colorée. Il m'a fallu effectuer un "colors >posterize" et un "color > grey scale" pour supprimer la couleur et conserver la même ligne graphique.

couche 1 : background de couleur noir.
couche 2 : bouton blanc (objetprédéfini). 
couche 3 : texte ">". Je trouve que ce signe invite facilement à passer à l'étape suivante. On retrouve ce signe par exemple sur les appareils audio pour changer de piste. Dans notre cas, l'étape suivante est une nouvelle page. A l'état initial, le signe est de même taille que les autres éléments de la fenêtre. Concernant l'effet "texture", je les ai tous utilisé, mais comme mon texte est très petit, ils ne le modifiaient en rien. De plus, je ne voulais pas appliquer un effet texture, soit sur le fond, soit sur la boule blanche, au risque de perdre l'unité graphique de l'ensemble. J'ai donc préféré appliquer un effet "texture" à l'élément morphé.

couche 1 : background de couleur noir.
couche 2 : bouton blanc (objetprédéfini). 
couche 3 : texte ">". Ici, j'ai grossi le texte et appliqué deux fois "effects > texture effects > sculpture" pour donner cet effet plus clair et plus galbé...

couche 1 : background de couleur noir.
couche 2 : bouton blanc (objetprédéfini). 
couche 3 : texte "x". Ce signe reprend en fait la philosophie de Kro$oft... ce bouton accompagne en effet chaque fenêtre et permet de la fermer. Il symbolise l'arrêt d'une activité, et donc pour notre projet, le fait de quitter la galerie. L'effet 3D demandé est ici "effet > 3D effects > drop shadow". 

couche 1 : background de couleur noir.
couche 2 : bouton blanc (objetprédéfini). 
couche 3 : texte police "marlett" qui m'a permis de créer un carré et un triangle noir, ainsi qu'un carré blanc pour la porte. L'utilisation d'un texte "floating" m'a permis de mettre l'effet "ombre". J'ai ensuite ajouté un effet texture, "effects > textures effects > fine leather > more cracks" qui porte sur la porte. Il me fut difficile à nouveau de trouver un effet de texture pour un texte si petit!

couche 1 : background de couleur noir.
couche 2 : j'ai créé une forme rectangulaire à laquelle j'ai affecté un effet de texture "boisée". Puis j'ai posé sur ce rectangle une forme elliptique de couleur blanche. J'ai enfin ajouté un effet"effects > 3D effects > cut out" pour créer un effet 3D comme si l'ellipse était un peu enfoncée. Finalement, j'ai effectué "effects > 3D effects > buttonize".

La taille est de 147x198.

Pour fusionner le tableau et ce cadre, j'ai opéré ainsi (voir les illustrations plus bas):

• réduire l'image originale (tableau) pour la rendre compatible avec la forme et la taille de ce cadre
• copier l'image
• ouvrir le fichier cadre
• coller en tant que nouveau layer
• gommer ou ajuster les couleurs

couche 1 : background de couleur noir (800x600). J'ai inséré un effet "effects > 3D effects > buttonize" pour créer le cadre de couleur plus claire et relativement discret pour ne pas trop capter l'attention.

{i_f_tit2.jpg}

couche 1 : background de couleur noir (300x200).
couche 2 : la deuxième couche contient l'objet "description". J'ai utilisé une forme prédéfinie avec une texture boisée pour rappeler le cadre du miroir. Ensuite, j'ai appliqué un effet "effects > geometric effects " page curl"  pour donner l'illusion que le coin se relève...
couche 3 : la troisième couche contient le titre. J'ai utilisé une forme prédéfinie avec une texture boisée pour rappeler le cadre du miroir. J'ai ensuite appliqué un effet "effects > 3D effects > inner bevel" pour modifier un peu le contour. Enfin, pour donner un effet de surbrillance, j'ai utilisé "effects > illumination effects > sunburst".

Le titre sera écrit en noir, taille 10, gras. Le commentaire, pareil, mais en blanc, avec "effects > 3D effects > drop shadow" (voir plus bas les illustrations). Notons que le titre est celui que l'auteur a choisi, alors que les commentaires sont purement personnels, pas trop recherchés, et un brin moralisateurs...

Je l'ai finalement découpée en deux parties...

Notons qu'à l'instar des miroirs, cette image devra être réduite pour s'intégrer au sein de mediator.

couche 1 : background de couleur noir.
couche 2 : j'ai créé un rectangle, que j'ai rempli avec une texture. Puis j'ai effectué un "effects > texture effects > sculpture" et un "effects > 3D effects > inner bevel (frames)". Cette fenêtre sera située dans le bas des pages mediator pour afficher de l'information.
La taille est de 602x47.
 

Texte d'introduction présentant le nom de la maison de production, en l'occurence la mienne... allez, faut bien rêver! Police Comic Sans MS, taille 72, avec "effects > 3D effects > drop shadow / inner bevel".
 

Texte "présente...". Idem texte d'introduction, taille 48. J'y ai ajouté au milieu un "effects > illumination effects > sunburst".

Texte "galerie CIRO", taille 36 avec "effects > texture effects > scultpture" et "effects > 3D effects > drop shadow".

Lignes créées avec l'objet forme et "effects > Texture effects > Scultpure".

J'ai ensuite "découpé" dans mon affiche les 3 images pour en faire 3 nouvelles images distinctes. Elles me serviront dans le générique ainsi que dans une barre de menu, présente sur toutes les pages. J'ai simplement repris l'affiche et supprimer à chaque fois les "layers" en trop... J'ai ensuite écrit du texte, police Comic Sans MS, taille 8, gras.

J'ai ensuite cherché une image pour présenter l'artiste. J'ai trouvé sur le site de Ciro, trois images que j'ai retravaillées sur PSP. J'ai dû enlever des parties blanches avec l'outil magique puis gommer des traces avec l'outil gomme.

J'ai finalement cherché une image toute simple de Ciro pour la laisser sur chaque page, à côté du titre.

J'ai ensuite créé un texte avec PSP pour présenter CIRO. Police "Comic Sans MS", taille 9. Avec "effects > 3D effects > drop shadow".

Original: http://perso.club-internet.fr/skraff/lescomposants/lapellicule.htm

Enfin, j'ai créé une barre de menu, à l'aide d'une image de pellicule trouvée sur le net (adresse à gauche). La première couche est un fond noir, la deuxième la pellicule (rotation de 90°). Je poserai ensuite dans le générique les trois images de l'affiche, pour qu'elles puissent chacune être utilisées par mediator (event).

couche 1: fond noir
couche 2: cadre jaune
couche 3: texte, police Comic Sans MS, taille 9, gras, couleur noire.

couche 1: fond noir
couche 2: cadre jaune
couche 3: texte, police Comic Sans MS, taille 9, gras, couleur noire.

(taille réduite)
{i_c_plan.jpg}

J'ai trouvé deux images sur le site de CIRO. Je les ai retravaillées la moindre pour leur recadrer. En ce qui concerne cet espèce de cavalier, j'ai dû ôter le pourtour avec l'outil intelligent + delete et recoloriser le fond de gris en noir. Pour l'image centrale, j'ai ajouté un texte : "à la découverte d'un artiste".

J'ai réalisé une image pour expliquer chaque bouton d'une page mediator.

L'image qui arrive au centre sert à indiquer au visiteur à quoi servent les différents boutons et zones d'une fenêtre type. Elle contient autant de couches que de flèches, textes ou dessins. Les flèches ont été créées avec l'outil forme et ont un "effects > texture effects > sculpture" + un "effects > 3D effects > drop shadow". Je les ai ensuite copiées et tournées dans différents sens. Le texte est de police "Comic Sans MS", taille 8 et de couleur blanche. Le rond central est fait avec l'outil forme, et a subi l'"effects > 3D effects > inner bevel (frame) > drop shadow". La souris provient du panneau de configuration de windows et a subi l'"effects > 3D effects > drop shadow". Le texte central est de taille plus grande et je lui ai rajouté une ombre (drop shadow).

Image trouvée sur Internet et utilisée telle quelle.

{i_s_texe.jpg}

{i_s_texv.jpg}

Cette affiche est un simple texte, police "Comis Sans MS", taille 12, couleur grise, gras, avec "effects > 3D effects > inner bevel".

{i_s_trg2.jpg}

{i_s_tryc.jpg}

{i_s_trc2.jpg}

{i_s_tryd.jpg}

{i_s_trd2.jpg}

Ce tryptique a été trouvé sur internet et retouché quelque peu. J'ai simplement évidé le centre des cadres avec l'outil gomme. Puis j'ai inséré dans chacune des trois parties de ce tryptique, les quatre tableaux, en les découpant et en effectuant un "resize".

Voici l'adresse du tryptique original: http://www2.ac-lille.fr/patrimoine-caac/cassel/quadrypre/trypt.html

{i_c_ta11.jpg}

{i_f_ti11.jpg}

{i_f_co11.jpg}

{i_c_ta12.jpg}

{i_f_ti12.jpg}

{i_f_co12.jpg}
 

{i_c_ta13.jpg}

{i_f_ti13.jpg}

{i_f_co13.jpg}
 

{i_c_ta14.jpg}

{i_f_ti14.jpg}

{i_f_co14.jpg}
 

{i_c_ta21.jpg}

{i_f_ti21.jpg}

{i_f_co21.jpg}
 

{i_c_ta22.jpg}

{i_f_ti22.jpg}

{i_f_co22.jpg}
 

{i_c_ta23.jpg}

{i_f_ti23.jpg}

{i_f_co23.jpg}
 

{i_c_ta24.jpg}

{i_f_ti24.jpg}

{i_f_co24.jpg}
 

{i_c_ta31.jpg}

{i_f_ti31.jpg}

{i_f_co31.jpg}
 

{i_c_ta32.jpg}

{i_f_ti32.jpg}

{i_f_co32.jpg}
 

{i_c_ta33.jpg}

{i_f_ti33.jpg}

{i_f_co33.jpg}
 

{i_c_ta34.jpg}

{i_f_ti34.jpg}

{i_f_co34.jpg}
 

{i_a_gene.jpg}

Cette affiche composera la fourre du CD-ROM ainsi que la première page du projet (cf. arborescence).

ARRIERE PLAN
couche 1a : fond noir pour garder conserver l'unité de style avec les pages du projet.
couche 1b : image de Ciro. C'est une espèce de boule avec plein de clous plantés en étoiles. Elle a subi tout une série de traitement. Tout d'abord, j'ai inséré une illumination en son centre avec "effects > illumination effects > sunburst". Ensuite, "colors > colorize", puis j'ai augmenter le bleu et diminuer les deux autres couleurs de base. J'y ai ajouté un "effects > noise > median filter" et j'ai fini par diminuer la "brightness"...

COUCHE TEXTE
couche 2a : texte présentant l'artiste Ciro. Tous les textes ont été écrits en Comis Sans MS. Taille 10, avec "effects > artistic effects >contours > ink outline" pour donner cette apparence ombree et un peu futuriste, pour créer une opposition avec l'art de Ciro qui est plutôt tourné vers l'utilisation de vieilles choses. Le texte présente l'artiste et va bien avec l'image du fond.
couche 2b : texte : nom de l'artiste. Taille 24, avec "effects > texture effects > scultpure". La couleur anticipe celle du cadre des tableaux boisés.
couche 2c : texte présentant l'auteur. J'ai cherché à être discret. Taille 8, avec splendide "effects > 3D effects > inner bevel"...

COUCHE IMAGE
couche 3a : j'ai intercalé un layer entre la couche 1a et la couche 1b pour créer une assise sur laquelle va venir se poser les trois morceaux de thèmes. Cette couche est en fait une ellipse noire avec "effects > illumination effects > sunburst".
couche 3b : thème 1 (personnages). La procédure utilisée fut la suivante. J'ai utilisé l'outil "lasso" avec l'option "smart edge" pour découper intelligemment une partie d'un tableau représentatif du thème en question. Pour gommer les bouts en trop, je les ai sélectionnés avec l'outil intelligent et simplement effacés! Je n'ai pas voulu faire d'effet sur ces morceaux de tableaux pour respecter le travail de l'auteur.
couche 3c : thème 2 (eau).
couche 3d : thème 3 (villes). 

J'ai à chaque fois inséré un CD, ouvert le programme, sélectionné une piste (si la piste nâest pas sélectionnable, relancer le programme ;)) et cliqué sur "capturer" (configuration, se mettre en analogique !).
 

FONDS SONORES
Pour finir, je n'ai pas utilisé tous les sons provenant de CD-audios, car ils ne correspondaient pas trop au projet. J'ai donc recherché sur une base de données et différents échantillonages, des sons plus appropriés. Voici comment ils ont été créés:

• générique : j'ai utilisé un tapis sonore de base ("the new mild taste") que j'ai ouvert avec Cooledit Pro (multi-tracker) pour rajouter d'autres sons (une vingtaine de laser, et des voix) dans le but d'introduire certains éléments du générique. Tout ceci a été mixé en 22'050 kHz, 16 bits stereo. Les voix ont reçu les effets suivants: "reverb" (natural voice), "low bitch" (107%) et "normalisation".
• salle d'accueil : fond sonore ("Se la"), échantillonage en 22'050 kHz, 16 bits stereo, enveloppe et normalisation.
• salle thématique "personnage" : fond sonore (Apollo four forty: "stealth ouverture"), échantillonage en 22'050 kHz, 16 bits stereo, enveloppe et normalisation.
• salle thématique "eau" : fond sonore (Antartica Vangelis: "Antartica Echoes"), échantillonage en 22'050 kHz, 16 bits stereo, enveloppe et normalisation.
• salle thématique "ville" : fond sonore ("City of Angels"), échantillonage en 22'050 kHz, 16 bits stereo, enveloppe et normalisation.

J'ai créé un nouveau document, en sauvant directement le projet en .mpj (menu "fichier > sauver") pour pouvoir le retravailler après. Puis j'ai inséré les images "source" et "destination". Puis j'ai ouvert les deux images et réduit la fenêtre projet. Ensuite, j'ai sélectionné l'outil "lignes" et placé les points de contrôle sur l'image source (shift + clic), puis corrigé les points de contrôle sur l'image destination. Ensuite, j'ai fait le maillage (ctrl + clic) en évitant les croisements de lignes. Avant de morpher, j'ai vérifier  "options > options d'enregistrement" : 25 images par seconde et nommer le fichier final (.avi) (j'avais commencé par du 15/s et 75 frames, mais le résultat était loin d'être bon!). Puis cocher dans "options > enregistrer Résultats" et contrôler "options > sortie" la taille du résultat (cliquer sur la source ou sur la destination). Enfin, j'ai fait "transformer" pour effectuer le morphing, en choisissant à chaque fois 100 frames, pour avoir un film de 4 secondes. Les images sources et destination sont toutes en format bmp.

MORPHING
Voici les morphing que j'ai réalisés pour ce projet:

• salle "personnage", tableau n.3 (320x255)
• salle "personnage", tableau n.4 (320x460)
• salle "eau", tableau n.1 (320x425)
• salle "eau", tableau n.4 (320x398)
• salle "ville", tableau n.1 (320x330)

Notons que les morphing réalisés n'ont pas été peaufiner au maximum. Ils me permettent simplement d'illustrer certains tableaux avec cette technique pour montrer ce qu'il est possible de réaliser.
 

VIDEOS
J'ai enregistré de courts extraits, pour illustrer certaines pages. Si j'avais eu la possibilité de me rendre en Italie, il  aurait été intéressant de filmer l'artiste Ciro dans son atelier, au travail ou présentant ses oeuvres. Mais le temps a eu raison de cette idée.

J'avais à disposition un fichier .avi contenant différentes séquences à la suite. Dans le répertoire "adobe" de mon projet, j'ai créé un enfant appelé "film_presentation". Son répertoire "input" contient le film réalisé par notre chef de projet, ainsi que une image servant à créer un fond noir pour réaliser une transition au début et à la fin de chaque séquence, des titres et une trajectoire utilisée pour chaque titre. Le répertoire "output" contient lui tous les différents films produits (séquences) en format avi, qui seront implémentés dans Mediator.

Voici les "courts" courts-métrages réalisés et traiter avec Adobe Premiere:

• film présentant le projet (v_p_intr.avi)
• film présentant l'artiste Ciro (v_p_ciro.avi)
• film présentant la structure du programme (v_p_navi.avi)
• film présentant la salle "personnage" (v_p_pers.avi)
• film présentant la salle "eau" (v_p_eau.avi)
• film présentant la salle "ville" (v_p_vill.avi)
• film remerciant le visiteur de sa visite (v_p_exit.avi)

1) j'ai découpé chaque séquence avec l'outil "cutter"
2) j'ai inséré un fond noir (1 s) au début de chaque séquence avec une transition "balayage radar" (1 s), du fond noir à la séquence
3) j'ai inséré un fond noir (1 s) à la fin de chaque séquence avec une transition "fondu enchaîné"
4) j'ai fait monter le son progressivement au début de chaque séquence
5) j'ai créé un titre (texte) pour chaque séquence avec une...
6) ... trajectoire qui sera chargée pour chaque titre: elle fait venir le texte de en haut à droite, l'amène en haut à gauche et le fait disparaître rapidement vers le haut.
 

• créer du texte (pour l'élément "skip intro", ainsi que les chiffres 5, 4, 3, 2, 1, 0, et les cadres informatifs en bas).
• créer des formes (des carrés blancs pour "encadrer" certaines zones, les lignes qui encadrent toute la structure, ainsi que la barre verticale et horizontale)