How to convert webpages to PSD docs?

Most of the time, to capture a webpage, you only need to to take a screenshot of your browser. All you have to do is to enter ⌘-⇧-5 and, that's it. However, this technique is limited. Getting the entire webpage is just impossible. Moreover, imagine you're a graphic designer, and you want to make a quick edit of the page; it is unimaginable with a bitmap image. This article presents WebToLayers, a Mac app that can capture entire web pages and convert them to Photoshop documents.

What is WebToLayers, and how to use it?

WebToLayers is an application for macOS (11 or later) designed to capture webpages in two formats: capture entire webpages as PNG and JPEG and convert webpages to editable PSD documents. The application is also able to simulate devices such as mobiles and tablets. Thus, with this tool, you can test your websites, present them to your customers, and make editions easily without reading the sources.

Step 1: How to load the webpage in the desired size?

The use of the app is straightforward. The first thing to do is to open an empty document. For this, you just have to click on the icon of the app.

Then, you have to enter the address of the webpage, exactly as you do on Safari. Press enter, and WebToLayers will load the page.

After the page loads, you may want to change the size of the rendering. You can do this by simply clicking Change Page Size> Use Custom Size. Also, the list of most used devices is predefined. Therefore, you can quickly test your website on an iPhone, iPad, or others by selecting the desired device in the list.

Step 2: How to capture an entire webpage?

Capturing a webpage has never been as easy. You have to click on the camera button located beside the address field. You can choose to capture the webpage as PNG or JPG. The application will ask you the location of the output image. After the validation, the applications will immediately generate the image. (To generate the entire webpage, you have to set the height of the page to 0).

Step 3: How to generate PSD documents

Generating a PSD document is as simple as the previous step. Instead of selecting Capture as PNG/JPG, you must select Capture as PSD. As before, the app will ask you for a location. After the validation, WebToLayers will start the creation of the document in the background. The app may process for a few minutes. The resulting document is a PSD file representing your webpage that can be edited by Photoshop, PixelMator, Acorn or even GIMP.

Where can I download WebToLayers?

If you want to capture web pages or convert them to PSD documents, you need WebToLayers. The application is free to download. A demo version of the app is available on our website. You can also find it in the Mac App Store.