Step 1.

Open PSD template. Expand all layer folders (except for the last folder “Don’t Change”).

Step 2.

Grab an image and drag it onto the template.

Step 3.

Move image to the top of the template (for DESKTOP rendition), scale to fit the pink box (click and drag any corner while holding SHIFT key), hit RETURN to exit transform mode.

Step 4.

Under the Layers window, drag the image layer and place it above the pink rectangle layer under “DESKTOP” folder.

Step 5.

Right-click on the image layer > Create Clipping Mask. Now the image fits in the box. Make adjustment of the image placement or size if necessary.

Step 6.

Duplicate the image layer. Right-click on the layer > Duplicate Layer > Click OK.

Step 7.

Drag the copied layer to the pink rectangle layer under the next folder (ex. after DESKTOP, move onto TABLET LANDSCAPE).

Step 8.

Move and/or scale the image. Then repeat from step 5.

Step 1.

Double-click on the “file-name-goes-here” folder to rename.

Step 2.

Follow the file naming convention. Include the file extension at the end of the file name. To make sure a 2x version is saved, add a comma "," at the end followed by "200%" then your filename again with "@2x" at the end.

For example, the folders you're renaming in should look like:
filename.jpg, 200% filename@2x.jpg

Step 3.

Repeat the steps and rename all remaining folders.

Step 4.

Go to File > Generate > Image Assets.

This will create a folder in the location of your PSD template file with the exported image assets.

Step 1.

Open Image from Computer.

Step 2.

Select the Crop tool (C) on the top left corner of the palette window.

Step 3.

From the Tools Option window on the top, select “Output size” from the dropdown menu and enter the values of the image following the specs (ex. banner image in desktop, 1x would be 1920x400).

Step 4.

Using the Crop tool, click and drag on your image and adjust until you are ready to crop.

Step 5.

Double-click on the image OR hit RETURN. Your image should be cropped to the correct output size.

Step 6.

Click File > Save… (Ctrl + S)

Step 7.

Rename the image and follow the file naming convention. Choose either JPEG or PNG format (JPEG is highly recommended unless the image has a transparent background).

Step 8.

If your image is in JPEG, check the size of the image. Keep the Quality level at 80 so that the image is in a fairly high resolution, but not too large. No image should exceed 200 KB. Click OK and save to your computer.

Step 9.

Repeat the steps for other breakpoints of the image.

Step 1.

Open your image. Click Open > Computer (or other sources). Make sure your image is large enough so that it can be cropped to the appropriate size following the specs.

Step 2.

If your image is too large, go to Resize (from the Basic menu on the left hand side), and scale down to the size of your choice. Make sure the scale ratio is locked.

Step 3.

From the Basic menu, select Crop > Freeform > uncheck the “Keep Proportions” box > enter the values of the image following the specs (ex. banner image in desktop, 1x would be 1920x400).

Step 4.

Adjust the position of the bounding box shown on the image. Do NOT drag the corners of the bounding box because the image size will be altered. Then click Apply.

Step 5.

On the top menu, click Save. Rename the File Name following the file naming convention.

Step 6.

Select File Type (JPEG is highly recommended unless the image has a transparent background). If your image is in JPEG, select the Quality level (check the file size). No image should exceed 200 KB.

Step 7.

Click Download and save to your computer.

Step 8.

After saving, on the top menu, click Original and repeat the steps for other breakpoints of the image.