PSD to Xhtml
Alright, so you spent a few hours in photoshop creating your best design, now you want to get it live as soon as possible. But now you run into trouble. You could just slice it up and upload the Imageready-generated html, or recode it all by hand. But how?
Article Contents:
- PSD to Xhtml
- Getting Rid of those Un-Needed Images
- Recoding by hand
- The Differences
PSD to Xhtml
In this article, I attempt to guide you through a basic psd design, the slicing, and re-coding to get rid of the Imageready code and make it your own.
Let’s start off with basics. You open up Photoshop, make a design, and open it in Imageready to begin slicing up images. For the purpose of this demonstration, I opened a blank canvas 650×500px, and layout down sup simple design.
Removing Those Un-Needed Images
Once I opened up my PSD in Imageready, I made note of what “images” didn’t have to be there. When you design, generally you are only making a template for content. Alot of times you’ll use background colors for content areas, and then when you slice them up, you leave them as background images.
The beauty of css is it allows you to do all this without needing images. Go through your design while writing down the hex codes for different areas of your design.
Once you’ve written down the hex codes, slice up your design as you wish and export a Imageready generated copy of the html, and well as all the images.
Next you’ll need to open up a text or html editor, in this case we used Dreamweaver, and the Imageready generated html file.
Want an avatar? Get a gravatar! • You can link to this comment
What a wonderful article. For those who have not “learned” xhtml compliancy or for that matter CSS coding this is a great way to hack it.
Give the power of Photoshop and Imageready and add in xhtml and the internet will become more gorgeous and definitely more efficient.
The videos are neat as well, which piece of software are you using for the shots? Snapx (I forget the exact name)?
Want an avatar? Get a gravatar! • You can link to this comment
Great article.
Want an avatar? Get a gravatar! • You can link to this comment
Glad you guys liked the article.
@Erik – I used Snagit 8 for the video captures. Just have to figure out how to zoom and stuff for next time around
Want an avatar? Get a gravatar! • You can link to this comment
Nice article!
Actually it shows an importance of the crucial ideas of web-development – use only things you really need, make clean code, reduce the size and total amount of files, make good use of CSS, keep
the content of your pages separated from the way they are represented, and what’s more – follow the W3C standards.
Benefits are obvious – speeding up website, reducing bandwidth, saving money on redesigns, having consistent look across all your pages, making your site much more accessible to people with slow connections and disabilities, enabling users to browse your site with PDA’s and mobile phones.
Unfortunately, it’s true that there is no tool of generating correct HTML code automatically. The best HTML – is a hand-made one. Obviously, as you can see from the article, making this type of code
requires some special knowledge and experience. Nevertheless, there are services which can do this for you, for instance – psd2html.com!
Want an avatar? Get a gravatar! • You can link to this comment
Yups! now DL is on fast track
. Wonderful article. Wish i’d see articles for little bit advanced css, xhtml development soon?
Want an avatar? Get a gravatar! • You can link to this comment
Nice article.
I would prefer to manually code the pages, since it’s more clean then generated code.
Want an avatar? Get a gravatar! • You can link to this comment
Hand code is better
Want an avatar? Get a gravatar! • You can link to this comment
“Unfortunately, it’s true that there is no tool of generating correct HTML code automatically. The best HTML – is a hand-made one.”
There is a plug-in for photoshop called sitegrinder, which outputs your designs to XHTML/CSS, but requires you to name your layers accordingly to help it.
Want an avatar? Get a gravatar! • You can link to this comment
Yet, this tool makes almost everything in absolute position and doesn’t adding and creating additional pages is very hard – i.e. you should make them using the same tool again, but keeping in mind that now you’ll have a different css files for the new pages and so on.. And let’s not talk about SEO optimisation of the pages, cause it’s gonna be missing..
Want an avatar? Get a gravatar! • You can link to this comment
Another very realiable service is Design2HTML
You send a design in any of common formats (PSD, PNG, JPG, GIF etc) and you receive a high-quality XHTML-CSS page.
http://www.mydesign2html.co.uk
Want an avatar? Get a gravatar! • You can link to this comment
Hi,
Probably the most reliable service
Your Design to HTML in 24 hours
You send a design in any of common formats (PSD, PNG, JPG, GIF etc) and you receive a high-quality XHTML-CSS page.
Get custom hand-coded professional HTML / XHTML in 24 hours.
The Best Price in the market
PSD, JPG, PNG formats
http://www.mypsdtohtml.com
Want an avatar? Get a gravatar! • You can link to this comment
Great tutorial and great idea using a video. However the video stops from time to time (maybe it’s my firefox problem). Also consider muting most of the video as it has some annoying hum.
Want an avatar? Get a gravatar! • You can link to this comment
Great tutorial….
hard coded might be better though..
Want an avatar? Get a gravatar! • You can link to this comment
Hand coded markup is always. Also semantic coding is important. Names of DIV’s and classes should be self explanatory. XHTML 1.0 strict is hardest to validate but it is worth all the pain.
Want an avatar? Get a gravatar! • You can link to this comment
If designer can create a design into photo shop in 2-3 hours but he has some problem in conversion he need some basic knowledge of conversion this article help those person who are able to create design but have lack of knowledge of xhtml conversion…
Want an avatar? Get a gravatar! • You can link to this comment
Thanks for sharing. PSD to HTML conversion is a tricky area for most designers and your article should help in that
Want an avatar? Get a gravatar! • You can link to this comment
“Another great article to read while coding web layouts:
http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly
Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.
“
Want an avatar? Get a gravatar! • You can link to this comment
If you’re not up to coding yourself, you could just go with an xHTML/CSS coding service.