Forums Développement Multimédia

Aller au contenu

- - - - -

Comment automatiser (via un script) une manipulation de ce genre?

automatisation PAO Photoshop

31 réponses à ce sujet

#1 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 11 November 2012 - 18:20 PM

Bonjour tout le monde, je suis face à un petit problème. Je vous explique tout ici :

Je viens de créer un bouton d'achat sous Photoshop afin de pouvoir par la suite l'intégrer sur une quelconque page de vente.

Fier du résultat ;-), je décide de vouloir le dupliquer en y intégrant d'autres textes qui appellent à l'action. Et pour chacun des textes, je souhaite y appliquer 72 couleurs différentes.

Pour être précis, je viens de créer 50 versions textes de mon bouton et j'ai 72 couleurs à utiliser pour chacun d'entres-eux.

Le problème, c'est que si je veux enregistrer chaque version pour le web au format .png, je dois faire 50 x 72 = 3600 fois la même manipulation. Autant vous dire que je laisse tomber cette solution.

La meilleure chose qui puisse m'arriver, c'est que vous puissiez me dire qu'il est possible d'automatiser cela sous Photoshop. Et de me montrer comment.

Je m'avance peut-être en disant que c'est possible. Le tout, c'est de savoir comment.

J'imagine que je dois classer mes fichiers d'un telle manière que le script puisse lire à la suite l'un de l'autre mes textes?

Dois-je définir dans un fichier à part la liste de mes couleurs désirées sous leur format hexadécimal pour que le script les choisisse automatiquement et une fois seulement (éviter les doublons)?

Et surtout, est-il possible d'automatiser le processus de création (choix d'un texte et d'une couleur uniques), d'enregistrement (au format png) et d'automatiser cette espèce de boucle pour les 3600 prochaines manipulations? Cela m'éviterais de cliquer 3600 fois sur le bouton du script en question.

Merci mille fois pour votre aide.

Cordialement,
Alexandre

#2 marroon

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 11 November 2012 - 19:39 PM

Salut et bienvenue sur Mediabox,

Avant de te répondre j'aimerais avoir un renseignement complémentaire : c'est pour quel utilisation ? D'après ce que je comprend c'est pour un site web, c'est bien ça ?

Si c'est le cas, je pense que la solution se situe au niveau de l'intégration web de ton bouton (bouton en .png transparent, coloration en style CSS, et mise en place du texte sur une <div> avec un <z-index: > au dessus du tout).

Si Photoshop est absolument obligatoire (ce qui serait une hérésie, à mon avis, dans cette situation là), à 1re vue j'utiliserais la fonction "variables" du logiciel pour la création des différentes couleurs et des différents textes.

Note : Je n'ai pas vu la tête de ton bouton mais globalement, et toujours dans une approche web, on a tendance aujourd'hui à faire un bouton en CSS. Plus facilement intégrable, changeable, déclinable, "responsivable" (multi-plateforme), etc.

#3 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 11 November 2012 - 19:46 PM

Sinon le SVG à partir d'Illustrator. Et on repart dans les variables comme avec le texte.
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#4 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 11 November 2012 - 21:18 PM

Bonjour marroon et merci pour ta réponse.

Tu as raison de dire qu'il est préférable d'utiliser le css pour ce cas précis. Néanmoins, je souhaite quand même passer par Photoshop car j'ai pris l'exemple d'un simple bouton mais je compte faire d'autres éléments graphiques comme des badges, des bannières, etc... toujours avec plus de 50 couleurs et textes différents...

Tu aurais apparemment une solution pour moi? Utiliser la fonction variable de Photoshop.

Je suis un peu confus mais là, je suis largué. Tu saurais développer ton idée s'il te plaît?

Merci d'avance marroon.

Salut Kosic, merci pour ta réponse.

Tu parles toi aussi de variables. As-tu quelques pistes pour moi?

Merci d'avance,
Alexandre

#5 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 12 November 2012 - 06:13 AM

Voici quelques liens vers l'aide Adobe en ligne.
http://help.adobe.co...0196cbc5f-655ba

http://help.adobe.co...bc5f-62a2a.html

http://help.adobe.co...bc5f-6360a.html

Je crois que tu as justement dans l'aide de l'appli une démo de modification de couleurs. Mais je ne suis pas un spécialiste. Si je joins Metaroïd je le lui demanderai. C'est un de ses dadas.
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#6 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 12 November 2012 - 06:28 AM

Merci pour les liens Kosic, c'est bien gentil à toi. Et merci d'avance de faire passer le message à Metaroïd que je ne connais pas encore...

Quelqu'un d'autre sait se prononcer sur le sujet?

#7 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 12 November 2012 - 12:52 PM

Voir le messageMBCL65AMG, le 12 November 2012 - 06:28 AM, dit :

Quelqu'un d'autre sait se prononcer sur le sujet?
Salut,

Va faire un tour sur ce forum qui est fréquenté par un certain habaki, alias "le maître des scripts", si lui ne sait pas, personne ne sait :
http://forum.photosh....org/forum9.php

:cool:
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#8 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 12 November 2012 - 15:41 PM

Bonjour JRB et merci pour ta réponse, c'est vraiment sympa. Je vais aller faire un petit tour là-bas et je vous tiendrai au courant...

Who else?

#9 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 12 November 2012 - 17:44 PM

Salut,

