22 Best Photoshop Plugins For Front-End Developer

Here are 22 best photoshop plugins that will help you speed up your design process, enrich it, grid it, create icons, slice it, and get style info for your web or mobile project.

Hexy

It’s a pain to have to select layers, highlight pieces of text, and open the Color Picker to simply grab the hex value of a particular color. Hexy allows you to use the Eyedropper tool to simply click on the color of the object you’re after and copies it directly to your clipboard! Setting a new color as your foreground or background? Hexy will automatically copy that for you as well.

hexy

Griddify

Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop.

griddify-1

Size Marks

Size Marks is a helpful Photoshop script for web designers and front-end engineers.

sizemarks-6

Velositey

Velositey is a full featured, open source Photoshop extension that creates all the boring stuff for you, so you can focus on styling your website.

velositey-2

Random User

These users can be used as placeholders in web mockups, and will save you time from creating your own placeholder information.

Random-User-Generator-3

Kaku

A simple Photoshop plugin to translate your text layers to a different language.

kaku-4

LiveShare PS

With LiveShare PS you can now broadcast any Photoshop document to as many people as you want through an instant LiveShare meeting.

liveshare-4

LayerCraft

A Photoshop plugin to export UI assets from layers.

layercraft-5

Ink

Ink is a plugin that helps you providing few extra important informations about your mockups by documenting your layers, from typography to effects and shape sizes.

ink-7

Modular Grid Pattern

Modular Grid Pattern — is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop.

modular-grid-8

Photoshop Social Shar

Photoshop Social Share Panel Plugin is a lovely-designed & free Photoshop plugin, helping designers share their designs.

share-8

pngquant

It provides PNG saving better than Save for Web. Typically creates PNG files 60-70% smaller than 24/32-bit PNG from Save for Web, and unlike 8-bit PNG from Photoshop, always supports semi-transparent alpha channel.

superpng-9

Bounce

Bounce is a free extension that integrates and connects the Dribbble design community into the Adobe design applications you love to build with everyday.

bounce-10

Retinize It

The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites.

retinize-11

Free photoshop script: Export your vector layers from PS to SVG in a single click!

This script, once activated, exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute. No more slicing SVGs one by one like a caveman.

free-photoshop-script-1

Lighten / Darken Color (Script)

While working on one project I came up with a small script that helps dealing with color in Photoshop, thought that it can be useful for someone else, so I decided to share it here.

free-photoshop-script-2

Corner Editor

Judging from the teaser preview of CS7, it appears that this type of funtionality will be included in the newest version, but in the meantime, this is a great add-on and will continue to be very useful for versions of Photoshop earlier than CS7.

rounded-rectangle-corners-3

Group Layer Renaming (Script)

Should be useful if you are layer organization geek or if you use applications like Slicy or new Photoshop CC feature called Image Assets, that can export layers using tags in their names.

script-4

Realsizer

Photoshop script for mobile UI designer to display your designs at real size on computer monitor, and real size printing.

realsize-6

Transform Each Beta (Script)

Adobe Illustrator has nice features that I miss in Photoshop. One of them is Transform Each. When you need to transform group of layers, it transforms each of selected layers as it was transformed individually.

transformeach-7

12 New Photoshop Tools for CS6

It is a Photoshop panel with twelve incredibly useful tools that I use on a daily basis.

panel-9

Free Lorem Ipsum Generator

The best Lorem Ipsum generator plugin for Photoshop, Illustrator, InDesign & Dreamweaver.

loren-ipsum-photoshop-generator-21

Published by

Joaquin

I am web designer/developer, creative blogger, wordpress user & founder of idesignow.

Leave a Reply

Your email address will not be published. Required fields are marked *