Photoshop Automation Inquiry

I’m working on a new icon set titled “Chameleon”. The style of each icon will enable the entire set to easily change color, based on the owner’s needs. For example, a single click of the paint bucket tool in Photoshop would color a background “tile” that is shared by the entire set of icons (which are really each in their own separate PS layer). I’m being a bit vague here, as I’m not quite ready to release ‘em.


The part I’m getting stuck on, is how to enable the color switch in the quickest, easiest way for the customer. My quick investigation into Photoshop Actions tells me that hiding/showing layers in succession while also exporting a GIF (or other format) isn’t feasible. I’d love to be wrong here — what I need is an automated way of hiding one layer, showing the next, exporting, hiding that layer, showing the next one up the list, exporting, and etc., until all layers have been turned into separate GIF images.
The alternative would be to do something server-side, perhaps using something like ImageMagick. But I’m skeptical about it being able to trigger the paint bucket, then do the hide/show/export routine mentioned above. I suppose anything is possible.
Ever experiement with something like this? I’d love to hear about any similar experiences.

32 Comments

  1. Travholt says:

    What you want to do is probably simplest to do with Photoshop’s Javascript abilities. There’s a Scripting Guide included on one of the CDs, and also available through Adobe’s web site, I believe. There’s a lot you can do that isn’t available through Actions.
    Personally I haven’t written any scripts for Photoshop, but I have successfully made one for Illustrator that reads a file of tab separated data and produces graphs from them.

  2. Taylor says:

    Not sure if this is what you’re looking for, but you can also script Photoshop with Javascript. I’ve some experience with this at my job. I’ve never experimented with exactly the problem you’re trying to solve, but the hide/show/export process that you describe should be easily done with Javascript.
    I’m sure you can find a Photoshop Javascript reference on Adobe’s site, I’m nearly positive that they are freely available.

  3. Excellent, thanks Travholt and Taylor. I’ll certainly look into the scripting options. I knew you could script PS with AppleScript, but hadn’t a clue that JS would work as well. Interesting.

  4. ACJ says:

    I’d have a Python or PHP script communicate with ImageMagick or PIL (Python Image Library). You could even set up a centralized web service for it.

  5. Ben says:

    You could simply record an action where you manually hide and then show each layer in succession saving for the web as a GIF at each step.
    All the user would have to do is:
    Download your icons in a PSD format and your exported Action file
    Open the file and choose a background color
    Load the Action File
    Press play and let it do its thing
    If layers were named in a predictable way e.g. “layer 1,2,3″ etc… you could have the script continue the proccess on layers that do not exist so you could add and remove them as needed.

  6. Joshua says:

    Are you SURE that using photoshop actions wouldn’t be feasible? I just tested it out and was able to get exactly the feature you mentioned (turning off a layer, turning on the next one, exporting a gif, and repeating up the stack). *using photoshop CS
    This would work fine if you knew the exact number of layers. You could even save each gif as the name of that individual icon based on the preset order in the layer stack.
    Of course, if the end user moved layers around or added new layers it would screw everything up…
    That’s probably why you posted this article huh?

  7. Joshua says:

    heh… seems like Ben beat me to it!

  8. Hmm, I could’ve sworn that hiding/showing layers didn’t work for me previously, but Ben and Joshua are right — a Photoshop Action will record those steps. Just need to figure out how to name the exported GIF based on the visible layer (and not the .psd’s file name) and I could be almost there. Thanks for the input thus far.

  9. Andy Schubert says:

    I like the direction that Ben is going but would probably rather have the icon set as GIFs already and have them all refer to a single common palette. Editing the colors in the palette would globally change the images if handled right.

    However, that might defeat not only your purpose, but any protection you might desire for the icon set as well.

  10. Tom Werner says:

    It is definitely possible to do what you want with Photoshop Javascripting. I wrote a brief article on scripting a while back that might be helpful. A quick glance at the scripting reference shows that you can manipulate layers (get them by name and modify visibility and opacity) and saving each iteration to a separate file is no problem either.

  11. louis says:

    could you use php to create a graphic with a solid color in it, then layer over it/combine it with the icon gif. have the gif have transparent area where you want to have the color show through.
    i have never done it, but it seems like it could be done.
    instead of gif you could use png if you wanted aliased edges.

  12. Bryan Buchs says:

    When you say “Photoshop”, are you assuming that ImageReady is in the mix? You could set up the icons in a grid, give all the “slices” the appropriate names, and just use the document background color as the “canvas” you’re painting, with the icons in a floating layer. The user could just do a “save optimized” from ImageReady and export all the icons at once, either as GIFs or PNGs.
    Or am I the only one who still uses ImageReady for anything?

  13. andr3 says:

    Like Joshua has said, this is possible to do with PS Actions.
    I use them to enhance my own photographs and resize them, and then save them to any format.
    Saving is a bit tricky, as it involves the filling of a Save Box.
    I use Save for Web, which only shows a prompt box if the file already exists, and you can save to any profile you want. GIF 128 Dithered, PNG24, PNG-8 Dithered, etc.
    One other tip, you can create different actions for each color, showing each layer, and then create a general action recording you playing all the other saved Actions, which will generate several files, each with their own colors.
    I’m not sure if i’m making myself clear enough.. sorry.

  14. J Wynia says:

    Maybe I just don’t understand the problem, but if you name all of your layers the first part (hiding and showing) can be done explicitly by name. Then, get the layered image the way you want it, script a “Copy Merged”, a new image from that merged copy, convert to indexed color, save as GIF and get rid of the temp image.
    I just did a quick test of that method using just basic actions and it worked like I expected. The biggest trick would be to make sure that all of the layers are in the right visibility state. Basically, at the end of your action, set them all to one state, I’d suggest reverting to visible and have your action hide the ones you don’t want in the GIFs.

  15. matt andrews says:

    Depends on the role the layers have, but, like Bryan, it strikes me that a simpler solution might be just to use named slices in one big image. Then all the user has to do is recolour a background layer and then Save for Web (if I understand what you’re doing correctly, which I most likely don’t).
    ( @Bryan: no strict need for ImageReady – Photoshop can save slices happily too, of course… )

  16. ImageReady actually has a built-in option that does exactly what I need. File → Export → Layers as Files... brings up a dialog box that allows for naming each file based on layer name, transparency options, etc. Photoshop has a similar option under File → Scripts but curiously there is not a GIF option here.

  17. Dan, photoshop cs has a function called “Layer Comps”, i dont know what version you have but if you have CS2, you can customize your colors just like you mentioned above, use layer comps to display each and then explore the script option in file -> scripts -> export layers to files. I’m using Photoshop CS2 so I’m not sure if the previous version has the same feature. You dont even have to launch imageReady.

  18. FWIW, to add a voice from the other side of the divide: what you want to do is easily possible with ImageMagick (or other automated tools) if you export each layer as a separate image. You can then trivially compose these images as desired.

  19. Josh Moont says:

    You could also use Fireworks. It also has a powerful Javascript-Like API. The bonus is that you can create a Flash interface to this and then package it up (with any relevant source files) into an extension.
    See here for a basic tutorial.
    Josh

  20. Jonic says:

    If you provide the PSD file with slices added into it, you could simply supply a readme file that would explain how the user could use the “save for web” command to save the sliced image as seperate gifs.
    I know that’s relying on the user being able to follow a readme, but it would cut down a lot of work on your part.
    But if the user moves the slices then it’s all ruined. Then again the same can be said for the user changing almost anything on the picture.
    That’s probably what I’d do anyway.
    ALTERNATIVELY:
    You could maybe have a web interface that would allow the user to pick their color, and upon submitting you could get imagemagick to create a new image with that as the background color, then copy the icons on top of it, cut it up, zip it and provide an encrypted link for download.
    I’ve done something very similar with WallMerge (hit the link for a description, this post is long enough!)
    The only difference there is that I used PHP’s built in GD library. I find it a little easier to use than imagemagick.
    Email me if you need any help :o)
    Jonic.

  21. Jonic – a web interface is what I may be leaning towards. Mainly because of the control. I could easily add icons to the set in a centralized place for people to get/create them. Not to mention the push-button publishing that’d be far easier to explain than a Photoshop action or script. I may be in contact with you :-)

  22. i think a web interface would be uber-slick, especially if you integrate it with a payment gateway, and let users pick from a color pallete, then have php spit out their appropriate set of images….
    I think I’d buy a set of icons just to play around w/the web based tool ;-)

  23. Tom says:

    Because ImageReady is stupid, I think you have to set your compression settings on a palet thats probably hidden and then do “Save Optimised as”.

  24. Scott Meinzer says:

    Like Jonic said, a php (or whatever) web app is probably the way to go.
    Without much work at all it would be easy to let people pick any color they want and make the icons and then zip them up and send the person a download link (that should probably expire after so long).
    The GD library included with php is actually really easy to work with.
    For a fun side project I coded up: http://omnidot.com/pepsi/
    Basically it takes zip codes and plots them on a map and outputs the map as a transparent png. The code that makes the map is 27 lines long. (with normal indenting and all)
    If you need any help just email away.

  25. tim says:

    @ scott:
    this is marvellous !!! I’d love to hear how you came up with this idea and how you managed to get it working…
    @ everybody:
    a web app ? again ? is this a contagious disease ? ;-)
    good luck dan

  26. Hi Dan!
    Intresting topic :) I played around with GD last night, but wasnt able to get any good result with tha alphablending, so I switched to ImageMagic insted. I made a little “demo” in perl. (works fine in ff and opera, but not in IE :/ (well, my stuff works, but IW wont show the transparent png-image correct)).
    http://www.quai.no/im/?color=ffff00
    If I could get IE’s “AlphaImageLoader” to work, it would be easy to make a web-app that generated previews of the icon-set on the fly (using javascript).
    If you need a helping hand, I would be more than happy to help you. (I have already bought a icon set from you, and are just waiting for more ;)

  27. Chris says:

    Dan,
    Why not just swap the palette of your GIF images based on the color the user requests. You can do this on the server side very simply without having to hassle with ImageMagick or Photoshop.
    I whipped up a demo: The Simple Palette Swapper that allows you to recolor your favicon. Check it out.
    Hope this helps and introduces the palette swapping technique.
    Regards,
    Chris

  28. Mukund says:

    Dan,
    On a sidenote, why not create these icons in the SVG format as other icon designers seem to do these days, using a program such as Inkscape? This way a web developer can edit colours freely, change the shape of the graphics, resize them conveniently, etc.

  29. Kay and ChrisAwesome. Either one of these seems to do almost exactly what I need. Thanks much! And also cool for anyone else that’s looking to do something similar. I’m amazed by the simplicity of the code that’s needed. Either one is really compact. Nice job.

  30. Jeffrey Tranberry says:

    Dan, you should be able to modify the export layers script that ships with PS to use Save For Web for the GIF export step you want. You’ll have to use PS’s ScriptingListener plug-in to generate the Save For Web step though. Another, although expensive, option would be to use Adobe Graphic Server.
    I would use a color overlay style instead of the paint bucket tool as it’s less destructive and you can capture the style and/or additional visibility changes using Layer Comps (PS or IR) or Rollover States(IR).
    You could then write a script to save out the comps to GIF.
    Using Variables might also be an option for you. Image>Variables and File>Export Data Sets…

  31. Chris Adams says:

    I was thinking about what you were trying to say and the only thing I could figure is when you make the icons and have it in the PSD file have it sliced up into the 16×16 px., or how ever big it maybe. Then name the individual squares to the name they should be, So the person can open it up and change the background of the icon then ‘Save to Web’ and save Images only. (S)he will then have a set of icons seperated with matching backgrounds.
    It will take a little bit off effort to do this, but it will get the job done, but if you work hard now it will be easier at the end, or when you are in the action.

  32. Chris Brandt says:

    Any chance of getting a preview? I was about to purchase Stockholm… but I’d like to see the new set before making a decision… :)