I am jumping around in topics lately from CSS, to jQuery, to WordPress, to blogging, and now onto Photoshop. This is good though. Something different every day. Yesterday I had the pleasure of helping out someone who wants to learn how to create a websites. After the the short lesson I gave him, he said “Wow…I have a lot to learn.” To which I replied with a simple yes. He had coded a page, and then had me look at it. At which point I broke him of some nasty habits. This bit of teaching had me thinking though. What are some things I see some people do that makes me shake my head, when I know there is an easier way.

The first thing that popped into my brain was watching someone use the eraser tool in Photoshop to take away the background around an image of a person. That is just plain crazy. But there was a second item I thought about just after that nonsense. Slicing up a Photoshop PSD file to be used as a web page. I know people who do things differently, like using guides and then cropping the images necessary. That takes a while, even though I know one guy who is pretty damn quick at it. For me though, slicing is the way to go. It’s quick, easy, and if you need to make a change, there is no cropping involved – just a re-save.

Let’s cut some stuff up!

First, let’s start out with a template I am building for a personal project of mine. You can see what it will look like with some content thrown in. Standard stuff…logo, header, nav, left column for content, sidebar for some links, and a footer.

Before you do any slicing though, you need to hide all the content crap, because you don’t want that being part of the image. After you have hidden all that stuff, you will want to save the file but with a different name, or like I do and put _sliced at the end of it. Once you have done all that, you need to grab the slice tool, which you can see highlighted in the image to the right (looks like an exacto knife). If you don’t see it in your tool bar, it is hidden behind the crop tool.

Now for the actual slicing. Imagine you took a pair of scissors and cut the sections out that you needed. Piece of cake! Click on the slice tool, and start dragging across the psd file. In the image below, I started from the top left corner, and dragged down to the beginning of the the navigation section on the far right. I left go of the mouse button, clicked immediately, and dragged to the left side to the top of the content section. Then I repeated doing that until I had what you see below (in order to save this as a single image this does not show the actual slice lines- just red lines where they would be).

That’s great…but what do I do with it now?

I’ll explain the numbers in a bit, and then I’ll show you what the html would look like. But first, you have to save it for the web. I am going to assume you at least know how to do that, because it would take a silly amount of time to explain. With a sliced image, when you Save for Web, you select the type you want, jpg in this case, and then browse to where your images folder is, but don’t select it. You don’t actually want to be in the images folder otherwise it will create another images folder within it. When you save a sliced image like this, it is going to save multiple images. You then choose a name that you want to save them as (I usually choose a name like ‘index’ because I can remember what image goes where that way). This is what makes slicing so fast and easy.

The beauty is, if you have to go back and make a change to the psd file, you go and do it, and resave as the name you chose. In my example here, I would have 6 images after I saved – index_01.jpg, index_02.jpg…all the way to 06.

The HTML

Before I explain the numbers, lets take a look at what the HTML might look like:

<div id="container">
<div id="header">
<div id="logo"><!--logo html goes here --></div>
<h1>Your Heading Goes Here</h1>
</div>
<div id="navigation"><!--nav html goes here --></div>
<div id="contentRepeat">
<div id="contentBottom">
<div id="contentTop">
<!-- content html goes here - main content, and sidebar divs -->
</div>
</div>
</div>
<div id="footer"><!--footer html goes here --></div>
</div>

NOW let’s talk about the numbers

So I now have 6 images and the basic HTML. Now what? Now the fun part. All of the CSS, which I won’t go through, but give you the gist of it. It would be a very long post if I types all that out, and the point of this isn’t the actual CSS, but how to do the slicing, and what to do with it.

Your basic CSS for the divs would be:

• header: background image using #1 (index_01.jpg),and no-repeat
• navigation: background image using #2(index_02.jpg), and no-repeat
• contentRpeat: background image using #4 (index_04.jpg), and repeat-y
• contentBottom: background image using #5 (index_05.jpg), no-repeat and a position of left bottom
• contentTop: background image using #3 (index_03.jpg), no-repeat and a position of left top, with a min height value of what ever the height is of index_03.jpg

The #6 image (index_06) is never used since it is just a solid color, so you can toss it in the trash.

Any final words?

Slices are awesome in that it is easy to make a change to the PSD file, and re-save, without having to re-crop everything. You can cut the image up into as many pieces as you want, just be sure to zoom in and double check all of your slice lines are touching…not overlapping or too short by a pixel. Otherwise you will end up with an additional image and things will look messed up when you lay it out. Once you get the hang of slicing, going from Photoshop to web page becomes a breeze.

Do you use slicing already? Or are you a guide and crop type person? Maybe you have a completely other method I am not familiar with? Comment and let me know!

Coupon Code: webmachine