hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Free Photoshop Tools For Web Designers


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 Photoshop and code so your design mockups can benefit from the best of both worlds. All resources are free to use (Photoshop CC 2015 is required unless otherwise noted).

HTML Block Link

HTML Block plugin1

Code and Photoshop don’t go well together? Actually, they do, if you have HTML Block2 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 Layers3

If you prefer designing in the browser but need a Photoshop file of your design, then check out Page Layers4. 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.

Bjango Actions Link

Bjango Actions5

Bjango’s open source collection of actions and scripts6 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

Ditto7

Ditto8 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

Renamy9

So you have multiple layers that you need to rename, but you don’t want to do it manually? That’s where Renamy10 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

Duplllicator11
Image credit: Creative Beacon12

Duplllicator13 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 Marks14

Size Marks15 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 Tricks16

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 slices17? It is also great to quickly center layers and groups18, and in conjunction with the histogram panel, it can even be used to count the number of pixels in a selection19.

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

(cm, og)

Footnotes Link

  1. 1 http://bg-d.net/htmlblock/
  2. 2 http://bg-d.net/htmlblock/
  3. 3 http://www.pagelayers.com/
  4. 4 http://www.pagelayers.com/
  5. 5 https://bjango.com/designresources/
  6. 6 https://bjango.com/designresources/
  7. 7 https://casualnotebook.com/ditto
  8. 8 https://casualnotebook.com/ditto
  9. 9 http://www.klaia.com/Renamy/
  10. 10 http://www.klaia.com/Renamy/
  11. 11 http://creativebeacon.com/duplllicator-free-photoshop-extension/
  12. 12 http://creativebeacon.com/duplllicator-free-photoshop-extension/
  13. 13 http://tools.enotart.ru/
  14. 14 https://github.com/romashamin/Size-Marks-PS
  15. 15 https://github.com/romashamin/Size-Marks-PS
  16. 16 https://bjango.com/articles/magictricks/
  17. 17 https://bjango.com/articles/magictricks/#creating-slices:a7b905da3ff087d783fd3d15b6d7425d
  18. 18 https://bjango.com/articles/magictricks/
  19. 19 https://bjango.com/articles/magictricks/#pixel-counting:a7b905da3ff087d783fd3d15b6d7425d
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top
Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/02/free-photoshop-tools-for-web-designers/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.