Je me suis penché vite fait sur le sujet, tu peux dire merci à Kozik ;) . En espérant que tu es ExtendScript ToolKit, insères le code qui suit (modifies-le avec tes textes en chaine et valeurs RGB sous forme de tableau JS ex:[127,54,98] et LE CHEMIN D'ENREGISTREMENT en bas) ... à la suite de ça on pourra re-discuter du style que tu veux pour tes boutons:


//Fonction d'export PNG 24
function exportFileToPNG24 (dest) {
if ( app.documents.length > 0 ) {
  var exportOptions = new ExportOptionsPNG24();
  var type = ExportType.PNG24;
  var fileSpec = new File(dest);
  exportOptions.antiAliasing = true;
  exportOptions.transparency = true;
  exportOptions.saveAsHTML = false;
  app.activeDocument.exportFile( fileSpec, type, exportOptions );
}
}
//Tableau des textes
var tabNom= ["Texte 1","Texte 2"];
//Tableau des valeurs RGB
var tabCouleurs= [[127,52,28],[56,152,228],[227,2,128]];
//Document
var myDoc = app.documents.add();
//Dessin des objets rectangle et texte
var pathRefRect = myDoc.pathItems.rectangle(10,10,300,50);
var pathRefText = myDoc.pathItems.rectangle(-5, 10, 300, 50);
//Texte
var textRef = myDoc.textFrames.areaText(pathRefText);
var newRGBColor = new RGBColor();
//Boucle sur le nombre de valeurs du tableau Textes
for(i=0;i<=tabNom.length-1;i++){
textRef.contents = tabNom[i];
//caracteres et paragraphes
textRef.textRange.characterAttributes.size = 28;
textRef.paragraphs[0].paragraphAttributes.justification = Justification.CENTER;
//Pour chaque valeurs textes Boucle sur le nombre de valeurs du tableau RGB
for(j=0;j<=tabCouleurs.length-1;j++){
  newRGBColor.red = tabCouleurs[j][0];
  newRGBColor.green = tabCouleurs[j][1];
  newRGBColor.blue = tabCouleurs[j][2];
  pathRefRect.fillColor = newRGBColor;
  pathRefRect.filled=true;
  pathRefRect.stroked=false;
  //Export en PNG24, Attention à modifier !
  ExportPath = "/Users/mac/Documents/boutons/monBouton"+i+"-"+j+".png"
  exportFileToPNG24(ExportPath) ;
}
}
 

Tu as aussi la doc Adobe pour Javascript à cette adresse http://www.adobe.com.../scripting.html

#10 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 12 November 2012 - 21:40 PM

Salut Metaroïd.
J'ai testé ton script brut (hormis le chemin d'enregistrement) vite fait. J'ai du mal à comprendre, il crée chaque fois le même nouveau document avec un même tracé rectangle et un même texte et n'enregistre pas. Ai-je loupé quelque chose ?

#11 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 12 November 2012 - 21:51 PM

Salut Eddy,

Le script génère des .png selon des textes et couleurs c'est tout ...? rien de plus

#12 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 13 November 2012 - 06:06 AM

Bonjour et merci à toi metaroid d'avoir pris le temps de me répondre de la sorte.

Je ne suis pas un as de Photoshop et je vais donc jeter un coup d'oeil à ton script pour essayer d'y voir plus clair.

Cependant, j'ai eu une petite idée cette nuit pour contourner le problème si je ne parviens pas à créer un script qui puisse me satisfaire (car faut avouer que ça à l'air balaise pour pondre un truc qui correspond vraiment à mes besoins, surtout quand on n'y connaît rien en JS) (Et surtout qu'on parle seulement d'un simple bouton et comme je compte le faire pour d'autres types de graphiques plus complexes, ça risque de me prendre une éternité si et seulement si j'y arrive, voilà).

Je reviens donc à mes 3600 manipulations de départ. Comme je l'ai dis, je ne compte pas sur cette solution.

Mais imaginons que je puisse exécuter un script moins complexe mais qui me permette quand même de diminuer drastiquement mon nombre de manipulation, alors là ça serait quand même intéressant.

Je m'explique :

Je commence par effectuer 72 manipulations manuelles. Je pars de mon bouton vierge finalisé (et sans texte) que j'enregistre au format .png dans les 72 couleurs qui m'intéresse. Avec les codes hexadécimaux correspondant sous la main, en quelques dizaines de minutes, c'est fait.

Ensuite, je crée un script "basique" qui va afficher et enregistrer un par un les différentes versions de textes qui seront regroupées dans un dossier pour la couleur du bouton choisie à ce moment là. Cette action se déroulera sur un fond transparent, logique.


[Question : Un script permet-il de pouvoir effectuer plusieurs fois l'action "enregistrer pour le web" situés entre d'autres manipulations ???]

-> exemple concret pour ma question (le type de script basique que je souhaite créer) :

========================================

DéBUT DU SCRIPT

# afficher texte 1
# enregistrer bouton pour le web
# masquer texte 1
# afficher texte 2
# enregistrer bouton pour le web
# masquer texte 2
# afficher texte 3
...
...
...
# masquer texte 71
# afficher texte 72
# enregistrer bouton pour le web

FIN DU SCRIPT
========================================

