View Full Version : How do you slice in Photoshop?

08-16-2007, 12:13 AM
…I mean, how do you, personally, do it? I know there are a bunch of techniques out there.

My personal favorite for web design is Fireworks…I find it much faster when designing comps and it makes slicing so easy. I'm trying to use PS more in my workflow, but I still haven't found a decent way to slice anything. So far I've tried the select tool and re-opening/saving each piece (time-consuming), ImageReady (maddening) and at the moment I'm just saving as a flat file and bringing it into FW for slicing.

I know FS9 is supposed to integrate better with PS but it's serious dough at the moment. How do you slice your images when it's CSS time?

08-16-2007, 12:54 AM
I just use the slice tool in Photoshop. I slice only what I need. I think in terms of layout. For example I know the background is the same so no need to cut out a 500x500 background image when I can just cut out a 500x1 background image.

After using the slice tool I use the save for web feature. I only generate the images then I code the html by hand.

08-16-2007, 02:26 AM
After using the slice tool I use the save for web feature.

Any tips on how to work with that? Everytime I use it, it a) saves the images in a folder I don't want; b) renames the slices to something I don't want. I can get around the code generation part so far.

08-16-2007, 02:48 AM
After slicing the section you want, right click on the section and go to slice properties. Here you will be able to name the slice to something more meaningful. When you go to save for web you get some options on how to save. Its setup to put the images in an images folder by default, what you want is custom. After choosing custom the options dialog will come up and you can choose to save the images in an images folder or not.

08-16-2007, 12:57 PM
I've always manually sliced images (in Fireworks, I tried PS, but I'm much more used to FW so I'll stick to it for now). I flatten the stuff I need sliced and then use the marquee tool, copy, new file, paste, and modify its format to what I want.

08-16-2007, 05:35 PM
@Aero: Thanks for the tips…man, PS just does not make slicing easy. But knowing there's no really quick way to do it I'm just going to start getting used to it.

@croationkid: If your using FW you should really try the slice tool…it makes it very easy, much easier than using the marquee.

08-17-2007, 02:03 PM
Wow? PS is difficult? I might want to check out FW to see how its done there. I follow the same approach as _Aero in Photoshop. Slicing only what can not be duplicated in HTML. I think in terms of divs and not actual image(if that makes any sense). I tend to slice according to how I would code the HTML div layout and what pictures would be used as background and what will not.

08-17-2007, 04:20 PM
I personally prefer PS for slicing. I slice all my images in PS, then save for web. the thing I like about the save for web feature is the ability to just click on any slice I want and optimize that image. It's a fast and easy tool IMO.

08-18-2007, 06:22 AM
Wow? PS is difficult? I might want to check out FW to see how its done there.

What makes FW so easy for slicing are a bunch of things:

* toggle view with a keystroke
* at-a-glance dimensions of the slice (vs. right-click > edit slice options)
* save filenames to be whatever you want (i.e., no needing to name a slice)
* adjust slice boundaries and positions with the Move tool, and transform the same as you would a vector

I'm sure you can do the same with PS, but it's the ease of the workflow in FW that make it so much faster, especially when doing things like image sprite navigation and tweaking slice sizes to try different layouts. I'm getting used to PS's way of working slowly.