Tools to Give Web Designers Photoshop Super Powers

June 07, 2016 Graphic Design

“Can’t you just photoshop it and replace the elephant with a giraffe?”  Yes! We have heard such things, have you? Photoshop is a magic tool and designers use it widely everyday. It is a powerful tool and is used to make wonders of art. We have got to you an exclusive list of add-ons to make this tool and super tool. This list will help you speed up the tasks, boost productivity and ensemble code and photoshop both at its best.

Note** most of these tools are free to use and require Photoshop CC 2015:

1. HTML BLOCK : INTEGRATES CODE WITH PHOTOSHOP!

html block

So you think coding and photoshop don’t work together? Think again, you are just gonna be revealed to  the most difficult to believe tool, yes, code and photoshop can be done together using this tool. HTML Block uses WebKit engine to load HTML or CSS in a special block in Photoshop. Download this astonishing tool here: http://bg-d.net/htmlblock/ .

Watch this video understand how this tool works: https://vimeo.com/137174424

 

2. PAGE LAYERS : EDIT ALL ELEMENTS DIRECT FROM A PSD

page-layer

Page Layers is an amazing tool to design in the browser itself! You can directly edit any screenshot element/layer -wise, with every element named as a separate layer.

You can download it here : http://www.pagelayers.com/ ; it costs $39.99 only and is definitely worth it!

 

3. DUPLLLICATOR IS YOUR BEST FRIEND TO COPY

Cloning layers or groups is made even easier with this tool. Choose the number of duplicate copies you want, Duplllicator creates it with horizontal & vertical spacing. It supports Photoshop CC & CC 2014. Download the extension here: http://tools.enotart.ru/

duplicatores

 

4. USE SIZE MARKS TO MEASURE

Give an ear web designers and front-end developers, Size marks help you convert rectangular marquee to measurement marks. Landscape → Horizontal measurement marks ; Portrait → Vertical measurement marks ; Square → vertical marks. You can use it with Photoshop CC 2014 & 2015 both.

Download here: https://github.com/romashamin/Size-Marks-PS

Please add GIF: https://raw.githubusercontent.com/romashamin/Size-Marks-PS/master/images/size-marks-show.gif

 

5. MAGIC WAND TOOL COOL TRICKS

A built-in super helper of photoshop, the magic wand, like its name has a magical use! Usually, the magic wand tool is used to create a selection of pixels which are similar in color to the point where you clicked. The magic wand can be used to create slices, centre aligns layers/groups and with the use of histogram panel, it can also be used to learn the number of pixels in a selection! These uses of this tool are rarely known and used.

magin-wand-tool

Tell us your favorite photoshop tools/ plugins in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Next

Leave a Comment

Thank You for your comment