how to convert PSD temlate to HTML page?

Discussion in 'HTML & Website Design' started by Noah Wilson, Mar 13, 2013.

  1. #1
    Hello Guys,
    I am interesting in web designing, i want to know that how can we convert psd to html page. Thanks for any suggestion.
     
    Noah Wilson, Mar 13, 2013 IP
  2. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #2
    You should have great understanding of HTML/CSS. You can learn this two language in tutorials
     
    creativewebmaster, Mar 13, 2013 IP
  3. paranormalbuyer

    paranormalbuyer Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #3
    Photoshop actually has this option available but it isn't ideal considering where we are with web development.

    But if you still want to use it, slice the images as you sit fit and go to Save For Web.
    Check this out: http://www.entheosweb.com/photoshop/slice.asp

    But ideally, you would design your site then start coding it in DIV layers as the Save For Web option converts everything to tables... and this ain't 1999 ;)
     
    paranormalbuyer, Mar 13, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    My advice: DON'T. Starting out from some goof assed picture someone vomited up in photoshop with zero concern for accessibility is a broken back-assward approach to development that only the artsy fartsy types who have no business designing joker sierra are advocating. More on that in a moment.

    Not even that -- Starting with DIV is just as broken as starting with TABLE or HTML5's new allegedly structural tags. (excepting perhaps the obvious like an outer wrapping DIV just because you can't rely on BODY to set the width, or an inner nesting set because you know it's going to be multicolumn or the obvious page footer)

    One should be starting with semantic markup of the CONTENT, since the content should be dictating the base markup -- then bend it to your will with CSS to make the multiple layoutS (yes, PLURAL -- this is the age of responsive design AND media targets have been around for a decade and a half) at that point adding any DIV or SPAN as needed (with an eyedropper) since they provide zero semantic meanings and exist JUST for use as presentational hooks... then and only then bring in the Photoshop jockey, and even then they are becoming less and less relevant as things like CSS3 comes into play.

    There's a reason when I build a page or template I usually am able to write my complete markup to within 95% of the final version before I've even THOUGHT about what the layout is going to be, much less any goofy decoration that will go around it.

    Starting out with a goof-arsed picture or even writing your base HTML thinking about what it's going to look like instead of what things ARE is NOT accessible design, clean development, and it never will be... the end results always reek horribly of "WCAG, what's that" and "But I can do it in Photoshop" -- as if what one can do with Photoshop has ANYTHING to do with what one should be doing in building a website! Again, this is because at the end of the day people do not visit websites for the silly graphics you hang around the content or "gee ain't it neat" layout/scripting trickery that gets in the way of the content -- they visit FOR THE CONTENT; a concept lost on the people who, as I keep saying, have never pulled their heads out of 1997's backside.
     
    deathshadow, Mar 13, 2013 IP