Slicing Tutorial

In this tutorial, I'll be giving a basic rundown on how to slice a design made in Photoshop, and ready it for web use. The example is done in Photoshop CS3, so keep in mind there may minor differences from version to version. Also like I said this is a basic example... a lot can be accomplished with this tool so make sure you check out it's full potential in your spare time.

The design you see is a design I'm working on for the new version of The Armpit, so consider it a sneak peek!

The first step is to actually slice it. To do this, select the Slice Tool located on the tool bar. It'll be a knife icon by default. Make sure the actual Slice Tool is selected, and not the Slice Select Tool

With the Slice Tool selected, begin your first slice. Simply draw a rectangle around the object you're slicing. Keep in mind, the less slices you end up creating, the easier it will be to code and lay out.



Slice anything with images that is important and contributes to the design of the website. In my design, you'll see I had to slice the boxes designed for twitter updates, as well as the navigation buttons that uses images. The design also uses a repeating background for the main content area, so I sliced a sliver for that too. The main content area also required I sliced a header and footer for it.

Note: Using snapping (View > Snap) for the slice selections will insure that your slices line up edge for edge and are pixel perfect. This way when it comes time to lay out your slices through code, you won't have any discrepancies.



My design sliced out!

Now we have to name these slices. Hold down click on the Slice Tool and select the Slice Select Tool. Now, double click on a slice to bring up it's properties.



Now we can use this dialog box to give our slices names. Photoshop gives names automatically, which can get hairy when you're trying to identify one slice from the next. Refrain from using capitals and spaces obviously, as this is a web format we're preparing for. After naming your slice, hit Ok to close out. Repeat for the rest of your slices. This is also a great place to check dimensions of slices as you'll need to define their sizes when coding.

Next ... saving. There are a few tricks here that can help you big time.

When saving designs that use slices, you must go to File > Save for web and devices...



The following dialog box is one that is designed to help you optimize your design for web standards. Along the top you'll see Original, Optimized, 2-up, and 4-up. Original is your design in it's current state, Optimized is your design as example of saving it in it's highest possible settings, 2-up is a side by side demonstration of your design in 2 standards in your choosing, and 4-up is the same thing with 4 examples, for comparison purposes. Consider the requirements of your website and decide what file format would be best for your slices. For example, designs using transparency would best work with PNG formats (although IE 6 does not support this) and designs without transparency best use JPEG. Since this particular design uses little colors and not a whole lot of fine gradient detail, I chose to go with a medium JPEG detail. This will help speed up the load time on the web while not compromising appearance.

Once you have selected your file type, click Save to view more options.

The problem with Photoshop is that it assumes that we want it to write our whole website, code and all. We need to fix that and make Photoshop realize we're the web designers, not them!

In this new window, you'll a pretty usual Save dialog box, but focus on the bottom part. The first drop down box indicates what format you'd like to save the files as. Drop the box down to images only to prevent Photoshop from writing code for our site as mentioned earlier.

The 3rd box helps Photoshop indicate what exactly we want to save. As we just got done slicing an entire site, the appropriate option would be all user slices. However, other options such as Selected Slices is good for changing specific slices if you find that you must do so after saving them the first time.



The 2nd drop down box offers a chance to customize the way Photoshop saves these files. Go ahead and drop it down to Other..., because by default Photoshop tries to define a path to save this files out to. Drop the HTML box down to Saving Files. Here you'll see a check box with a place to save the images into, simply uncheck this.



Now click Save and you'll have all your nicely sliced images in a folder ready to coded up. Double check to make sure all your slices saved out properly.



Thanks for reading, check back for more!