Solved

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

Posted on 2004-04-20
8
420 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
  • 4
  • 3
8 Comments
 
LVL 17

Accepted Solution

by:
Lobo042399 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
PNG-24 is a lossless format. To compress it down further for the web you need to use PNG-8, GIF, or JPEG.
0
 
LVL 17

Expert Comment

by:Lobo042399
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Snody
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

772 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now