Paint in Photoshop and see realtime previews in live website.

Spend more time with designing and less time with file upload forms and refresh button...


Install Photoshop Extension Install Chrome Addon

Currently for free. Windows (64-bit), PS 2015.5 and higher.

How works real-time previews



How to make it work

  1. Install Chrome extension
  2. Install Photoshop extension
  3. Restart Photoshop and Chrome
  4. Make sure that Generator plugins are allowed in Photoshop
    Edit > Preferences > Plugins > Enable Generator (other settings does not matter)
  5. If plugin is corectly loaded then you will see gray menu item in: File > Generate > Phantomatic. This menu item is not clickable and it works only as indicator. Sometimes "Generate" menu item is not available when you start Photoshop. You have to open some document and wait a while.

Supported

  • Update previews for all images with the same URL on website
  • Update previews for multiple different images on multiple websites in multiple browser tabs
  • Image tag
  • CSS background-image
  • Https, http, filesystem, dataurl (base64)
  • PNG, JPG, GIF, BMP
  • Partly supported: SVG as external file. Rasterized in Photoshop.

On the roadmap for next version

  • CSS :before and :after pseudo elements
  • CSS content property with image url
  • CSS border-image property
  • CSS list-style-image property
  • Sourceset atribute.
  • Apply autopreview on newly added website elements

Currently not supported

  • Multiple urls in background-image CSS property
  • Inlined SVG
  • Formats: WebP, HEIF, TIFF, APNG
  • Canvas tag
  • Video tag

Preview image specification

  • Always lossless PNG 32bit with alfa (transparency)
  • Preview image is served from "localhost" url. This means that are not served from internet but from your own device.
  • If Phantomatic is allowed for certain URL then content-security-policy headers are temporary disabled. Because some website might not allow you to show image from non-whitelisted URLs.

FAQ

How to control Phantomatic inside Photoshop?

Phantomatic has no user interface in Photoshop. You will create/remove connection via Chrome Extension. Then any change in Photoshop will update image in website automatically.

Contact me

About the Author

My name is Jaroslav Bereza. I live in Brno in Czech Republic and I spend about 10 years as web-designer and web developer. I am currently working as full-time Photoshop extensibility developer on private corporate extensions. Anyway I found some time for this side project. :-)

Any questions or ideas for improvement?

Let me know!



Copyright © 2018 · Jaroslav Bereza - All Rights Reserved | Icon made by Petr ┼átefek