Si la réponse est oui, avec une seule manipulation (sans compter la création du script en lui-même), je parviens à créer 50 boutons (car j'ai 50 textes) sur un bouton d'une seule couleur et ce, en un clic.

Comme j'ai 72 couleurs, je dois donc lancer le script 72 fois.

C'est à dire qu'au final, en ayant créé un seul script "basique", je peux avoir mes boutons au complet en effectuant 72 + 72 = 144 manipulations.

72 manipulations pour créer les 72 boutons vierges de 72 couleurs + 72 manipulations pour lancer le script sur les 72 boutons de couleur précédemment créés.

Je trouve que 144 manipulations, c'est plus que raisonnable par rapport à 3600 et ça peut être fait en moins d'une heure.

Si tout ce que je viens de dire est possible à mettre en place (désolé pour la longueur du texte et l'explication détaillée), alors je parviendrai à mes fins sans trop me casser la tête et en réduisant au maximum les manipulations à effectuer pour arriver à un résultat concret.

En tout cas, je vous remercie d'avance pour m'avoir lu jusqu'ici. Si quelqu'un peut confirmer ou infirmer ma théorie et me dire si c'est possible, je lui en serait très reconnaissant.

Par ailleurs, si quelqu'un a une idée tout aussi différente mais facile à mettre en place pour réduire le nombre de manipulations à effectuer, qu'il parle...

Merci beaucoup pour votre gentillesse et à très vite.

Alexandre

#13 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 13 November 2012 - 14:02 PM

Ce qu'il est possible au lieu des enregistrements multiples, c'est de créer ton bouton avec tes, je ne sais combien de, texte en y ajoutant chaque fois une incrustation de couleur !
Une fois fait, Txuku du forum Photoshop-school a écrit un script pour exporter l'arrière-plan avec chaque calque (un arrière-plan (bouton) + 50 textes donnent 50 boutons au final)
Je dirai que pour chaque bouton, le tout est scriptable sans trop de soucis, le pire sera de donner chaque fois la couleur à l'incrustation.
Tu trouveras le script de Txuku ici. Lis bien de haut en bas ! Ça pourrait t'aider grandement.

à Metaroid : lorsque je lanÇais le script (sous illustrator CS6 on s'entend bien !) il me crée un rectangle avec un texte et c'est tout.

#14 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 13 November 2012 - 14:16 PM

Salut Eddy, j'ai fait mes tests sur CS3, en tout les cas je ne me suis pas attaché à faire un document natif avec un calque par bouton, mon script ne fait qu'un rectangle avec un texte, l'ai final n'est pas exploitable en soi, le script formule juste la palanquée d'images désirées en fonction de ce que les tableaux javascript contiennent ... ça te fait bien les .png derrière sous CS6 ?

#15 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 13 November 2012 - 16:05 PM

Merci Eddy pour ta réponse.

J'avais également une autre idée pour diminuer le nombre de manipulation si je reste sur ma solution basée sur un simple script.

Serait-il possible de traiter en une fois (donc par lot) mes 72 boutons vierges de 72 couleurs différentes (regroupés dans un unique dossier) en appliquant le script que j'ai mentionné plus haut (# afficher texte 1 - # enregistrer bouton pour le web - # masquer texte 1 - # afficher texte 2 - # enregistrer bouton pour le web - # masquer texte 2 - ... - # masquer texte 71 - # afficher texte 72 - # enregistrer bouton pour le web) ???

J'aurais donc 72 manipulations pour créer mes 72 boutons vierges au format .png ainsi qu'une seule manipulation pour créer mes 3600 boutons étant donné que mes 50 versions de textes se feraient en traitement par lot. Donc au total il y aurait 73 manipulations (plus la création du script) à la place de 3600 manipulations si je devais le faire manuellement... Solution qui devient pour moi envisageable dans ce cas précis!

Est-ce possible?

Merci d'avance pour votre patiente...
Alexandre

PS: Comment intégrer le script de Txuku dans Photoshop? Merci!

#16 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 13 November 2012 - 17:43 PM

Métaroid.
Non pas du tout.
Je modifie le script pour avoir par exemple trois fichier finaux (textes et couleurs). Je le lance et obtiens un fichier ouvert avec un rectangle et un texte, le dernier de la liste. Terminé, aucune création de fichier sur mon bureau, chemin renseigné dans le script.
Il est probable que le script puisse fonctionner sous CS3 et pas sous CS6 !


MBCL65AMG

Je pense qu'il vaut mieux oublier l'option d'enregistrement pour le web, tu devrais peut-être y intervenir chaque fois !

J'oserais dire qu'en installant le javascript de Txuku, en faisant un bon script d'actions intégrant ce javascript, le traitement des 72 boutons pourrait se faire en une seule fois en traitement par lot !

Mon avis perso : le script devrait créer la totalité des textes dans le document. Appliquer la couleur voulue à chaque calque de texte (couleur directe ou en style incrustation de couleur) et se terminer par le script de Txuku pour exporter chaque calque de texte uniquement avec le calque d'arrière plan (bouton).
Si tu prépares bien ton travail, ça devrait le faire.

Pour le script de Txuku (choisis la bonne version et vois s'il faut le modifier, c'est assez évident, il suffit de lire un peu), il faut copier le code dans un fichier .txt p.ex. et l'enregistrer sous… en lui donnant un nom et l'extension .jsx
Tu peux ensuite le placer dans le répertoire des scripts de Photoshop. Il faudra l'appeler dans ton script d'actions par la commande "Fichier / scripts" et ce, en fin de ton script d'actions.

Si tu souhaite en toute fin réduire le poids de tes boutons, il existe des softs (différents selon que tu sois sur Windows (pngOptimizer) ou Mac imgOptim)) pour réduire un png à son poids le plus petit possible sans qu'il perde de qualité !

Petite rectification, tu devras peut-être intervenir dans chaque bouton pour le texte à renseigner !

#17 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 13 November 2012 - 20:16 PM

Je suis occupé de faire un essai et je pense avoir trouvé une solution simple.
Nous sommes d'accords pour dire que chaque bouton aura un texte décliné en 72 couleurs.
Alors la création de script est quasi inutile et l'utilisation du script de Txuku pourrait suffire !
Je fais un test et reviens t'en raconter le résultat.

Explication et résultats de mon test.
J'ai donc installé le script de txuku en ayant modifié quelques paramètres puisque l'original est pour un export en jpg.
En voici le code :

//sauveCalcsFond.jsx
var docRef = app.activeDocument;
var NomDoc0 = docRef.name;
var NomDoc = docRef.name.split(".");
Nom = NomDoc[0];  
var outputFolder = docRef.path;
if (docRef.layers.length > 1)
{
  i = docRef.layers.length

        for(x=1; x < i; x++)
        {
          docRef.layers[i - x].visible=false;
        }  
        var myState1 = docRef.activeHistoryState;
 
        for ( j=0;j<docRef.layers.length-1;j++)
         {
         //calque visible
         docRef.layers[j].visible=true;
         // l arriere plan
         docRef.layers[docRef.layers.length-1].visible=true;
         docRef.flatten();
         NomCalc = Nom + "_calc_" + j;  
         calcEnreg();
         docRef.activeHistoryState = myState1; //retour a l historique
         docRef.layers[j].visible=false; //calque a nouveau masque
         }
}
//docRef.close(SaveOptions.DONOTSAVECHANGES); // fermer le .psd sans rien changer

function calcEnreg()
{
          var doc = activeDocument;
          // Enregistrer en Jpng
          var pngOptions = new PNGSaveOptions()
          // Poids de l image
          //jpegOptions.quality = 12   //A MODIFIER pour diminuer le poids de l image ( de 12 a 1 )
          // Passer en 8 bits
          doc.bitsPerChannel = BitsPerChannelType.EIGHT
          // Sauver le document
          doc.saveAs(new File(outputFolder + "/" + NomCalc ), pngOptions)
}
alert('L\'export est terminé, vous retrouverez les fichiers exportés dans le même dossier que l\'image originale');
 
Je lui ai affublé un raccourcis clavier afin de ne pas devoir chaque fois passer par les menus pour le lancer.

Je crée le bouton (fond), je crée le calque de texte, je lui applique une couleur noire et j'en fais un objet dynamique.
Je duplique le calque de texte autant de fois que j'ai besoin de couleur (première grosse partie du travail) et je change chaque fois la couleur par celle que je souhaite via un style de calque "incrustation de couleur".
Une fois le document terminé, on se retrouve avec un bouton et 72 calques de texte qui sont en fait des copies du premier texte en objet dynamique.
J'enregistre ce modèle sous bouton.psd (au cas où) et sur le bureau (prévois-y de la place si tu optes pour la même option).

Dès maintenant il faut se plier à un rituel !
  • On double clique sur le calque de texte en objet dynamique (on se moque du quel on choisira, ils sont tous des copies du premier) et on en modifie le texte pour notre texte de premier bouton. on enregistre et on retourne sur le document bouton pour en voir TOUTES les occurrences de texte modifiées.

  • On enregistre le bouton sous "nommerLeBouton.psd" au même emplacement que le dernier (bureau dans mon cas).

  • On lance le script de Txuku pour voir exporter chaque calque de texte sur son fond. Chaque bouton nommé se retrouve enregistré en png sur mon bureau sous le nom donné augmenté de _calc_ et d'un chiffre de série.

  • On reprends à l'étape 1 de cette liste et on suit les instruction une nouvelle fois. etc.
Résultat après quelques minutes.

Image attachée: Capture 2012-11-13 à 20.52.15.png

Là, je n'ai que quelques boutons mais 72 se traitent de la même manière.

J'ai le sentiment que ça ne prendra pas plus de temps que de construire un script assez long.

Reste à savoir ce que tu en penses.

#18 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 14 November 2012 - 09:23 AM

Je trouve ça terrible ! , bravo Eddy. Kozik m'a mit sur le fil, donc j'ai répondu présent à l'appel, après je manipule pas trop non-plus les scripts avec Illustrator (j'ai eu l'occasion de tester avec Indesign), et je suis déjà satisfait de mon petit bout de code (brut comme tu dis). En tout les cas je vais creuser les scripts ;)

#19 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 14 November 2012 - 12:50 PM

Merci Metaroid.
Bien sur, tu étais le bienvenue sur ce fil pour apporter une solution alternative, après c'est à l'intéressé de trouver chaussure à son pied parmi les solutions ou voies proposées.


PS : J'aurais aimé tester ton script en tous cas sur Illustrator CS3 mais il n'est plus installé sur mes post !

Bonne journée. ;)

#20 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 14 November 2012 - 16:10 PM

Bonjour Eddy et merci infiniment pour ton aide. Merci aussi à toi metaroid pour la création du script.

Je vais tenter de tester ton script Eddy et je te dirai quoi. Pour que vous ayez une idée bien précise, voilà le rendu final de mon bouton :

Image IPB

Je souhaite utiliser mon bouton vierge comme affiché ci-dessus. Cela veut donc dire que j'aimerais importer dans le script mon bouton vierge qui serait un calque plutôt que de devoir en créer un de toute pièce à l'aide du script en question.

Pareil pour le texte. Je lui ai donné un certain effet et j'aimerais le retrouver comme cela sur mes boutons finaux. Est-il possible d'intégrer des claques finalisés (boutons vierges et textes avec effets) dans le script de metaroid ou alors je dois recréer de toute pièce le cheminement de création pour obtenir le même résultat?

Merci beaucoup pour votre aide et votre patiente en tout cas. Bonne fin de soirée à toutes et tous. ;-)

