In this tutorial, we are going to slice the backgrounds for Zocura. Please note that the current design might have change.

First of all, lemme apologize if this sounds too basic to you.

But for a complete newbie like me, this is something that you should master if you are a web or mobile apps developer.

Here’s how a designer usually pass a design to you.

zocura design agency singapore

In this case, it is a one page website design. There are 4 scenes in total. As such, we are going to extract 4 backgrounds and save it individually as in image, be it in PNG or JPEG format.

Here are the steps:

Select the layer that you want to extract.

landing page

Click on Layer -> Duplicate Group.


Save it as a new document.

new document

The background image layer has been extracted. However, now, you need to trim the layer, and get rid of those transparent background. Go to Image -> Trim. Trim the transparent pixels.

1Trim Transparent Pixels

Hide all elements that you do not want to see in the image. In this case, I just want the background image image with the logo and the slogan. However, when you develop a website for client(s), any form of text has to be typed out or coded where possible.

1Hide Elements

If you still see transparent pixels, trim it.

Save for web, or whatever format that you want.

There you go! You have successfully sliced a layer, and extracted your desired background image.


Repeat steps 1 – 7 accordingly to do extract any specific image(s) / layer(s) / icon(s).

Alright, that’s all for today! It may not be the best or simplest way to slice a layer, but I think, it is sufficient enough for me at this point of time.