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.
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.
Click on Layer -> Duplicate Group.
Save it as a 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.
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.
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.