[Photoshop] Slicing and Saving Your Web Design

Slicing and Saving Your Web Design

This tutorial is written for beginners and is just a simple tutorial on how to use the slicing tool to cut your Web Design and save it in .html.

Note: Some of the screen shots are cut off by the fourm, but it's not necessary to see the full image. I've added a link to the images so if they are cut off you can click them to bring up the full view.

Step One

Open your finished Web Design. Here I will just be using a screenshot of this fourm's portal page. As you can see there is not much to it but just the main buttons at top and one box for your contents.




Step Two

Now what you want to do is press [ CTRL+R ] to make your rulers visible if its not already. You can change the measurement of the ruler by right clicking on the ruler and choosing the measurement that you want.

After you get the ruler working you need to section off everything that you want to cut out. For example your buttons should all be their own image. The banner should be its own image. All the content boxes should be their own images as well as all the headers for every content boxes.

In order to section everything off and to make slicing more accurate we will need to make guides. To put guides on your web design just left click the horizontal or vertical ruler ( depending on if you want a horizontal guide or vertical guide ) and drag it to where you want it. After everything is done it should look something like this depending on how you want to section everything off.




Step Three

After all the guides are set, go ahead and pick your slicing tool. If you don't know where it is here's a screen shot of where to look.



Its the fifth tool from the top. I'm using CS4. If you see the crop tool, you'll have to right click the crop tool and hold your mouse there till more tools pop-up then pick your slice tool.

Since everything has guides all you need to do is take the slice tool and draw use it as a Rectagular Marquee and just select everythign you want to be cut out one by one. The slice tool should snap to the guides making it a precise cut. Granted your guides are lined up precisely the way you wanted it. Here's what I got after this step.



NOTE: The numbers one the top left of every square is the slice number. So when you save the file for the web, Photoshop will automatically name every slice with its slice number so it'll be easier to reference and add your contents to the .html file.

Step Four

After everything is sliced up and you like how it looks. Go to File>Save For Web and Devices. Here's a screen shot if you're not sure how to get there.



Now you'll be greeted with a screen like this:



I'm not going to go into detail what every option is. I myself am not sure what all the options do but all that you really need to know is what's highlighted in orange. You can select the type of image format you want to save your sliced up images as. After that you can click on the "Preview" button to see if everything looks ok in your web browser. After that click "Save" if your happy.

You should then see your typical save screen:



Find where you want to save it. I'd recommend making a new folder called "WEB SITE NAME" so it'll be more organized.

You will want to change the "Save as type:" to "HTML and Images". Click "Save" and photoshop will automatically create an "Image" folder and store all the sliced images in there and will create a .html file and save it in the root folder for you.

There you have it simple and easy. All you have to do now is open up the .html file in Notebook or a html editor of your choice and add your contents. Happy designing.

Awesome Tutorial! I'll make this a sticky in the webdesign section too Too many slices though.

Note: When web-designing make the slices as few and as effecient you can, it helps trust me.

Nice one!

thanks for the interesting tuturial

Adil wrote:Awesome Tutorial! I'll make this a sticky in the webdesign section too Too many slices though.

Note: When web-designing make the slices as few and as effecient you can, it helps trust me.

Nice one!

lol I haven't made a website in ages. I remeber when I first started to design I made a few. But I was never really good with coding etc. Just thought i'd share how to do the slicing in Photoshop since I know how to. This way member would have a basic idea of how to use the slicing tool.

Thanks for this tutorial! Its really cool and helpful! thanks !

Great tut. Finally, coding is now my only problem.

Same with me, but if i learn that too, il soon post my own tutorial

wow... looks very good tbh... shame i didnt realy get much of that and still dont know how to do it... thanks though

Hopefully Ill do a nice tutorial on coding in dreamweaver

Xx Navek xX wrote:wow... looks very good tbh... shame i didnt realy get much of that and still dont know how to do it... thanks though

Sorry you didn't get much of it But, if you have any questions feel free to ask .

Good tut +rep!