converting PSD to HTML

those who know to code can code manually bcoz it will save space and easy to edit.

 

You could look at the tutorial http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/ or use our services as mentioned in my signature, if you are looking at outsourcing this task

 

1) PSD for 'design' is putting the cart before the horse, so you probably have a design that's accessibility trash.

2) Do youself a HUGE favor and throw that steaming pile from Adobe's backside in the trash, and go learn HTML/CSS and use a normal text editor...

Go through and mark up some dummy content as semantic markup, saying what the content IS with ZERO concern for how it's going to look on the final version and EVERY concern taken to say that paragraphs are paragraphs, lists are lists, and headings are headings - grouping them by 'section' using DIV's if appropriate. THEN go through with CSS and create the layout, adding more div or sandbag elements as needed - then and ONLY then start up the goof assed paint program like photoshop to turn the images into something you can hang on the layout.

Seriously, whoever the hell started this whole notion that drawing a pretty picture in Photoshop has ANYTHING to do with web design, or even makes people qualified to call themselves designers needs a hardcore bitch-slap with a wet trout.

 

You can use some of familiar tools:

1. Image Ready can cut stuff automatically and generate nasty HTML with the tables and cells.

2. Macromedia Fireworks works well with Dreamweaver. You can open a PSD in Fireworks, slice it and then export to Dreamweaver.

3. You can use Photoshop. Just slice all the different parts and create layers in Dreamweaver or some other WYSIWYG web design tool.

The problem is that you will end up with so much stuff that you need to clean up and such a hard table layout to work with. At the end of day you will spend more time fixing things, than you would spend slicing the PSD manually. There is also need to respect the W3C Web Standards. I have not yet seen a tool that does this job the right way.

 

search google..
or use the same jpg image as a background..

 

thanks all of you guys, after read all post-replied, i know conclusions

1. if you wanted it free >> then do it yourself by search psd to html tutorials on google
2. if you wanted it Perfect >> buy any services on worldwideweb

 

If need to do that, you must have a good grip of CSS. You can easly convert PSD to HTML.

 

i figured i'd just use this thread instead of starting a new one in hopes that most people read the first few and the last few posts..

anyhoo..

so psd to html is just basically making the layout of the page in photoshop, then slicing which is basically just cutting out each section of the overal pic, like the header.. then saving that and making it a background for the header div? and the same for the footer div, and navigation div.. etc? (sorry i'm not sure what slicing is either)

just trying to figure this out.. and is psd to html the best way to make layouts?

 

Absolutely not. It is the best way to create pages that are poorly structured, and have non-semantic, non-valid markup.

If you don't mind having markup that is unprofessional, hard to debug, and expensive to maintain, go ahead.

cheers,

gary

 

Eh, not entirely - you can still do PSD to HTML if you know how to make valid HTML and identify what elements are what... Though for MOST developers it does greatly reduce the odds of them doing so properly.

I think what you meant to say were complete accessibility /FAIL/ usually involving fixed height backgrounds and elements which break if the system metric changes, layout elements that only work right with fixed metric fonts, graphical elements not designed to tile and/or expand making dynamic layouts impossible, etc, etc, etc...

There's a reason my design process is take some dummy content, mark it up semantically with ZERO concern for final appearance, bend it to my will by creating the layout in CSS and a few extra wrappers/sandbags as needed, than and ONLY then starting up the goof-assed paint program like photoshop to create graphics to hang on the layout.

Hell, the handful of times I do conversions from some goofy psd drawing, I extract the dummy content, then pretend the PSD doesn't even exist while I write my markup, pretend the actual fancy graphics part of the image don't exist while writing the CSS, and usually end up splitting out the layers or re-mastering image elements when it comes time to actually put the images on it.

 

Even if you're doing a trick where images play a large part (and therefore you're ending up with px measurements and fixed dimensions) PhotoChop and similar programs do such a poor job of it... how would they know the correct HTML element to use? There's a reason they export to tables... easier for their little brains.

For just a graphixy website someone else drew in PhotoChop, start with plain ol' HTML and make it look like a nice, pure-text collage paper. Then start CSSing it using bits of the PSD/whatever to make it *look* like the PSD. Anyone using assistive technology, text browsers, or whatever will thank you.

 

agree to you

 

First thing you should slice PSD using photoshop, then use dreamweaver to write HTML and CSS code, you can go to (www.w3schools.com) to get more information about HTML and CSS.

 

I think Div is the best part using slice load quickly... sp2h.c0m PSD to HTML is the best example using div's..

 

have you try to search artical in google it is the batter option to convert the PSD to HTML