Batch Processing Multiple Images

Topics covered in this Photoshop for Web Design tutorial:

Using Image Processor, Custom cropping & exporting layers to files, Batch renaming files in Adobe Bridge

Exercise Preview

Exercise Overview

We often need to create multiple sizes of images. Whether it’s 1x and 2x sizes or thumbnails and enlargements for a photo gallery, Photoshop has some powerful batch processing features to help you quickly create the sizes you need. That’s what you will learn about in this exercise.

Using Image Processor to Batch Process 1x Files

We have a folder of images that we need to turn into 1x and 2x optimized files. We want the final images to be 400px wide in a webpage. That means we need to create 400px wide 1x versions and 800px wide 2x versions.

1. In Photoshop, close any files you have open.

2. Go to File > Scripts > Image Processor.

3. At the top, under 1: Select the images to process, click the Select Folder button.

4. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Batch Process.

5. Click Open (Mac) or OK (Windows).

6. Under 2: Select location to save processed images, click the circle next to Select Folder then click the Select Folder button.

7. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Batch Process.

8. Click once on the 1x folder to select it.

9. Click Open (Mac) or OK (Windows) to choose it.

10. Under File Type check on Save as JPEG.

11. Set Quality to 8

    TIP: If you’re not sure what JPEG quality to use, use Save for Web to preview JPEG quality on one of the images before coming into this dialog.

12. Check on Convert Profile to sRGB.

13. Check on Resize to Fit.

14. Set W to 400px.

15. Set H to 400px.

    NOTE: The aspect ratio of the original file will be maintained and the photos will fit into this area. Our photos are landscape orientation, so their final height will be less than 400px, but Photoshop will figure out the appropriate height for us!

16. Make sure the following options are NOT checked:

    • Save as PSD
    • Save as TIFF
    • Run Action
    • Include ICC Profile

17. Click Run and watch it rip!

Using Image Processor to Batch Process 2x Files

1. Next we need to create the 2x versions. After the first group is done, go to File > Scripts > Image Processor.

2. All the previous settings should still be set, so we just need to change a couple things.

   In section 2 we need to change the output folder. Under 2: Select location to save processed images, click the Select Folder button.

3. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Batch Process.

4. Click once on the 2x folder to select it.

5. Click Open (Mac) or OK (Windows) to choose it.

6. Set Quality to 5 (hi-res 2x files get more heavily compressed).

7. Set W to 800px.

8. Set H to 800px.

9. Click Run and watch it fly!

Viewing the Resulting Images in Adobe Bridge

1. Let’s take a look at what was just created for us. Go to File > Browse in Bridge.

2. After a moment an Adobe Bridge window should appear. On the left of the window there should be a Favorites panel. Switch to the Favorites panel if it’s not already shown. If you don’t see the panel at all, choose Window > Favorites Panel.

3. In the Favorites panel, click on Desktop.

4. Navigate into Class Files > yourname-Photoshop for Web Class > Batch Process > 1x > JPEG.

   Here you should see the thumbnail files.

5. To see the size, click once on any of the files to select it.

6. Press the Spacebar to do a fullscreen preview of the file. Pay attention to the size so we can compare it to the 2x in a moment.

7. When done, press the Spacebar again to close the preview.

8. Now let’s see the 2x versions. At the top of the window there should be a row of folders showing where you are. In that row, click on Batch Process to go to that folder.

9. Go into the 2x folder, then into JPEG.

10. Click once on any of the files to select it and press the Spacebar to do a fullscreen preview of the file.

    This file should be larger! You may see some unsightly JPEG artifacts, but the image will appear at half this size within a webpage, so they should be less noticeable at the final size.

11. When done, press the Spacebar again to close the preview.

12. Choose File > Return to Adobe Photoshop.

Custom Cropping & Batch Processing with Layers to Files

The Image Processor can be good if all the files are ready to go, but what if you need to change the proportions and crop the images first? Our originals are wide landscape orientation photos, but we also need square versions.

1. In Photoshop, go to File > Open.

2. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Layers to Files and double–click on cropped-images.psd to open it.

3. In the Layers panel notice we have several layers.

   • The names of the layers will be used as the filenames of the files we export. Don’t add the file extension though, that will be added for you.
   • All the layers are smart objects (which can be created by doing a File > Place Embedded, or dragging and dropping the files onto Photoshop).

4. Before we export the final JPEGs, we need to finish cropping one of the layers. In the Layers panel, make sure the cityscape layer on top is selected.

5. Choose the Move tool .

