Is there a graphic design program that will automatically separate elements in an imported image so I can rearrange them?

April 20, 2012 2:09 PM

Is there a graphic design program that will automatically separate elements in an imported image so I can rearrange them?

A programmer made a webform for me that I'd like rearranged. I'd like to show him the exact placement I'm seeking, so I was thinking it'd be helpful if I did the following:
1. take a screenshot of the webform,
2. load it into a graphic design program that would identify and separate the various elements
3. drag around and rearrange the elements myself
4. then show the programmer the final image that he could then implement.

Will any graphic design programs do this? Photoshop, Illustrator, GIMP? Thanks!

posted by grammalvsu to technology (9 answers total)

I don't think there is a programme that will do it automatically, but it should be pretty simple in Photoshop to use the rectangular selection tool on the different areas, split each selection off into its own layer and then you can drag those around.
posted by KateViolet at 2:16 PM on April 20, 2012

No, not with anything like the ease of use you're assuming.

What might work is downloading the web page via your browser. Do a Save As and save the files somewhere. This downloads all the images and code for that particular page.

Then open that HTML document in web design program, something like Dreamweaver and you should be able to adjust the various elements. But that still requires a bit of knowledge of Dreamweaver and actually owning the softare.

The simplest solution would be to just do a print of the page, cut it up with scissors, rearrange the elements as you want and tape or paste them on a new sheet of paper and how that to your programmer.
posted by Brandon Blatcher at 2:26 PM on April 20, 2012

Nothing will do what you describe, but if you're not GIMP/PS friendly you can try Balsamiq to lay out the page the way you like it.
posted by rhizome at 2:31 PM on April 20, 2012

Would this help? http://www.jotform.com/

It's not exactly what you're looking for but perhaps the designer could use whatever you create to rearrange things.
posted by The Lamplighter at 2:33 PM on April 20, 2012

Layers (for Mac) can capture a screenshot and generate a Photoshop compatible file with every element in a separate layer. Then, with Photoshop you can move around each element.

The best way to do this is with a mockup app, as rhizome and The Lamplighter suggested.
posted by clearlydemon at 2:37 PM on April 20, 2012 [1 favorite]

Also don't underestimate simply printing the page out, cutting it up with scissors, and redoing it that way. Take a picture or a scan and send it back.
posted by rhizome at 9:00 PM on April 20, 2012

As moronic as it may seem, MS Paint is very good and really fast at quick re-arrangements. One downside is that the re-do-history is only one step deep.
posted by bz at 10:08 PM on April 20, 2012

Also ridiculously simple in PowerPoint. Take a screen shot, paste to PowerPoint, crop to show only the element of interest, move it where you want it. Repeat repeatedly. Save as jpeg.
posted by evilmomlady at 4:47 AM on April 21, 2012

Thanks everyone. Lots of good ideas. I actually ended up going with MS Paint for this particular task and it was indeed quick and easy and perfect for what I needed to do. I'm sure I'll be using other suggestions here in the future as well though.
posted by grammalvsu at 7:55 PM on April 22, 2012