Rengga Dev – In 2018, Adobe Photoshop is still one of the top software choices for web designers. It’s an incredibly powerful and versatile tool in itself, however Photoshop plugins can further enhance its default functionalities. Using them, you can automize different tasks, speed up your workflow, convert your PSD design into HTML and CSS files, manage colors, or add custom fonts and imagery to your design.
In this article, we will have a look at ten great Photoshop plugins created for web designers that are worth checking out in 2018—six free and four premium ones.
1. CSS3Ps
Price: Free
The CSS3Ps plugin allows you to easily convert your Photoshop layers to CSS3. You only need to select the layers you want to convert to CSS3 and click the CSS3Ps button to perform the conversion. The plugin exports different Photoshop effects as CSS3 properties. For instance, PSD strokes are converted to border properties and inner shadows to box-shadow properties.
As CSS3Ps is a cloud-based plugin, you don’t have to worry about updates and bugs. Calculations are made in the cloud and you can check easily out the result in your browser.
CSS3Ps is one of the best free Photoshop plugins for web designers currently out there. It comes with a ton of great features such as vendor prefixes for popular browsers, multiple layers selection, Sass and SCSS conversion, support for text layers, and many others.
2. Font Awesome PS
Price: Free
Font Awesome is probably the most popular icon font set many web designers regularly use. It wasn’t easy to use Font Awesome in Photoshop for a long time, but this has changed with the introduction of this handy little plugin. It gives you instant access to all the free Font Awesome icons to add them to your designs.
The plugin is quite easy to use. First, you need to search for the icon you want to use in the Font Awesome PS panel. Then, you need to add the chosen icon to your design as a new Photoshop layer. It’s also possible to modify the design of any icon, as the plugin allows you to edit the default shape.
3. Prisma
Price: Free
If you frequently work with color swatches then the Prisma Photoshop plugin is just for you. Prisma provides you with global color swatches you can use quite versatilely. It can be especially useful for web designers who tend to use the same colors throughout many pages.
With Prisma, you can synchronize colors across several PSD files, connect layers, and recolor them in bulk. You can pick colors from three different places: the regular Photoshop swatches, the color picker dialog, and the color panel. You can link the global color swatches to as many layers as you want.
Prisma also makes it possible to share your swatches with your team. You get four shareable URLs in which your project colors are transformed into Sass, SCSS, Less, and Stylus variables and displayed in the browser.
4. Ink
Price: Free
Have you ever thought about creating specifications for your Photoshop layers? Actually, it can tremendously ease collaboration between designers and developers. The free Ink Photoshop plugin lets you do just that. Using it, you can avoid misunderstandings between design and development teams. Basically, you document your Photoshop layers by adding extra pieces of information to your mockup.
The Ink panel offers you several different options. For instance, you can print layer measures and colors, generate an XML file, and document typography, gradients, stroke effects, and other style elements. You only need to choose the layer you want to document and you can start to add the information you want to convey to the developers. The documentation you have created is stored in the _ink folder where you can easily access it.
5. Fontea
Price: Free
Fontea allows you to use all existing Google Fonts right inside Photoshop. This currently means a little more than 800 different free and open-source font families. If you regularly use Google Fonts in your designs—and why wouldn’t you do so—this plugin can save you a lot of time. Basically, you don’t have to leave Photoshop to try out which font family matches your design the best.
You can search fonts based on categories such as serif, sans-serif, or display, switch between different fonts just with a single click, save your favourites, and more. There is also a live demo on Fontea’s home page where you can try out the functionalities without installing the plugin.
6. Pexels Photoshop Plugin
Price: Free
Finding the right imagery for your design is a daily challenge that sometimes is not that easy as you would think. There are many stock photo sites on the web, however finding images you can use for free and without attribution is a tougher question. On the Pexels stock photo site, all photos are licensed under the Creative Commons Zero (CC0) license which means just that—free for any legal purpose and can be used without attribution.
Pexels provides the web design community with an easy-to-use Photoshop plugin that can greatly improve your workflow. The Pexels Photoshop Plugin make the whole Pexels library available right inside Photoshop. Right now, this means over 30k high-quality photos you can freely use.
Moreover, the plugin syncs with the Pexels website as well. So, if you like a photo on the site you can easily access the same image inside the “Likes” tab of the Pexels panel in Photoshop.
7. ColorKit
Price: $19.99
The ColorKit plugin helps you manage your colors inside Photoshop in a professional way. Creating, saving, and replacing color swatches can take up a lot of time, especially if you are working on a large project. ColorKit allows you to omit the regular workflow with Photoshop swatches.
You can collect the colors you want to use and organize them into handy projects. Moreover, you can link your colors to different layers and also change the colors of all connected layers at the same time, with just a single click.
Although ColorKit doesn’t come for free, it has a friendly price tag that is well worth if you frequently work with colors or have larger projects in which you don’t want to update the colors one by one manually.
8. Glifo
Price: $19
Have you ever wanted to create your own icon web font collection? If yes the Glifo Photoshop plugin is just for you. It lets you export vector icon layers from any PSD file as a ready-to-use icon web font. The workflow with Glifo is quite simple and straightforward. You only need to select the icons you want to include in the web font and Glifo automatically assigns each to a Unicode character (from the private area). Then, you only need to click a button and Glifo prepares your custom icon font.
Glifo provides you with an SVG, an HTML, and a CSS file. The SVG file stores the icons themselves, while the HTML and CSS files hold the names and styles of the specific CSS classes belonging to the individual icons. If you need another font format such as TTF you can easily convert the SVG file with any online font file converter. To use the web font in a project, just add the folder containing the SVG, HTML, and CSS files to the project and you are good to go.
9. WebZap
Price: $19
The WebZap plugin adds extra tools and functionalities to Photoshop, that you can integrate into your UI design and mockup workflow. The most important part of WebZap is a handy layout generator that makes it possible to quickly create web page mockups on top of the 960 grid system.
WebZap also provides you with many frequently used UI elements such as form input fields, buttons, dropdowns, navigations, range sliders, and others. Moreover, you can edit the shape and color of each UI element and generate Lorem Ipsum text blocks easily.
WebZap also has a cool fold generator that lets you place folds to different spots in your mockup. You can style your background easily as well, and WebZap allows you to use different patterns to enhance your design.
10. Social Kit Pro
Price: $9.99
The Social Kit Pro plugin makes it possible to create different social media templates in Photoshop. Social Kit Pro has templates for Facebook, Twitter, Youtube, Google Plus, Instagram, Linkedin, and other social media sites. Using the plugin, you can easily create and recreate your social media identities. For instance, you can design social ads, update your social graphs, or customize your profile pages.
With Social Kit Pro, you basically get a live preview of Facebook, Twitter, and other social media sites right inside Photoshop. Why would you need that? Designing for social media sites is hard because you have to keep the right measurements and export and upload each asset separately. This can be quite tiresome if you want to try out different versions of the design. Social Kit Pro facilitates this cumbersome process and speeds up social media page design in a significant way.
Next Steps
Well-chosen Photoshop plugins can be a tremendous help in everyday design work. If you are a regular Photoshop user don’t hesitate to enhance its functionality with some of the plugins mentioned in this article. And, if you want to know more about Photoshop also have a look at our advanced Photoshop tips or learn how to decide if Adobe Illustrator or Photoshop is better for you.
