Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.
Les scripts photoShop permettent d’automatiser certaines tâches qui demandent de nombreuses manipulations à l’utilisateur. Pour ce script, il s’agit de sauvegarder un icone en différentes tailles afin de permettre son utilisation dans une extension Chrome.
Les images seront carrées, et auront pour taille: 128×128px, 48×48px, 38×38px, 32×32px, 24×24px, 19×19px, 16×16px.
Pour cela, il faut avoir installer l’environnement de développement de photoShop: ExtendScript Toolkit CS6.
L’image devra être carrée et avoir une dimension supérieure ou égale à 512px, pour avoir une bonne résolution. On réalise donc son icone avec une taille correcte, et on la sauvegarde (pour le web) en format « png ».
Le script utilise le javaScript à la mode photoShop. Son extension est .jsx.
ChromeIcons.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
try { // Demande à l'utilisateur de sélectionner l'image dont la dimension est ≥ 512x512 px. var xbsImage = File.openDialog( "Select a square PNG file (size ≥ 512x512 px).", "*.png", false ); if ( xbsImage !== null ) { var doc = open( xbsImage, OpenDocumentType.PNG ); if ( doc == null ) throw "Something is wrong with the file. Make sure it's a valid PNG file."; // Sauvegarde pour l'annulation var startState = doc.activeHistoryState; // Les préférences utilisateur d'unité sont rétablies à la fin du traitement var initialPrefs = app.preferences.rulerUnits; var initialPrefs = app.preferences.rulerUnits; // On choisit le pixel comme unité app.preferences.rulerUnits = Units.PIXELS; // use pixels if( doc.width != doc.height ) throw "L'image n'est pas carrée"; else if ( doc.width < 512 ) throw "L'image est trop petite! Au minimum 512px."; // Boite de dialogue: répertoire de destination var destFolder = Folder.selectDialog( "Choose an output folder" ); if( destFolder == null ) // Annulation throw ""; // Sauvegarde des icones au format PNG. var sfw = new ExportOptionsSaveForWeb(); sfw.format = SaveDocumentType.PNG; sfw.PNG8 = false; // Utilisation de PNG-24 sfw.transparency = true; doc.info = null; // Suppression des metadata var icons = [ { "name": "favicon_128", "size":128 }, { "name": "favicon_48", "size":48 }, { "name": "favicon_38", "size":38 }, { "name": "favicon_32", "size":32 }, { "name": "favicon_24", "size":24 }, { "name": "favicon_19", "size":19 }, { "name": "favicon_16", "size":16 }, ]; var icon; for( i = 0; i < icons.length; i++ ) { icon = icons[i]; doc.resizeImage( icon.size, icon.size, null, ResampleMethod.BICUBICSHARPER ); var destFileName = icon.name + ".png"; doc.exportDocument( new File(destFolder + "/" + destFileName ), ExportType.SAVEFORWEB, sfw ); doc.activeHistoryState = startState; // undo resize } alert( "Chrome extension icons created!" ); } } catch( exception ) { // Alerte et fermeture en cas d'erreur if ( ( exception != null ) && ( exception != "" ) ) alert( exception ); } finally { if ( doc != null ) doc.close( SaveOptions.DONOTSAVECHANGES ); app.preferences.rulerUnits = initialPrefs; // Rétablit les préférences } |
Sauvegarder le fichier au format jsx.
Pour lancer le script, charger l’image png dans photoShop. Choisir Fichier ⇒ Scripts ⇒ Parcourir…. Sélectionner le script, le traitement se lance, et vos icones sont sauvegardés.
Si l’on veut que le script apparaisse tout le temps dans photoShop, copier le fichier jsx dans le répertoire C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts, et on pourra le lancer en sélectionnant Fichier ⇒ Scripts ⇒ chromeExtension_png.
Sur l’image, le menu montre chromeExtension PNG, le fichier jsx a simplement été renommé chromeExtension PNG.jsx.
Et hop, il n’y a plus à sauvegarder une multitude de fois en différentes tailles pour avoir tous les icones nécessaires.
