Script photoshop : créer une galerie d’images 3D

Quand on trouve un module, extension ou plugin pratique, le mieux pour pouvoir le réutiliser à l’occasion est d’avoir noté la démarche globale et les liens indispensables à son fonctionnement.

Autant partager ces quelques notes,

Tiltviewer intégré ici comme script dans photoshop CS4 permet de développer automatiquement et gratuitement une mozaique 3D en Flash pour la diffusion d’images sur le web. Léger à mettre en place, c’est un bon compromis ergonomique et technique.

Voyez le résultat : DEMO TiltViewer
Niveau : débutant
Logiciels : Adobe Photoshop, Adobe Extension Manager, Bloc-notes
Pour la CS3, les instructions varrient peu, se référer ici: http://www.simpleviewer.net/tiltviewer/auto_photoshop_instruct.html

Etapes

>> 1. Téléchargez et dézippez le fichier de script contenu sur ce lien:
http://www.simpleviewer.net/downloads/airtight_CS4_scripts.zip

>> 2. Ouvrez le fichier « airtight_CS4_scripts.mxp » avec Extension Manager (Clic droit /ouvrir avec)
Le log vous demande d’accepter les condidtions d’utilisations (petit rappel TiltViewer © 2009 Airtight Inc. All rights reserved) et il installe le script automatiquement dans totoshop. Airtight apparait alors dans la liste d’Extension Manager.

——————
Si à cette étape le logiciel vous parle d’une impossibilité parce que droits d’accès administrateurs sont manquants, remerciez Windaub-ista et surtout l’auteur de cette rapide solution:

Utilisation de MSCONFIG:
Entrer MSCONFIG à partir du menu Exécuter dans le menu démarrer.
Cliquer sur l’onglet Outils, choisir « Désactiver le Contrôle de compte d’utilisateur ». En cliquant dessus, cela va générer une ligne de commande en bas que vous allez exécuter ensuite en cliquant sur le bouton Exécuter.
Vous pouvez fermer la fenêtre qui s’ouvre indiquant Opération réussie ainsi que MSCONFIG.
Redémarrez votre ordinateur afin que la modification soit bien prise en charge.
Vous pouvez réactiver le Contrôle des Comptes d’Utilisateur en choisissant la ligne Activer le Contrôle de compte de l’utilisateur dans MSCONFIG.
Source : http://www.baudelet.net/windows-vista/uac-controle-comptes-utilisateurs.htm
——————

>> 3. Vous êtes à la fin, totoshop va faire le reste.
Démarrez photoshop Activez le script via ./Fichier /Scripts /TiltViewer
Une fenêtre s’ouvre dans laquelle vous spécifiez :
– le dossier de départ dans lequel vous posez vos images originales brutes (non traitées pour le web)
– le dossier de destination dans lequel vont se créer seuls les fichiers et images nécessaires à la mosaïque web

>> 4. A ce stade là, vous pouvez déjà apprécier un premier rendu en cliquant sur Build Web Gallery,
laissez le logiciel travailler, il va redimensionner les images et exporter tous les fichiers nécessaires à l’animation. Rendez vous dans votre dossier de destination. (index.html)

>> Pour les réglages… c’est une version gratuite mais vous pouvez atteindre quelques options
-en bidouillant la largeur et les couleurs dans l’étape 3
-en modifiant les titres et descriptions dans le fichier gallery.xml (vous avez le bloc-notes : clic droit /ouvrir avec)
-en modifiant la valeur height de #flashcontent dans index.html pour l’intégrer à une structure de page
-en activant les options du code html (pré-écrites pour vous dans le body d’index.html) il vous faut simplement supprimer les // devant les lignes de code. Vous retrouverez la classification des options gratuites et payantes ici : http://www.simpleviewer.net/tiltviewer/config_options.html

Vous remarquerez que l’on peut même utiliser des images stockées sur le net (Flickr), il faudra approfondir mais je trouverai intéressant de pouvoir utiliser des url picasa dans gallery.xml..

Si j’ai réuni ici les liens nécessaires, vous pouvez retrouver toute la démarche et les spécificités en anglais sur le site http://www.simpleviewer.net/tiltviewer/

