No doubt you’ve heard about image slicing, but do you know what it is and how it works? Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too). But how does it work?

Well, you’d first design a page in Photohsop exactly as you want it to look when it goes live on the web. Then you cut out all the page components—title bars, buttons, navigation menus, and so on—using Photoshop’s Slice tool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well. Sounds awesome, huh?

Finally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. It’s a very cool process, and one of the most popular methods for building web pages.

The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. Ready? Lets get started!

Part 1: Designing Your Page ‘n Slicin’ it Up
So obviously, the first thing you’ll need to do is create a layout in Photoshop. In my example, I’m building an entire page, and because I don’t want any horizontal scrolling in my layout, I build for the most common monitor resolution, 1024×768. There’s quite a bit of debate as to how wide one can design inside a width of 1024 pixels, but I personally go with 990 pixels as my maximum width. This means that starting off in Photoshop, I create a new file with a canvas size of 990 pixels wide. As for the height, that’s usually determined by content, so you might want to give yourself lots of space to work inside.

Now in the case of creating a page object like a menu or header, you’d have to know the dimensions of the object before creating it in Photoshop.

Once your dimensions are set, it’s simply a matter of building your design. Design and lay out all your buttons, background graphics, logos, and so on, building up your page’s design. Use whatever tools, commands, and options you’d like. Often times, I’ll even cook things up in Illustrator, then drop them into my layered Photoshop layout as Smart Objects, just to make the process go faster.

If you’re building a page as I am here, don’t worry about actual page content—the text and other objects that would appear on the individual pages of your site. Imagine instead that you’re building a template. What you’re after is the overall look of all the pages in your site. Later on in Dreamweaver, you can drop in the content. Once your page design is complete, you’re ready to begin slicing it apart.

Slicing up your design is the fun part. What you’re doing is taking your overall layout and cutting it into smaller pieces. This means you’ll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout. There are a few different ways to slice apart layouts and page components, but I’ll show you my technique.

Here’s how to get started:
1. From Photoshop’s Toolbox, select the Slice tool.
2. With the Slice tool, click and drag a box all the way around your entire design.

This creates a single, large slice that encompasses your entire layout. I think you’ll find this to be the easiest and most accurate way to slice images.

3. Right-click (or Ctrl+click on the Mac) anywhere inside your design, and choose Divide Slice.
4. In the Divide Slice dialog that appears, decide how you’d like to break that single slice that you just drew. Turn on either Divide Horizontally Into or Divide Vertically Into (or both); then enter in the number of slices you’d like to create. Click OK when you’re ready.

This is where the craft of image slicing comes in. Look for natural breaks in your image. Remember, each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu, for example. In my layout, I’ve divided the image into three slices horizontally: one for the header area, one for the main area, and a third for the lower, footer area.

If Preview is turned on in the Divide Slice dialog, you’ll be able to see where your slice lines will appear in the image. Don’t worry if they’re not exact, we’ll adjust them in the next step.

5. Next, if needed, adjust the slice lines that appear on your image simply by dragging on them. You may want to zoom in for a little more precision.

You’re now ready to continue slicing apart your layout. I find it easiest to work from the general to the specific—in other words, look for main areas to slice away; then start getting more refined as you go. Once you have the general areas of your layout sliced, you’re ready for the more detailed areas.

6. To continue slicing apart your image, single-click inside a “general area” slice; then right-click (or Ctrl+click on the Mac), and choose Divide Slice once again.

Notice that when you single-clicked inside the slice, all the other slices in the image deselected? Now this time, you’ll only be dividing up the currently selected slice.

7. In the Divide Slice dialog, set the number of slices you’d like to create horizontally and vertically, just you did earlier.

As before, look for natural breaks in your layout. Remember, each slice is saved as a separate graphic, so you might want to isolate buttons, logos, and so on. Don’t get frustrated if you have to start over a few times. Image slicing does takes a bit of patience. Knowing where and what to slice is just a matter of practice.

8. Continue slicing apart your layout using the techniques described until you’re happy with how things are looking.

Things lookin’ good? Great, now you’re ready for the fun part!

Part 2: Savin’ Er Out
Once you’ve sliced up your layout, you’re ready to save everything out of Photoshop. And remember, not only will Photoshop save all your sliced images in one shot (meaning that you don’t have to save each of them individually), but it’s also going to build your page’s underlying code structure for you. So when you save your slices, Photoshop will also save an additional HTML file. That’s the file that you’ll want to open in Dreamweaver. Awesome is an understatement here, folks—it doesn’t get much sweeter than this!

