What application do you use to slice images

[moc426]

After using pdn, if using it for a web site design, what application do you guys use to slice the image up?

I used fireworks from macromedia for a while. Actually if I need to do it now, thats what I would need to install and use.

[Bob]

Just wondering, why slicing?

[moc426]

For a website, images are usually cut up into pieces, and when exported are saved as a separate image for each sliced piece, which then can be positioned with html tables or css on a web page.

Just wondering, why slicing?

[Extra]

My brain hurts. Do you mean like selecting a part of an image and saving that piece as a separate image?

[Crazy Man Dan]

Well, I used PDN to export my individual images for The Sketchpad:

http://cmdsketchpad.com/

You have to know what the final layout should look like, then cut accordingly. I made the layout as a static image, for instance this one:

Full Size

Then I looked at it, determined where I'd need large image blocks and where I could use repeating 1 pixel wide / tall images to save some bandwidth, and chopped it into this:

http://cmdsketchpad.com/setstyle.php?css=galaxipad

I used an additional stylesheet with a PHP style switcher (http://cmdsketchpad.com/css.php), and viola!*

If you have your design ready, I could take a look at it if you need help determining the necessary cutting.

*Yes, I know that's a musical instrument. The transposition was on purpose. I'm crazy like that.

[moc426]

I was looking for something that has the tools needed to do this. In fireworks for example, you draw the slices and when you export as html, it will automatically save each slice as an image. The benefit? I can modify the design again, from a small modification as in your template, if you wanted to change the button that says community to forums, you need to re-slice the image to exact size and positions. And of course with larger modifications, it ends up being more work. Also you can resize slices to suit your modifications.

Thanks though, I don't have a design that I need to slice up, I have just worked with photoshop and macromedia products and wanted to know how you guys here work with this. Seeing what alternatives there are.

Well, I used PDN to export my individual images for The Sketchpad:

http://cmdsketchpad.com/

You have to know what the final layout should look like, then cut accordingly. I made the layout as a static image, for instance this one:

Full Size

Then I looked at it, determined where I'd need large image blocks and where I could use repeating 1 pixel wide / tall images to save some bandwidth, and chopped it into this:

http://cmdsketchpad.com/setstyle.php?css=galaxipad

I used an additional stylesheet with a PHP style switcher (http://cmdsketchpad.com/css.php), and viola!*

If you have your design ready, I could take a look at it if you need help determining the necessary cutting.

*Yes, I know that's a musical instrument. The transposition was on purpose. I'm crazy like that.

[Helio]

I believe Bob was referring to the fact that you could also make each menu/body b.g. a separate image and then position them. Rather than actually cutting a pre-defined image of your website's layout.

My advice, use a little of both.

In CMD's case, saving all the headers as transparent .png's causes it to require high-bandwidth. Flattening them to the background and saving them as very lightly compressed .jpg's saves on bandwidth.

I'm not saying that Dan used the method I mentioned, I was just using the Galaxipad as a demonstration.

Edit: I didn't see that you had posted. If using PDN, just select the region that you want, cut or copy it and paste it in a new document. Sorry, there is no faster method. :?

[monkey]

I would love to have a slice tool, too, and here's why.

If you check out my website at http://www.nathanlongmusic.com, you will see that there is an image with a little mp3 player embedded.

The way I made that page was:

1) I designed it visually in Adobe Illustrator

2) I exported the whole thing as one image

3) I sliced it up in Photoshop (which I had access to then but don't anymore).

(The "slicing" part means that I drew boxes around each menu item and other chunks of the image, and around a little blank area at the bottom where I wanted to put the mp3 player. Each slice was given a number by Photoshop. When I exported, it created a little subdirectory which contained each slice as an image (1.jpg, 2.jpg, etc) and an html file that displayed them all in a table so that they fit together seamlessly.)

Then...

4) I found the slice of blank space that I wanted to replace with an mp3 player and figured out its dimensions

5) I created a skin for the player with those dimensions

6) I edited the HTML table to replace that little image with my player of the same size, and to make the menu items into links to other parts of the site

Even if you're not creating a custom skin, I have found that designing a menu as one image, then slicing it up and making links out of the pieces, is a way that lets me get a page that looks just like I want it. I can separate the "how do I want this to look" part of web design from the "how do I want this to work" part, which is mostly coding.

So: I would REALLY like to have a slicing tool in Paint.net. Other than that, I love the program.

[Crazy Man Dan]

4) I found the slice of blank space that I wanted to replace with an mp3 player and figured out its dimensions

5) I created a skin for the player with those dimensions

The beauty of CSS skinning is that you aren't limited to using only specific dimensions out of fear of breaking tables. I don't mean to be rude, but "slicing" of this type is one of the main purveyors of the plethora of websites that completely ignore proper HTML semantics.

The kind of slicing I could get behind is the ability to set up an area on the image, assign that area a label, and choose "Export Slices" to save each area as an image with the filename of that label. Perhaps even a method of selecting only certain labels, then with an option to "Export Selected Slices".

That way, making changes to, say, a background gradient over which one has links with rounded edges or transpareny would be much easier. As it stands now, one would have to re-draw selections around each section, flatten, copy, create a new image, paste, and Save As. With a Slice option such as I outlined above, one could select the slice sections that make up the Navi area and export them all at once, each with it's own, meaningful name.

Edit

Here's a quick example:

The orange boxes would be the slice areas, and the orange labels are the slice names. Then, one could choose "Export Slices", choose PNG in the dialog, select the destination directory, and viola! There you have homelink.png, tutlink.png, piclink.png, and navibackrept.png, all ready to go. Then, if you change the background color to green, you'd just have to select Export Slices again, instead of having to manually re-save each image.

Edit 2

Corrected labeling error in Edit 1

[Bob]

^Indeed^

"slicing" of this type is one of the main purveyors of the plethora of websites that completely ignore proper HTML semantics.

I saved this in a text file named CMD_slicing_rant to put it somewhere it should be useful later. Too much long words :`)

[monkey]

The beauty of CSS skinning is that you aren't limited to using only specific dimensions out of fear of breaking tables. I don't mean to be rude, but "slicing" of this type is one of the main purveyors of the plethora of websites that completely ignore proper HTML semantics.

Not only am I not insulted, I don't even understand you!

So... CSS skinning? The mp3 player I'm using is called "Wimpy," and it comes with a little utility for creating a skin, but you do have to tell the utility the dimensions you want.

I'm familiar with CSS as in, creating a .css file for text styles, etc, and having all my html pages reference that to find out how they should look. Is that the same kind of thing you're talking about? What does that have to do with not setting specific dimensions for the player?

Finally, why does my type of slicing lead to bad HTML code?

(You can send me a message if you feel we're getting to far off topic for this forum... sorry to pester you, but I'm just trying to learn.)