Table of Contents
Adobe Photoshop is very well known graphic software in design industry. You don’t even have to be a designer and still you know what Photoshop is. This graphic tool is often used by web designers for creating mockups of websites and sometime also for rapid prototyping and wireframing. Today, I want to give you some suggestions for extensions that will improve your workflow and make your work easier.
P.S.: If you are a subscriber, you will have a link to rar archive on Dropbox containing all extensions mentioned in this post in the newsletter in your mailbox.
Installing via extension manager
Before we take a look at individual extensions and their abilities, it’s important to know how to install them. Otherwise, they would be pretty useless. In order to install any extension you will need an Adobe Extension Manager. If you have an Adobe Suit installed, it should already be on your computer. Else, you can download it from Adobe website. You don’t have to worry, it is free. When you open the manager, click on the “Install” link or “Instal extension” under “File” in tab.
Enabling extensions in Photoshop
When you successfully installed all the extensions you want to use, it’s time to start your Photoshop. Unfortunately, if you are running Photoshop while installing new extensions, they will not be loaded and shown in the editor. You will have to restart it so Photoshop can reload all installed extensions and show the new ones. From now, they will be available under the “Window” menu in sub-menu “Extension”. Here, just click on the one you want to enable and it will be added to your workspace.
Extensions you will not be able to live without
1) GuideGuide
With this extension creating grid layout will no longer be a problem for you. You can create perfect grid simply by setting the number of columns, their width, width of gutters and even margins on the left and right of the grid to center it if your document is wider than width. You can also create rows with row gutters to make a table layouts. All of these options can be applied either to whole document or specific part of it selected by marquee tool.
What’s more, you can even name and save your favorite sets and also export them into Github gist repo. For example, instead of typing out the specifications of grid system for various widths save them in “Sets” so you can use them in blink later on. The last way to create a grid is via grid notation you can find here. This notation is pasted or written in “Custom“ tab. By the way, you can select multiple sets and create a grid from your selection.
You can download this extension here.
2) Pixel2Vector
Next extension to talk about is Pixel2Vector. If you worked with pixel shapes in Photoshop before, you probably know how difficult it can be. Once they are created you cannot change their size that much (other than making them smaller) if you don’t want to make any visual damages like blurring. Fortunately, if you use shape tools instead and create a vector shape, your options are almost impossible. Make it bigger or make, it will stay crisp.
However, what if your client give you some graphic assets in png or jpg instead of vectors? You can either replicate them on your own and spend significant amount of time on that, or you can use Pixel2Vector extension. This extension will take the shape in selected layer, analyze it and convert it into vector shape or custom shape tool in just a few seconds. Not a vector? No problem from this moment for you.
You can download this extension here.
3) Font awesome for Photoshop
Have you ever worked with icon fonts, like the Font Awesome, in your projects? If your work goes beyond design and transcendent also into development, it’s more than fifty-fifty that your answer is yes. Since icon fonts became very popular and the majority of website uses them the question is … How to handle them in Photoshop? Creating them from scratch using shape tools? Go ahead if you want. Or, you can use an extension for Photoshop that will do the hard work for you.
This extension will show you all available icons or you can use search to get exactly what icon do you want. After you pick the icon that suits your needs, by clicking on it the icon will be created in the middle of the canvas as a vector shape (smart object). From now on you can transform the icon as you wish without damaging its quality. You can also change the fill and stroke color just like in any shape.
You can download this extension here.
4) Velositey
You may be already using Photoshop for wireframing. However, in case you are not, this extension will help you with this work in a big time. Using this extension you will get a collection of various headers, sliders, content, footers and modules for your designs. Each of these categories contain various number of different templates to make you designs a bit more distinct and less similar. The way to use Velositey extension is very simple.
First, either create new document or chose “New Template” in Velositey and it will create new Photoshop document with 1170px grid set (exactly like a Bootstrap 3 grid). After this, just click through the categories of sections and pick the templates you want and it will generate the content on the canvas everything sorted in folders with proper labels.
You can download this extension here.
5) Flaticon
No matter how great font awesome is, not every icon you might need does it have. Don’t worry quick help comes with another extension called Flaticon. This extension will turn your Photoshop into icon search engine. Any time you will need some icon not included in font awesome, simply use this extension to search the online database of flaticon websites. It works in the same way as Font awesome extension. Double-click on icon and it will create new ready-to-use vector shape in new layer in top-left corner.
You can download this extension here.
Bonus:
6) Cut&Slice me
The last Photoshop extension for today is called Cut&Slice me. This smart plugin will help you export all assets you used in your design in just a few seconds. Another enhancement that comes with it is the ability to use few simple rules to set how and in what form and even format you want the assets to be exported. Downside is that this extension is now available only for Photoshop CS6 and CC, not the latest CC 2014.
You can download this extension here.
Summary
Never, never, never-never-never-never let the software dictate you the tools you have to or should use in your workflow. Even though Photoshop can be powerful tool in basic setting, enhancing it with couple additional extension can make your work much faster and easier then ever before. However, pay attention to how many extensions do you have installed and enabled in Photoshop because they will have impact on loading speed.
Thank you very much for investing your time to this post today and see you soon. Until that time … What are your favorite tools of trade and what extensions you cannot live without?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
Great tools, thanks for the post.
You are welcome! Feel free to share other plugins you like to use.