Here’s how to save it all out:
1. Choose File > Save For Web & Devices.
2. In the Save For Web & Devices dialog, set optimization settings for your slices.

If you’ve never used this dialog before, I’ll give you a quick run-through on how it works. Holding down Shift, you can select the slices that you’d like to set certain optimization settings for—that is, compression options when you’re saving an image (or in this case, a group of images) for use on the web. Next, on the right side of the panel, you can set your optimization settings.

Depending on the file format that you choose, different options will appear. For example, in the case of JPG, you’ll see options for compression, quality, blur, matte, and a few others. Unfortunately, we don’t have the space to go through all the options, so you may want to read up on a few of these.

3. Once you’ve optimized your slices, click Save.
4. In the Save Optimized As dialog, name your file in the Save As field; then navigate to the folder where you’d like to save your slices. Don’t click Save just yet.

The location where you save your work will most likely be your site’s local root folder, as you’ve defined it in Dreamweaver (You may need to read up on defining a site in Dreamweaver if you’re not sure what I’m referring to).

5. From the Format menu at the bottom of the dialog, choose HTML And Images.

This ensures that Photoshop will not only save out your slices, but also all the background code needed to render your layout.
If you’d like to explore some of the other options available, choose Other from the Settings menu. You may want to experiment with a few of the commands found here.

6. When you’re ready, click OK.

Photoshop saves out all your slices, and the HTML needed for your layout. Pretty easy stuff. Now lets go take a look at what happened.

7. Minimize Photoshop; then navigate to the folder where you saved your work.

Notice that Photoshop created an HTML file, as well as an images subfolder. Inside the subfolder, you’ll find all the individual slices from your layout.

8. To see your completed layout, open the HTML file in your web browser.

Your layout looks exactly as it did back in Photoshop. Cool!

Part 3: Throwin’ In Some Dreamweaver
Now that everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, try opening the HTML file that Photoshop created, and you’ll see right away that everything’s been created with tables. In Photoshop’s Save Settings (Step 5 in the previous section), you can set whether to use tables or div tags.

Notice too that all the slices sit within the table’s cells. You can drop additional page content on top of your images using a clever technique: Remove the slice from the table cell; then set the cell to the slice’s original dimensions; drop the slice into the cell’s background; and finally insert new text or image content into the cell. This creates the illusion of the content floating above the graphic, as you can see in the screen shot.

Now you can begin making any adjustments you’d like. For example, you could center the layout, add in a background color, create any necessary CSS rules, begin dropping in your content, and set your hyperlinks.

From here, it’s all tweaking—adjusting CSS styles, text, and other page elements within your design. If you want a graphic to appear behind the text in a table cell (which you can see was done in the sample page design, which uses a crater background behind the text), remove a graphic from its table cell and set it as the cell’s background image, just as you did earlier in this chapter. Then insert your text in the cell as you normally would.

As you work, don’t forget to preview your page to see how your design is looking. And here’s one more trick: With your page working well in Dreamweaver and previewing nicely in those target browsers, use it as the basis for the other pages in your site by resaving it under a different file name for each page. Even better, you can use your page as a Dreamweaver template.

So there it is, a quick guide to getting started with image slicing in Photoshop. Experiment and try out some of the different options, and most importantly, have lots of fun!

