Web Design Tutorial, Photoshop Actions

Script From The Video Blog

James – Hi, Welcome to our Web Design Video Blog. This week we’re just going to show you a quick tutorial on how to use photoshop actions.

Nick – OK, so actions allows you to record a series of events within photoshop. It then allows you to batch update a set of files or folders. Now, within web design it’s great for re-sizing a set of images for a gallery, or even watermarking a set of graphics. You can also use it to save a technique for future reference.

James – So, I’ve got some photographs on my desktop in a folder called images. I’ve just prepared seven for this demonstration. They are all nature shots. So, if these are all going straight onto my website in a gallery. So, what I want to have is some smaller black and white thumbnails so when you roll over them these larger, colour ones appear.

So obviously just doing seven of them the batch action update probably wouldn’t really be that relevant but obviously if you’ve got tens or even hundreds of photographs the batch automation can save you a lot of time and also make sure that things are done consistently.

So, in order to record the action, so the first thing I want to do is open one of the graphics first of all, and create the action. all you have to do is make the action, so lets say we call this ‘resize thumbs’ for example. What you can also do is create a function key, so you can have a shortcut so lets say we open up the next photograph that we want to process, we could use the shortcut which we could set as ‘shift F1′ – But I’ll show you more about that in a moment.

Right so, once you click record you’ll see here the record button’s on, we’ve started to record the events that are about to happen to this graphic.

So, the first thing we’re going to do is resize the image, so I want my thumbnails to be 100 pixels wide, like so. You can see already over here the first action has been recorded ‘image size’. Then I want to make them all black and white, I’m just going to ‘Adjustments’ and then ‘Desaturate’. Again ‘Desaturate’ has been recorded in the event as an action.

It’s not just resizing and desaturate that you can use this for watermarking your pictures, like Nick said, applying all manner of filters. If you wanted to apply the same process to lots of photographs – anything you like.

OK, so the next thing we want to do is save it, so I’ll ‘Save for Web’. We’ll just save it as a JPEG. I’ve already prepared a Desktop on my folder called ‘Thumbs’ – ready to store all these thumbnails in, so I’ll just save it in there.

So my ‘Resize Thumbs’ action has ‘image size’, ‘desaturate’, and then also ‘export’. So that’s what I want to happen with all of my seven photographs that I’ve prepared.

So, once that action’s finished I would just push ‘Stop’.

OK so in order to process the rest of the graphics in that images folder we can then go to ‘Automate’ and ‘Batch’.

So, you select the action from the list. The latest one that we’ve just made is the default, or you can select one that you’ve made previously. So, ‘resize thumbs’.

The Source – that would be the folder on the desktop, so lets just choose that – so that would be desktop, then images, so this is the source of images that are going to be done in the batch update.

OK so the destination of the output, again is going to be a folder, and we’re going to import this into the thumbnail folder to join the first one that we’ve already processed – so we click Choose.

If you have a ‘save’ command, like I have ‘save for web’ you need to override the Save As command, so that it’s all done automatically so you can sit back and watch them all save.

So we click OK. There’s quite a few other settings on here in terms of file names and so forth so have a bit of a play around with those. So click ‘OK’

And, as you can see the Batch Update is about to start and you’ll see all of the images opening, resizing and saving, like so.

So, depending on how many photos you’ve got, the file sizes of them, this can take anything from 30 seconds to hours, so there goes number 6… This is the last one – and that’s it! You batch update is done. If we go into our thumbnails folder, you can see all of our thumbnails have now been processed. For the sake of doing 7 it may not be worth it but if you’ve got 10s or 100s of these photographs then Batch Update can save you an awful lot of time.

Also, if we were to open one up – lets say we’d missed one out or we had one more to add in we could open the graphic in photoshop, and then we could use the shortcut, which I think was Shift F1, and you can see that will just process it on that one photograph.

OK, so thats Actions and Batch Updates.

I’m on Holiday next week, so Michael Angrave is going to step in for me and do a video with Nick. We’ve also been invited to do a guest video blog for webdesignlessons.com, so Nick and Michael are actually going to record a video for them for their blog.

Nick- Thanks for Watching.

Thank you for watching, please subscribe to our YouTube Channel, or follow us on Twitter at http://twitter.com/crearegroup.