PSDETCH
A design tool for developers.
Goto Studio
open_in_browser Open Design Files
Open Adobe Photoshop, Image and PDF files directly from browser online or offline.
layers Measure & Export Assets
Measure size and distance between layers and export layers in PNG, JPEG or SVG format.
cloud Cloud Storage
Use your own cloud storage like Google Drive or Onedrive for collaboration, revision and annotation.
money_off Free
No subscription, no purchase. PSDETCH is completely free.
Open in Browser

Open design files (various formats) directly from your browser. No need download anything. PSDETCH supports most of the mordern browsers. Chrome is recommended for better graphic performance.

Offline Usage

Thanks to Service Worker, PSDETCH is still accessible without internet connection. Simply bookmark studio, you can use it with or without connection. Check this post on how I did it.

File Formats Support

PSDETCH supports different type of design files:

  • Adobe Photoshop (PSD, PSB file)
  • Plain Image (png, jpg files)
  • PDF Files (pdf files)
  • Sketch App (sketch file) – Coming soon

More file formats are on the roadmap.

Extract Layer

PSDETCH extracts layers from design files like Adobe Photoshop and PDF. Depending on the type of the layer, it can be then exported as PNG, JPG, or SVG file. If export format is an image, some simple adjustment (like color overlay) can be applied.

Export Text & CSS

For text layers, addtion to Image, it is able to copy its text value as well as its css styles.

Accurate Measurement

Get layer size / distance / position by simply hovering mouse. Smart pixel trim algorithm gives you accurate measurement to exact how design looks.

Color Picker

Color picker gives true color value extractec from original design file to make sure the accuracy. Simply move mouse around to pick color and click to copy.

Layer Information

Need more information from design files? No problem. PSDETCH extracts raw layer information like layer effects / metadata / location. Use them as a base to build the app styles.

Google Drive Integration

Seamlessly integrate with Google Drive. Just connect PSDETCH with google drive and start commenting / sharing and revision.

Compare two images

With PSDETCH, it is able to compare two design files (Photoshop, Images etc) or two revisions from cloud drive to quickly find the differences.
This dramatically increases the efficiency of working on different versions of same design file.

Onedrive Integration

Got Microsoft Onedrive? Good! PSDETCH works just with Onedrive. Now open PSD / Image / PDF files directly with PSDETCH from your Onedrive account.

Request a new feature or found a bug? Report it