|
DAL Computer Help
» Articles
» Web Design and Development
»
Web Master Image Tricks with Photoshop
Web Master Image Tricks with Photoshop
| Web Master Image Tricks with Photoshop |
| Posted By: D-A-L | Date Added: 02-01-2007 04:57 PM | Views: 2368 |
Web Master Image Tricks with Photoshop
by Glenn Hefley
 Might as well face it, for the most part visual graphic displays and images are where all the hours trickle out of your hands when you are a web master. Doesn't matter how long you work with them, processing images takes time. They have to look good, be formatted correctly, sized to fit, and above all, be there. Pages and articles without pictures and graphics are harder for most people to concentrate on. Large pages of text are not inviting either. So the more tools and tricks we have for reclaiming hours is a good thing.
 I recently began working on a library of popular company logos for my website. The idea is to have a resource for my clients, and others for high quality vector graphic logos for various marketing and printing requirements. All of the images are in AI (Adobe Illustrator) vector format. What I need are copies of these images in JPG format, each of them set at 200 px wide and optimized for the web. There are over 3500 of these logo files which I have collected over the years.
A week or so ago I wrote an article for D-A-L about ImageMagick and using the Mogrify tool to quickly re-size and format a directory of images for your web site. ImageMagick has the advantage of being 1) Free, 2) Available to any OS, 3) much faster to work with than any other system or program I know of. Despite these obvious advantages, I couldn't use ImageMagick for this project because of the AI file type, and not being able to get GhostScript for Windows working on my computer (not quite accurate, I didn't want to spend the time getting GhostScript library working on my computer) so I used Photoshop for the task.
One of Photoshop's more powerful features is the Actions, which are more or less what other programs might call Macros. These small, rather easy to make tools are recordings of simple tasks which need to be done on a regular basis, or for a large set of images, like my logo library. I certainly do not want to spend days opening AI files, resizing them to 150px wide and then saving them as optimized JPG files; 3500 of these would literally take days to do this, that is if I was physically capable of sitting through the arduous mind numbing redundancy of such a task. I'm not. Not even close.
Under the Windows option on the top Menu Bar, one of the tool listings is called Actions. Check that option and the Actions Manager floating window pops onto the screen.
As I said before Actions in their simplest form are recorded events and steps you take with an image, which can then be automatically ran on another image. Let's walk through my arduous task.
- First I need to resize the open file
- Second Save for Web
- Last Close the file
I didn't start with Open the File, which I'll explain in just a bit. These three tasks are what I need done. They are not difficult to accomplish, just about anyone could do them. They don't really take any skill. They are very repetitive. This project is exactly what we look for in what to make Actions for.
To start I open one of the AI images, and up pops a little window asking about the setting I want to Rasterize a Generic. Even though I'm just clicking OK, and taking the defaults (because I'm not saving the EPS file with Photoshop when I'm finished anyway), there isn't a simple way of working around this box when opening the AI files, and using basic recorded Actions isn't going to work either. There are Advanced tecniques which you can use to accomplish this and if I was going to be doing this type of project more than once I would spend the time adding them to my Action program. But in this case, and for this article, I just want a very quick to make, easy to run Action which I can walk away from while it processes the files. In fact as I'm writing this the Photoshop program is running in the background processing the logos from the 'D' directory.
So this box is going to pop up for every AI image that Photoshop opens. This isn't as bad as it sounds, and I'll talk more about this in a bit when we talk about running the Actions. For now, I open a single image.
The next thing I do is walk through the tasks I want to record. I make sure of the options I want checked, what size I want the JPG files, that the background is set properly in the Save For Web optimization area, that the compression and quality of the saved JPG file is set right. I also make notes of what these settings are, test the process completely and view the output file.
After my walk through of the task and making sure the logos turn out resonably well, I am ready to begin recording my Action. Going back to the floating Action Option Menu I click on the arrow menu button and choose New Action.
I give this Action a name that describes what the Action does. This Action will probably never be used by me again, but I can not tell you how many little utilities like this I have made over the years which I thought the same exact thing about, which I use no less than once a week to do common tasks. So name the Action something other than MyAction, or TestAction, so you'll remember what it does next month. I'm going to name this one EPS_2_Web.
Once I have a new Action I can begin recording. This is accomplished by clicking on the new Action to highlight it, and then going back to the Arrow menu and selecting Start Recording.
Once you begin recording, walk through the actions you want done to the image. In this case I re-size it, then save it for the web, and then close the image. Done with that I return to the Arrow menu in the Actions and click on the Stop Recording option.
For simple Actions, that is all there is to it. Once recording is stopped, I open up a test image, and run the Action. The easiest way to run the Action is to switch the Action Option box to Button Mode. This lists all of the actions with in a button like menu which you can click with the the mouse and run the Action. I test the Action in this way with several files. Once satisfied I am ready to load in a directory full of files and process them. I'll be processing about 400 to 500 files at a time while working on other tasks (such as this article for example).
The nice thing about Vector graphics is that resizing them is never a problem. They always look clear and sharp no matter what size or shape you put them; in fact that is the whole idea behind vector graphics and why print shops need them. I put all of the images into a test directory I called Images which as a sub directory called JPG, which is where the optimized web images will be placed by my Action. Now I need to open all of the files in Photoshop at the same time (or rather, about 400 or so at the same time). I do this by highlighting all of the files in the directory, and dragging them with my mouse on to the Photoshop window. I then drop them with my more. This act tells Photoshop to open all of these files. You can also go to File->Open and use Ctrl-A to select all the files in the directory to accomplish the same task.
Once the AI file starts to open, that dialog box about the Rasterization options pops up, and I have to click on OK with the mouse or just tap on the Enter keep to default OK. The dialog box closes, the first file opens and then the box pops open again for the second file. I don't want to sit here tapping on the Enter key 400 times while these images load. I do have to press the Enter key 400 times, but I don't have to wait for the each image to load as I do it. Photoshop has its own Keyboard buffer. I just rapidly tap on the Enter key, like I was playing Mortal Kombat for a few seconds, and then open up my browser to continue working on what I need to get done today. The Enter strokes are saved and fed back to the dialog box each time it pops open, closing the option box and allowing the AI file to continue to load.
Photoshop can run our Actions in Batches, which is what makes this whole process worth our time. The Batch options are very functional as well for real word needs. We can run a chosen action on All Open Files, All files in a directory, or select the files we want to run the Action on from a listing in the the File Browser. Choosing the option for a Directory the Photoshop program even gives us the option of descending down into sub directories if required.
While running this on my Logo area in my Image Library is very tempting, there is the matter of the pop-up dialog box, which demands attention. If the file is opened from the directory, the box can't be closed with the Keyboard buffer, because Photoshop will load the file, then process the Action, and close the file, before opening the next file. So the Keyboard Buffer will be cleared out by then, and the box will be sitting there holding up the process until I click on OK. Otherwise using the directory load and descending into the sub directories would have been ideal. As it is, processing all 4500 images into sub-directories and getting them ready for my web site, will take me less than a hour, which is really less time than it will take me to write this article. (I'm already at 'M').
So, my images are all loaded into Photoshop before I start the Batch running. Yours can be in the directory and loaded from there. Loading them all into the program has the disadvantage of a great deal of memory is being used to load them. Keep that in mind when deciding how many to load at a time.
Something you always want to do with a new Action that will be run in Batch over a large list of files is to test it first on a small list of files. Five or ten is usually enough to see if there are going to be any problems. For example, lets say you didn't know about the option box popping up on every file; so now we are sitting here for 20 minutes while this program runs the Action on each image file, one at a time, pressing the Enter key. This type of thing can take all the fun out of using Actions, so test before running on 1000 images in a directory.
Another tip is; if you are going to process several directories and collections of files, it is a good thing to restart Adobe Photoshop a couple of times between jobs. You will find that the jobs run smoother, and quicker if you do so.
I would like to say that there is more too it, but for basic Action use, and saving several hours a week doing mundane monotonous tasks, that's all there is too it. There are advanced features for the Action tool set in Photoshop. In fact there are several books written on the subject. If you find that you need to run complicated editing on large sets of files, or even small sets, but many alterations, learning more about the Actions would not be a waste of time. One example that comes to mind is a friend of mine who is a professional photographer. When he processes his images for the web he needs to add filters, emboss a water mark, resize, frame, and add an effect to each of the files along with his logo. Just processing one image with his list of required actions takes at least 15 minutes. So we setup an Action for that task. He only processes 2 or 3 at a time, but it literally saves him several hours a month.
This article may not be copied or distributed in part or in full from this site and is copyright D24 Media Limited.
|
|
 |
|
All times are GMT +1. The time now is 12:29 PM.
|
|
