How to use PixelServed with Photoshop

This tutorial shows how to use PixelServed with Photoshop. For this purpose we will use a feature in Photoshop that allow us to automate the export of image assets. You can read more about this on Adobe website https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Step 1

Make sure you have PixelServed Desktop Connector installed, if not, download the latest version from https://pixelserved.luciandinu.com

Also make sure that, you have already followed, the steps from Quick how to use, to connect the mobile app.

Step 2

Open Photoshop and create your file with your design (let's call it my_file.psd). Save the file somewhere on your disc (let's say my_work_folder).

Step 3

Create a group in your Photoshop file that contains the design you want to preview. We will use a special notation for the name of the group.

See the example below (if you want to read more about this notation head over to https://helpx.adobe.com/photoshop/using/generate-assets-layers.html)

Step 4

Let's make sure that in Photoshop we have the asset generator active. To do this, check in the File menu → Generate if the option Image Assets is checked (if not please check it).

Step 5

Now that we have everything setup every time you do a change inside the test.jpg group Photoshop will export the resulting file named "test.jpg" inside "my_work_folder/my_file-assets".

All we need is to set up PixelServed Desktop Connector to watch this file and once the change is detected it will push it to the device.

Step 6 (optional)

If you have issues, with PixelServed Desktop Connector in watching your file you can enable the Aggressive mode.

That's it!