• Breaking News

    Useful Collaboration Tools for Design Teams and Freelancers

    Monday, April 18, 2016

    20 Free Photoshop Actions All Web Designers Must Have

    In today’s world automation is the key to be successful. You need to automate rudimentary tasks to ensure that less time is take in completing any project. Photoshop Actions are such tools that allow you to automate about everything that you do in Photoshop. It is like a script or a set of steps that can be recorded and applied on your project with one simple click. It is not only easy to use; it also saves a lot of time. Its ease of use makes it beneficial for even the beginners. As they do not have yet learned the skills to create the desired effect, step by step, they can make use of the Photoshop Actions, to save time and get a great output.


    Photoshop actions are not only easy; they also save you a lot of time and frustration. If you are a wedding photographer and you have thousands of photos that need editing, think about all the time it will take to repeat all the mundane steps thousand times over. With Photoshop Actions, you can just record the steps and use them with other photos. Here are some great and free Photoshop Actions if you are a designer.



    iOS 7 Blur


    photoshop-actions-for-designers1

    Starting with iOS 7, the Apple design team introduced a milky-glass blur effect. This can be replicated in Photoshop but requires a bit of layer manipulation.



    Bjango Actions


    photoshop-actions-for-designers2


    Bjango is a creative studio building apps and open source projects for designers. The site publishes handy articles for PS users and offers a full GitHub repo of actions that you can download for free. These actions include various nuances for building designs in Photoshop.



    No More Banding


    photoshop-actions-for-designers3

    Jeff Broderick built a simple action called No More Banding which is a free download and it’s incredibly valuable for digital design work.



    ScreenShot Photoshop


    photoshop-actions-for-designers4

    Here’s a really cool effect created by Albanian designer Vasjen Katro. With his action titled ScreenShot Photoshop you can take a flat mockup and automate a skew with implied lighting. This creates the effect of a screen tilted to the side and looks like a photograph of a monitor.



    PSD TO PNG Automator


    photoshop-actions-for-designers5

    Exporting a design requires time, but it can be made simpler with Luis da Silva’sPSD to PNG export. This converts a full PSD file into a PNG from Photoshop’s action panel. From what I can tell this works for all versions of Photoshop from CS to CC.



    Browser UI


    photoshop-actions-for-designers6

    Ever wanted to see how your mockup looks in a browser window? Thanks to the Browser UI action it’s now just a click of a button. This particular action does have a premium option but the free version includes more than enough features. Every browser window renders in the OS X style but the windows can stretch to fit whatever canvas you need.



    Retinize It


    photoshop-actions-for-designers7

    Retinize It is a free Photoshop action for building retina copies of icons and interface elements. You just select a layer(or layer group) and run the action. Graphics can be named and exported with custom @2x and @3x size requirements.



    Export To SVG


    photoshop-actions-for-designers8

    Layer exporting is another manual task that nobody really wants to do. This PSD to SVG export action takes the mundanity out of exporting vectors and graphics for the web.



    Flat Browser UI


    photoshop-actions-for-designers9

    Here’s another browser templating tool but with a flat UI. If you don’t want to go with the Mac-styled browsers then try this PS browser action instead. Rasterized document elements work best, although it’s just as easy to flatten all contents onto a new layer and use that instead.



    Stereo Display


    photoshop-actions-for-designers10

    Anyone that needs a stereo display will get a kick out of this action. This free stereo display action creates a 3D effect with shadows and skewed edges, all from the input of flat UI elements.



    Magnifying Action


    photoshop-actions-for-designers11

    This is one of my favorite actions because it’s so practical for graphic displays and presentations. UI designers will enjoy this magnifier action created by Mario Semeš for interface magnification.



    iPhone 6/6+ Actions


    photoshop-actions-for-designers12

    Digital designer Geof Crowl built a custom collection of iPhone 6 actions for organizing graphics from a PSD into retina dimensions. Mobile app designers typically work with shape layers so this should fit right into any typical design workflow.



    Save For iOS


    photoshop-actions-for-designers13

    Here’s a unique concept built by the creative agency ENVOY. Since Photoshop has a great “save for web” option, the ENVOY team built this action specifically for iOS export. There are similar scripts like this but it’s worth adding another one into the mix.



    Artista


    photoshop-actions-for-designers14

    Artista is a Photoshop action for manipulating photos and digital designs. Custom actions can be applied to layers or to the entire document as a whole. This particular action set allows designers to build interesting media styles like energetic lines and paint canvas-styled filters. Check out the sample previews to see what’s possible.



    GUI Automation Toolbox


    photoshop-actions-for-designers15

    Although GitHub is typically associated with dev projects, it’s possible to find great design resources like this GUI Automation Toolbox. In the toolbox you’ll find scripts for Photoshop and Illustrator. These can help with exporting graphics and rebuilding layer groups.



    Pixel2Vector


    photoshop-actions-for-designers16

    This may be a somewhat experimental Photoshop action but it can be incredibly powerful. Pixel2Vector by Michael Tzscheppan is a free action pack that converts pixel layers into vector shapes. The action supports Photoshop CS3+ and it can operate as a plugin for CS5+. I love this concept because it can help designers quickly turn raster shapes into editable elements.



    Long Shadow


    photoshop-actions-for-designers17

    Moscow designer Aram Mirzoyants released his long shadow actions for free on Dribbble. You can download and use these actions for any layer from vector shapes to text and icons. This will auto-generate a 3D shadow effect with the option to lean shadows in various directions at differing lengths.



    3D Isometric Actions


    photoshop-actions-for-designers18

    The isometric conversion action Mapita is a way to build 3D-looking artifacts in Photoshop. It doesn’t work great on every design but flat graphics can be brought to life with this free PS action (including a sample PSD file).



    LoremPicsum


    photoshop-actions-for-designers19

    Everyone knows about Lorem Ipsum for filler text. But what about LoremPicsum for filler photos? This site can operate with direct URLs but it comes with a Photoshop action as well. Two separate versions are available for CS users and newer CC users.



    Wallpaper Maker


    photoshop-actions-for-designers20

    Here’s a custom wallpaper generation script for Photoshop users. It can export at various sizes for different screen dimensions while keeping quality intact. Wallpapers are not specifically relevant to UI design, but this script is just too cool to leave out of the list.

    2 comments:

    1. No backlink to the source even though it seems it has been taken from somewhere else?

      ReplyDelete
    2. It was not taken from any source , the code was written by author Lakshma

      ReplyDelete