Let Photoshop Actions do all the hard work

When you’re regularly producing content for a particular site, you get pretty familiar with the space and size all your images need to be. Chances are, you’ll thereby also be doing similar motions in Photoshop to get what you’re after. While your site may feature a handy image cropper, like many of our sites do, it’s best practice to prepare your images for the web and save disk space on your web server. After all, if you’re using any modern camera, then your original image may well be 3MB or more – when in fact you can load up a 200kb image that looks just as good and loads much quicker too. Did you know that you don’t need to perform these clicks to downsize your images in Photoshop every time – as in, if you need an image that’s about 995 x 650px (the max image size I need for this blog, but it can be any exact pixel dimension that you need), then Photoshop can create this for you with drag and drop simplicity. You won’t even have to open Photoshop once we’re done, it’ll make image creation for the web super speedy – let me show you how. 

Just a heads up – I’m currently using Photoshop CS6 on a Mac, but I used Actions and Droplets way back in CS4 (but the way the menu layout and location of buttons may have changed). The Windows version of Photoshop is very similar too, though the keyboard shortcuts and menu locations may differ slightly. 

Open your image in Photoshop

Do this any way you like, but I prefer dragging my image onto the icon in my dock (Mac) which causes that image to load within the program.

Go to your actions palette

I keep mine handy on the right hand side of my screen as I use it regularly. It looks like a little Play button. If you can’t see it, go to the Window menu and select Actions.

Create a new action

Do this by clicking on the button that looks like a piece of paper at the bottom of the Actions palette. Give your action a memorable name and choose a set where it will live. You can always move it to another set later, but this is essentially a folder within the Actions palette where this particular Action will live. Hit Create. You’ll see a red Record icon show up in the bottom of the Action palette. This means that anything you click from now on is being recorded into an action. This is the meaty, time-saving, potential of Actions – we’re doing this process just once to save you time every time you need to create an image of these particular dimensions.

Change the dimensions of your image

I’m going to set a maximum width, in this case 995px. Do this by going to the Image menu and selecting Image Size. I prefer the keyboard shortcut of Opt+Cmd+I to keep things moving along but the menu commands work too! My image already has a resolution of 72PPI. If yours is some higher value, you’ll want to change this to 72 (most screens only show 72PPI, so anything higher is generally pointless). Now I’ll make my image 995px wide. I’ve notice that this causes my image to be slightly less than my min-height of 665 px, so make sure you create something at least the size of the dimensions you want to cover – I’ll go for 1000px wide just to be sure. Hit OK.

Save for the web

As always, keyboard shortcuts get this done quickly – Opt+Cmd+Shift+S. Or File then Save For Web will get you there too. Here, I make sure I’m creating a JPG and that the quality is about 70 – it creates images of a fairly decent quality, but importantly, a smaller file size. Hit Save. Don’t change the filename, because while we’re recording this action, we’re telling all future files to do the same thing too! You should be able to safely change the location, however. I’ll just send mine to the Desktop.

Close the image and Don’t Save

This is important, as you don’t want to dump 20 photos onto your action that later require you to close them all – right?! It’s easy to forget that opening and closing files is something that Photoshop can do each time for you, so let the program do the monotonous close file options instead.

Stop the Action!

Go back to your action palette and stop recording this action by hitting the grey square next to the red recording light. Yay – we now have an action. This can be useful on its own, but we’re going to take it up another level. You see, opening Photoshop can have its own Action within this Action we’ve created. Neat.

Create a Droplet (a shortcut to the Action)

You’ll need to go to File, Automate, Create Droplet. This screen is where most of my actions run into trouble. Fear not, you can always try again if you need to! Start by choosing where you’ll want the Droplet (that will contain our Action) will live and what you’ll name it.

Select the Action you just created

Choose what to Play. We want to play the Action we created earlier, which you’ll find by the memorable name of the Action and the Set in which you placed it. Chances are, Photoshop knows exactly what you just created and has already selected it for you.

Tell your final files where to save

Select a destination for your new files. Select Save and Close. This Droplet will now exist where you told it to live. I’ve sent mine to the desktop – the icon looks like a Photoshop logo inside a big arrow. Test it out by dropping one of your large, original images onto the Droplet. If all goes to plan, you’ll find a smaller, appropriately sized version of this same image on the Desktop in seconds.

Important note – if you’re working with images on the desktop of the same file extension, your action will overwrite them!

Basically, the Droplet will spit out images at 1000px wide no matter what image I start with. It’s worth noting that if I use a really wide image, that the vertical dimensions of my outputted file will be really short. In the same way, if I have a tall image, my width will remain at 1000px but the height will be ridiculously big. Use the image cropper to get your framing right and avoid creating images that don’t actually suit the space in which you want to use them. 

Your Droplet is super easy to use!

Your droplet will work anytime you want it to – even if Photoshop is closed! It will create an image of the width you want, save in a web appropriate format + size and also close the original file. If you need 20 web-sized images, drag and drop all of them onto you droplet. It’s as easy as that.

Other uses

There is no end to what an Action + Droplet can do for you – if it’s something that happens in Photoshop, you can automate it. Make an image black and white, add effects, change the color space or file format, etc. – all without touching a button in the program. Dream big and save lots of time. Actions are also great for print applications too – I often use them to make CMYK TIFFs for brochures and flyers.

Need help still?

Digital Developments can handle your Content Managed Website, process your images and make your site look better. Just ask us and we’ll formulate a solution to suit your website and the content that you wish to have on the internet.