NB : si vous obtenez une mozaique à trou (images manquantes), vérifiez qu’il n’y ai pas d’accent dans les noms de fichier d’image.

14 réflexions au sujet de « Script photoshop : créer une galerie d’images 3D »

  1. bonjour et félicitations pour ces infos mais je n’arrive pas a récupérer le code html pour l’introduire sur mon site une petite réponse me fera plaisir merci et encore bravo !

    1. Lorsque vous générez le script, vous avez spécifié un répertoire de destination; celui ci contient un fichier index.html. En ouvrant ce dernier avec un éditeur de texte, vous pouvez récupérer le code html.

  2. Merci beaucoup, j’ai passé toute l’après midi à essayer de l’installer, mais tjs ce pb d’autorisation.
    Il suffisait de redémarrer pour que ça marche, c’est le seul truc que j’avais pas fait.
    Maintenant ça fonctionne impec.
    Encore merci.

  3. Bonjour, j’ai installé tiltviewer sur mon site (avec web creator), aprés avoir généré la galerie sous photoshop. Il me suffit pour cela d’aller d’importer le fichier flash dans l’interface webcreator. Problème: la galerie est composé des images flickr de démo, et jamais des mes propres images. J’ai essayé de modifier le fichier index.html avec le bloc note, mais sans succès. Une idée?

    1. Bonjour Basile,
      Via le back-office de WordPress, je n’ai jamais réussi à importer tiltviewer, alors que n’importe quelle animation Flash passe sans problème. Je pense que c’est du à l’appel des fichiers externes, j’ai du créer un modèle de page pour poser l’animation directement dans le code html.
      Quoiqu’il en soit, il faut que tu vérifies que tu as bien posé tous tes fichiers sur le serveur et au plus proche de la racine du site (tiltviewer.swf, swfobject.js et gallery.xml). Ensuite tu vérifies que l’appel aux fichiers soit correctement fait, tu dis avoir commencé dans le code source, pense à regarder si tu appelles la fonction js dans le header :

      script type=text/javascript src=swfobject.js

      Et dans le body, si les adresses sont bonnes :

      new SWFObject(« TiltViewer.swf »

      fo.addVariable(« xmlURL », « gallery.xml »);

      Vérifie également (ton problème ne vient certainement pas de là puisque tu vois une galerie flickr et non pas une galerie vide) si tes images sont bien appelées dans gallery.xml.

  4. C’est bon, ça fonctionne sur WordPress, avec les bonnes id.
    En fait, le code à inclure est simplicime et il n’est pas nécessaire de donner l’url.
    Dans la page crée pour présenter l’animation, il faut insérer :
    [tiltviewer id= »4″ width= »800″ height= »600″ ]

    je ne sais pas pourquoi mais c’est pas très net.
    http://www.test.web2aconcept.fr/divers/596

  5. Bonjour,
    tout d’abord merci pour vos explications claires et précises, relatives à l’utilisation de Tiltviewer avec Photoshop. Une question cepandant, pour réaliser le site internet indiqué ci-dessus, j’utilise Web Creator Pro 4. Sauriez vous m’indiquez comment faire pour intégrer le contenu d’une galerie Tiltviewer faite avec photoshop, sur mon site internet?
    Merci d’avance et encore bravo pour vos conseils.

    1. Bonjour Didier,

      D’abord merci à vous,
      pour ce qui est de votre problème et ne connaissant pas Web creator je ne pourrais vous répondre que de façon générique.
      Deux solutions s’offrent à vous :
      Dans les deux cas il vous faudra un accès FTP vers votre serveur pour charger le dossier d’image de la galerie et les fichiers exportés par Tiltviewer. ( a priori c’est bon vu la description sur le site de Web Creator)
      1- vous importez le fichier flash via l’interface de web creator
      ou
      2- vous avez accès au code html et dans ce cas il vous suffit d’intégrer la div flash content à l’endroit désiré exactement comme dans le fichier index.html (cf. le code source de ce dernier avec un éditeur) Je vous conseille aussi d’utiliser Firebug sur Firefox pour comprendre l’implémentation.

      J’espère vous avoir aidé, n’hésitez pas à demander sinon.
      En attendant, bon ride!

Les commentaires sont fermés