Adobe Photoshop extension

The Designer Panel

A concept developed while working as a graphic designer. The Designer Panel includes over 100 tools and workflow accelerators for photographers and designers, organized across Utilities, Templates, and Edits.

Tech Stack

HTML, CSS, JavaScript, Node, jQuery, Velocity.js, and Adobe scripting libraries.

The panel was designed to reduce repetitive design tasks, minimize menu-hunting, and speed up production workflows.

Explore UtilitiesNeed something similar?
Main interface of the Designer Panel Photoshop extension
Utilities tab in the Designer Panel

The Utilities Tab

Common menu actions, quick shortcuts, and image optimization tools in one place to speed up day-to-day production.

  • Quick Drop Shadows
  • Clear Layer Style
  • Smart Filter Reset
  • Rasterize Layer
  • Image TraceSimilar to Illustrator image trace. This creates a quick vector-style outline from a selected raster layer.
  • Flip and center align layers
  • Delete empty layers
  • Convert to background layer
  • Show/hide all layers
  • Hex color snifferCopies the current foreground color for quick CSS usage.
  • Convert to smart object
  • PNG optimization
  • Various image export shortcuts
  • Trim transparent pixels
  • Task/Pomodoro timer
  • Expand smart objectMoves all layers from a smart object into the current document as grouped layers.

Templating Shortcuts

Easily load common templates and starter assets including buttons, social media layouts, and website grids.

  • Social media cover and profile templates
  • Quick links to useful sites
  • Retargeting banner adsIncludes common ad sizes for Google, Facebook, and Instagram campaigns plus a fast path to text-to-image ratio checks.
  • Nine unique ecommerce starting points
  • Basic site grid
  • Auto dealership template
  • Network-drive templatesShared templates can live in one location so every designer gets the newest versions instantly.
  • Font Awesome icon set
  • Icomoon icon set
  • Three button sets
  • Trust badge assets
  • Template preview windowPreview templates before opening them into a working file.
Templates tab in the Designer Panel

Image Edits

The largest tab in the panel. It uses nested accordions for background removal, Camera Raw effects, layer effects, and photo retouching. Too many tools to list here, but some highlights include a custom Camera Raw filter interface, not destructive layer effect, a multi-tool background removal utility, and a smart object expander that moves all layers from a smart object into the current document as grouped layers for easy editing.

Background removal toolsCamera raw toolsLayer effects toolsRetouch editing tools

Contact

I am currently looking for opportunities involving Vue.js, Node, Vuex, GraphQL, and other modern technology stacks. Send me a message, and I can provide my resume upon request.

Send a Message