Cordialement,
Alexandre

PS : Ayant travaillé toute la nuit, je suis dans l'incapacité de vous répondre en journée. Encore désolé pour cela. Mais j'arrive à vous lire depuis mon mobile...

#21 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 14 November 2012 - 16:49 PM

Bien sur, tu peux utiliser ton bouton vierge !
Tu l'ouvres dans PS, tu crées ton premier texte (même bidon) pour le mettre en forme (styles, etc.), tu lui donne sa couleur par une incrustation, comme expliqué plus haut. Une fois que ton texte te plait, tu le transformes en Objet dynamique et tu le dupliques en lui changeant chaque fois son style d'incrustation de couleur par la couleur voulue. Pour finir, tu l'enregistre sous PSD.
Le reste est indiqué plus haut.

#22 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 15 November 2012 - 07:43 AM

Bonjour tout le monde, vous allez bien?

J'ai une bonne nouvelle. Pour le moment, j'ai réussi à intégrer un texte unique sur mes 72 boutons vierges de 72 couleurs différentes.

Voilà le résultat :

Image IPB

Je suis bien content d'y être arrivé. Merci encore pour l'aide. Pour l'instant, j'ai une seule version de texte avec 72 couleurs. Il me manque encore 49 versions de textes pour avoir mes 3600 boutons différents. Logiquement, je devrais pouvoir y arriver mais pas pour le moment car je viens de rentrer du travail et je vais aller me coucher...

