Are you a newbie in web design who wants to convert Photoshop (PSD) file into HTML/CSS code, but not sure how to slice images out of it? Then, this quick tutorial is what you need.

From the first sight, slicing images out of a Photoshop (PSD) file seems to be a simple thing to do. If you read Stackoverflow or Quora, or any other website, where people share experiences with others, then most likely you will notice that everyone says that it is a simple process which does not require much time to learn. However, before I taught myself how to slice images out of a Photoshop file I got a couple of gray hairs. The first mockup I tried to slice out myself was one for these mobile apps. I would recommend you not wasting your time as I did in the beginning and simply follow this step-by-step tutorial for quicker results. I hope you will find this how-to guide useful.

To get started, you need to have a PSD file created whether by you or any other web-designer. If you do not have one, google “free PSD mockups” and in search results you will find a couple of websites where you can download free high-quality PSD mockups, including mockups for mobile apps.

In my example, I will use some random PSD mockup for WordPress and slice the logotype out of it.

Our logotype consists out of two elements “Polo 360” graphics and “My kind of business blog” text.

Next, in Photoshop toolbar find “Move Tool (V)”. Typically, it is placed on the top of other options.

Also, make sure to enable Auto – Select option. On a later stage, this will help us find the right layers quicker.

Now starts the most interesting part. We need to find all layers where our logotype is placed. As a rule web-designers neatly organize all layers into folders and you will not need to spend much time looking for them. However, exceptions happens and sometimes you will need to put you best detective hat to find them. Working with layers can be a little bit tricky. If you feel, that you need more training in this you can check this YouTube tutorial. I find it quite useful and informative.

When finished, highlight the needed layers with a red color (or with any other color you like) and start merging them holding CTRL button on your keyboard.

Then right click with your mouse and choose “Merge Layers”

Merged layers will look like this:

Now when all logotype layers are in one place, we are ready to slice them. In Photoshop toolbar choose “Rectangular Marquee Tool(M)”

Embrace object in a random rectangle

And copy the selected area using the combination of buttons Ctrl+C on a keyboard. Press Ctrl+N and create a new Photoshop document, give it a name, in a Preset field choose “Clipboard” and click Ok.

Then system will create a new document with an empty space

Press Ctrl+V and inset the sliced object.

And that’s all. Now you need to save the image. To do so navigate to File and click Save For Web.

You’re all set. Now you should have a sliced image that you can use whenever you want.

Tom Parillo

Tom Parillo

I am interested in all things technology, especially automation, robotics and tech that helps change how society will live in the future.