Any free HTML Image Slicer?

Question

I was given one big JPG of the HTML interface. Now I need to break it down into pieces and assemble them with html table. Without a slicer it's pretty arduous and error prone. I do not have photoshop or firework, does anybody know of any free utilities that I can use?

Answer 1

Have you considered Paint.Net? It's an excellent tool, and it's free

Answer 2

I guess you could do it with GIMP. It is free and opensource.

Answer 3

I've used the GIMP for this. For .pst files, I'ts easy to extract layers. In a JPEG, you would have to select manually, of course.

Answer 4

Not an answer, but you should attempt to recreate the layout with CSS + semantic elements, not a table.

Answer 5

NetBeans and Eclipse both have HTML/JSP editors. If you are doing Java programming, you probably already have one or both of these IDEs installed.

Answer 6

I was hoping it had a knife tool like photoshop and allowed me draw the lines and it would cut the images for me... – Haoest (Oct 13 at 20:22)

From what I can tell you're looking for something that does the code for you - have you tried ImageReady? I think there's a free trial of it like Photoshop.

If you aren't (and good job if you're willing to code something properly) then you can use GIMP, it's a little different though.

Load your image into GIMP, and then start to drag rulers across where you'd like to slice. From what I can remember there is a slicing tool in GIMP but I preferred to select portions manually and save as seperate images and then write the code myself.

Answer 7

Here is a crazy or possibly not crazy sounding idea that I have never seen anyone put forth before. I have not tried it but I think it would work pretty well in many cases.

1. Cut the image up into pieces using a "paint" program like Microsoft Paint, GIMP, Apple Preview (with command-option-shift-4 and pasting) - whatever.

2. Save the images in files as follows. Using a lightly colored font (light gray, lavender, any pastel color, etc.) stencil a short name for that piece on that piece of the image. Helps if you do that on paper first. Save the file with its short name as the base of the file name.

3. Create a skeletal layout for the HTML of the page set up to hold these pieces. Name each piece by setting the class attribute of the element to the short name for that piece of the image, the same as the base file name of the corresponding image file.

   a.) Use DIV element where you have a row of images (or rows of items within the image) or a TR element, if you prefer to wrap the whole thing in a TABLE (quiet, screamers!).

   b.) Wrap pieces that go horizontally across the page in a SPAN element instead of a DIV element (or use DIV for all of them and write a CSS rule to override display property for certain ones so they will behave like SPANs). If you are making a TABLE, then use TD instead of CSS (or redefined DIV).\

4. Next, rewrite one block at a time - replacing its "cut out" the original image with the appropriate HTML.

The advantage of this approach is that you can see what you are doing every step along the way.

It is completely incremental. There is no "big bang" conversion from JPG to HTML, so you can do it one step at a time.

To do the image "slicing" just use a 1-pixel dashed or dotted line. Turn on X,Y coordinate tracking in your paint program when you are one drawing the cut lines, and move to end of each line, writing down its X,Y coordinates.

Any paint program would work for this. A paint/draw hybrid application that supported layers, like the free GIMP graphics program, would work best. You could put the image on the back layer, a paint layer. You could then put a draw layer above that, and draw the dotted/dashed cut lines on it. You could also stencil the short names for each piece in this layer.

Someone says that PSP has an image slicing feature in it. Here is a PSP tutorial on Slicer. Since it sounds like PSP will not only let you draw the cut lines but generate HTML for you, that seems like it could take off some of the manual work.

Answer 8

As people have said before, you can use GIMP to slice up your image file.

Refer to this tutorial on how to slice an image using GIMP: http://docs.gimp.org/en/python-fu-slice.html

Answer 9

If you do not get the option Filter>Web>Slice you might not have python installed like me so if you have problem you better have a look at this

http://www.gimptalk.com/forum/python-and-gimp-t25587.html

however I am still working on getting my Gimp slice. but I thought I should let everyone know that slicing is not possible without installing python that is what I have read so far.

Thanks I hope this was useful for you. Bye. Have a nice day.