Je verrai ça tout à l'heure ou bien demain. Je vous tiens au courant pour la suite, n'ayez crainte...

Bonne journée à tous et à bientôt. Et merci encore tout le monde...

Cordialement,

Alexandre

PS : Ne fermez pas le sujet s'il vous plaît, je compte vous faire un p'tit tuto sur comment j'y suis arrivé. De plus, j'aimerais quand même essayer le script qu'Eddy a modifié pour voir s'il n'est pas préférable à utiliser par rapport à celui que j'ai créé pour gagner encore plus de temps.

PPS : Eddy, ce n'est pas 72 couleurs de textes différents mais bien 50 textes différents (d'une seule et même couleur, le blanc) sur 72 boutons de couleurs différentes. ;-)

#23 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 15 November 2012 - 11:08 AM

Salut Alexandre, c'est tant mieux si ton projet commence à aboutir, je continu aussi de mon côté à tâter le terrain des scripts dans Illustrator, bon ça bidouille pas mal mais tout comme toi ça avance. J'ai quelques difficultés à obtenir des ombres portées par exemple, si quelqu'un peu m'aiguiller. Je remets un bout de code (un peu long), pourrais-tu m dire Eddy s'il fonctionne ou non sur CS6 ? (merci) :

//Fonction d'export PNG 24
function exportFileToPNG24 (dest) {
if ( app.documents.length > 0 ) {
  var exportOptions = new ExportOptionsPNG24();
  var type = ExportType.PNG24;
  var fileSpec = new File(dest);
  exportOptions.antiAliasing = true;
  exportOptions.transparency = true;
  exportOptions.saveAsHTML = false;
  app.activeDocument.exportFile( fileSpec, type, exportOptions );
}
}
var vLargeur = 250;
var vHauteur = 40;
//Tableau des textes
var tabNom= ["Je veux en savoir plus","Passer cette étape","Contacter un conseiller","Acheter maintenant"];
var tabAlias= ["en-savoir-plus","passer-etape","contacter-conseiller","acheter-maintenant"];
var tabCouleurs= [[141, 40, 40],[143, 42, 110],[109, 42, 142],[42, 42, 142],[42, 109, 143],[41, 142, 109],[42, 143, 42],[109, 143, 42],[143, 110, 43]];
//Document
var myDoc = app.documents.add();
myDoc.width = vLargeur; myDoc.height = vHauteur;
myDoc.cropBox = [0,vHauteur+5,vLargeur+5,0];
//Boucle sur le nombre de valeurs du tableau Textes
for(i=0;i<=tabNom.length-1;i++){
//Pour chaque valeurs textes Boucle sur le nombre de valeurs du tableau RGB
for(j=0;j<=tabCouleurs.length-1;j++){
  var myLayer = myDoc.layers.add();
  myLayer.name = tabAlias[i]+"-"+(j+1);
  //Dessin des objets rectangle et texte
  //Bidouille ombre portée
  var pathRectShadow = myLayer.pathItems.roundedRectangle(0,5,vLargeur, -(vHauteur),3,3);
  myLayer.pathItems[0].opacity = 30;
  myLayer.pathItems[0].blendingMode = BlendModes.MULTIPLY;
  var shadowValeur = new RGBColor();
  shadowValeur.red = shadowValeur.green = shadowValeur.blue = 150;
  pathRectShadow.fillColor=shadowValeur;
         pathRectShadow.filled=true;
  pathRectShadow.stroked=false;
  //couleur du fond de bouton
  var pathRectColor = myLayer.pathItems.roundedRectangle(4,2,vLargeur, -(vHauteur),3,3);
  var rectColor = new RGBColor();
  rectColor.red = tabCouleurs[j][0];
  rectColor.green = tabCouleurs[j][1];
  rectColor.blue = tabCouleurs[j][2];
  pathRectColor.fillColor=rectColor;
         pathRectColor.filled=true;
  pathRectColor.stroked=false;
  //bidouille effet bouton
  var pathRefRectM = myLayer.pathItems.roundedRectangle(5,4,vLargeur-4, -((vHauteur)/3)-4,2,2);
  myLayer.pathItems[0].opacity = 30;
  myLayer.pathItems[0].blendingMode = BlendModes.MULTIPLY;
  var rectColorM = new RGBColor();
  rectColorM.red = tabCouleurs[j][0];
  rectColorM.green = tabCouleurs[j][1];
  rectColorM.blue = tabCouleurs[j][2];
  pathRefRectM.fillColor=rectColor;
         pathRefRectM.filled=true;
  pathRefRectM.stroked=false;
  //Bidouille ombrage texte
  var pathRefTextShadow = myLayer.pathItems.rectangle(-9, 3, vLargeur, -(vHauteur));
  var textRefShadow = myLayer.textFrames.areaText(pathRefTextShadow);
  textRefShadow.contents = tabNom[i];
  textRefShadow.textRange.characterAttributes.size = 16;
  var newRGBColorTextShadow = new RGBColor();
  newRGBColorTextShadow.red = 87;
  newRGBColorTextShadow.green = 87;
  newRGBColorTextShadow.blue = 87;
  textRefShadow.textRange.characterAttributes.fillColor = newRGBColorTextShadow;
  textRefShadow.textRange.characterAttributes.textFont = app.textFonts.getByName("MyriadPro-Bold");
  textRefShadow.paragraphs[0].paragraphAttributes.justification = Justification.CENTER;
  //Texte
  var pathRefText = myLayer.pathItems.rectangle(-10, 2, vLargeur, -(vHauteur));
  var textRef = myLayer.textFrames.areaText(pathRefText);
  textRef.contents = tabNom[i];
  textRef.textRange.characterAttributes.size = 16;
  var newRGBColorText = new RGBColor();
  newRGBColorText.red = 255;
  newRGBColorText.green = 255;
  newRGBColorText.blue = 255;
  textRef.textRange.characterAttributes.fillColor = newRGBColorText;
  textRef.textRange.characterAttributes.textFont = app.textFonts.getByName("MyriadPro-Bold");
  textRef.paragraphs[0].paragraphAttributes.justification = Justification.CENTER;
  //Export en PNG24, Attention à modifier !
  ExportPath = "/Users/mac/Documents/boutons/"+tabAlias[i]+"-"+(j+1)+".png"
  exportFileToPNG24(ExportPath) ;
  myLayer.visible=false;
}
}
 


