Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips Free Photoshop Tools For Web Designers

Photoshop is still a favorite among a lot of web designers, and the right tools make it even more powerful than it already is. To help you boost productivity, save time and (obviously) nerves, we have picked some valuable Photoshop resources, plugins and scripts for you.

Some of them will speed up routine tasks so you can concentrate more on your actual work, others build a bridge between Photoshop1 and code so your design mockups can benefit from the best of both worlds. Unless otherwise noted, the resources are free to use and require Photoshop CC 2015.

Further Reading on SmashingMag: Link

HTML Block Link

HTML Block plugin5

Code and Photoshop don’t go well together? Actually, they do, if you have HTML Block6 installed. The plugin uses the WebKit engine to render HTML/CSS on the fly and place it in a special block in Photoshop. Handy if you want to use web fonts in your mockup, to get real font rendering like in a live browser, or to create resizable controls.

Page Layers Link

Page Layers7

If you prefer designing in the browser but need a Photoshop file of your design, then check out Page Layers8. The screenshot app converts any web page to Photoshop with separate, named layers for all page elements. Also useful when redesigning or improving a current page design. Page Layers is compatible with Mac OS X and costs $34.99.

Bjango Actions Link

Bjango Actions9

Bjango’s open source collection of actions and scripts10 caters for solutions to a lot of Photoshop tasks. Among others, it makes scaling your documents, making slices and positioning elements more efficient.

Ditto Link

Ditto11

Ditto12 is a plugin that lets you use variables for elements such as colors, text strings, font sizes, line heights, x- and y-positions, and even visibility. It’s not necessary for everyone editing the PSD file has Ditto installed, but it’s the safest option if you want to keep your variables up-to-date.

Renamy Link

Renamy13

So you have multiple layers that you need to rename, but you don’t want to do it manually? That’s where Renamy14 comes in. The plugin allows you to select multiple layers and give them a new name with just one click. The demo version is free but comes with a limit of five items for the name list. The full version has no limitations, of course.

Duplllicator Link

Duplllicator15

Image credit: Creative Beacon16

Duplllicator17 is your friend when it comes to cloning layers and groups. You just need to choose the number of copies you want to have and the horizontal and vertical spacing of the duplicates. This plugin works with Photoshop CC and CC 2014.

Size Marks Link

Size Marks18

Size Marks19 is a script to convert rectangular marquee to labeled measurement marks. It’s compatible with CC 2014 and CC 2015.

Magic Wand Tricks Link

Magic Wand Tricks20

Last but not least, one of the oldest Photoshop tools, which comes already built in: the Magic Wand. It’s actually more versatile than you would have expected. Did you know that it excels at creating slices21? It is also great to quickly center layers and groups22, and in conjunction with the histogram panel, it can even be used to count the number of pixels in a selection23.

What are your favorite Photoshop tools? Let us know in the comments to this post!

(cm, og)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/professional-photoshop-techniques-tutorials/
  2. 2 https://www.smashingmagazine.com/2016/08/photoshop-etiquette-for-responsive-web-design/
  3. 3 https://www.smashingmagazine.com/2016/03/the-retina-asset-workflow-youve-always-wanted-for-photoshop/
  4. 4 https://www.smashingmagazine.com/2013/04/repurposing-photoshop/
  5. 5 http://bg-d.net/htmlblock/
  6. 6 http://bg-d.net/htmlblock/
  7. 7 http://www.pagelayers.com/
  8. 8 http://www.pagelayers.com/
  9. 9 https://bjango.com/designresources/
  10. 10 https://bjango.com/designresources/
  11. 11 https://casualnotebook.com/ditto
  12. 12 https://casualnotebook.com/ditto
  13. 13 http://www.klaia.com/Renamy/
  14. 14 http://www.klaia.com/Renamy/
  15. 15 http://tools.enotart.ru/
  16. 16 http://creativebeacon.com/duplllicator-free-photoshop-extension/
  17. 17 http://tools.enotart.ru/
  18. 18 https://github.com/romashamin/Size-Marks-PS
  19. 19 https://github.com/romashamin/Size-Marks-PS
  20. 20 https://bjango.com/articles/magictricks/
  21. 21 https://bjango.com/articles/magictricks/#creating-slices:a7b905da3ff087d783fd3d15b6d7425d
  22. 22 https://bjango.com/articles/magictricks/
  23. 23 https://bjango.com/articles/magictricks/#pixel-counting:a7b905da3ff087d783fd3d15b6d7425d

↑ Back to top Tweet itShare on Facebook

Cosima has been an editor at SmashingMag since 2013. Whenever she's not writing articles for the bi-weekly Smashing Newsletter or the Quick Tips series, she’s probably working on a new Smashing eBook.

  1. 1

    Thankyou very much for this will be very useful for future projects!

    3
  2. 2

    Stuck with windows

    February 17, 2016 3:43 pm

    Might be a good idea to add OS support for each item. I loved the idea of PAGE LAYERS and watched the video on their website and was thoroughly convinced that it alone was capable of ushering in a new era of world peace. Sadly though its for Mac OSX ONLY so I cannot partake *cry* :'(

    17
  3. 3

    David Hellmann

    February 17, 2016 3:57 pm

    Bjango Actions are cool. And they do a lot other cool stuff!

    2
  4. 4

    Dan Wroblewski

    February 17, 2016 5:18 pm

    Page Layers looks great, but unless I’m missing something, it’s $35… not free.

    13
  5. 5

    Jerome Poslednik

    February 17, 2016 10:47 pm

    Thanks for the article, that’s a good list.
    I would personally add the excellent Guidedguide panel :
    http://guideguide.me
    If you do web design wireframe, you can take a look at the Webzap panel :
    http://webzap.uiparade.com
    Please don’t forget the Photoshop plugins made by Source :
    https://madebysource.com

    0
    • 6

      Jerome Poslednik

      February 17, 2016 10:49 pm

      Ok, i didn’t notice that was only free tools, sorry for the mistake…

      2
    • 7

      I was going to say “isn’t guideguide for free?” turns out it isn’t anymore. still affordable at $10 anyway.

      2
  6. 8

    Since no one mentioned Layrs Control: http://madebyvadim.com/layrs/ – It has better layer renaming utilty.

    3
  7. 9

    It’s really helpful . Thanks for sharing these tools list.nice work.

    0
  8. 10

    Craft from Invision looks promising:
    http://www.invisionapp.com/craft

    5
  9. 11

    Size marks is really useful tool in Photoshop. Great post.

    0
  10. 12

    Hey there! I’ve been using Pixel Together for wire-framing and designing websites lately – really easy to upload Photoshop graphic elements. Best thing is, you can go straight through to publish if you want.

    http://www.pixeltogether.com

    0
  11. 13

    Don’t know about you, but I can’t install DUPLLLICATOR. Any ideas? I get the error with “manifest.xml”
    Thank you!

    0
  12. 14

    Sarah Anderson

    March 28, 2016 6:00 pm

    I haven’t used any of these before, but it’s good to know there are so many good web design programs. I like how there is that first one that looks like an html helper. There are a few of these that I would love to try out, are any of them multipurpose, or are they strictly web design software?

    0
  13. 15

    Page Layers is what I always wanted. Unfortunately only for Mac … grrrrr …

    0

↑ Back to top