Today I’m going to explain how to batch process images in Photoshop. As web designers we often need to take a large set of images and resize them for web, such as creating thumbnails for a gallery. The same process of creating a Photoshop action can be used to do a variety of things, but today we’re going to talk about resizing and a slight touch on image adjustment.
Firstly we need to get ourselves set up, we’ll need an image from the batch we want to process. Next we’ll need our Actions panel open in Photoshop (Window > Actions). We’ll also need to know our target details, so for me, I want to end up with a batch of thumbnails for the nice shiny gallery I’m building. My main images open in a lightbox, so I’m not worried about their size as they’re around 500px by 400px. I want my thumbnails to be 180px by 100px, with a little bit of colour adjustment as I’ve noticed the images are a tad dull.
1) Start recording your action by clicking the “Create New Action” button, at the bottom of the panel (in between the folder and bin icons). From this point on anything you do in Photoshop will become part of the Action, so try your best to keep all steps to a minimum. If you make a mistake, press undo as normal (the Action will record the mistake and undo, but we can sort this out later).
2) Resize the image by selecting “Image” (across the top) then “Image Size”. In here you’ll be presented by a series of options, but really we’re only after width at this stage. Set the width to your desired size, in my case 180px.
3) As my image is 180px by 120px after resizing, I need to take off 20px of height. Sometimes you may want to do this manually to ensure you are getting the best image possible, but for today, we’re going with the flow. Crop the image using Image > Canvas Size.
4) Now it’s time to make some adjustments to the colour. For examples sake I’m using Adjustment Layer > Curves to give a bit contrast to the image and create some depth.
5) Once we’re ready, we can save the image using Save for Web. It’s really important that you set the right destination folder. I suggest creating a folder for all your Actions to export to, with individual folders within there for each Action. One big thing here is do not click in the file name area, or else you’ll end up with with all your images having the same file name and writing over each other.
6) Once you’ve saved your image for web, you need to close the file without saving. This will leave your original as it was. This is an important step as it’ll stop your Action from running if missed.
7) You’re pretty much there! Stop your action by clicking the square icon in the Actions panel footer. Now you’ve got your Action nearly ready to be run, before going ahead we want to check our Action looks ok, so glance over the Action list, if you have any extra bits you don’t need (may have selected an unneeded tool) simply drag that line to the bin.
8) Let’s give your new Action a test. File > Automate > Batch. In here you’ll want to select your input and destination folders, setup the rest like my screenshot. For errors, it’s down to preference, I’d advise using Stop for Errors while testing and once you’re comfortable with the Action use Log to File. When you’re happy, click ok and watch the magic happen.
9) You should now have a folder full of nicely resized images, take a moment to glance over them to check everything has gone to plan (Should be fine if you didn’t have any error stop messages come up.)
That’s it! All done. Photoshop Actions can be super handy and this is just one of many ways to help you in your day to day as a web designer and developer. I personally use an Action to open a new canvas, draw out my guides and set up my background at the start of every project. Have a play and see what you can come up with, you’ll probably find ways to save a lot of time and effort.
If you already use Photoshop Actions, send a tweet or a comment below and tell us how they are saving you time!
