Photoshop for Web Designer: Free Tools
From the author: Photoshop is still the favorite tool among web designers, and the right add-ons will make it even more powerful. To increase your productivity, save you time and nerves, we have selected several valuable resources for Photoshop, plugins and scripts. Some of them will accelerate the implementation of routine tasks so that you can pay attention to this work, while other tools will create a bridge between Photoshop and the code, and your layout designs will incorporate all the advantages of both worlds. All tools are free and work with Photoshop CC 2015, if the article does not specify something else.
HTML Block
Code and photoshop do not fit together? Actually suitable if you install HTML Block. The plugin uses the Webkit engine to render HTML / CSS on the fly, the code is placed in special blocks. It’s convenient if you want to use third-party fonts in the layout and want to see how this font will be displayed live on the page, like in a browser. Also useful for creating resizable interface elements.
Page Layers
If you prefer to design the page design directly in the browser, but you need a Photoshop file at the end, then take a look at Page Layers. The application converts any web pages into a photoshop file. All elements are on separate layers with their names. Also useful when changing the current page design. Page Layers is compatible with Mac OS X and costs $ 34.99.
Web design. Fast start
Learn the course and learn how to create a website design and prototype in Figma
Learn more
Bjango actions
A collection of open source action and scripting scripts for many Photoshop tasks by Bjango. Among other things, the tool can scale your documents, cut them and more accurately position elements.
Ditto
Ditto – a plugin with which elements can be set to variables, such as colors, lines of text, font size, line height, X and Y positioning and even visibility. After installing Ditto, it is not necessary for everyone to edit the PSD file, but this is the most reliable way to maintain the latest variable values.
Renamy
You have many layers that need to be renamed at one time, and you don’t want to do this manually? Then Renamy will come to the rescue. Using the plugin, you can select several layers and assign them new names with just one click. The demo version is free, but you can rename no more than five layers at a time. There are no restrictions in the full version.
Duplicator
Duplllicator helps you to clone layers and groups. You must select the number of copies both horizontal and vertical. The plugin works with Photoshop CC and CC 2014.
Size marks
Size Marks – the script converts the selected rectangular area into markers with distance. Works in CC 2014 and CC 2015.
Magic wand tricks
Last but not least, one of the oldest tools for Photoshop, which is already built into the program – Magic Wand. The tool is much more versatile than you might think. Did you know that you can cut elements with it? You can also quickly center layers and groups. In combination with a histogram, it can be used to count pixels in a selected area.
