Adobe Photoshop is still the tool of choice among many web designers, simply because it provides a versatile, powerful platform to help us produce beautiful and unique artwork.
It has its limits, however, and at times we need access to functionality that doesn't exist within Photoshop natively. This calls for additional software, in the form of plugins, that integrate easily and extend Photoshops capabilities.
See also: 12 Free Web Apps to Boost Your Drawing Skills
With so many add-ons available, it can be frustrating to research the best ones to download and install, which is why we've done the legwork for you. This list covers 12 premium Photoshop plugins that can improve your workflow, save time, increase efficiency and give you more creative freedom.
We will be covering free plugins shortly, because extending Photoshop doesn't mean breaking the bank — so stay tuned.
SpecKing provides tools to generate design specs and annotations, letting you measure any sizes, margins and font properties instantly in a PSD file. Once it's installed, you can select any layer or multiple layers, and press the red button to measure the width, height and spacing of any element or layer. You can easily editlive text labels, with hex color support also included.
With specKing, you can also get all font specifications and properties with one click. Use the settings panel to specify color output format and font size, and as the design specs are ready instantly, it can help to speed up your workflow.
Price: $19 for a single license or $149 for a team license bundle
Subtle Patterns is a high-quality resource of tiled, textured patterns. The Photoshop plugin from Subtle Patterns give you access to its immense library of beautiful patterns, fed directly into your Photoshop panel -- meaning it's always in sync with the latest pattern releases from the website.
It's simple to use: Just click a pattern thumbnail and it immediately applies as a layer style to your current layer. Subtle Patterns currently provides more than 300 patterns and growing, so there's a design to suit every occasion and requirement.
Price: $11.99
Pixel Dropr allows you to create, use and share your own pixel collections, whether they're made up of icons, buttons, UI kits or photos. You can create your own 100-piece galleries (called "refills") of graphics and then drop them instantly into any Photoshop document. The plugin can act as a resource container for any UI elements you need, and as you work on a project you can drag buttons, icons or form elements onto your layer for a faster, more efficient workflow.
While you can only load in two sets at a time, you're able to export and import sets as needed. A link to the refill store is built into the extension, which offers both paid and free icon and illustration sets.
Price: $19 for the plugin only; $29 for a personal bundle or $99 for a team bundle
Zeick is available for both Windows and Mac OS X, allowing you to export vector shape layers to SVG files. When you click the Zeick Export button, any selected layers will be cropped and exported to separate SVG files. Any groups of shapes will convert to multilayered SVG files, with multiple layer support, and you can apply shape colors from Photoshop to your SVG.
You can also apply drop shadow filters, use layer effects, try color blending modes and even create icon fonts from your exported SVG files by using an icon font generator.
Price: $19.99
Renamy lets you rename multiple layers within Photoshop so you can easily search through your layers. With integrated autocomplete, you just start typing and Renamy will provide you with a complete name from your list; to add additional names, just insert '+' before a name. Renamy supports long layer names of more than 64 characters.
With built-in one step history, you have the ability to reverse all Renamy changes in one simple step. The plugin allows you to better manage your layers and file-naming, with all changes made instantly. You can download the demo version, which has a five item limit, to test it out.
Price: $9.99
CSS Hat turns your Photoshop layer styles to CSS3 instantly, which you can paste into your editor of choice and save precious development time. Once installed, you can open a PSD file and select a layer that contains styles, and CSS Hat will generate CSS based on the styles in that layer.
With customizable output, you can toggle comments on and off, alter the width and height of an object, convert HEX to RGBA, use optional vendor prefixes and more. There's support for CSS preprocessors, including SASS, LESS and Stylus. CSS Hat can be a powerful, educational and time-saving plugin, and it's especially useful for those who are new to CSS.
Price: $34.99
With Specctr, you can instantly annotate and measure design documents from within Adobe Illustrator, Fireworks or Photoshop. It helps make the transition from design to production much easier by enabling you to specify form (spacing, width, height, colors, shape, opacity, filter and fonts) and function (transitions, user flows, hover states and more). The plugin automatically generates a specification, thus creating a blueprint for the design and helping to ensure your design will translate properly in development.
It's incredibly simple to use -- expand the canvas to make room for the specs, select the details that require specs from the appropriate panel and then click the Spec button.
Price: $49 per license or $99 for a three program bundle
DevRocket provides Apple iOS-specific tools and functionalities to help in designing for the iPhone and iPad. You can generate portrait, landscape and splash display canvases, including the native iOS status and navigation bars. There is an option to design for both Retina and non-Retina devices at the same time, and save those designs with just one click, even down to individual snippets for Xcode.
DevRocket can also create a copy of any selected UI element onto a new canvas that is sized to match the exact pixel measurements, so you don't have to spend unnecessary time dragging elements between canvases. It's a powerful plugin for any iOS designer or developer.
Price: $19
Enigma64 lets you cut, export and optimize your selected layers (or canvases) in PNG or JPG formats. It's standout feature is the ability to turn layers into base64, which means your image is encoded and can be pasted straight into your CSS or HTML. This cuts down on additional HTTP requests by enabling you to include your images directly within your stylesheet.
The plugin is effortless to use -- it's designed to save you time, so it doesn't offer a myriad of options, but sticks to the essentials, which work incredibly well. The base64 code is saved to your clipboard, so you can simply implement it with CSS or through the image source attribute.
Price: $29.99
Perspective Mockups is a plugin that transforms your work by giving it a unique perspective, making it infinitely more interesting to look at and present. It sits within your Photoshop tools palette and offers eight different layouts to choose from, with the ability to change the edge depth (from one to 10 pixels). The plugin doesn't flatten an layers, so each mockup is fully customizable and editable.
To use it, just click the layout you want in the Perspective Mockups panel and then click Save, and your image will automatically change to match the chosen layout. You can even edit the shadow.
Price: $19
Coolorus provides an advanced color wheel (similar to Corel Painter) for Adobe Products, including Photoshop, Flash and After Effects. It aims to improve your color workflow, reducing mouse clicks and increasing your knowledge of color relationships and the power of Triangle HSV representation.
There are two color modes: full spectrum and simple. The simple mode comprises 12 basic colors, with both RGB and RYB wheels provided for artists. There are useful shortcuts, a switch module and color output modes that are ready to use. The plugin also works with all Mac OS X apps that use the native Apple color picker.
Price: $9.99 for the Photoshop Plugin
WebZap's powerful layout generator lets you create mockups based on the 960 grid with just a few clicks. You can easily create common UI elements in a range of styles and colors, which are fully layered, meaning you can edit them in any way you like. With support for header, paragraph and link tags, you can style your text layers in tag groups, which makes working with text infinitely easier.
When your design is ready to preview, WebZap lets you create a range of impressive, presentation-style images.
Price: $19 for an individual license or $99 per team bundle
Have something to add to this story? Share it in the comments.