Is there a way to convert GUI in image to html?

Question

Hi guys, i have this GUI screen shots from the design team which i needs to convert to a web page and what not. i'm thinking of finding some website which resembles the GUI so that i can copy and paste the html so i don't have to start from scratch. the only drawback about this method is i don't know what website actually looks like that so that might means a lot of browsing time. hehe.

So just wondering if there's a tool which can help me do the search? Or even better yet if there's a tool which can convert image into html web page equivalent, that would be even better.

i guess i'm just another lazy uncreative programmer trying to get the gui part done quick and dirty, hehe.

thanks.

Answer 1

I am pretty sure that you can use Adobe Dreamweaver to do this - going from design to HTML.

Answer 2

I'm not aware of any tool that can convert an image of a GUI into the equivalent HTML. I would imagine that would be very dependent on the styling of the GUI anyway. On top of that, it would probably produce some pretty nasty and nightmarish-to-maintain HTML.

It's probably not the answer you want to hear, but I'd start coding.

Did the design team do the design in HTML? Photoshop mockups? Both of those would give you a better shot at avoiding hand-coding time.

Answer 3

From a screenshot?

You probably don't wanna do this. You want probably want, at minimum, the file saved as jpeg or png, or any format, preferably with no compression so you dont lose quality.

Then you can slice it. Google "photoshop slicing tutorial" and tons will appear.

At best, you want the PSD file, which you can then slide it up and hide/show layers of things you dont want, etc.

Answer 4

You mean you have a PNG, GIF or JPG screen-shot... and you want to feed that into a program and have it spit out a collection of HTML and CCS which when viewed in a browser would look just like that image?

I'm sorry to burst your bubble, but I would be very, very, very surprised if this was the case.

It's basically just impossible. If you see a box on the screen, it could be a text area, or a div, or a td, or a gif, or any one of fifteen different things. There's no way at all a program could every figure out which HTML element to use.

I'm sorry, but you're going to have to write HTML yourself. A tool like Dreamweaver will help speed the process if you're new to HTML. But I'll bet ya two bits to a farthing that there's nothing on the planet which will automate this job.

Not the answer you wanted, sorry. But it's the answer.

Answer 5

You mention that they used Fireworks to do the design. Is that Adobe Fireworks? If so, that application has the option of outputting the design into HTML for you.

From the feature list:

Design once, deploy to many platforms

Output Fireworks designs to HTML or the application of your choice: Adobe Flash, Adobe AIR™, or Adobe Flex®. Craft custom skins with exceptional design tools. Now your tools will play well together. Design within Fireworks and then export standards-compliant CSS-based layouts — complete with external style sheets — to Dreamweaver CS4. Create components in Fireworks for use in Adobe Flex Builder™ software. Create HTML-based Adobe AIR prototypes directly from Fireworks.