#24 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 15 November 2012 - 11:42 AM

Bonjour.

Citation

Et pour chacun des textes, je souhaite y appliquer 72 couleurs différentes.

Avoue que ça prête à confusion.

En tous cas le script peut fonctionner de la même manière.
Le bouton en arrière plan, les différents textes et plutôt que la modification des textes, tu modifies la couleur du bouton !

#25 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 15 November 2012 - 11:42 AM

J'ai optimisé la création des calques dans Illustrator, le code est un peu plus clair (désolé pour la longueur de la page avec le code)


//Fonction d'export PNG 24
function exportFileToPNG24 (dest) {
if ( app.documents.length > 0 ) {
var exportOptions = new ExportOptionsPNG24();
var type = ExportType.PNG24;
var fileSpec = new File(dest);
exportOptions.antiAliasing = true;
exportOptions.transparency = true;
exportOptions.saveAsHTML = false;
app.activeDocument.exportFile( fileSpec, type, exportOptions );
}
}
function exportFileToAI (dest) {
if ( app.documents.length > 0 ) {
var saveOptions = new IllustratorSaveOptions();
var ai8Doc = new File(dest);
saveOptions.compatibility = Compatibility.ILLUSTRATOR13;
saveOptions.flattenOutput = OutputFlattening.PRESERVEAPPEARANCE;
app.activeDocument.saveAs( ai8Doc, saveOptions );
}
}
//Constantes
var vLargeur = 250; // largeur bouton en pixel
var vHauteur = 40; // hauteur bouton en pixel
var mTransparence = BlendModes.MULTIPLY; // transparence mode produit
var vEfOpBouton = 30; // opacité relative à la création du bouton (ombre portée fond et texte)
var typeSize = 16; // Taille du texte
var typeFamily = "MyriadPro-Bold"; // Font
var finishWriteBG = false;
var finishWriteText = false;
var globalFinish = false;
var presetSpaceColor = DocumentColorSpace.RGB;// Espace colorimétrique du document
var presetWidth = DocumentPreset.width=vLargeur+5; // largeur du document
var presetHeight = DocumentPreset.height=vHauteur+5; // hauteur du document
var presetUnits = DocumentPreset.units=RulerUnits.Pixels;
//Export en PNG24, Attention à modifier !
var globalPath = "/Users/mac/Documents/boutons/";
var nomDocAI ="collection-boutons.ai";// nom du document AI final
//Tableau des textes
var tabNom= ["Je veux en savoir plus","Passer cette étape","Contacter un conseiller","Acheter maintenant"];
var tabAlias= ["en-savoir-plus","passer-etape","contacter-conseiller","acheter-maintenant"];
var tabCouleurs= [[141, 40, 40], [143, 42, 50], [143, 42, 59], [143, 42, 110], [142, 42, 118], [143, 42, 127], [109, 42, 142], [100, 42, 142], [91, 41, 142], [42, 42, 142], [42,50, 143], [42,59, 143], [42, 109, 143], [42, 118, 143], [42, 127, 143],
[41, 142, 109], [41, 142, 100], [42, 143, 92], [42, 143, 42], [51, 143, 42], [60, 143, 42], [109, 143, 42], [116, 141, 40], [127, 143, 42], [143, 110, 43], [141, 100, 40], [143, 92, 42]];

