For many, Photoshop is an essential piece of their web designer’s toolkit. As part of the Adobe CC suite of tools, Photoshop is an app that all web designers should, at least, be familiar with.
Whether you’re creating custom graphics and logos for your websites or sketching out prototypes for clients, Photoshop is a powerful piece of software that can help you produce some great work, while enabling you to save time and effort. Furthermore, adding Photoshop to your web design toolkit needn’t mean breaking the bank.
One powerful aspect of Photoshop that isn’t widely known about is its actions feature. Photoshop actions allow you to record a sequence of tasks for playback on demand. This makes Photoshop actions perfect for automating those repetitive or complex tasks you carry out on a regular basis.
In this article, we’ll be starting out with a brief introduction to this powerful feature of Photoshop, before sharing 10 insanely useful Photoshop actions for web designers to help speed up your workflow.
- 1 What Are Photoshop Actions?
- 2 How to Create Your Own Photoshop Actions
- 3 How to Use Pre-Made Photoshop Actions
-
4
10 Insanely Useful Photoshop Actions Pre-Made for Web Designers
- 4.1 1) 1170 Grid System PS Action
- 4.2 2) Bootstrap Grid System Photoshop Action – 1170px
- 4.3 3) Lorem Ipsum Photoshop Actions
- 4.4 4) Long Shadow Generator Photoshop Action
- 4.5 5) Isometric 3D Perspective Mockup Photoshop Action
- 4.6 6) Retinize It
- 4.7 7) Vintage Retro Text Collection 7
- 4.8 8) Desktop Screen Display Action
- 4.9 9) 188 Actions Ultimate Bundle
- 4.10 10) Photoshop Browser UI Action
- 5 Where to Find More Photoshop Actions for Web Designers
- 6 Final Thoughts on Photoshop Actions
What Are Photoshop Actions?
Photoshop actions are a sequence of steps or actions that have been recorded
Photoshop actions are best described as a series of actions or steps, carried out in Photoshop, which have been recorded and saved as an action file. These sequences of actions can include anything you can do in Photoshop.
This could include creating new documents with specific dimensions, resizing an image, drawing shapes, applying filters, sketching out a wireframe, and saving a file in a specific folder on your computer.
This action created a grid layout that web designers will find useful
Once an action has been recorded, it can be played back at any time. As Photoshop actions can include just a few or many steps, they have the potential to save you lots of time and effort. They can also be a good way to avoid the need to memorize certain sequences, such as optimizing a photo, applying a certain effect, or creating a wireframe layout in a new Photoshop file.
As these action files can easily be exported and imported into the Photoshop software, they are perfect for sharing amongst users. This helps you to build up a library of time-saving process that you can playback at the touch of a button.
Actions can also be a great way to learn more advanced techniques in Photoshop. As you can view the individual steps that make up an action, you can learn what’s involved in creating a certain effect with this sometimes-overwhelming piece of software.
All Photoshop users are free to create and distribute their own actions. This means there are plenty of useful actions available as free downloadable files from the internet. There are also many commercial Photoshop actions that have been created by expert users to help others apply more advanced effects to their images or save more time when working.
Now you’re aware of the benefits of Photoshop actions, let’s find out how to use them, before checking out 10 Photoshop actions for web designers that can help you work smarter.
How to Create Your Own Photoshop Actions
If you already use photoshop regularly there are probably a handful of tasks you repeat all the time. Well, instead of repeating them step by step each time you can record them as actions and then complete them with a single click.
For example, let’s say you always apply certain image cropping and/or sizing to image elements for your blog posts or pages.
Here’s how you would record those as actions:
First, go to Window > Actions. A new control panel will appear.
Click the “create new action” icon (next to the trash can icon) and a dialogue box will appear.
You’ll be able to name your action as well as assign it to a new or existing set of actions. When you’re ready, click “record” and simply walk through the steps you’d like to automate.
When you’ve completed your desired steps, click the “stop” button icon next to the red “record” icon in the actions panel.
Now you’ve got a new action. Whatever steps your just recorded–whether they’re resizing your images, applying filters, effects, or anything else–you can now apply them to another image simply by selecting the action and clicking the “play” icon.
How to Use Pre-Made Photoshop Actions
As mentioned, Photoshop actions are available as individual files that can be imported and exported in and out of Photoshop.
Photoshop action files have the .atn extension
If you are downloading Photoshop action files from the internet, they will typically be archived into a zip file, which can be unpacked with an app like WinRAR. After extracting the archive to unpack the action file, you have a few options for adding it to Photoshop:
- Double click on the action file to import it into Photoshop
- Copy the action file into the Photoshop Actions folder on your computer
- Drag-and-drop the actions file into Actions panel within Photoshop
The location of the Photoshop Actions folder can vary from OS to OS
Photoshop includes a few actions to help you get started and after you’ve imported one or more additional actions, they will be listed in the Actions panel. This panel can be viewed by clicking on the Windows menu in Photoshop, and then selecting Actions from the list.
Photoshop Actions are displayed in their own window
When it comes to playing back an action, it’s simply a case of selecting the appropriate item from your actions library and hitting the play button. Then, the steps of action will be carried out, just as if someone has taken control of your computer (don’t worry, they haven’t!).
You’re also free to view and edit any of the steps that make up an action. This gives you the option of modifying them to better meet your needs. Reviewing the individual steps of an action can also help you learn what’s required to create a certain effect in Photoshop.
If you want to create your own actions, simply click on the Record button on the Actions window and perform the steps you’d like to save as a reusable action.
10 Insanely Useful Photoshop Actions Pre-Made for Web Designers
So, now that you know what Photoshop actions are and why you should be using them, let’s take a look at 10 Photoshop actions for web designers to help you get more done with less effort.
1) 1170 Grid System PS Action
Use this handy action to add a grid layout to your document
This action from Pixel Industry will create a 1200px wide document in Photoshop, with a 12-column grid layout to help you with your web design sketches.
Price: free | More Information
2) Bootstrap Grid System Photoshop Action – 1170px
Kickstart your Bootstrap layout with this action
This is another free action that quickly creates a grid layout for your web page designs. This time, the action creates a document that is 1600px wide and includes a Bootstrap grid layout – perfect for anyone designing for this popular responsive framework.
Price: free | More Information
3) Lorem Ipsum Photoshop Actions
Add a range of dummy text to your web page layouts
This free action makes it very easy to insert dummy text into your Photoshop documents. Now if you want to populate your web design mockups with headlines, body text, multiple columns of words, or even an entire dummy document, this action gives you plenty of options.
Price: free | More Information
4) Long Shadow Generator Photoshop Action
Get on board with this latest web design trend in just a few clicks
Want to instantly apply long shadows – one of the most popular design trends of the moment – to your work? Then this free Photoshop action, available for download from Web3Canvas, is a great time saver.
This package includes four actions that will add either 45 or 120-degree long shadows to your work. Once the playback starts, you’ll quickly see how much time and effort this web designer-friendly Photoshop action can save you.
Price: free | More Information
5) Isometric 3D Perspective Mockup Photoshop Action
Give your screenshots and mockups a quick 3D isometric makeover
If you want a quick and easy way to apply the popular isometric 3D perspective to your images, such as the screenshots of your products and the items in your portfolio, then this free Photoshop action is for you.
When running the action, you get four types of 3D depths to choose from, as well as two angles. This gives you a good selection of options for how your mockups will be transformed. For more isometric Photoshop actions, be sure to check out this impressive premium pack.
Price: free | More Information
6) Retinize It
Quickly create larger Retina-ready versions of your images
This simple but effective Photoshop action will quickly prepare your images for Retina displays. Depending on which action from the pack you run, you’ll get one, two, or three optimized images at 100%, 200%, and 300% of the original size.
Price: free | More Information
7) Vintage Retro Text Collection 7
Create stylish text based logos at the touch of a button
If you’re in need of a logo design for your project, then this set of 10 vintage and retro text actions should give you plenty of inspiration. Each action will transform your text in a way that would otherwise require serious design chops.
If you are interested in more text effect Photoshop Actions, there are much more available at the Graphic River marketplace.
Price: $5 | More Information
8) Desktop Screen Display Action
Creating professional screenshots is as easy as clicking play
The Desktop Screen Display Action gives you another way to publish attention-grabbing screenshots. Whether you’re publishing screenshots of your web design work for your portfolio or creating a sales page for your latest theme, this action makes the process of professionally presenting your images as easy as possible.
This pack contains five different actions, as well as the PSD files and layers you’ll need to create this effect.
Price: $5 | More Information
9) 188 Actions Ultimate Bundle
Upgrade your Photoshop Actions library with this 188-piece pack
While this action pack might not be free, it does include an impressive 188 items that will allow you to create a wide range of graphics and effects for your logos and other website content.
You can view screenshots of these actions on the developer’s page, but it’s safe to say that these actions cover a wide range of styles and trends, including vintage filters, retro actions, HDR presets, and other photographic effects. You’ll also find a collection of Facebook timeline covers thrown in too for good measure.
Price: $34 | More Information
10) Photoshop Browser UI Action
Add a minimal flat browser UI to your images
This action adds a minimal flat browser UI to your work, making it a perfect choice for giving your screenshots a little extra boost.
Price: free | More Information
Where to Find More Photoshop Actions for Web Designers
Transform with your images into sketches with Photoshop actions
The more you search for Photoshop actions, the more you’ll find. While most are aimed at photographers looking for a way to give their work a professional touch, there are still a few actions for web designers to be found.
Here are some places to look for Photoshop actions that web designers will find useful:
- Adobe hosts a library of actions for Photoshop
- Brusheezy has a good selection of prerecorded commands for Photoshop
- Creative Market sells a wide range of Photoshop actions for all types of projects
- Graphic River has over 6,000 commercial actions starting at just $2
- Shutter Pulse offers many professional actions for photographers
Final Thoughts on Photoshop Actions
I hope that this article has either introduced you to the potential of Photoshop actions or given you some more tools for your web design arsenal. Creating your own actions or downloading them is a great way to speed up you web design workflow and automate those boring tasks you find yourself doing every day.
How will Photoshop actions help you save time and work more efficiently? Please share your comments below.
Article thumbnail image by jiunn / shutterstock.com
I am just amazed to be here and to read this perfect post.Thanks for share this with us.I just delighted to read the perfect post.
Great resource!
Thanks for sharing these useful Photoshop actions!
The “Retinize It” action looks nice. I think it’s the one little gem i got out of this article.
Thanks for featuring Web3Canvas. I’m glad its helpful for the design community.
Hi Jeo, Indeed great post. There’s some great effects. Thanks for sharing with us.
This is an awesome collection, Joe. Looking forward trying it out. Thanks
Great article and great ideas, thank you!!!!
This is so great. Many thanks for sharing guys. You´re the best.
I am using actions almost daily, but did not use long shadow generator action till now, its good… i always wanted to make one long shadow icon for my android projects.
this will help any one to get to know photoshop.
This is a bang! Thanks for the massive tips, just got my head around this information in a more understanding level via this post. But can you create some actions for us to use for the premade template (Windows and Mac) you created for sliders and responsive designs from these posts?
http://www.elegantthemes.com/blog/freebie-of-the-week/free-thinkpad-psd-mockup-templates
http://www.elegantthemes.com/blog/freebie-of-the-week/lucid-theme-slider-templates
http://www.elegantthemes.com/blog/freebie-of-the-week/chameleon-theme-slider-templates
Hi, nice Article.
But one hint. Have allways a look at the Licence!
Many of the things are not for Commercial use, or like the 188 Actions Ultimate Bundle only for ONE Project!
What’s a good resource to discover what edit was used on Photoshop to create an effect? I have several photos that I know where edited with photoshop but don’t know how they did it.
I like Kelby training. Besides his paid training he has a YouTube channel with lots of good tips, a good place to check out his style and decide if you want to lay out the bucks.
Another good YouTube channel is Phlearn Photoshop and Photography Tutorials, he’s good and entertaining.
Hi John,
at the Beginning i use the NIC Filter Collection. Then i read some books, and try a lot. And now i use only that, what Photoshop and Lightroom bring nativ.
The Wonderbox called Camera-RAW 😉
Not to your photos, which are great, but online photos like from the Daily Beast and other artists who have used photoshop.
Witch Pictures did you mean?
And belong to the Article, all the ATN use only things that are build in PS.
ATN is nothing else than an automatic Workflow.
One of my can’t-live-without Actions is one we put together for use in our Facebook ad creation.
As most know, there is a strict 5 section limit for use of type within a FB ad. The action we made instantly drops in a layer with the FB grid as an overlay.
The section mentioned above are created by placing 4 lines, horizontally and vertically on the image. The use of 5 sections keeps type-use within FB’s 20% rule.
What a handy Action.
Is it available to all or is there a link to the developer’s site?
Good article. Batch edits would have been a good thing to touch on. If anyone doesn’t know what batch editing is, go to File -> Batch edit… to apply a single action to a bunch of different files at once. I use this sometimes to resize folders full of pictures in seconds
Hey Ethan, I agree! Batch edits are amazing. Maybe we can follow up with that or add it to this post. I’ll have to think on how best to share that 🙂
I agree Ethan.
Use of actions within batch edit is an awesome time-saver.
—M
Thanks Ethan
Never knew that , what a time saver 🙂
I like these actions, but I’d love to see a series on how to actually create these effects without an action. Thank you!
Great collections. Thanks for sharing.
It’s not free to download. On the page it clearly states “Only customers who legitimately purchased CS2 or Acrobat 7 and need to maintain their current use of these products may use the serial numbers provided during the download.”
Of course there are alternatives to Photoshop. It should be noted that CorelDRAW Graphics Suite also has scripting abilities and is available for significantly less money. Not only is it cheaper than Adobe products, but you can pay once and use it for as long as it meets your requirements whereas with Adobe products, you’ll have to pay Adobe every month FOREVER or lose access to their products and therefore all the artwork you’ve created.
Adobe has used their relative monopoly to turn their customers into cows, ready to be milked until there is nothing left. But hey, cool actions. 🙂
I think anyone reading this knows the “artwork” is yours and can be used without Adobe, jpegs and tiffs can be used without anything at all. I’ve had Adobe since 1999 and usually upgraded at least every other release and that is pretty close to $120 a year. The plus with CC is you get upgrades more often and Adobe has a steady income to support and improve their brand, kinda like reseller hosting for me.
Photoshop Elements is still being sold and does most of the photo editing (and actions) that Photoshop does.
Let’s hear it for the Cows.
Ron, obviously you can still use your exported/saved raster images. What I was clearly referring to is the source/work files. How do you edit complex AI/PSD files without Illustrator or Photoshop or purchasing some other piece of software that has partial AI/PSD import abilities? Sure you have your raster image, but you’ll never be able to open the file you used to create that raster image to make changes, therefore you have lost your artwork… or at the very least your ability to modify your artwork along with all the hours spent creating that artwork.
You used to spend $120/yr? That’s great. But unless you ONLY plan on using Photoshop, the CC membership is $50/mo, which means you’ll have to spend $600/yr to maintain access to your software and your source/work files… Awesome deal! So now you’re tied into spending $600/yr in perpetuity just to maintain access to your source/work files and to get updates quicker, updates you would have gotten anyway if you chose to upgrade when a new version was released under the old system.
The point is that Adobe has stripped away a person’s ability to determine the value of each update. You either constantly pay them forever, even if you don’t use a single new feature they release, or you lose access to your source/work files. You can no longer pay once for their software, then use it for as long as it suits YOUR needs.
Let’s hear it for the cows indeed.
By the way, if you need help in understanding how ridiculous Adobe’s SaaS pricing model is, try applying the same model to non-software fields. Imagine a carpenter having to pay a monthly fee for every tool he/she uses to build a house. Hammer?… that’ll be $10/mo in perpetuity. Drill?… that’ll be $15/mo. Screwdriver?… $8/mo… and on and on and on. And should that carpenter not be able to afford those monthly fees for whatever economic reason, he or she loses access to those tools and can’t build anymore houses.
But hey, as long as the tool company gets their steady income to improve their brand and create new tools that the carpenter doesn’t need and can’t afford to pay for every month.
I guess we could go on quite a while on this. I thought we were talking about Photoshop. With all the comments you make you may not have owned any of the versions before. Although I use Adobe CC I do have the Adobe CS series on my computer at no charge, staying up to date is my choice.
As for your carpenter, I think I saw him at the home center replacing some lost and worn tools. He said he was having to buy more and more each year as most of his are becoming obsolete. Said he was thinking of getting in the tool rental business, that’s where the big bucks are.
We have different views, you can have the last word, I give.
Hey Peter,
I’m not saying that I love paying $50/month for Adobe CC, but to offer a bit of a counter-point: the carpenter’s tools don’t stop working when RealityOS 2.0 comes out. Or in other words, Adobe has to maintain these tools so that they’ll continue to work on people’s computers. Not to mention keeping up with changing standards, addressing bugs, adding features, etc.
They don’t simply code them once and then they will work forever. It’s dynamic. And that costs them money to do–which they bill for. And they should.
Also, the old model was even more expensive. It was well over $1,000 per year for the full suite and still sold as an annual license. As a result, people pirated the hell out of Adobe products and everyone was worse off for it.
With Adobe CC you get everything for a much lower monthly cost. And pirating is not even possible. So everyone wins. Except, as you have pointed out, anyone who wants to edit their adobe created files without a current subscription.
That does suck. But in the grand scheme of things, the pool of those particular users is likely very small compared to the average user who will keep their subscription active because they use these apps all the time.
The good news for you and others in your situation is that there are some free lite versions of some apps via adobe. There are also cheaper apps like pixelmator that are one and done purchases that support some adobe file types.
Just wanted to toss in my two cents. Hope you can find an ideal solution!
Best,
Nathan
Awesome. Looking forward to digging into this one.
Super cool! – Thanks, there’s some great effects there.
Nice! for rules of good using Photoshop for design!! Thanks.
Awesome… Thank you very much Joe!!!
I use actions everyday. I have just made a library of actions for quickly adding the Divi grids to my psd’s. This is very useful for me to be able to quickly add the grid – for example I have Divi 2/3 – 1/3, Divi 1/5 – 1/5. etc saved as seprate actions. This might be something you can add to the Members Area for designers to download!
Hi Kyra,
I am trying to find an action for Photoshop that re-sizes font to a certain size for multiple files.
I have name labels that I would like the last name to occupy the same space whether the name is long or short. Example: If the longest name is WILLIAMS and the shortest name is FOLK I would like my labels to stretch FOLK to the same size as WILLIAMS.
I am going to be using Adobe’s Data Set to pump out 300 name labels with different names. Then I am hoping someone can help me locate an PS Action that will take all the last names variable and stretch to the same size for all 300 files.
Do you know of such Action that is out there or do you have a similar one?
Any assistance in this will be greatly appreciated, and thank you for your time.
Thank you for sharing this, this is super useful!!!!
Greetings Kyra, have you published yet a link for your actions to be downloaded?
Your description sounds like these would be helpful for productivity.
Thanks in advance!
Michael
Hi Michael
OK – I have never shared my actions before – let me know how it goes for you and if the file works. I uploaded them here for you and anyone else interested in the Divi grid.
https://webdesign101.berlin/divi-builder-free-photoshop-actions-download/
Thanks
Kyra
thanks for sharing Kyra!