Tutorials > How to slice your Photoshop design for the web

Before a site is coded, it is most likely designed first in Photoshop, or some other software. If it's another program, hopefully this tutorial will still show you how to minimize the amount of images on a webpage.

What is slicing and what is it good for? First, if you have ever wanted just part of a bigger image and the only way you were able to get that was by cropping the image, then you should read this tutorial. Photoshop slicing allows you to select the part of the image you want and then save it separate from the rest. The best part is that you can do this with multiple slices at the same time. It is useful for web development, because it allows you to plan out the site in whole and decide which images will be links and which will be just static images and which will not be images at all, but replaced by HTML and CSS.

Very often during my web browsing, I notice web pages that have images for objects that could have been easily done with CSS. For example, you do not need an image for a solid (one color) background since that can be filled out (colored) in CSS. More specific, you have a logo on a solid background, you do not need have an image bigger than the logo.

For the design below, I can see right away that I will not need to use images for the right panel and the center panel backgrounds because they are solid colors. To get the color code for those colors, in Photoshop, I use the Eyedropper Tool (see image below) to select the colors and then I open the Color Picker Window (by clicking on the Foreground Color in the Tools Window).

In this case the right panel has #9bcefd as background. In CSS it will look like this:

If the design is all ready you can start slicing. I am assuming here that you are slightly familiar with the basic HTML tags and basic CSS.

1. Solid background

   For the design above, let's assume the background of the banner was a solid color.

   

   Pressing "K" in Photoshop you'll get the slice tool. You have two of them. One for slicing, the "Slice Tool", one for selecting and adjusting slices, the "Slice Select Tool". Zooming in I sliced the logo. Then I switched to the "Slice Select Tool" and double clicked on the slice to bring up the "Slice Options". I have renamed the slice to "logo" and now I can save just the sliced image. File>Save For Web will bring up a window that will allow you to select just the slices you want to save. If you want to code this yourself, make sure you select to save "Images Only" in the "Save as Type" box.

   

   Now that I have my image, the HTML will look something like this:

   <div id=”banner”>
   <a href=”/”><img src=”/images/logo.jpg” alt=”the name of my website” border=”0”></a>
   </div>

   I usually like to have the logo link back to the home page, hence the link.

   The alt tag is very important, leave it without any value, but never leave it out if you want to have valid HTML. The text in the alt tag is the text that appears if the image is broken or missing.

   The CSS will look something like this:

   div#banner {width: 962px; height: 142px; background: #069; padding: 10px 0 0 20px;}

   Padding, margins and borders have to be subtracted from the width and height in div tags, not so for td tags. So for the example above the actual width is 962px + 20px = 982px. Margins are on the outside of a div (block), the padding is inside.

   You can declare the padding for all the sides in one line:

   padding: top right bottom left;

   

   If you want the padding to be the same all around you only need to have padding: ###px; or if the padding is the same for the top and bottom and the same for left and right you can write it like this: padding: ###px ###px; It’s the same with margins.

   return to top

2. Gradient background

   If you have an image on top of a gradient you only need to slice a small sliver of the gradient and then the image.

   

   Because the gradient does not go across the entire banner, I didn't need to cut a slice that goes all the way across.

   

   The HTML looks the same as in the example above, the CSS changes like this:

   div#banner {width: 962px; height: 142px; background: #069 url(/images/banner_gradient.jpg) top right repeat-y;}

   The top and right coordinates for the url can be replaced with percentages, in this case 0 and 100%, or with pixels, 0 and 962px. The repeat-y repeats the slice up and down, repeat-x would repeat it left right and no-repeat, would not repeat it at all.

   return to top

3. Navigation

   Every menu (navigation bar) is basically a list of elements.

   Listamatic website lists every kind of navigation a designer might come up with and how to code it.

4. Borders and Rounded Corners

   Borders should be straight out CSS. The code below will add a gray 1px border to an element with attribute class="mybox".

   .mybox { border: 1px solid #ccc;}

   For a box with rounded corners and no border you only need four images, one for each corner.

   

   There are two ways to code this box, one is with tables and one is using divs. I will show the divs way because it's the newer way to do things and the harder way too.

   One way to code this using divs is to use five of them and put them all one inside the other. The first one (outer div) will set the width and the background color. Each of the nested divs will add a corner and the most inner div will set the padding and any other styles the content inside the rounded corners box will have.

   CSS

   .background {width: 200px; background-color: red;}
   .top_left_corner {background: red url(top_left_corner.jpg) 0 0 no-repeat;}
   .top_right_corner {background: red url(top_right_corner.jpg) 100% 0 no-repeat;}
   .bottom_left_corner {background: red url(bottom_left_corner.jpg) 0 100% no-repeat;}
   .bottom_right_corner {background: red url(bottom_right_corner.jpg) 100% 100% no-repeat; padding: 5px;}
   

   HTML

   <div class="background">
   <div class="top_left_corner">
   <div class="top_right_corner">
   <div class="bottom_left_corner">
   <div class="bottom_right_corner">
   <!-- content goes in here-->
   </div>
   </div>
   </div>
   </div>
   </div>
   

   For a box with rounded corners and a border you need eight images unless you really want to complicate your life and risk having your borders and corners misalign. To the example above you'd need to add four extra images (one for each side) and four extra divs. In this case, I would actually use a table, the code ends up being much cleaner.

   Of course if your box is always going to be the exact same width you can always just get a slice for the top and one for the bottom and solve your problem in three divs. Having the corners divided like this creates a more flexible box that can be used for different widths across the website. If you get even more advanced you can write yourself a JavaScript of PHP function which you could call like this: drawRoundedCornerBox(mycontent, width).