Slicing Images Using Photoshop Tutorial

Written by : Transbara in web design / April 4, 2018

Back To Journal

Illiyin Slice Images

Slicing images in Photoshop looks simple, but if you do something wrong the result will not be appropriate. Noteworthy when slicing the images you need to pay attention to images size, images effect like shadow/ border/color overlay, and images shape.

The example below will show us how to slice images that have color overlay.

Slicing Images - slicing the image with a color overlayHint: When you move the mouse over image, a green box and play icon appear.

Now let’s start slicing images with color overlay.

  • In “Layers” tab, you can find the Image folder with layers of image or group image inside. We can take the image using Clipping Mask technique.

Slicing Images - Convert to Smart Object

  • Right click on selected group image and choose “Convert to Smart Object”.

Slicing Images - Convert to smart object

  • Next, double-click “Convert to Smart Object”

Slicing Images- Convert To Smart Object

  • A confirmation alert will appear as shown below, click “OK”

Slicing Images - Convert To Smart Object

  • If the conversion is success, the new tab will show the result of sliced image.

Slicing Images - Cropping the image


  • The image slicing result shows that the image size is smaller than canvas size. We need to crop the image.

Slice Images - Step Slicing Images

  • Press Ctrl and click layer Bg. Then press the “C” Button. The cropping tool will select your image automatically. Press “Enter” twice to fit the canvas to image size.

Slice Images - Step Slicing Images

  • The next step is save the image file use “Save for Web” feature. Press “Ctrl” + “Shift” + “Alt” + “S”. A dialog box will appear as below.

Slice Images - Step Slicing Images

  • You can save the image with “JPEG”, PNG, GIF, or WBMP format. For this case, we save with “JPEG” format.

Now you guys know how to extract images using slicing technique in Photoshop. Time to work on your slicing skill!


5 First Steps Before Starting Front-End Website Encoding – Illiyin Studio

4 April 2018 @ 09:13

[…] How To Slice Images Using Photoshop […]

Love to work with us? Let's talk about your great idea!

Talk With Us