Recently I’ve been thinking about how to speed up my web design processes by not repeating the same tasks for every design I do. As I design mostly in Photoshop I realised I can take advantage of Photoshop’s handy “Actions” and “Styles” panels.
You can basically record any ‘procedure’ you do as an action in Photoshop and it will replicate that procedure on anything you like, as many times as you like. It can save you a lot of time and prevent you from repeating yourself over and over. You can apply an action to a group of images, files, or even just a few objects within your document.
Here is a great tutorial on setting up your own actions
I use actions for a multitude of things. When I have to optimise a bunch of images to upload to a gallery for example, I batch process them through on my own ‘optimised for web’ action.
Batch processing is simply a way you can apply your pre-made actions (or one of Photoshop’s inbuilt actions) to a set of files or images within a folder. You can set it up to run on its own while you go and make a coffee (or get on to some other work)!
To use batch processing in Photoshop; you simply select ‘File’ / ‘Automate’ / ‘Batch’ and within the Batch screen select your actions and which folder you want to apply it to – and away you go!
Here are some helpful, free actions available online:
- Creating folder structures – This is a good idea, it helps you setup a nice framework of folders in your layers panel to keep your designs organised
- Nice framing actions – sets up a classy frame around your image with or without a caption ready to go
Some other interesting ones:
- Creating reflections – Creates a nice reflection effect on your images
- Bending photo corners – Creates a great ‘realistic’ photo or polaroid effect
- Rule of thirds – A nice little trick for cropping photos in an aesthetic way
- Black & White Conversion – Exactly what is says, a group of simple and effective black and white conversion actions
And if you’re willing to put up the cash, there are tonnes of amazing actions available online for a fee. Some of my favourites are at Totally Rad Actions and Eye Candy Actions (I might be a bit biased as that is my talented cousin Sheye’s action site). I highly recommend you check them out.
Layer styles are something you probably already use when you’re designing in Photoshop, but one of the handier points to them is the Save function. If you have a set of styles you want to apply to a group of objects across the whole design, you can simply save that set of styles, and using the styles palette – apply them to any object within a layer. This is great for keeping your design consistent across your whole site.
If you need some inspiration for creating your own layer styles, just do a quick Google search and you can find hundreds of free quality layer styles to download. Here is a great collection of web 2.0 layer styles.
One more resource that is helpful for your design process is to use grid systems. Grid systems are basically template files with ‘invisible’ grid lines already set up to help you to keep your design aligned and much more organised. Here is a page with links to some of the most popular systems available free online: Grid systems.
If you start applying all these techniques to your design I think you will get a great workflow going.
Maybe you can go even further, like setting up your own keyboard shortcuts or finding handy plugins… The possibilities are endless!
Keira 
About Dean