6. Drag the image to the left so you can see more of the Sydney Opera House. We recommend dragging all the way over until the right side of the photo snaps to the right side of the file, but it’s up to you.

   With the technique we’re now going to use, each layer will be exported as an individual file. Having everything in a file such as this lets you crop the images and globally size them in one shot. To see and crop another image/layer, you must hide the other layers.

   TIP: A quick way to hide all layers except for the one you want to see is to hold Option (Mac) or Alt (Windows) and click the eye of the layer you want to see. All other layers will be hidden. Repeat this to show all the other layers.

7. We created this file at 800px square, which is the 2x size for our webpage. Let’s export the 2x files first, then we’ll create the 1x versions.

   Choose File > Export > Layers to Files.

8. Let’s choose where to export the images. Click the Browse button.

9. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Layers to Files.

10. Click once on the 2x folder to select it.

11. Click Open (Mac) or OK (Windows) to choose it.

12. Make sure File Name Prefix is blank.

13. Make sure Visible Layers Only is NOT checked.

14. From the File Type menu, choose JPEG.

15. Make sure Include ICC Profile is NOT checked.

16. Under JPEG Options set Quality to 5

17. Click Run.

18. When it says it was successful, click OK.

19. Do a File > Save to save the cropping.

Making the 1x Versions

1. We need to resize the file to the 1x size (half the current 2x size). Go to Image > Image Size.

2. To the right of Width, set the menu to Percent.

3. Set Width to 50 Percent.

4. Click OK.

5. Choose File > Export > Layers to Files.

6. Let’s change where to export the images. Click the Browse button.

7. Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > Layers to Files.

8. Click once on the 1x folder to select it.

9. Click Open (Mac) or OK (Windows) to choose it.

10. All the previous options should still be set, but 1x versions cannot be compressed as much. Under JPEG Options set Quality to 8

11. Click Run.

12. When it says it was successful, click OK.

13. Do a File > Close and do not save changes. We don’t want to save the file at the smaller 1x size.

Viewing the Results & Batch Renaming the Files

1. Let’s take a look at what was just created for us. Go to File > Browse in Bridge.

2. You should be back in Bridge looking at the previous files you exported. At the top of the window there should be a row of folders showing where you are. In that row, click on yourname-Photoshop for Web Class to go to that folder.

3. Go into the Layers to Files folder.

4. Go into the 2x folder.

5. Select one of the images.

6. Press the Spacebar to do a fullscreen preview of the file.

   TIP: When in the fullscreen preview, use the Left/Right Arrow keys to move between files.

7. When done looking at the images, press the Spacebar again to close the preview.

8. The images look good, but look at the filenames.

   The filenames have a 4-digit number with underscores around it at the beginning of each file. We don’t want that. Luckily Bridge can batch rename the files for us.

9. To select all the files in this folder, hit Cmd–A (Mac) or Ctrl–A (Windows).

10. Choose Tools > Batch Rename.

11. From the Preset menu, choose String Substitution.

12. Set Destination Folder to Rename in same folder.

13. In the New Filenames section we’re going to build up the new filenames. Because we have to search for any 4 digits (numbers), we’ll have to use an advanced search called regular expressions (sometimes called GREP). These searches use special codes to find patterns. Even if you have never coded Regular Expression searches before don’t worry, we’ll walk you through it!

    Check on Use Regular Expression.

14. In the Find field type a single underscore _

15. A the bottom of the window, notice the Preview of the Current and New filename now shows that the underscore at the start of the filename will be removed.

16. Continuing in the Find field, after the underscore, type \d which stands for digit.

17. Now the Preview should show that the first of the 4 digits is removed.

18. Continuing in the Find field, after the _\d type \d three more times, then add an underscore _ so you end up with:

    _\d\d\d\d_

19. In the Preview, the New filename should no longer have the initial 4 digits and underscores!

20. One last thing. Because these are 2x files, let’s add @2x to the end of the filename. To the right of the New Filenames area, click the Plus (+) button.

21. A new Text menu should appear. Change that to String Substitution.

22. To the right of the second String Substitution menu, change Original Filename to Intermediate Filename.

23. Set Find to .jpg

24. Set Replace with to @2x.jpg

25. Next to Compatibility:

    • Mac Users: check on Windows.
    • Windows Users: check on Mac OS.

26. You should now have the following options set:

    

27. If you think you’ll be using this in the future, you can save this as a preset so you never have to recreate it! If you want to do that:

    • At the top of the window click Save.
    • Name it something like Remove Layers to Files Prefix & Add @2x.jpg
    • Click OK one time.
    • From now on this will be available in the Preset menu!

28. You should be all set, so click Rename.

    The files should no longer have those ugly number prefixes.