Quick Tip: Speed Up Your Workflow With Photoshop Actions
videos

Quick Tip: Speed Up Your Workflow With Photoshop Actions

on Apr 6th 2012 with 34 comments
Tutorial Details
  • Topic: Workflow
  • Difficulty: Beginner
  • Screencast duration: 8 mins
Download Source Files

Avoiding repetitive tasks is always going to speed up your workflow. In today’s Quick Tip we’ll do just that, by utilizing Photoshop’s actions panel and combining it with hotkeys. Watch this quick screencast and I guarantee you’ll save tons of time next time you’re designing!

Watch Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube!

Additional Resources

Know of any other web design Photoshop action resources? Let us know in the comments and we’ll add them to the list!

Speeding Up the Slicing Action Even More..

Thanks to Roel for this addition!

After you’ve added the “Save for Web menu item”, instead of adding a new “Insert Menu Item Option” with “File Close”, just close the document and select “Don’t Save”.

This will also create a Close action but with option “Saving: no” added to it.

By creating the action like this, the only thing you need to do after starting the action is save the slice in the “Save for Web & Devices”. After hitting the “save button” you’ll return to your original Photoshop document without having to close the sliced document first.

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://hongducdesign.com Duc Hong

    wow this is really helpful especially the slice images for web part, that saves lots and lots of time

  • Pingback: Photoshop - Techniques | Pearltrees

  • http://www.kholis.net kholis net

    This is just amazing .. the way you explain things is so clear .. I hope you continue with these series… thanks very much .. :)

  • Viktor

    Great stuff Adi!

  • http://www.themer.me Methemer

    Thank you Adi! This was a superb quick-tip.
    I guess I never actually paid any attention to Photoshop actions at all. Always thinking to myself “yeaahhh…welll…someday I maybe might look at them just a little bit”.
    Now that I’ve seen actions in action, I’ll probably start using them finally :)

    • http://www.adipurdila.com AdiPurdila
      Author

      Haha, I know what you mean, I was doing that as well and when I finally used them and saw how cool it is I had one of those “ahaaaaaaa” moments :D

  • http://pangomedia.se Christian

    Hey Adi. This is great. But one thing I don’t really understand is how to use the function keys. Actually I have always wondered in general how to use the function keys as a key command because for example F1 will just decrease the brightness on the screen. How do I press it as a command instead of decreasing the brightness on my MacBook?

  • Brenda Malone

    Ahh, you have amazed me again. Such a simple process that I have never exploited, but will from now on. Thank you Adi, super cool!

  • Pingback: Quick Tip: Speed Up Your Workflow With Photoshop Actions | Shadowtek Hosting and Design Solutions

  • http://www.redubl.com Dustin James

    Wow, Adi, every time I see a quick tip from you my job becomes more enjoyable – if there is anyway, please tell Envato that we want more quick tips from you.

    Thanks a hundred times.

    Dustin

    • http://www.snaptin.com Ian Yates

      Don’t worry Dustin – I’m pretty sure Adi knows how much we always appreciate his contributions. If he doesn’t – Adi, we always appreciate your contributions :)

      • http://www.adipurdila.com AdiPurdila
        Author

        Hehe, thanks :D

  • abdulaziz

    wow this is great actually you broke layer cake app now :) http://macrabbit.com/layercake/

  • http://cansurmeli.com C@N

    Great job. :))

  • Muhammad Raza Ali Khan

    Once again, awesome tutorial. I literally wait for tutorials from you. You have great way of explanation.

  • juanfevasquez

    Thanks a lot! I´ve used actions for a while but I´d never used the Insert Menu Item before for saving. Great tip.

  • Hamid

    Once again thank you adi your articles are so amazing:-)

  • http://think360studio.com/ Think360studio

    Wow Adi you did a great help to me by saving my lot of time with your Quik Tip. Thanks for sharing this valuable article.

  • http://caseydarr.com Casey Darr

    Thanks for helping me with that extra step for Photoshop actions. I always wondered how you could automate menu items and now I know!

  • Alin

    Haha! Te urmaresc de ceva vreme si nu stiam ca esti din Romania. Bv man, esti tare!
    Sorry for the weird language but I felt it to say it to my fellow countryman here :)

  • Roel

    Thanks for sharing these tips. I didn’t know the ‘Insert Menu Item Option’ until now and this helped me solving a long time problem. Thanks a lot!

    Did you know your slice-it-up action can be even faster by tweaking it a little bit?

    This is how:
    - After you’ve added the ‘Save for Web menu item’ instead of adding a new ‘Insert Menu Item Option’ with File Close, just close the document and select ‘Don’t Save’.
    - This will also create a Close action but with option ‘Saving: no’ added to it.
    - By creating the action like this the only thing you need to do after starting the action is saving the slice in the ‘Save for Web & Devices’. After hitting the ‘save button’ you’ll return to your original Photoshop document without having to close the sliced document first.

    • http://www.adipurdila.com AdiPurdila
      Author

      Ha, didn’t think to do that, works like a charm! Many many thanks for a great addition to the tutorial :)

      Ian, can you add a short note after the video with this so new people will see it?

      • http://www.snaptin.com Ian Yates

        Nah, I can’t be bothered.

    • http://digiartes.net Juan

      Wow! Blown away.

  • http://themeforest.net/item/invokr-premium-landing-page/1541570 nimbleo

    Great tip Adi. Next up you should do one on auto-batching, another very useful time saver.

    On a separate note, what software/devices do you use for your videos and audio quality?

    • http://www.adipurdila.com AdiPurdila
      Author

      Well, I guess you mean for screencasting, right?

      If so, I’m using a Blue Snowball Microphone and ScreenFlow as software on Mac.

  • Andrea

    Thanks!!

  • http://karlaarcher.com Karla Porter Archer

    this is fabulous. i’ve been horrible with remembering to use actions, but this ‘save for web’ action may have converted me!!

    thanks so much!

  • Pingback: Adobe Photoshop CS6: Improvements for Web and UI Designers | Webdesigntuts+

  • Pingback: Adobe Photoshop CS6: Improvements for Web and UI Designers | How to Web

  • Pingback: My Stream | Best of Tuts+ in April 2012 | My Stream

  • Pingback: Best of Tuts+ in April 2012 | Shadowtek Hosting and Design Solutions

  • Pingback: Best of Tuts+ in April 2012 | DigitalMofo

  • Pingback: Best of Tuts+ in April 2012 | clickshots

  • Pingback: Best of Tuts+ in April 2012 | CS5 Design

  • Pingback: Best of Tuts+ in April 2012 - Milk-Break

  • Pingback: Best of Tuts+ in April 2012 | SearchPsd Blog

  • Pingback: Best of Tuts+ in April 2012 | My Creative Directory

  • Pingback: Best of Tuts+ in April 2012 | How to Web

  • Pingback: Best of Tuts+ in April 2012 | Clixto7

  • Pingback: Best of Tuts+ in April 2012 | Wptuts+

  • Pingback: Best of Tuts+ in April 2012 | Wordpress Webdesigner

  • http://www.mightymeta.co.uk James Brocklehurst

    A while ago I created an save for web action similar to the one demonstrated here, except it is slightly more complex and will allow you to select and merge multiple layers without altering the original document.

    http://www.mightymeta.co.uk/superslicr-ditch-the-slice-tool/

    • http://digiartes.net Juan

      Got it! Thank you James.

  • Pingback: Best of Tuts+ in April 2012 | PHP Developer Resource

  • Pingback: Best of Tuts+ in April 2012 « CSS Tips

  • Pingback: Best of Tuts+ in April 2012 | Indoor Digital Billboards

  • Pingback: Best of Tuts+ in April 2012 | Image Board

  • Pingback: Best of Tuts+ in April 2012 | Digital Camera SLR Area

  • mep

    Bravo!!!

  • Adi

    Hi my name is Adi and i am a web designer from Israel :) but I`m a woman.

    i liked that video thanks a lot i made an action for “send to back” and “bring to front” very helpful one push on the hot key (i chose F3 and F4) moves the layer inside the folder and another push moves the layer all the way back\front.
    i tried to make a hot key with the actions windows to “auto select : group\layer” and it didn’t work. maybe you have a different way to do it ?

  • http://www.facebook.com/jeremy.suleski Jeremy Suleski

    Wow, what a time saver. Thank you.

  • Joey

    The hide grid/show grid doesn’t work with CS6. Is there any work around to this as the hide/show only works on currently selected layers in the palette now which is even more then clicking just the eye ball every time.

    • Gautam

      Joey, it does work very well. Make sure your group and the layer inside it does not have the same name, for example ‘grid’.