Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

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

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 www.IconExperience.com

It would be very nice if anybody can help me!

Greets and thanks,
Andy
0
Snody
Asked:
Snody
  • 4
  • 3
1 Solution
 
Lobo042399Commented:
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!

Lobo
0
 
SnodyAuthor Commented:
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,
Andy

PS: You can be sure that you'll get the points anyway...
0
 
weedCommented:
PNG-24 is a lossless format. To compress it down further for the web you need to use PNG-8, GIF, or JPEG.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Lobo042399Commented:
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!

Lobo
0
 
SnodyAuthor Commented:
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,
Andy


0
 
Lobo042399Commented:
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!

Lobo
0
 
SnodyAuthor Commented:
Thanks again for your answer and in general for your great help!

Best greets and regards from Switzerland,
Andy
0
 
Lobo042399Commented:
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!

Lobo
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now