Est. Reading Time: 14 minutes
Let me start off by explaining the bigger picture a bit and why this issue is worth writing about in the first place. In the past, I have had to deal with badly organized design files where nothing is in any particular order, nothing is named appropriately, and there are no slices. Trying to sort through it in order to make a simple update is like a guessing game. It wastes a lot of time and can be very frustrating. Just because you know how everything works in the design file, does that mean when the client asks for a change months later that someone else will be able to come behind you, open the file, and be able to clearly discern where everything is and how it’s organized? Will you remember months down the road? I can tell you from experience that if things are not organized and named well in a design file, the answer to that question is an emphatic “No”. Some design files can have 80+ layers containing hundreds of graphics and things can get pretty complex. Trust me, it always helps to find things in the file if the layers, groups, and slices are well organized and named accordingly… and it helps to have slices. This really isn’t an option, at least it shouldn’t be.
There are bigger issues than simple file organization and naming. I have had to make updates to websites that required updating the graphics. A basic example of this would be that the company logo has been updated and the new version of the logo needs to replace the current logo image on the site. This should be a simple change and will be if there is a design file with a slice path for the logo graphic. If not, this might not be so easy. This can especially be troublesome if the logo sits on a gradient background. In order to have the gradient line up when the logo is replaced, you need to know exactly where the logo image sits on the background. If you crop the logo out of the design and you’re just one pixel off, it will show because the gradient will not match up. One solution may be to save the logo out as a transparency, but what if that’s not an option? Because in some situations it won’t be an option for one reason or another. This scenario demonstrates the problem with the old Photoshop crop and undo method. Because with that method, there is no record of where the graphic elements were cut out of the design. This can really be a problem when you have to go back to the design file and figure out where and how something was cropped originally, because sometimes it is not so easy to get it to match up.
Glad you asked! Okay, so obviously the slices I’m referring to have nothing to do with bread. Instead, it’s a neat tool for cutting a design up in smaller bits. Both Photoshop and Illustrator have a Slice Tool (formerly called “Knife Tool”). Of course, just like with most of the other tools Photoshop and Illustrator have in common, the Slice Tool works a bit differently in Photoshop than it does in Illustrator. I prefer Illustrator slices because in my opinion, they are easier to work with.
In order to make a website, you have to cut the design up in pieces sort of like a puzzle and then cleverly put it back together using HTML and CSS. In Illustrator, using the Slice Tool allows us to cut the design up in the necessary puzzle pieces. Basically, you use the Slice Tool to draw out rectangles (paths) over the graphic area you wish to cut out of the design. That is the sole purpose of slices, to carve the graphics out in rectangular pieces from the design file. The best part is that the slices are saved in the file, so you have a record of it. In Illustrator you can make a Slice Layer and have all your slice paths under that layer. This makes the slice paths easy to find, and allows you to maintain the exact dimensions of all the graphics that were originally cut out of the file. You can hide the slices so that you don’t see all the slice path outlines, show the slices when you need them, and you can lock the slices, which is usually a good thing to do to ensure you don’t accidentally move the slices around. So if you come back to a design file a year later in order to update some of the graphics, you can use the original slices in order to make sure the graphics are cut out exactly like they were when the website was originally developed.
Before you create slices it is a good idea to create a new layer at the top of the layer stack and name it “Slices”. The reason for this is that the Slice layer is a “special” layer and you should treat it differently than other layers. Once you make a Slice layer, you can then make slice paths and place them within that layer. I will explain more about this and why they should be at the top of the layer stack a little later on.
During the process of creating a website design there comes a point when screenshots are needed in order to present the design to the client for feedback and approval. This is the point where I always create a Slice layer in the design file. So often times, once I hand a design file over for development, it already contains a Slice layer at the top of the layer stack with a layer named “screenshots” that contains all the slice paths I used to make the screenshots within it.
Whenever you make a slice path, Illustrator gives it the name “<Slice>” by default. It is a good idea to rename the slice. To do this, double click on the path in the layers palette and a window will pop up where you can type a name for the slice.
Meaning… names give things meaning. It does not make sense to use a name for a slice that is in no way related to what the slice is being used for. Just like with programming and development, typically it is a good idea to give variables, id’s, and classes meaningful names related to their purpose, so it is with slices in a design file. For example, if you are creating a slice path for a submit button, then a meaningful name for that slice might be “submit” or “submit btn”. Whatever you choose to name it, just be sure it is relative to the graphic that the slice is being used to cut out of the design. The reason this is important is because not only do some website design files contain tons of layers and graphics, but they will also need many slices in order to cut all the graphics out. Again, it is very difficult for someone else to open up the design file months later and figure out which slice goes to which graphic, and it only makes matters worse when there are 80 slice paths that are in no particular order, and they all have arbitrary names or even worse, they’re all named “<Slice>”.
Earlier I referred to the Slice layer as “special”. The reason for this is that you can do things specifically with slices that you cannot do with other graphics layers. In Illustrator you can choose to “Show Slices”, “Hide Slices”, and “Lock Slices”. When you choose one of these options, it only affects the Slice layer and slice paths. It does not show, lock, or hide, any other layers. The other thing that makes slices special is that they should be placed at the top of the layer stack in order to maintain your sanity. Trust me on this.
The Slice layer containing slice paths should reside at the top of the layer stack. As a best practice, nothing should ever be placed on a layer above the Slice layer. This is because slices should always be above the graphics they are meant to cut out. Imagine trying to carve a space out of something located on a shelf above your head, but you cannot see it because you are unable to look up, you can only look down. That is sort of the way slices work, they cannot see what’s up above them very well, only what’s below them. Thus, the graphics you want to cut out should always reside below the slices. As a matter of fact, Illustrator sort of does it for you.
If you have a graphics layer selected and switch to the Slice Tool in order to create a new slice path, by default Illustrator will create a new slice above your current layer (the one you had selected before you made the slice path). That’s a neat trick and it’s great Illustrator does that for you, right? Sure it is. But it is also a great way for you to lose track of where your slice went. So keep track of where you create your slice paths in the layer stack and if you happen to accidentally create a slice path while you have a graphics layer selected, grab that slice and move it up under the Slice layer. If you don’t, you may encounter some puzzling side effects of buried slices. I’ll refrain from telling what those side effects are, I’ll let you figure that out on your own. If the problem ever presents itself you aren’t likely to forget it again. The best way to avoid it altogether is to make sure all your slice paths end up under the Slice layer!
With slicing, you can either save each slice as you go, or you can wait until you have all the slices done. When saving out slices, slice order matters, really matters. Generally it is a good idea to move the slice path you want to save to the top of the stack in order to make sure there are no overlapping slice paths above it. If there are overlapping slices, the topmost slice wins and this can produce some strange results. So put the slice you want to save on the top, that way it will win every time!
When you are ready to save your slices, you will need to use “Save For Web & Devices” instead of the traditional “Save” or “Save As”. When Saving For Web, you will be presented with various options. Different people like to set their Save For Web options differently. You can have Illustrator write out HTML for you (I don’t usually use Illustrator’s generated HTML), you can choose the file type (.jpg, .png, .gif) and specific settings for each type, have Illustrator save out multiple slices at a time, specify a naming convention for slices, a naming convention for the saved images, and also choose to have Illustrator save all the images to a specific place automagically. Feel free to explore all the options and decide which ones work best for you.
Now that you know how to use slices, below you will find some extra tips for a few of the peculiarities I have experienced when using slices.
Depending on how you look at it, or rather how you use Illustrator, one downside can be that Illustrator allows for decimal measurements and placement of graphics. This can be a problem with web graphics because in HTML and CSS, there is no such thing as a .5 pixel. If you make a slice and its x-position on the Artboard is at 100.725 pixels and its width is 200.256 pixels, well that does not compute in HTML and CSS. In order to resolve that issue, Illustrator forces the slice to use whole numbers instead of decimals when it is saved out. You will see your slice path outline, and then a second outline showing the actual size and location of the slice. This second outline is Illustrator compensating for the decimal numbers, and it always rounds up and chooses the ceiling of the decimal number for width and height values. So if you have a slice path 200.256 pixels wide, Illustrator will make the actual size 201 pixels. Also, if the slice has an x-position or y-position that includes a decimal, Illustrator will force the positions to be whole numbers as well. Again, you will see your path outline and a second outline showing the actual location/size of the slice.
In Illustrator, one of my favorite tool panels available is the Transform Panel. The transform panel makes it very easy to measure and place elements to the exact pixel needed. The thing I love the most is that you can do math right inside the Transform Panel. If you need to move an element to the left or right 20 pixels, then you can just add or subtract 20 pixels from the x-position. You can add, subtract, multiply, and divide in the Transform Panel.
The Transform Panel also works well with slices. If you create a slice and you see the slice path and a second outline showing the actual size and location of the slice, then you already know that the slice dimensions are not whole numbers, or the slice x & y positions are not whole numbers, or all of the above. You can use the transform panel to size the slice correctly and put it in the exact place you need it. In the transform panel, choose the registration point that coincides with the top left corner. Once you have done that, you can set your x-position, y-position, width, and height to whole numbers and the slice will adjust accordingly.
Sometimes you may try to slice out a graphic but when you save it out, either nothing is saved, or the image that was saved is blank. If this happens, try turning on the Artboard and see if the graphic you are trying to slice out is positioned outside the Artboard area. If it is, you can adjust the size of the Artboard to include the graphic you are trying to slice out. This should fix the problem.