How to Slice and Save Images in Photoshop for the Web

Definition of a Photoshop slice: a Photoshop slice is a part of a bigger image.  So, if you have a big image, which is usually the case with designs for websites, you want to be able to “slice” that big image into multiple smaller images that will each have a different role on the website.

Step by step

  • Press “K” in Photoshop to 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”.
  • Slice the part of the image you want.
  • Zoom in.
  • Switch to the “Slice Select Tool”
  • Click on your slice and adjust it by dragging on the corners and edges.
  • Double click on the slice to bring up the “Slice Options”.
  • Rename the slice to “whatever you want” and now you 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. (Keep “Control” key down as you select the slices you want to save.)
  • If you don’t want any HTML pages, make sure you select to save “Images Only” in the “Save as Type” box.

Hints on how to minimize the amount of images your website has

  • Don’t slice any solid backgrounds. If your image has a lot of solid background, slice only the image part and set the background using CSS.
  • You only need a sliver (1px width or height depending on the direction) for a gradient, which can be repeated with CSS.
  • Any solid borders should just be done with CSS.
  • The text on links, should never be images, it makes them hard to change and they’re some of the things that are most often modified.

Bits of HTML and CSS code for your images

  • Here’s the code to make an image into a link. (It’s a good idea to set the border=”0” for your linked images in case someone still has some ancient browser.  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.)

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

  • Not really about images, but a good thing to check for when things don’t align properly: padding, margins and borders have to be subtracted from the width and height in div tags, not so for td tags.
  • Example CSS for a gradient that goes from right to left:

div#gradient {

width: 900px;

height: 140px;

background: blue url(/images/banner_gradient.jpg) top right repeat-y;}

  • For old times sake, because you can do all of this now with just CSS, here’s how to do rounded corners retro style:

 

For a box with rounded corners and no border you only need four images, one for each corner. Check out the slices :).

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 (EDIT: this was written back in year 2006) 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. 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).

 

 

How to Slice Your Photoshop Design for the Web

EDIT on January 2013: The strange thing is that this is my most popular blog post and this website is really not a How To site, but a personal site about my art.  Anyway, I wrote this post a long time ago and some of the info is outdated and the entire post is not that clear, so I rewrote this info here: http://www.franciart.com/wordpress/how-to-slice-and-save-images-in-photoshop-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).

page layout  eyedropper tool  set_foreground_color.jpg

color picker window

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

div#rightPanel {background-color: #9bcefd;}

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.

    banner with solid background

    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.

    slice example

    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;

    padding margin

    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.

    banner with gradient background

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

    example of gradient slice

    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.

    slice_solid_corner.jpg

    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).