top of page

Phantomatic (BETA)

Phantomatic offers a straightforward way to check whether an image perfectly fits into the website!

​

This tool will save you from all that boring export/open/upload/refresh clicking. Monotonous repetitive work is for robots and not for creative minds. You can simply open a webpage, send the image into Photoshop, and what you do in Photoshop will instantly be placed in a real functional website. That is it!

 

But only you in Phantomatic can see it. No one else. Once you are happy, export the image and upload it to the web for real. Right at first try!

​

See it in action

The rights of all materials in this video belong to their owners. This video is only a showcase.

For now, there is a Portable version only. Simply unzip the folder and double-click the app and only Photoshop 22.2 or higher is supported.

The Beta version is 100% free. A stable version might be paid in the future. Users with the best feedback will get paid version for free

Supported

  • <IMG> tag

  • <PICTURE> tag (only currently shown)

  • CSS background-image

  • srcset attribute

  • "data:" URL with text

  • "data:" URL with base64

  • pseudo element ":before" with css background-image, content or both

  • pseudo element ":after" with css background-image, content or both

  • Images that are available only after login

  • External SVG*

  • Inlined SVG*

  • Replace all images with same URL within page (good for sprite sheets)

  • Automatically replace images after page reload or document change (e.g. AJAX)

  • DevTools like in Google Chrome are included so you can inspect page and change CSS

* SVG​ is rasterized in Photoshop and in some cases it might not look reliable

On the roadmap for next version

  • <IFRAME> tag support

  • Possibility to have multiple tabs

  • Better possibility for resizing page

  • Possibly of the full-page screenshot

Not supported

  • Images served from "blob:" URL

  • Webfonts e.g. Font Awesome

  • Colorful emoji that are actually Unicode text

  • Video

  • Multiple images in "background-image" CSS property (first will be used and replaced and others removed)

  • Favicon

  • Canvas (could be supported in future)

  • Border-image CSS property (could be supported in future)

  • List-style-image CSS property (could be supported in future)

How to make it work

  1. Make sure that the latest version of Photoshop is opened.

  2. Download Phantomatic and unzip the content.

  3. Find "Phantomatic Beta.exe" and run it.

  4. You should see message "Can't connect with Photoshop". Click the button "Install panel"

  5. Confirm plugin installation with button "Install locally"

  6. Done!

Requirements

  • Windows 10 - 64bit

  • Photoshop 22.2 or newer

​

MacOS version will follow soon.

Preview image specificantion

  • Always lossless PNG 32bit with alfa (transparency)

  • The preview image is served from the "localhost" URL. This means that your images are not served from the internet but from your own device.

  • Content-security-policy headers are temporarily disabled in the case of media. Because some websites might not allow you to show images from non-whitelisted URLs.

Other specifics and troubleshooting

  • Some websites that are using service-worker with security header (e.g. Twitter) might block Phantomatic from work. Hopefully, I will find a solution.

  • Only one instance of Phantomatic can be currently active

  • Before you login into a different user account within your computer, please make sure that you closed Photoshop and Phantomatic.

  • Since Phantomatic currently does not support tabs and windows then links that would open new tab/window will be opened in the same webview instead.

  • These browser permissions are blocked automatically in order to increase security: download, filesystem, geolocation, load plugin, media

  • These browser permissions are enabled automatically: pointer lock, fullscreen

  • Phantomatic tries to auto-update images even those added in infinite scrolling. If this won't work then manually click button "Update images"

  • The image bar at the bottom shows all images that you searched for but only within the same domain

  • If "Find image" or "Ctrl + S" doesn't work please try multiple times. Sometimes first try fails.

  • Images (IMG tags) with size 1×1px will be ignored. These are usually just pixels for tracking visitors

  • For searching images with cursor area, 20×20px is used for convenience instead of 1×1px

  • Searching with the cursor will not fetch the only image in the top element but all images of all elements within that spot. Therefore multiple images can be found

How to install

Changelog

0.2.1

  • Changes white UI into dark UI

  • Fixes problem with automatic reload on pushHistoryState

  • Fixes problem when images won't be found after using shortcut Ctrl+S when cursor position didn't change after page load

  • Adds notification when Iframe was detected in the target area

  • Adds notification when no image was found in target area

0.2.0

  • Initial release

bottom of page