20 {{ upvoteCount | shortNum }}
20 {{ upvoteCount | shortNum }}

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

by x11joex11
15 replies
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!
#&gt #> #convert #div #html or css #program #proper #psd #style
  • Profile picture of the author WeavingThoughts
    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.
    Signature
    {{ DiscussionBoard.errors[7298450].message }}
  • Profile picture of the author Shaolinsteve
    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...
    Signature
    {{ DiscussionBoard.errors[7298513].message }}
  • Profile picture of the author WebThinker
    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...
    Signature
    {{ DiscussionBoard.errors[7298671].message }}
  • Profile picture of the author JohnMckay
    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
    {{ DiscussionBoard.errors[7298845].message }}
  • Profile picture of the author kevinclanton
    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
    {{ DiscussionBoard.errors[7299153].message }}
  • Profile picture of the author x11joex11
    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!
    Signature

    -= Currently looking for craigslist & facebook experts =-

    {{ DiscussionBoard.errors[7301737].message }}
    • Profile picture of the author cgimaster
      Originally Posted by x11joex11 View Post

      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!
      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.
      {{ DiscussionBoard.errors[7313472].message }}
  • Profile picture of the author rising_sun
    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.
    {{ DiscussionBoard.errors[7313388].message }}
  • Profile picture of the author submitbuzz
    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.
    Signature
    Our Success Results of Local SEO Package
    view our freelancer profile
    {{ DiscussionBoard.errors[7474186].message }}
  • Profile picture of the author SteveSRS
    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..
    Signature
    {{ DiscussionBoard.errors[7474298].message }}
  • Profile picture of the author wayfarer
    Photoshop will do it for you, but it's not a good idea.

    I cheat, I use my brain.
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[7475281].message }}
  • Profile picture of the author FirstSocialApps
    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.
    Signature
    Create Facebook deals, sweepstakes, contests, polls, custom pages and more without a monthly fee!

    Generate thousands of leads in any niche in under 60 seconds!
    {{ DiscussionBoard.errors[7477513].message }}
  • Profile picture of the author Terry Crim
    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
    {{ DiscussionBoard.errors[7492310].message }}
  • Profile picture of the author dwoods
    SiteGrinder does this - though it doesn't compare to a human doing it.
    {{ DiscussionBoard.errors[7492810].message }}
  • Profile picture of the author seasoned
    WHAT THE......

    Originally Posted by x11joex11 View Post

    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?
    HOW could it do that and WHY would anyone want it?

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

    Of course not!

    Can I make it? Yes, and if I did, how much would you pay for something like this?
    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!

    I've studied the PSD format and I found out I can extract the layers parts from it.
    That's what it is made for! That is its PRIMARY FEATURE! OTHERWISE, it would have been a normal GIF.

    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.
    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.

    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!
    Are you maybe confusing PSD with PDF? PDF USUALLY has something that looks like text.

    Steve
    {{ DiscussionBoard.errors[7526717].message }}

Trending Topics