Photoshop Extensions for Front-end Developers

Ronalds Vilcins
Jul 23, 2015 · 3 min read

Photoshop has its limitations, which means we have to find other ways around certain problems. Today I’m showcasing some of the best photoshop extensions for front-end developers to speed up workflow.

  • CSS Hat 2 — Select any Photoshop Layer and get CSS instantly.
  • Cut&Slice Me — Use Cut&Slice me to export your assets to different devices in seconds. Improve your workflow by just naming your layers.
  • CSS3Ps — Free cloud based photoshop plugin that converts your layers to CSS3.
  • Layrs Control 2 — Free Photoshop extension. A collection of 7 scripts that make tedious job easier.
  • BlendMe.In — Lets you search through thousands of SVG icons and vector objects right inside Photoshop itself.
  • LiveShare — InVision extension — LiveShare lets you transform your designs into beautiful, interactive web & mobile ( iOS, Android) mockups and prototypes.
  • Devine Elemente — Allows you to convert a layered PSD file into a full WordPress website including HTML, CSS and PHP files.
  • GuideGuide — Creates guides and grids based on your document or the selection.
  • Renamy — Multiple layers renaming Photoshop plugin. You can select a lot of layers and rename it in 1 click. Find and Replace. Use simple text find and replace for layer names.
  • Web Zap — Create website mock-ups in Photoshop super fast with this great plugin. Web Zap allows you to drag and drop website elements from and library of thousands of styles and components.
  • Flaticon — Use the FlatIcon plugin to quickly find the icons you need for your design, without leaving your working environment. 63,914 icons available.
  • Social Kit — Cover images, profile pictures and ad banners in a free up-to-date Photoshop plugin.
  • PixelDropr — PixelDropr lets you save your elements and other objects of a project to be used at any time in other projects.
  • Extensis — Google Web Fonts right from within Photoshop.
  • Bounce — Intergrate Dribbble into your design apps.
  • Ink — A photoshop documentor plugin.
  • SpecKing — SpecKing is a Photoshop plugin that provides tools to generate design specs and annotations in a fast and easy way — saving you hours of work!
  • Oven — Oven it’s a Photoshop plugin that helps you generate layers ready to be exported for iOS and Android.
  • Size Marks — Size Marks is a helpful Photoshop script for web designers and front-end engineers. Script converts rectangular marquee to labeled measurement mark. Landscape marquee → horizontal mark. Portrait or square marquee → vertical mark.
  • Subtle Patterns — Imagine the immense library from Subtle Patterns, fed directly into your Photoshop panel — always in sync!
  • Velositey — Prototype the design of your website in seconds in Photoshop.
  • Font Awesome — Font Awesome icons right inside Adobe Photoshop.
  • Duplllicator — Clone layer or group and shift it horizontally or vertically with this extension.
  • — Screens with alternate versions, webfonts and assets extracted with a single click. The fastest plugin out there and the only one that actually works!
  • Assistor PS — Ultimate 9 in 1 tool, especially made for UI Designers.

Ronalds Vilcins

Written by

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉

More From Medium

Related reads

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade