Program To Convert PSD -> Proper DIV Style HTML/CSS

by 15 replies
20
Hi web designers out there,

How would you like a program that converts your PSD straight into a properly coded cross browser friendly div tag coded HTML/CSS website with the click of the button?

Do I have this? No.

Can I make it? Yes, and if I did, how much would you pay for something like this?

I've studied the PSD format and I found out I can extract the layers parts from it.

What does mean?

It means if you organize your layers correctly the way you would lay it out in HTML and give them proper names I can have it automatically create the div tag code and image backgrounds that go with it based on conventions you use in photoshop.

I don't have quite all the details because I want to ask you guys if this is something you would even want, and 'How' would it have to work to be worthy of purchasing?

Thanks guys!
#programming #&gt #> #convert #div #html or css #program #proper #psd #style
  • If it was indeed perfect and didn't require manual editing (which is impossible by the way) then you could expect mid $xxx to mid $xxxx for lifetime use or low $xx per single page design.
    • [ 1 ] Thanks
  • I can't see a program doing a perfect Transfer. To be honest I have always used this for reference:

    Beginner Photoshop to HTML5 and CSS3 by Webcoursesbangkok Carl

    Which covered the majority of what I wanted to know. I can't put a price on your porgram unfortunatel because I can't see it happening without the effort of myself having to make changes myself...
    • [ 1 ] Thanks
  • Unfortunately I don't believe in these type of programs. First of all, a PSD file is just a starting point for the designer... for example imagine that a picture in the PSD might be a slider actually, or lots of hover and other effects etc...
    I think an automated program can create something, but I am almost sure that once the result is produced then it will take more time to manually correct and adapt it. For a good designer is a matter of hours to transform a PSD into a WORKING HTML, with effects, etc.

    Sorry to be so negative...
    • [ 1 ] Thanks
  • Slicing PSD to HTML using any software is not a good idea. There are so many information in PSD which the designer can think and slice accordingly and we can't simulate any persons mind 100% in a software. So better don't go with it.

    Thank you
    • [ 1 ] Thanks
  • What might be a cool, is making the application you are proposing by leveraging an existing platform. IE: make an extension/plugin for an existing IDE or html editor.. That way your application gets it most of the way there, and you could then prompt the user to insert alt text, link urls, etc, etc. The other reason for this, is so you don't have to write all of the syntax rules, and you would be able to stand on the shoulders of whoever has been working on an html editor for years.. There is a staggering amount of work to make a really solid code editor / WYSIWYG.. (at least to me it seems staggering)

    That is a very, very, ambitious project, while it would be incredibly difficult to get it right first go-round, don't give up if you think you can do it. I would love to see this sort of this come to fruition..

    Cheers
    • [ 1 ] Thanks
  • That's okay, I don't mind negative responses. That is why I'm asking to see if there is a demand for it. It looks to me even if I did make it perfect it would be a very hard sell potentially.

    I do appreciate the input. For me a lot of the time I need to quickly just create squeeze pages and if I designed it in photoshop correctly using groups and layers in the right way I know I could make it automatically create html/css that is web friendly with the click of the button, but I'm not sure if there is a market for that.

    What problems do you guys forsee? what are you afraid would not work? There would still need to be some hand-coding. I can't make it guess what links go where or do fancy javascript things,but for basic layout of the page very quickly in a div->wrapper style format that is cross browser friendly, I think could be useful. I have ideas for making it smart about the background repeating efficiently also.

    Thanks again for the feedback!
    • [1] reply
    • For instance backgrounds that you could be make with CSS (lets say you have a red square with text on top of it) I doubt it would understand that square and text should not be exported but rather re-created as pure html+css, fonts that u could use as CSS, when making a site u want the most to avoid full images and have what can be written as content.
  • Banned
    My first question is have you any portfolio?
    If you have this then you can demand a respectable price.
    You can convert psd-->>>html/css,
    can you convert psd-->>>wordpress ?
    it is another criteria for webdesign using CMS like wrdpress ,
    it has more demand than psd-->>html.
  • To convert the PSD file to HTML/CSS with the help of the software is not perfect. You can't get the pixel perfect match of the design. Once if you do the conversion with tools then you need to spend more time to fix the browser compatible and style issues.
  • impossible.. you can't convert a search box design in PSD to html with such a program..
    neither the design of a dropdown box.. css on :hover action etc etc..
  • Photoshop will do it for you, but it's not a good idea.

    I cheat, I use my brain.
  • Yea I dont think its really possible to do, just for the reasons that other people have said. How would a script know that a image is a slider, or that a graphics is a representation of a styled search box. Impossable. Because there is thinking and intuition involved. Besides you can get PSD's sliced for $25 a pop all day long on Elance.
    • [ 1 ] Thanks
  • Why wouldn't I just use Photoshop to do this? Or even one of the other programs from Adobe to convert it into a mobile application? I don't see any software that could do this better than Adobe themselves.

    Though I already have access to Adobe's Creative Cloud but others you may target for this software may not.

    - T
  • SiteGrinder does this - though it doesn't compare to a human doing it.
  • WHAT THE......

    HOW could it do that and WHY would anyone want it?

    [quote]Do I have this? No.[quote]

    Of course not!

    It sounds like you are trying to make a hot dog with cement. Could you? MAYBE! Could it look ok? MAYBE! Would it be usable or end up with the same effect? NOPE!

    That's what it is made for! That is its PRIMARY FEATURE! OTHERWISE, it would have been a normal GIF.

    Maybe, but layers are used to allow separation of concepts in a given graphic. One layer could be text to fill in a form. Another layer could be authorization/approval for a form. another layer may be the address, another layer may be the border. Another layer may be the form. Put them all together, and you end up with a filled out authorized form with a border around it.

    Are you maybe confusing PSD with PDF? PDF USUALLY has something that looks like text.

    Steve

Next Topics on Trending Feed