10 Photoshop plugins to make your UI design life easy (remove links 7 & 8)April 8, 2014 Responsive Web Design, web design, Web tools 1 comment
Photoshop is a photo editing tool, But it has become the first choice for web designers and Mobile UI designers. As a UI designer, you would have come across the three critical tasks that you face every day with Photoshop .
- Creating layouts
- Converting it into CSS and
- Presenting it to the client for review.
Though there are inbuilt features that come with Photoshop to help the designer work quickly, creative designers always want to do the best and they look for new things within Photoshop. This is where plugins become very important to make their life easier, creative and time-saving. Here are the 10 hand-picked plugins that you would love to try and use.
Photoshop was not originally created by Adobe but by the brothers, Thomas and John Knoll In 1987.
1. CSS3PS (Cost: Free)
CSS3PS is a free cloud-based Photoshop plugin that converts PSD layers to CSS3. It supports multiple layers selection, text layers, size, stroke, border radius, gradient overlay, inner glow, and many of the key elements that every Photoshop designer uses frequently.
It can easily convert the Photoshop elements into CSS box-shadow, CSS border, CSS width and height properties etc. Text Layers is supported with CSS font-family, ext-shadow etc.
Since the plugin is cloud based, every aspect of rendering is rapid and has a waiting time of just 5 seconds.
2. Webzap (Cost: $19/$99)
[Update 2018: WebZap is no longer available]
WebZap provides additional tools and functionalities for web developers to build easy mockup and user Interface workflows that you can share with your clients quickly. You can create layouts in no time, text layouts with ‘lorem ipsem..’ text in text boxes are readily available for this. You can also build UI with colors, styles and custom shapes etc.
WebZap helps you to create styling the text for any web page demo in Photoshop quickly. When you are ready with the mockup screens, using WebZap you can create a professional presentation that helps to impress your clients.
You may like to check some git repositories for the older version of this plugin.
3. Retinize (Cost: Free)
Retinize helps you to prepare your site designs for iOS or other OS optimized for Retina display websites – one for slicing selected layer/group only, and the second action is for slicing the selected layer/group
4. Photoshop wireframe kit (Cost: Free)
This is a simple wireframe kit developed by Rafal Tomal of Copyblogger Media. Using this, you can easily build web design mockups with all the design elements within Photoshop. You can set pixel dimension and layers, with a bit of learning. You can also download the PSD, drag and drop the elements that you require in your mockup PSDs easily.
This is a great piece of tool that Photoshop users would enjoy working with. The tool also saves time by showing mockups to customers before building the actual design which could easily help you avoid misalignment with customer expectations.
5. GuideGuide (Cost: Free)
GuideGuide Photoshop extension helps you to build pixel accurate columns, rows, midpoints, and baselines within your design.
6. Cut & Slice me (Cost: Free)
Cut & Slice me for CS6 helps you to export your assets to different devices in seconds. You can export it in png format by trimming the pixels that you do not require or fixing the size. The developer of this plugin, Danile, offers it for free.
7. WebFont plugin (Cost: Free)
Trying to access web fonts and manage them? Then this plugin is an easy way to use several WebINK and Google web fonts in Photoshop which you might require from time to time. It works in CS5 to CC. The plugin is free, but there is a catch. You would need to buy their Suitcase Fusion 5 in order to use the plugin effectively.
You can try the 30-day trial and if you find it good, you can get this font management tool for $100, from Extensis, the company that also developed WebFont plugin.
Update 2018: Please note, this plugin has been moved as a font management service by its creators Extensis, and no longer available as a plugin.
8. Breezy (Cost: Free)
Multilayer export feature is a delight to designers. This free extension empowers Photoshop with the same and as a result, you can easily export multiple graphic elements from any Photoshop file. You should try this too.
9. Blendme (Cost – Free)
This plugin is a time saver. Without leaving your Photoshop or Illustrator you can quickly search any graphics assets, icon packs etc and include them within your design by simply dragging and dropping.
10. Ink – (Cost – Free)
Do not leave your client or team member to blink when they look at your designs. This plugin Ink helps you to leave necessary detail about the mockups you design by adding notes about the layers you created, typography, effects, and shapes etc. Make others feel comfortable handling the mockups you make with Ink.