Solved

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

Posted on 2004-04-20
8
435 Views
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 www.IconExperience.com

It would be very nice if anybody can help me!

Greets and thanks,
Andy
0
Comment
Question by:Snody
[X]
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
8 Comments
 
LVL 17

Accepted Solution

by:
Lobo042399 earned 500 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!

Lobo
0
 

Author Comment

by:Snody
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,
Andy

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

Expert Comment

by:weed
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.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 17

Expert Comment

by:Lobo042399
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!

Lobo
0
 

Author Comment

by:Snody
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,
Andy


0
 
LVL 17

Expert Comment

by:Lobo042399
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!

Lobo
0
 

Author Comment

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

Best greets and regards from Switzerland,
Andy
0
 
LVL 17

Expert Comment

by:Lobo042399
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!

Lobo
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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.
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
Suggested Courses

627 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