/Tutorials/ Batch processing images
21/07/2006 | Filed under Design > Tutorials
Use Photoshop to turn a bunch of digital photos into thumbnails, and then format them on a web page with Dreamweaver.
How often do you end up doing the same thing again and again when working on web sites? Do you find yourself mucking around with Photoshop, reworking images as thumbnails, and using the exact settings you always use? If your answer is ‘too often’, this tutorial is for you. (If your answer is ‘never’ keep reading anyway, to learn how to lay out thumbnails in Dreamweaver.)
Despite many applications having automation capabilities, few users take advantage of such things. In the case of Photoshop, this is particularly bizarre, seeing as Adobe’s powerhouse has some excellent time-saving tools. In the first tutorial, we show you how to create an action, which can be used time and time again, triggering a number of steps via a single keyboard shortcut. Although this is great for creating a single new thumbnail, it’s not so great when you have dozens of images to convert. That’s why we also show you how to use Photoshop’s Batch command, which provides you with the means to run a user-defined action on a folder full of images.
After the Photoshop shenanigans are done with, you need to do something with your thumbnails, so in the second tutorial we show you a means of laying them out in Dreamweaver, using CSS rather than tables. Once completed, it’s an easy task to create a gallery of your thumbnails.
TUTORIAL 1: Creating an action in Photoshop
Step 1: On your hard drive, set up two folders: one called ‘images’ and another called ‘thumbnails’. In the first of those folders, place copies of all of the images you want to convert to thumbnails. Make sure you work with copies in case something goes wrong, otherwise you could lose your precious digital photographs.
|
Step 2: Open up an image – preferably one in portrait format – to use to create the action. Ensure the Actions palette is visible (if you can’t see it, open it by going to Window » Actions) and select New Action from the palette’s menu. Name the action, give it a shortcut if you want to, and click Record.
|
Step 3: Go to Image » Image Size. Change the Height value to 75, which is the height we’re going to set all thumbnails to in this tutorial. Click OK. The image’s dimensions will be changed and the action within the Actions palette will be updated to display what you just defined, as shown in the screenshot above.
|
Step 4: Go to View » Actual Pixels (this won’t be recorded in the action, but it enables you to see your thumbnail at full size). Now browse to Filter » Sharpen » Unsharp Mask and set Amount to 50, Radius to two and Threshold to one. This brings back any detail that was lost when your photograph was resized in the previous step.
|
Step 5: We need to ensure that the thumbnail canvas size remains the same, regardless of the image’s initial dimensions and orientation. Go to Image » Canvas Size and set Width to 100 and Height to 75. Select ‘Other’ from the ‘Canvas extension color’ menu, type ‘898989’ in the # field and click the OK button twice.
|
Step 6: Go to File » Save For Web. Set JPEG as the format and 50 as the Quality value (thumbnails need to have some quality, but not as much as the main images on the page). Save the thumbnail in the thumbnails folder created in step one. Click the square Stop button at the foot of the Actions palette to stop recording.
|
Step 7: Now, go to File » Automate » Batch to bring up the Batch dialog, as shown above. In the Play section, select the location of your action from Set and its name from Action. Next, in Source, select Folder and use the Choose button to select the images folder we created in step one on the previous page.
|
Step 8: In Destination, choose Folder, click Choose and select the thumbnails folder. Check ‘Override Action “Save As” Commands’. Once you’ve finished, click OK and let Photoshop get on with it. Batch processing each image should take only a few seconds, and once done, you’ll have a set of thumbnails in the thumbnails folder.
|
Step 9: Actions can be managed and edited using the Actions palette. The palette’s menu enables you to save and load actions, and create different sets. Each individual action’s steps can be edited (doubleclick it and change the values) or added to by selecting a step, clicking the Record button and performing additional actions.
|
TUTORIAL 2: Positioning thumbnails using Dreamweaver
Step 1: Create a new HTML document and CSS file and save them in a folder. Move the thumbnails folder from the previous step into the same folder. Open up the HTML document and use the CSS Styles panel’s Attach Style Sheet button to attach the CSS document to the web page via the subsequent dialog box.
|
Step 2: Access the Common section of the Insert bar and click the Insert Div Tag button. In the subsequent dialog box, type thumbnails in the ID field and click OK. Next, delete the default content and use the Image button (again in the Common section of the Insert bar) to add your thumbnails to the div.
|
Step 3: Select one of the images and then click the New CSS Rule button. You should find that in the New CSS Rule dialog box, Advanced has been selected from the Selector Type options, and ‘#thumbnails img’ has been added to the Selector field. Select your CSS file from ‘Define in’ and then hit the OK button.
|
Step 4: Access the Border category and set Style to solid, Width to one pixel and Color to #555555. In Box, deselect ‘Same for all’ under Margin and then set the Bottom and Right values to five pixels. Click the OK button and all of your thumbnails will have borders and be separated, as shown in the screenshot above.
|
Now you need to create another new CSS rule, with Advanced as the Selector Type option, but this time enter ‘#thumbnails’ in the Selector field. Use the Border category to add a border, as per the previous step, and then use the Background category to set the Background color value to ‘#dddddd’.
|
Step 6: Still in the same rule, access the Box category. Deselect ‘Same for all’ and set Top and Left to five pixels. Finally, set Width to 535 pixels, which is the sum of the width of five thumbnails (each one is 100 pixels wide), their horizontal borders (two pixels per thumbnail), and their right-hand margins (five pixels per thumbnail).
|
Bookmark with:
Comments
Michael / 24/08/2006 / 11:19
The problem is, that once you 'save as' in the 'save for web' dialog you have to save with a name... say pic1.jpg. When the batch processor reach picture number 2 in the serie it - hence - wants to replace the picture - pic1.jpg - that is already there. I can't find a way around this. When using the batch own saving option there is - of course - no problem. But there is a considerable size difference between the two ways of exporting jpegs. Any suggestion?
Regads
Reuss
chris / 04/10/2006 / 21:25
To avoid that problem make sure you have the --Override Action "Save As" Commands-- checked.
Richard / 08/10/2006 / 23:33
I don't think the 'Batch' feature in Photoshop works as it is intended, or I am missing something when recording (using CS2).
When you finish with a 'Save for Web' action, there doesn't appear to be a way to save files to those settings whilst also renaming them using the 'File Naming' section in 'Batch'. Without 'Override Action "Save As" commands' checked it produces two new files in the destination folder. One that is 'Saved for Web' with the original filename and one that is renamed but has just been put though the standard 'Save As' method.
If you do have the 'Override Action "Save As" commands' box checked then it just produces one image exactly how you want it, but not renamed.
Anyone know a way around this?
mark / 23/10/2006 / 22:28
Richard, when doing your save for web, the trick is to NOT type anything for the filename. Let photoshop save it as Untitled-1.jpg or whatever it chooses. Then when you do the batch, photoshop will always use the original image filename to save to the destination folder.
I do agree though, using save for web in a batch in a real pain with PS and has been for quite some time. You'll have to batch rename your output files afterwards
Gultekin / 13/11/2006 / 22:56 / http://www.gultekin.myby.co.uk
Yes actually batch keep writing on top of the same image if last line of the export action shows a file name. I tried a couple of times you have to give a nae to save or leave the defaut name but it keeps writing on it too. But I don't know how in my last trial where I also recorded the closing of the original file without saving, export action did not show a file name in last line. If that is the case than you should not have any problem. You should have the full path but not a file name as the last line of the export action.
Jonathan / 04/01/2007 / 16:42 / http://www.logoguru.co.uk
I agree with Richard and Mark. Our graphic design team does incorporate major image conversion techniques, but, at the expense of boiling brains.
definitely like more thought on this
Victory Darwin / 01/02/2007 / 18:21 / http://www.UniversityOfVictory.com
Hey Craig that was sweet. I just about spent $50 on a utility to do this, I didn't know it was built into photoshop all along. Ya think the president of an entrepreneur university wouldn't have such an aversion to cracking open a textbook and reading instructions, but I guess I'm more of a true entrepreneur than teacher or coach (book reader type) Anyway, now I feel empowered and inspired again. I'll pass this url on to my web guys and give them the opportunity to sharpen their skills. ~V
Ary Sal / 04/02/2007 / 15:24 / http://computerhealth.co.uk
Thanks for all the advice read it absorbed it and done it. Great help again for batch processing advice.
N.B
I googled "how do you batch process image dimensions"
you came top !!
Derrick / 26/04/2007 / 20:23
There needs to be a function that resizes an image to a set width / height ( 100x100 ) while maintaining proportion REGARDLESS of the original dimensions. Ie- it resizes to the exact dimensions specified, maintains proportion, then cuts the excess out.
Keith / 14/06/2007 / 10:01 / http://keithmurdoch.co.uk
Thanks for this tutorial - this is something I've wrestled with for some time. Nice one!
Kato / 01/11/2007 / 17:25
I know why the save for web action keeps over writing on the previous photos it worked on. I had the same problem and I figured out that I wasn't closing the recorded action correctly. Here's a link to what I used
http://www.developertutorials.com/tutorials/photoshop/create-photoshop-action-droplets-050615/page1.html
Once you save for web(while action is recording), close the image and make sure you don't overwrite the image you used to create the action and exit out. This way the action will work perfectly...Phew!
Daniele / 05/11/2007 / 12:52
Hey Craig I have a question for you, when I use save for web in my batch recording I cannot make him save the files to the "overridden" folder I specifiy LATER when launching the batch. CS3 keeps saving the files in the original folder I saved the "specimen" file into while recording my action. I am sure to keep the option "folder" on and not set it to "none" but, no way, it does not get fixed. Any ideas?
darryl / 13/11/2007 / 15:03
i'm having real problems with this batch feature - I've read the above and have tried a number of times.
When I save for web , photoshop wont let me save without putting in something and it just overides all the pictures needing to be changed! I may have just aswell changed the pictures myself - the amount of time I have spent trying to work it out!
please help.
Amir / 27/11/2007 / 21:07
The information here is very usefull.
Does anyone knows how to "save for web" in vba scripting?
Thanks,
Amir
Testdog / 18/12/2008 / 00:25
For those having trouble with your thumbnail images being repeatedly saved over, I found the way around it was to record closing the image as part of your action. Don't know why this makes a difference but it does.
jaydee / 05/03/2009 / 10:40 / http://www.logoquality.co.uk
Brilliant! I was having trouble with batch resizing/save for web in photoshop because the destination folder didn't change on each new job. But this "Override Action Save As" tip has saved me - thanks!
Joey33 / 02/06/2009 / 09:57 / http://www.joeystudio.pl
I agree it would be a perfect tool if it allowed for renaming thumbnails. Batch save produces large files and 'export for web' can save without renaming.
That's why just for this procedure I leave Ps and switch back to Fireworks mx.
Here is what I can in Fw:
1. set the size of thumbnails (you can set ONLY ONE and the other will scale accordingly)
2. set the rule for thumbnail names (e.g. add prefix/suffix)
3. set optimization parameters (file weight and quality the same as 'export for web' in Ps) and tada - batch all files open/all files in a folder/save as script for future use.
Isn't that what you're dreamingof of in Ps? :) Old tool but so functional and well thought. Ps in many respects is so much after Fw when it comes to ease and functionality for webdesigners.
Heidi / 30/06/2009 / 16:20
Thanks for this. Very useful indeed. The only thing is as I don't know how to use dreamweaver to position the thumbnails, is there a possibility you can email me a larger image of Tutorial 2, just so I can see where in Dreamweaver I should be going? Thanks
Robert Rawson / 08/07/2009 / 13:21
I like so many of you am having problems with this too. I have createdan action to include file info particicular to the shoot and then a save for web section. As i run the action in automate batch, i am greeted with a a save as (jpeg quality) box for each file.In the batch prosses boxes i clicked on overide and tried it without to no avail. Is there a way around this?
Thanks in advance
Robert UK
yobub / 17/03/2010 / 21:54
There is a program called Extensis Portfolio that does the batch work described above, and does it very easily. It allows you to include a suffix on the renaming, so you could rename "Original Image 1" to "Original Image 1 Thumbnail", etc. I've tried the photoshop process and it is limited. The Extensis Portfolio option is pretty robust. Batch resizing, naming, format change, etc.
John Adkins / 29/03/2010 / 15:29
It took me about two hours to get it all going to reduce a bunch of photos for emailing. At the end of it when it was working it all seemed so simple. I did put in filenames in both the 'load' and 'save' options and checked the
Overide Action 'Open' commands, not the Overide Action 'save' commands. I also recorded the 'Close image'
as part of the batch file. This batch facility in Photoshop is saving me so much time. Thanks for the tutorial.
