How to slice up a PSD file in Photoshop

How to slice up a PSD file in Photoshop

Because its quick

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.

Template image

Slice tool in PhotoshopBefore 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).

Sliced psd file

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

Tags:

11 Responses to “How to slice up a PSD file in Photoshop”

  1. Neal Rudnick says:

    Well you definitely have a point when it comes to slicing up PSD’s for the web. It can be quicker when it comes to templated designs that have multiple colors, but I disagree when it is a more intense, detailed design. Again, this is one of those things that can go back and forth when it comes to the pros and cons of this process. What it really comes down to is preference and how you were taught. I was not shown how to slice up designs efficiently and when I have a bit of trouble, I always fall back on what I know.

    Anyways, just want to say that the blog is coming along pretty good and I think you are keeping good pieces of content on here, rather than some blogs that have sold out by posting non-stop garbage.

  2. jcDesigns says:

    LOL…was wondering when you would show up. Thanks for the comment, and I said you were quick! I agree about the pros and cons. For slicing, one down side is that your images are going to be bigger. But I’ll sack the small amount of page weight for the ease I have making changes and resaving. Actually, let’s do a test tomorrow because I am curious to see the total image weight between the two methods.

    I’m not calling down the guide and crop. The slice method is just faster for me. There are a billion ways to do things. The difference in the way we do things has actually helped both of us a lot, I think. I can’t count the number of times I have learned something new in Flash because of some of the cool stuff you (meaning Neal above) do.

    Actually, after I try my hand at the 960 grid method, I am curious if I’ll switch to your way.

  3. New2weB says:

    I just started learning web design, i have down HTML and CSS basics as well as intermediate knowledge of Photoshop and Dreamweaver.
    SO im curious what is another method for creating visually complex web sites besides slicing? I’m not looking for an in depth answer just something that will point me in the right direction so i know what questions to ask (or google) so to say.
    Thanks.
    By the way nice blog i am learning a lot from it and i appreciate your efforts!

    • jcDesigns says:

      Thanks for the comment. Another method? Would depend on how involved the PSD is. You could use guides, like the above commenter does, and crop out only what you need. Without seeing a PSD, I don’t know if I could give you a good answer. I use slices because it makes editing the file and re-saving easier.

  4. Rajesh B. says:

    So I agree the Photoshop is easy to cut up and go with quickly. But I ran into a problem with the Firefox browser. It seems like red outline boxes show up from my sliced layers when I test or publish online. They don’t show up in Safari though…Wondering what mistake I made or fix for this.

    Check out the example of this at: https://dl.dropbox.com/u/646353/slices/sliceproj/sliceproj2.html

    Try opening it in Firefox then Safari. Notice how the red outline box shows up when you click on the Somon button link.

    And to suggest a possibly better way for developing web pages. I really like Adobe Flash. You can create buttons in it. They stripped this out of the more recent Photoshop versions I was told. You can also create more fluid and dynamic transitions from page to page and make it more 3-Dimensional.

    The drawback of using Flash is your page won’t work on the iPad or iPhone, because they don’t tolerate Flash yet?????

    • jcDesigns says:

      Hi Rajesh, thanks for the comment. I looked at the page you sent, and I don’t see any red lines in either browser. Not sure what the issue is for what you are seeing. What version of Firefox are you using?

      Personally, I would never design a site in Flash. Create buttons in it? You can easily do that with just HTML and CSS. There are so many drawbacks for using just Flash. Changes to flash sites are a pain in the ass, and yes they don’t work on the iPad/iPhone. Then there is load time, plugin issues, SEO problems if you don’t do it right. Just to much crap to worry about. Yes you can do some cool stuff with flash, but I only use it for animations.

      Oh, and its not that they don’t ‘tolerate’ Flash. It is that Apple refuses to support it.

  5. AJ says:

    Did you make one big slice and divide it into 6 “horizontal lines”? and then did you manually adjust the height for each? If so, that’s what I’ve been doing, and sometimes when one of the rows (slices) needs to be sliced into smaller pieces, I either use the “Divide Horizontally Into” or “Divide Vertically Into” features. Does this make sense? If so, is this a “good approach” to slicing?

    • jcDesigns says:

      Hi AJ, thanks for the comment. No, I made 6 individual slices. Where you see the red lines in the image above are where I made the cuts. You certainly can do it by starting with one and then cutting individuals within that. Either way works, and it comes out the same. I have never used the “Divide” so I don’t know about that.

  6. J-Beast says:

    Its my first time to create a website and I’m not familiar with Photoshop. I am Googleing on how to slice a file and convert it to Joomla (because they say there is no direct conversion of PSD to Joomla) and I found this blog very interesting. Now I can convert the sliced file to Joomla. Thanks much!

  7. Jacl says:

    For testing purpose from where to download the PSD template which you using in example ?

    • jcDesigns says:

      I didn’t include the PSD anywhere. Sorry about that, but I don’t actually want anyone to have that.

Leave a Reply to Neal Rudnick