How to Slice and Image and save as CSS
If you have Adobe Photoshop, you most likely would want to use that program, but if you don't have Photoshop, I'm sure there are other alternatives that you can use, just will have to do some research. Here are the steps that you will want to take when slicing images.
- Open the image you want to be slicing in Photoshop and make sure your rulers are showing
- Pull down the guides around the part of the image that you will like to slice. (You can use the slice tool, but using the guides is a bit easier).
- When you have put the guides around the areas that will be sliced, at the top of Photoshop in the toolbar, there is a button that says "Slices from Guides" that you want to click. That will turn all of the sections you created with the guides into your slices.
- Before you save, you want to combine the slices. Use the slice select tool, click on a slice, hold down the shift button and click the rest of the slices you will be combining.
- After the slices have all been selected, right click and click on combine slices.
- When it is time to save what you have done, you are going to save for web and devices. This will allow you to go to each slice and optimize them.
- Click on save, choose a name and place for the file. Then on the drop down menus, click on images only. For settings, it's going to be custom so you can save as CSS.