//Document
var myDoc = app.documents.add(presetSpaceColor,presetWidth,presetHeight,presetUnits);
myDoc.cropBox = [0,vHauteur+5,vLargeur+5,0];

//Bidouille ombre portée (étape n°1)
var myLayerShadow = myDoc.layers[0]; myLayerShadow.name = "shadow";
var pathRectShadow = myLayerShadow.pathItems.roundedRectangle(0,5,vLargeur, -(vHauteur),3,3);
myLayerShadow.pathItems[0].opacity = vEfOpBouton; myLayerShadow.pathItems[0].blendingMode = mTransparence;
var shadowValeur = new RGBColor();
shadowValeur.red = shadowValeur.green = shadowValeur.blue = 150;
pathRectShadow.fillColor=shadowValeur; pathRectShadow.filled=true; pathRectShadow.stroked=false;

if(myDoc.layers.length > 0){
//Boucle de création des calques de fond (étape n°2)
for(j=0;j<=tabCouleurs.length-1;j++){
//Création d'un calque
var myLayerBG = myDoc.layers.add();
myLayerBG.name = "fond-"+(j+1);
//couleur du fond de bouton
var pathRectColor = myLayerBG.pathItems.roundedRectangle(4,2,vLargeur, -(vHauteur),3,3);
var rectColor = new RGBColor();
rectColor.red = tabCouleurs[j][0]; rectColor.green = tabCouleurs[j][1]; rectColor.blue = tabCouleurs[j][2];
pathRectColor.fillColor=rectColor; pathRectColor.filled=true; pathRectColor.stroked=false;
//bidouille effet bouton
var pathRefRectM = myLayerBG.pathItems.roundedRectangle(5,3,vLargeur-2, -((vHauteur)/3)-4,2,2);
myLayerBG.pathItems[0].opacity = vEfOpBouton; myLayerBG.pathItems[0].blendingMode = mTransparence;
var rectColorM = new RGBColor();
rectColorM.red = tabCouleurs[j][0]; rectColorM.green = tabCouleurs[j][1]; rectColorM.blue = tabCouleurs[j][2];
pathRefRectM.fillColor=rectColor; pathRefRectM.filled=true; pathRefRectM.stroked=false;
myLayerBG.visible=false;
if(j == tabCouleurs.length){ finishWriteBG = true; }else{ finishWriteBG = false; }
}
if(finishWriteBG = true){
//Boucle de création des calques de texte (étape n°3)
for(i=0;i<=tabNom.length-1;i++){
var myLayerText = myDoc.layers.add();
myLayerText.name = tabAlias[i];
//Bidouille ombrage texte
var pathRefTextShadow = myLayerText.pathItems.rectangle(-9, 3, vLargeur, -(vHauteur));
var textRefShadow = myLayerText.textFrames.areaText(pathRefTextShadow);
textRefShadow.contents = tabNom[i]; textRefShadow.textRange.characterAttributes.size = typeSize;
var newRGBColorTextShadow = new RGBColor();
newRGBColorTextShadow.red = newRGBColorTextShadow.green = newRGBColorTextShadow.blue = 87;
textRefShadow.textRange.characterAttributes.fillColor = newRGBColorTextShadow;
textRefShadow.textRange.characterAttributes.textFont = app.textFonts.getByName(typeFamily);
textRefShadow.paragraphs[0].paragraphAttributes.justification = Justification.CENTER;
//Texte
var pathRefText = myLayerText.pathItems.rectangle(-10, 2, vLargeur, -(vHauteur));
var textRef = myLayerText.textFrames.areaText(pathRefText);
textRef.contents = tabNom[i]; textRef.textRange.characterAttributes.size = typeSize;
var newRGBColorText = new RGBColor();
newRGBColorText.red = newRGBColorText.green = newRGBColorText.blue = 255;
textRef.textRange.characterAttributes.fillColor = newRGBColorText;
textRef.textRange.characterAttributes.textFont = app.textFonts.getByName(typeFamily);
textRef.paragraphs[0].paragraphAttributes.justification = Justification.CENTER;
myLayerText.visible=false;
if(i == tabNom.length){ finishWriteText = true; }else{ finishWriteText = false; }
}
}else{
alert("impossible de continuer la gnration des calques");
}
if(finishWriteText = true){
//Boucle d'enregistrement de chaque boutons (étape n°4)
for(i=0;i<=tabNom.length-1;i++){
var showTextLayer = myDoc.layers.getByName(tabAlias[i]); showTextLayer.visible = true;
for(j=0;j<=tabCouleurs.length-1;j++){
var showBGLayer = myDoc.layers.getByName("fond-"+(j+1)); showBGLayer.visible = true;
ExportPath = globalPath+tabAlias[i]+"-"+(j+1)+".png";
exportFileToPNG24(ExportPath) ;
showBGLayer.visible = false;
}
showTextLayer.visible = false;
if(i == tabNom.length && j == tabCouleurs.length){ globalFinish = true; }else{ globalFinish = false; }
if(globalFinish = true){
ExportDocumentPath = globalPath+nomDocAI;
exportFileToAI (ExportDocumentPath)
}
}
}else{
alert("impossible de terminer la gnration des documents");
}
}else{
alert("impossible de dbuter la gnration des calques");
}
 


