In this Photoshop tutorial I will take you through the process of slicing a Photoshop graphic so that it can later be coded into a working web page element. The design which this tutorial will be slicing has been taken from a previous tutorial – “Create a reflective counter in Photoshop“. Since this tutorial will …
In this Photoshop tutorial I will take you through the process of slicing a Photoshop graphic so that it can later be coded into a working web page element. The design which this tutorial will be slicing has been taken from a previous tutorial – “Create a reflective counter in Photoshop“.
Since this tutorial will be slicing what we created in a previous tutorial I suggest that you first download the PSD file. You can download it here. With that downloaded and open in Photoshop, let’s get started with the slicing.
Just as a reminder, this is what we will be slicing.
Slicing images in Photoshop is usually a simple process and should be quite easy to do given the simplicity of the graphic we’re using. It can however become quite complicated especially when slicing more complex graphics therefore you need to keep in mind that this Photoshop tutorial only covers the very basis of slicing.
With the PSD open in Photoshop you should see the guides – we’ll be using these to make sure the image is sliced in the right places. Firstly however we need to add an extra few guides. Add a new guide by going to View >> New Guide and entering the necessary details into the box which pops up.
Firstly, create a horizontal guide at 127px – we have to do this because the styling applied to the layers comes outside of the current guide and we therefore need to adjust it accordingly. Secondly, create a new vertical guide at 60px – this one is so we have a rounded end image. Then, create another vertical guide at 49px – this one is because the styling of the layer comes outside the existing 50px guide. And finally create a new vertical guide at 61px – this is so we have a 1px wide image which will be used for our background. The background only needs to be 1px wide as it repeats horizontally.
We will only actually be needing to make two slices, before we start though you should toggle the ‘Background’ layer to be invisible. We do this so that when we export the images as PNGs we can place them over any background colour and it’ll look great.
Choose the slice tool from the tools window. To make a slice simply click and drag whatever region you want to be sliced.
In the image below I’ve marked two areas by indicating them with two brighter colours. The following image is zoomed in with the guides visible so you can hopefully see it better. Using the slice tool click and drag to create these two regions.
With that done, you should have two sliced areas as well as several others around it. It’s only those two which you’ll be needing though.
That’s pretty much the slicing step over and done with. We now need to export the image slices. To do this go to File > Save for Web. In the box which pops up on the top, right hand side you should choose ‘PNG-24′ from the second drop down and make sure that the ‘Transparency’ box is ticked.
Then click ‘Save’.
You’ll then be prompted to choose where you’d like to save it to. Navigate your way to en empty folder someone on your hard drive. Give it a name, for example ‘counter’. Using the dropdown set the ‘Save as type’ option to ‘Images Only’. Then click ‘Save’.
If you then browse to that folder you should see 6 image files. We are only interested in two of them: ‘counter_03.png’ and ‘counter_04.png’. You can delete the rest. The two images we have left are now ready to be coded into our web page element. Firstly though, there’s two things to do.
Check to make sure that the dimensions of these images are correct. ‘counter_03.png’ should be 11px by 52px. ‘counter_04.png’ should be 1px by 52px. If they are not then something has gone wrong – most likely you created too many slices in Photoshop which meant the filename numbers are different. If this is the case either start again in Photoshop or take a look at the images you’ve just deleted and extract the right ones.
We now need to make the right hand curve as we currently only have the left. To do this open up ‘counter_03.png’ in Photoshop. Then go to Image > Image Rotation > Flip canvas horizontal. Then, save the image by going to File > Save for web and choose the same location as you previously saved them. This time call it ‘rightcurve.png’.
One final thing left to do – you should rename ‘counter_03.png’ to be ‘leftcurve.png’ and rename ‘counter_04.png’ to be ‘background.png’. You should now have three images which are ready to be coded.
We will code them up in the next tutorial so stay tuned!