Introduction
The other day I was writing a roundup style post here on MIB that required a bunch of screenshots. I was capturing the shots, bringing them into Photoshop, then tediously editing each individual one. It didn’t take me long to realized I was wasting a lot of time. A commodity which us designers never seem to have enough of. The simple solution was to create a Photoshop action to handle the dirty work of repetitive steps. PS actions are beautifully suited to save time for us lazy (I mean productive) designers. The result was so simple and easy, I wanted to share it here with you.
First, A Little Bit About Photoshop Actions
Actions are scripts you can set up within Photoshop to help you handle repetitive tasks. Quite simply, you can record your steps during a project, then play those steps back the next time you’d like to do the same thing. There is a very nice compilation over at Smashing Magazine of free actions you can download and use. You can find them here in: The Ultimate Collection Of Useful Photoshop Actions.
Now, The Tutorial
Here’s how to create a simple Photoshop action for tilting, blurring and vignetting screenshots.
Step 1
Open up Photoshop and start a new document at the size you want to use. Mine is set for 575px by 250px. Then grab a screenshot to use, to follow along with. Copy and paste it in your new document.
Step 2
Now bring up your actions palette. If you don’t see it in your panels, click window->actions. If this is your first time using actions, you’ll notice you have a bunch of default actions that Photoshop provides from the get go. Definitely check them out and see what they offer, some can be quite handy. For the purposes of this tutorial and future action additions, I suggest you make a separate folder. To do so, click on the small folder icon at the bottom of the palette just like you would within the layers palette. I called my folder, “My Actions”.
Step 3
Click on the Create a new action icon directly to the right of the New folder button you selected in the last step. Name your action then click Record.
Step 4
As soon as you create a new action you will notice the red record button is on. A few quick things to note about that. First off, don’t worry it’s not recording in actual time, your procedural steps are recorded and nothing else. Photoshop will wait for you to do something for days if you’d like, it will only record actually steps, so you’re there’s no rush. Also, as you make steps you’ll notice they will be listed below your action. If you don’t like a step, or change your mind you can always click the stop button and throw away (drag it to the trash) the step you don’t like, then click record again when you are ready.
The first thing we want to record is tilting the image, so click ‘command + t’ to bring up the free transform tool. In the properties at the top set the rotation to -5 degrees. Then click back on the image and hit enter to accept the tranform. Take notice of the step being recorded in the actions palette.
Step 5
Now we are going to move the image into place. Hit ‘command + t’ again and drag the screenshot to where you think it looks best. This step will vary depending on the screenshot you use. So we will should place a stop action on it. To add one, toggle on the stop action icon next to the check mark, as shown in the image below. You could very easily have combined this and the last step, but I like the flexibility of breaking them up.
Step 6
Next up, hit ‘command + j’ to make a copy of the current layer.
Step 7
In the next step we are going to blur the original copy of the screenshot, so we can eventually mask the top layer. So we need to select the original image layer, but by simply clicking on that layer, the actions will set up a direct command for that layer name. Therefore, our action for a different screenshot will not work when we try to reuse it. Fortunately, the keyboard shortcut says to select a layer in reference to the current one, so that does the trick. All that is to say, hit ‘alt + [' to select the layer below the highlighted one.
d
Step 8
Now set your blur. Click Filter->Blur->Gaussian Blur and move the radius slider to around 2px and click ok.
Step 9
Next we need to select the top layer, so we can use a mask to reveal some of that blur. We will use the same technique as before, only this time we need to select the layer above the active layer, so press 'alt + ]‘.
Step 10
Add a layer mask to the top layer by clicking Layer->Layer Mask->Reveal All. Then grab the gradient tool (shorcut ‘G’ on the keyboard) and setup a white to gray to white gradient like the one referenced below. Click and drag from left to right on your image at an angle approximately like the tilt you setup earlier. This will reveal some of the blur at the edges.
Step 11
Create a new layer by clicking Layer->New->Layer. Grab the rectangle marquee tool (shortcut ‘M’ on the keyboard and make a selection like the one shown below. Feather the selection by clicking Select->Modify->Feather and choose 20px.
Step 12
Select the inverse by clicking Select->Inverse. Then set your background color to black and hit ‘command + backspace’ to fill your selection with black. This will feather a dark border around our image, it’s a bit overwhelming, so we’ll temper that in our next step.
Step 13
Change the layers blending mode to ‘Soft Light’ by clicking on the pull down menu in the layers palette where it currently says normal. I also would encourage you to add a stop action on this step because playing with the blending modes will give you different variations. Plus the effect will be dependant on the lighting of the image.
The Final Result
Here is what my result was after stepping through this action. Now, if you want to use the same technique on other screenshots all you have to do is grab the screenshot, bring it into a new document, and press play.
Download the Action
Thanks to the request of delooks you can now download this action for your own use. To install it, just place the file your actions folder. If you installed it in the default directory on a Windows PC then it would be located here: C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Actions
The Action in Action
Here are a couple of quick examples of the action applied to a couple of my favorite blogs.
Conclusion
I hope this short tutorial gives you a glimpse at how powerful PS actions can be. I always love hearing back from the design community! Drop a comment below, tell us. What do you think of actions? What good uses have you found for them?
Sharing is Caring
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
MyInkBlog
Email Updates
Twitter
Facebook
Flickr
Designmoo
Digg
Stumble Upon
January 26, 2009
Woo thanks for featuring PSDFAN Andrew :) I was going to leave a comment anyway though ;) I shamefully have yet to try Photoshop actions, and I’m definitely going to refer back to this article later today to get to grips with them. Thanks for this post.
Tom Ross´s last post was… What PSDFAN Content Do You Want To See?
January 26, 2009
LOVE using Photoshop Actions. Prior to being able to customize keyboard shortcuts in PS, I used Actions to do it. So much time can be saved using Actions it’s not even funny.
Jim´s last post was… Free Silk icon collection – 1,000 icons for your Web design projects
January 26, 2009
Last week is when I first noticed how designers were uniquely presenting screen shots with a tilt. I’m so happy to have landed on this post that shares the “how to” along the actionscript set up. Very nice.
Ms. Latina Renee´s last post was… Video Search Software
January 26, 2009
Great article, I think I really need to start doing this, so perfect timing with this tut!
January 26, 2009
Very useful tutorial Andrew. Great stuff :)
Dmitry´s last post was… The Proper Way to Draw Rounded Corners
January 26, 2009
Thanks for all the kind feedback here! It’s good to see everyone finds actions as useful as I do :)
January 26, 2009
Great tutorial, thank you! I’ve never set up my own photoshop actions even though I’ve known for a while that I needed to in order to save time.
Angie Bowen´s last post was… Arbenting’s Best of the Week for 01/18 – 01/25
January 26, 2009
Great tut! PS actions are such time savers! I’ll have to try this.
Stumbled!
Tim (DAT)´s last post was… Sumo Paint – Free Online Alternative to Photoshop
January 26, 2009
Nice article Andrew!
http://twitter.com/Colorburned
Colorburned´s last post was… CLOSE OUT! All Items Just $6!
January 27, 2009
Well.done, powerful tricks, thx again!!!
brtak´s last post was… Hey!!! Dear readers!!! Phirebase v3 is here!!!
January 27, 2009
Well done Andrew, you made it look so simple. Photoshop actions are really, REALLY powerful when used like this :) .
Keep up the good work!
Marco´s last post was… Spotlight: T-shirt design from Aled Lewis
January 27, 2009
Great Tutorial!
Is the action available as a download. Ready to use?
Please send me!!!
delooks´s last post was… Fit durch den Herbst
January 27, 2009
With your action tutorial, we’re bound to start seeing a lot of different blogs showcasing tilted, vignetted screenshots.
Thanks for the article!
January 27, 2009
thanks for the helpful tutorial..
January 27, 2009
Nice reminder about the power of using Action, Andrew!
I don’t know if you’re aware (and if so, someone else might learn something here), but you can create variable strength blurs without using a layer mask — if you have a feathered selection and then set a blur, then the strength of the blur will decrease along with the feathering.
Of course, the flexibility of the layer mask allows you to customise each particular screenshot if you like, and so it’s more appropriate here, but it’s another option.
January 27, 2009
@Rob, I love the feedback, I didn’t know that trick! I’ll definitely give that a try :)
January 27, 2009
@delooks Good call, I added the action as a freebie at the bottom of this post!
January 28, 2009
Hey,
Really good tutorial. I presume this running as an action is only relevant if you have already made your screen shots, cropped them to the right bit of the screen and saved them as a seperate file?
I was really hoping that this was somehow magically going to be scripting in something to do print screen + then style + save to new location.
All the same, a really nice insight into current screen style trends.
Avangelist´s last post was… The Haunted @ Concorde2 Brighton UK 23.01.2009
January 28, 2009
@Avangelist You could add in a save action, and even a resize to the action if you wanted. For my example, I just wanted to keep it as flexible as possible, although adding a stop action to those two steps would do the trick. As for copying the screen, I don’t know a trick for that other than the print screen button (on PC) or ‘command + 3′ (on mac) are short enough :)
January 29, 2009
very nice tutorial. Thanks for the ideas.
January 30, 2009
Truly useful tutorial Andrew – I love finding stuff like this.
Possible future upgrade: Adding scan lines to make it appear as a photograph of a screen. Sometimes that’s a good approach to presenting a screenshot.
Adam Wagner´s last post was… Become Successful: Treat Your Clients Like Rock Stars
January 30, 2009
This is a great tutorial!! Thanks!
Soh Tanaka´s last post was… Got Trolls? Give em the Boot with .htaccess
February 1, 2009
Thx mate, great Tutorial. I will use it for my next portfolio design :)
Andre´s last post was… Freebie: Mauszeiger als Vektorgrafik
February 12, 2009
I still don’t understand the step 7 and step 9. Why did you move the copied layer down and up? “command+[” in windows means “ctr+[” or “alt+[“?
Benhuoer´s last post was… 豆瓣二三事
February 12, 2009
@Benhuoer The reason you have to use the keyboard command instead of just clicking the layer has to do with the way Photoshop records actions. If you click it, ps records the actual layer, so it will get confused the next time you try to run the action. Therefore, photoshop will understand better when you use relative actions. ie. in essence you are telling the action to select the layer above or below the active one. Hope this explanation makes sense to you, if not, let me know.
February 12, 2009
What I mean is, what’s the difference between moving and not moving? In Step 7 and Step 9, you said “select” layers, but what the keyboard command “command+]/[" would do is actually moving the layers, right? You moved the copy of the original image beneath the origin then moved it above. What diffenrence these two steps would make, comparing to not moving it at all?
I don't know whether "command+]” in Mac equals to “ctr+]” or “alt+]” in PC. The former goes for move, and the latter goes for select. If you did mean “select” in step7&9, the result wound not be in that way.
Anyway, maybe my confusion was all because of my poor English. Maybe I understood some sentences in the wrong way.
Thanks for your patient explanation.
BTW, I translated this tutorial into Chinese ’cause I founded it very useful. Hope you don’t mind!
Benhuoer´s last post was… [翻译]Photoshop动作功能实例-制作规范化的截屏图
February 12, 2009
@Benhuoer I think I see what the hangup is now. It’s ‘alt + [' or 'alt + ]‘ to move to relative layers on a Mac. I apologize for typing this in wrong. I’ll have to go through and edit those mistakes. Thanks for catching that.
Also, thank you for the heads up about translating the tutorial onto your blog in Chinese. Since the majority of your readers can’t read my blog and vice versa, I don’t see that as a problem. Just please mention the source and link back to this blog. Thanks!
February 12, 2009
Check out http://www.ninethreestudio.com He does a great job with this affect!
Justin Moore-Brown´s last post was… What’s in your bookshelf?
February 13, 2009
It seems to me that in step 10 the gradient shown is backwards. I made mine grey to white, white to gray in order to make the mask properly show the center as in focus and blur the edges.
March 3, 2009
saved in my delicoius and digg account, hope willl have an occasion to try it soon.
March 8, 2009
Andrew,
thanks for a great tutorial and download. I am already using the action for my own blog.
March 22, 2009
Somehow Ps Actions always fail with me….I knw I gotta change something about the permission levels in Vista but couldn’t be bothered to…
April 30, 2009
Wow good technique there! awesome!
September 23, 2009
What a fantastic walk-through for making an action in PhotoShop! I learned more than a trick or two, thanks so much!
.-= Ginger´s last blog ..PhotoShop shortcuts make for easy work =-.
September 24, 2009
great this what im lookin for too..bookmarked
December 10, 2009
Hi Andrew, thanks for the great tutorial and technique, got a feeling I’m going to be using this fairly often so the photoshop action is going to be a big help!
December 26, 2009
simple, yet effective ways. nice idea for using this technique in an actions.
January 1, 2010
To be completely honest, I have absolutely no experience using PS actions. Never really heard of them even until a few days ago, but they seem really useful. I have been looking into these a bit more recently and came across this. This explains a lot, thanks for sharing. :)
January 26, 2010
Great ideas, thanks for sharing such a nice tutorial.