Share & Enjoy


 

  1. narendra baloliya (Reply) on Wednesday June 4, 2008

    please slice dilog box

  2. Nathan (Reply) on Wednesday June 4, 2008

    @shaan

    There’s a couple of posts above yours that detail how to export as CSS (DIVs, not Tables); so its all good. But it is bad that tables are default, as is HTML.

    Should be CSS/DIVs and XHTML as default.

    I use slicing at work to export web graphics, but rarely the markup, however I’m gonna be going through it with one of our PHP coders soon to see if/how we can build it into our workflow. Because although it can’t replace proper markup, it can definately help!

  3. vajahat ali (Reply) on Wednesday June 4, 2008

    Nice Tutorial Sir

  4. DD (Reply) on Wednesday June 4, 2008

    Excellent tutorial. Thanks.

  5. george (Reply) on Wednesday June 4, 2008

    question: Is there a way to slice images that aren’t in straight lines? I have an image I would like to slice, but the lines of the image aren’t straight. The areas I would like to slice are curvy.

    thanks!

  6. [...] Once you have a design for your Web site, Photoshop has a slicing tool you can use to prepare your design for the Web. Slicing is simply dividing up your large image into a set of smaller images and saving them separately so you can make different parts of the image clickable. Learn more about slicing with this tutorial. [...]

  7. john (Reply) on Wednesday June 4, 2008

    its is good but please more extra fetures

  8. Una (Reply) on Wednesday June 4, 2008

    Help! Anybody got Photoshop CS4 and know where the setting is to exporting slices as CSS?
    I have searched everywhere in the settings, & can only find the option to export for XHTML but it still does it as tables. I only know CSS coding and have no idea about tables.

  9. Una (Reply) on Wednesday June 4, 2008

    Ah its ok I found it. You have to hit NEXT after selecting XHTML and then it brings up another menu to select output as CSS then further to select as ID, Inline or Class. Very clever. Havent tried it yet but I am sure its going the right way to be coding in CSS and not going back to tables! Cant believe CS4 has set its default to HTML and tables.

  10. Anna (Reply) on Wednesday June 4, 2008

    PLEASE please someone help me.
    I have sliced my image in photoshop and imported it in Dreamweaver…..my problem is…i can not centre it! Using CS4 and there is no align centre in the properties window. Please someone, help!

    THanks Anna

  11. Jani (Reply) on Wednesday June 4, 2008

    Tables still exist in Dreamweaver because people use them. Basic web designers like them instead of having to re-educate themselves into CSS/Divs… Tables have their place and tuts like these are a godsend for those of us who like to keep doing what’s familiar. Not every designer is a coder/programmer…some people just want to get their PSD file up and running. Thanx for the tut

  12. Monte (Reply) on Wednesday June 4, 2008

    You’re the best! Thanks for the demystification!

  13. Roland (Reply) on Wednesday June 4, 2008

    I keep seeing gaps between my slices when previewing. Do you know could be causing this?

    • Drew Paul (Reply) on Wednesday June 4, 2008

      You may need to set the border to zero for all image slices (default is blank).

  14. talli (Reply) on Wednesday June 4, 2008

    i have non square buttons. they are skewed and if i slice them they overlap.
    how can i avoide this?

  15. karachiite (Reply) on Wednesday June 4, 2008

    great tutorial! found what i was looking for, thanks a lotttttttt!!!!!!! :)

  16. rehan 03432118740 (Reply) on Wednesday June 4, 2008

    yeh that’s good 4 the us thanx 4 this

  17. B. Moore (Reply) on Wednesday June 4, 2008

    When I attach a hyperlink to a slice in DreamWeaver (ex. ) a blue box appears around the slice when viewed in my Windows Explorer browser. How do I get rid of the blue bounding box?

    • Drew Paul (Reply) on Wednesday June 4, 2008

      You may need to set the border to zero for all image slices (default is blank). Oh… I remember those days…

  18. deborah (Reply) on Wednesday June 4, 2008

    thanks sooooo much! I’m so excited to start designing!

  19. EEmmanuel (Reply) on Wednesday June 4, 2008

    This was a really big help! Thank you very much!!!

  20. Learn PHP in 24 Hours (Reply) on Wednesday June 4, 2008

    Nice write up. I’ve been trying this with GIMP and then doing the CSS by hand. I’m curious to try Dreamweaver though, it looks like it could be pretty useful. Cheers.

  21. Allyson S (Reply) on Wednesday June 4, 2008

    Can someone please explain to me how to remove the sliced image, set the table cell to the width and height, and then put the sliced image as the background? So I can put text over top.

    I need to know, asap.

  22. Anushka (Reply) on Wednesday June 4, 2008

    wow indeed good

  23. aj (Reply) on Wednesday June 4, 2008

    I tried this method but I couldn’t figure out why when the when page is all finished and goes online.. it comes up on the browser first as with lines all over the page. It doesn’t look good and natural. The lines I’m referring too are the blue ones that show when you finish slicing an object in Photoshop. What am I doing wrong?

  24. katie (Reply) on Wednesday June 4, 2008

    Hi. I am very very new to all of this and so of course I NEED HELP! I got the slicing down and it is exported into dreamweaver. But when I try it in my browser then all I get is white boxes with red x’s. So instead of my images showing I just get blank boxes. Any help? It IS GREATLY APPRECIATED

  25. Breanna (Reply) on Wednesday June 4, 2008

    I am creating a website and having major problems! I sliced the website like I should’ve! However, now when I try to add a picture/image on dreamweaver, all the ‘slices’ on dreamweaver move around! Is there a way to add pictures on top of the slices I made??? or should I enter Photoshop, remove all my slices and then just slice them/hot spot them in Dreamweaver? I’m having such a terrible time!

  26. Dr Barnouti (Reply) on Wednesday June 4, 2008

    good resource for new web designer…….



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby