Photoshop Actions – Creating Folder Structures for Web Designs – Tutorial

This tutorial will show you how to create Photoshop actions and more specifically how to create an action to create a folder structure for your web design layouts

When creating a screen design of a web page organisation is key, keeping layers in folders enables you to quickly move or hide any layers that you need to. When you initially open Photoshop you should create folders to do this, hence a Photoshop action to do it all instantly, every time you want to design a new layout, here is how.

Video Tutorial

Text Tutorial

These Images and text support the video Tutorial

Step 1 – Actions Panel

step1

Go to Window > Actions or use keyboard shortcut ( Alt + F9 )

Step 2 – A Folder for your Actions

step2

Create a new (label 1 step 2) folder to keep any actions that you make, you can put them all in one folder so you know where they are or create new folders depending on the type of action you are creating.

Step 3 – Create folders and layers for organisation

step3

Create a new action (label 2 step 2) and give it a descriptive name so you can easily tell what it does, you can give it a shortcut key as well using the F1-12 keys , some are already occupied by Photoshop default shortcuts but you can overwrite them.

Here are the defaults using F1-12 keys

F1 – Adobe Online Help
F5 – Brush style palette
Shift + F5 – Fill Layer Dialogue Box
F6 – Colour, Swatches, Styles palette
F7 – Layers, Channels, Paths palette
F8 – Navigator, Info palette
F9 – Actions, History, Presets palette

Step 4 – Create a new document

step4

Create a new canvas that is suitable for your web design layouts ( Ctrl + N ) you can even give it a default name

Step 5 – Folder Structure

step5

You have your blank canvas and now you need to create your folders that you will use to organise your web designs make as many folders as you need.

Step 6 – Stop Recording and Test

step6

Hit the stop button (label 3 step 2) so that no more actions or mouse clicks are recorded your action should now be complete hit the shortcut key you assigned it in the video it was F2.

Conclusion

There are so many ways you can use actions to record your clicks and settings try and experiment and think about what you do the most in Photoshop and try to create an action for it…maybe cropping images!.

Comments

Was this tutorial clear and easy to understand? do you use any actions in Photoshop, if so please let us know in the comments below.

Author of this post: Max Stanworth

Iam the creator and editor of Design Shard, I created this blog to post my inspirations, work and free resources that I hope others find interesting too you can also follow me on twitter @designshard. See all posts by: Max Stanworth

19 Comments (Leave a Comment)

Max

September 3, 2012

Hey, great tutorial! Thanks!
Reply
Andre

January 25, 2011

Awesome video mate, I have learned much indeed. Been using PS for 5 years now and I’ve always wondered what actions were for. haha.
This will increase my work flow for sure!!

Thanks Max.
Cheers
Reply
Bobby Antonovich

June 27, 2010

there are some great points in this article now to do more research
Reply
Cristina

February 25, 2010

Best tutorial i ever watch !!!!

I will follow your website

Thanks
.-= Cristina´s last blog ..How to mount .bin .cue files on MAC OS X =-.
Reply
Kumaravelan

November 11, 2009

Thankyou for your post!
Reply
download funny videos

April 26, 2009

VRy interesting to read it :P :D
Reply
Raymond Selda

December 1, 2008

I really learned something from this! Thank you for posting your work tips. I’m familiar with actions but never really thought about using it in designing layouts. I’m definitely going to use this in my next projects. Thank you!

Raymond Selda´s latest blog post..Free Professional Dark Website Layout PSD
Reply
Angie Bowen

November 30, 2008

Thanks Max! I’ve never used actions in Photoshop before but I can see where they would save a lot of time. I’ll definitely be trying them out now.

Angie Bowen´s latest blog post..Inspiration in Neutral
Reply
- Laxman
  
  June 29, 2011
  
  He Angie how r u? r u a web designer if yes let me know “laxman_xevoke@hotmail.com” plz I need ur help
  
  Thanks
Dainis Graveris

November 27, 2008

interesting idea..I understand this is like creating some kind of template for later use..:) I didn’t think about this kind of organizing, I guess I haven’t so much repeatless actions to do for now. but made me think, thanks :)

Dainis Graveris´s latest blog post..11 Useful Sources To Learn and Improve HTML Skills
Reply
2lip

November 25, 2008

very useful tutorial! will definately incorporate this action for all future web design projects. great time saver!

2lip´s latest blog post..Huge collection of 200+ Texture brushes
Reply
Max | Design Shard

@designshard November 24, 2008

@ Matt – no it never really occured to me to make my organisation folders in to an action it really helps tho, you can even create some layers in the folders for starters!

@Colorburned – Thanks, great illustrator swatchs btw!
Reply
Colorburned

November 24, 2008

Great tutorial Max!

Colorburned´s latest blog post..25 Seamless Polka Dot Pattern Swatches
Reply
Matt

November 24, 2008

nice tutorial. actions can save so much time. I had never thought to do this before, but I am definitely going to have to give it a go now.

thanks!

Matt´s latest blog post..Friday’s Five: Week 14
Reply