#26 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 15 November 2012 - 11:43 AM

Salut Metaroid.

Voir le messagemetaroid, le 15 November 2012 - 11:08 AM, dit :

pourrais-tu m dire Eddy s'il fonctionne ou non sur CS6 ? (merci) :


Je testerai ce soir une fois rentré si le temps me le permet ! ;)

#27 marroon

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 71 messages

Posté 15 November 2012 - 13:15 PM

Ha ! Je vois que les scripteurs se sont emparés du sujet ! Tant mieux ! D'autant plus que ça à l'air de fonctionner à merveille.

#28 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 15 November 2012 - 19:40 PM

Métaroid.
Je ne peux faire fonctionner le script (dont j'ai modifié le chemin : Users/Eddy/Desktop/Boutons/) sur CS6, j'ai l'erreur suivante.

Image attachée: Capture 2012-11-15 à 19.38.44.png

#29 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 15 November 2012 - 20:55 PM

Alexandre.

J'ai importé mon bouton couleur blanc et uni auquel j'ai donné un style incrustation en dégradé noir vers blanc dont j'ai baissé l'opacité à 40% (voir si ça te convient sinon ajuster) + une incrustation de couleur en mode produit.
J'ai créé les 50 calques de texte (c'est pas vrai, j'en ai fais que quelques-un mais j'aurais pu en faire 50 !!!) les uns par dessus les autres.
J'enregistre le document sur le bureau sous le nom "bouton.psd"

Ensuite je crée un script d'actions.
  • Double clic sur l'effet de calque du bouton pour en modifier la couleur en incrustation. Valider.
  • Enregistrer sous… sur le bureau sous le nom "bouton-.psd". Valider.
  • Lancer le javascript qui se charge de l'export de chaque calque de texte en plus du bouton.
Stopper le script et supprimer les occurrences du bureau sauf le premier bouton (au cas où).

Activer les cases à cocher devant les actions 1 et 2 afin d'y avoir la main lors de leur exécution. Tout est prêt.

Création des boutons :
  • Lancement du script
  • La fenêtre des styles de claques s'ouvre, modifier la couleur par celle que l'on souhaite. Valider.
  • La fenêtre d'enregistrement s'ouvre, renommer le bouton en bouton rouge p.ex. valider
  • Le javascript se charge de l'export des 50 boutons d'une couleur avec 50 textes différents.
  • Je me rends sur le bureau et je range les boutons (dans un répertoire p.ex.)

Je retourne dans photoshop et je relance le script.
  • Je modifie la couleur d'incrustation, je valide.
  • Je modifie le nom lors de l'enregistrement afin de ne pas écraser les précédents ou avoir des noms en double, je valide.
  • Le script exporte les 50 bouton avec leur textes que je vais ranger dans le répertoire préalablement créé*.

Je retourne dans photoshop et je … etc., etc., etc. 72 fois pour avoir les 3600 boutons relativement rapidement.

*Je pourrais enregistrer le bouton chaque fois directement dans le répertoire de destination finale mais je préfère le bureau suivi un déplacement manuel (sélection + glisser vers le répertoire final) afin de bien vérifier la création des boutons !

Voili voilà…

#30 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 16 November 2012 - 12:41 PM

Salut Eddy,

J'ai testé mon script sur un autre poste avec CS5, et j'ai exactement la même erreur que toi. Si je retire ce qui se trouve entre les parenthèses, le script démarre bien mais il y a ensuite une erreur (fenêtre système avec problème inconnu pour Illustrator) qui s'affiche ... donc bon, j'ai du mal à voir où ça cloche, je vais chercher et je reviendrais sur ce post si j'arrive à résoudre ce problème. Cela donne l'impression que CS3 était plus permissif dans la manière de scripter.

#31 MBCL65AMG

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 16 November 2012 - 14:06 PM

Salut à tous.

Je tiens tout d'abord à tous vous remercier pour l'aide que vous m'avez apporté. C'est fantastique, vraiment!
Par contre, je n'ai pas encore eu le temps de tester le script en question, désolé. J'espère que je pourrai le faire ce weekend.

J'essaierai également de créer un petit tuto sur la manière dont je suis arrivé pour me permettre de créer à la volée mes boutons par milliers.
Finalement, je pensais que ça aurait été plus compliqué mais il n'en est rien. Comme quoi...

Pour résumer, j'ai créé 72 boutons vierges de 72 couleurs différentes (72 manipulations en moins de 20 minutes)(je ne suis pas encore spécialiste des raccourcis clavier). Ensuite, j'ai créé un script très basique pour chaque version de texte (50 textes = 50 manipulations = 50 scripts)(chaque manipulation/script me prend environ 1 minute montre en main).

Au total, j'aurai donc 72 + 50 manipulations (122 manipulations) pour obtenir mes 3600 fichiers. Le tout est faisable en une bonne heure de travail. Je crois que c'est pas mal du tout...

Cordialement,
Alexandre

#32 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 16 November 2012 - 14:34 PM

Très bien, bravo, une heure, c'est parfait

En créant un bouton et 50 textes plus le javascript intégré dans un script d'actions indiqué plus haut, tu peux obtenir les 3600 boutons en 72 manipulations et je pense en moins de 45' si tu prends une bonne vitesse de croisière.
On pourrait encore accélérer en omettant volontairement le renommage des boutons mais on n'y perdrait à la fin pour trier le tout !



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)