Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Automated converting of Images from PNG to GIF and creating a dimmed version

Posted on 2004-04-20
Medium Priority
Last Modified: 2013-11-19
Hi Experts out there,

My company bought a icon collection for their GUI desing. There are a lot of icons but there aren't dimmed (deaktivated versions of the buttons of them) versions of them.

Can anybody tell me how can I do the following things:
-Create a good looking dimed version of the icons
-Convert them to PNG (I have allready PNGs but there are to big in filesize) and GIF
-Automate this (for a whole directory) and rename the dimmed version to %Filename%_dimmed.gif/png

We own the most acutal version of Adobe Photoshop 8.0 CS and Macromedia Fireworks 7. The Icons are form

It would be very nice if anybody can help me!

Greets and thanks,
Question by:Snody
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
LVL 17

Accepted Solution

Lobo042399 earned 2000 total points
ID: 10866882
Hi Andy,

You can do all that with Photoshop's Action recorder. An Action is a series of steps taken with Photoshop using any of its tools, pretty much like a Macro in Word. You can open a copy of one of your icons and record the Action of dimming it and resaving it in the format you want. I'll explain step by step.

-Open your test image in Photoshop.
-Select the Actions palette; if it's not open yet open it from the Window menu.
-In the Actions palette click the right-pointing arrow and select New Action. -Enter a name for your Action and click OK. You'll see that the red dot in the Actions palette shows depressed, which means it is recording.
-Now select the menu Image ~ Adjustments ~ Curves (or hit Ctrl-M) to open the Curves editor box.
-To dimm the image now you alter the curves by grabbing the Left end of the diagonal line and moving it up so that the numbers show Input: 0 - Output: 60 (i.e.) Make sure that Preview is checked so that you can see the results of this alterations.
-You can also grab the line by the center and drag it up or down (making it into a real curve) until you get a level of dimming aceptable to you. Then you hit OK.
-Now you open the Save As menu (File ~ Save As - or Shft-Ctrl-S) and select PNG under Format. Do not change the name.
-Hit OK to save the image.
-Now you can hit the Stop button (the black square) in the Actions palette to stop recording. You have successfully created your Action.

Now, the second part; automatically processing all the images in a folder.

-To process all the images in a folder you open the Batch menu (File ~ Automate ~ Batch)
-Under Play select the Action you have just recorded.
-Under Source, select Folder and hit Choose... to browse to the folder that contains your images.
-Under Destination select Folder and hit Choose... to browse to the same folder, or you can select a different folder, that's yor choice.
-Under File Naming, the first box should read Document Name, you can leave it like that; in the second you type "dimmed" (without the exclamation marks); and in the third you select Extension from the drop down menu. Leave the other three blank.
-Double check that the settings are okay, and hit OK.

Photoshop will open each image in the selected folder, dimm it, and save it as imagedimmed.png in the destination folder you selected.

Now you can tell your boss how you've saved him a wad of money in outsourcing and how you deserve a raise.

Good Vibes!


Author Comment

ID: 10869724
Hi Lobo!

First of all, BIG THANKS FOR YOUR ANSWER! That was exactly the solutions I've searched for... :))))The values on the curve were input: 0 output: 120.

The automation worked fine too... But I've got an additional question: The PNG's which I use are pretty big and I want to optimize it for web. So I would use "File"->"Save for Web" and would select PNG-24 and save that. That doesn't work because Photoshop want to save it as copy and it doesn't work as batch...

Can you tell me what's the best way to save the images optimized for web in PNG-24 format using a batch? That would be very nice...

Greets and best regards,

PS: You can be sure that you'll get the points anyway...
LVL 30

Expert Comment

ID: 10869979
PNG-24 is a lossless format. To compress it down further for the web you need to use PNG-8, GIF, or JPEG.
New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

LVL 17

Expert Comment

ID: 10873274
Hi Andy,

As Weed points, it would be better to use PNG-8 (Hi Weed!!)

In order to do this as a Batch you'll need to create your Actions a little different. I'll guide you through:

-First create a new folder and copy one of your original PNG files there, we don't want the original images to get modified yet.
-Now start creating an Action the same we did before.
When creating the Action, instead of choosing Save As, you choose Save for Web and then select PNG-8 (or PNG-24 if that's your choice) then Save the file.  
-Now you close the original test image (hit No when asked if you want to Save it) and then you stop the recording.

The problem of this Action is that it will replace the original file and won't add the "dimmed" part to the file name, right? We'll get around that.

Now you have to create another Action. Call it something significant like Save as PNG-8. In this action all you'll do is open the newly created PNG and  hit Save. The file itself won't change, it is already a PNG-8.

Now the fun part. Create a New Folder and name it something like InBetween. This will be a kind of temp folder. Under Automate ~ Batch run the FIRST Action, but select the InBetween folder as the destination. Don't bother changing the File Naming settings.

After this is done you'll have the InBetween folder filled with the images dimmed and saved as PNG-8. Now Create another folder called Dimmed. Now you open Automate ~ Batch again and run the SECOND Action you created. Select the InBetween folder as Source, and for Destination select the Dimmed folder. This time, however, edit the File Naming so that it reads : Document Name + dimmed + extension. All this will do is add the "dimmed" part to the file name and save it to the Dimmed folder.

Now you can delete the InBetween folder or keep it in case you need to run the Action again.

Good Vibes!


Author Comment

ID: 10919762
Great, everything worked as you said :)))) But I've got some problems with the automation...

It isn't any Problem for me to define actions, but I have very many pictures in very different paths... I want to convert them or dim them... I've tried all settings but I've to define the actions for every directory again.

Can you tell me if its possible to define a batch which works with all directores (without define the action again)? If yes, how can I do that? Whats the problem?

It would be nice if you can help me again, that would save again a lot of time...

Greetz & big thanks,

LVL 17

Expert Comment

ID: 10922958
Hi Andy,

There's a way but it involves doing some heavy scripting using OLE and it's a royal pain in the rear. Probably the easiest way would be to collect copies of your images to a central folder and have Automate to do the editing from there. I know, it can take an awful lot of time if you have them all over, but it would also be an exercise in image resource management. I ran a test and found Automate won't process sub-folders either. It would be helpful if it did.

Good Vibes!


Author Comment

ID: 10926100
Thanks again for your answer and in general for your great help!

Best greets and regards from Switzerland,
LVL 17

Expert Comment

ID: 10926393
Hi Andy,

Thanks for the points and your kind comments. It feels good to know that at Experts Exchange we're helping IT professionals all over the world. Greetings from Canada!

Good Vines!


Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.
Suggested Courses

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question