Web Graphics Tutorials Services Contact Us
Concept Visionz
Tutorial Volume 15: Automatic Multiple Image Resize
-sponsor- -sponsor-

Do you have many images that you would like to resize all at once? This tutorial uses adobe photoshop to automatically batch resize your images. This is very helpful if you have 10, 30, 50, 100+ images that you would like all to be a certain size. Very tedious and pointless to do it one by one. The web gallery function will be our means to accomplishing this task. not only will it resize our images automatically for us, it will also create thumbnails, and a html document displaying everything in case that is also what you need.


1. Open up adobe photoshop. I use version 7.0.  

2. Go to File > Automate > Web Photo Gallery...

3. a dialog will pop up. There are several features that i will go over so you will have a better understanding of what everything does. The only option that is needed focused on is the "LARGE IMAGE" option. that is where we are able to establish the size of the images we want to resize. however, i will go through all the other steps and option as well.


4. a) First when the dialog first appears, you will see option for BROWSE and DESTINATION under FOLDERS. click browse and locate the directory that houses all of the images you want resized.

b) Now click on Destination, create a new directory outside of the directory where you images are located. This new directory is where your new resized and html documents will appear.

c) On the Options dropdown should be showing BANNER. for Site name just give it a title if you want the html document to have one.

5. click on the drop down and go to the next option "LARGE IMAGE." This is where the main action is for our resizing purposes. There are several steps here.

a) make sure to check the "resize images" box,

b) as default, the first item in the first row should show "MEDIUM 350px." change the 350px to any size you want. normally, it should be considered in width,

c) on the CONSTRAIN row, set how you want the image to be in proportion to each other. selecting "BOTH" will make the image resize into a square, width and height will be the number you chose earlier. i recommend contraining to only the width. this will resize the height proportionally and thus not give you a distorted image,

d) JPEG quality should be set to a value up to you. the higher the value the better the quality, BUT the larger the file size. i usually set it to being "10"

e) the border size, titles, font, and font size is up to you to set. those are pretty obvious, i choose to leave them out. take a look at my screenshot to see the settings for step 7 (this step)

6. Next click on the options drop down menu and select "THUMBNAILS." This will generate, obviously the thumbnails that will appear on your html document/webpage that will also automatically generate. if you plan on having one then go ahead and follow these steps to set this option. once again if you are just going for a resizing then forget this step and just press ok. but here is the settings for THUMBNAILS.

a) "SIZE" on the first row is the width of your thumbnail, how wide you would like it. i usually leave it at 75 or 100.

b) columns and rows is how many thumbnails do you want to be displayed across and down. 5x3 will show 15 images, any extra will transfer over to a new page.

c) the border size, titles, font, and font size is up to you to set. those are pretty obvious, i choose to leave them out.

7. the last two options in the drop down menu are pretty much pointless so i will not even go into it. The purpose of this tutorial is basically to teach you how to resize multiple images in one swoop. press OK, and photoshop will begin the process. you will see series of images opening and being resize before your very eyes. when it is done, a html webpage will popup and display your web gallery.

8. okay, now to find our resized images. close the html document and photoshop, no longer need those. open up the directory where you created to house the new files. you will see a few things in there. a IMAGES, PAGES, THUMBNAILS directories, and 1 or more index.html files, and a userslections text file. go into the IMAGES directory, that is where all your newly resized images are. once again, great tool when you got 20 or 200 images you need to resize. good luck.


*Return to Tutorial(s)*

All rights reserved. © 2002-2009
Concept Visionz