Converting PSD To HTML

[Zeeshan Hashmi 0]

Hi I m new to this site. I have designed a layout in PSD. What i want is to know how can I slice the PSD to build a Cross-Browser Compatible HTML file. Thank U.

[tommydanger 0]

By PSD you mean Adobe Photoshop right?If so, open up your psd in Image Ready (part of Photoshop afaik)With Image Ready you can slice the image and save it as html for use in a webbrowser.Then select the "Slice Tool" (K) and slice it up the way you want.With the "Slice Select Tool" you are able to edit the slices afterwards (height, position,...)When you are done, "File->Save Optimized" enter a name for the html file and save it, voila your image is now net ready :)Image Ready created a html file with tables and in the "images" subdirectory you will find your sliced images, however you can edit the subdirectory by clicking "File -> Update HTML..." Click "Output Settings" button and edit the images folder name.You can also edit the way the images are named it is up to you but I think Image Ready is the best tool to slice images,... it is the only one I have ever used

[KDEWolf 0]

You can do the same using in Photoshop itself, ImageReady isn't really necessary.

[Zeeshan Hashmi 0]

Yes, this can be done EASILY in Photoshop, no need for ImageReady. I was asking about the CROSS-BROWSER HTML Page. May be including XHTML.

[KDEWolf 0]

Yes, this can be done EASILY in Photoshop, no need for ImageReady. I was asking about the CROSS-BROWSER HTML Page. May be including XHTML.

Zeeshan, this is an excellent resource, though I recommend you to read this page thoroughly (may take a while, but believe me it's worth it): http://www.richinstyle.com/masterclass/crossbrowser.html
Though I'm not sure if there's any application that generates a cross-browser html/css, this is how I usually work. I wish you luck.

[HellFire121 0]

It's pretty easy in imageready, since you have photoshop you are likely to have imageready. Load up the psd and slice it up. The slices will be individual image files and will represent tables.Give each slice a setting if needed and save it as an optimized html file.In the past i have had some trouble with this, it will show up differently on different resolutions.-HellFire

[demolaynyc 0]

What I do is I create the page layout in Photoshop and I slice it in Photoshop. When I finish I then edit the image in ImageReady to Save the sliced up image as HTML. What you do is at ImageReady with the file open and sliced already, go to File -> Save Optimized As.After that, open the HTML file with an HTML editor preferrable a WYSIWYG for easy editing. If you want to add content over the sliced image, use the image url of the sliced image and make it as the background of that td table.

[Zeeshan Hashmi 0]

Thanks a lot KDEWolf, thats great !.Thank u all for your support. !!

[PSD2HTML.com 0]

Hi there,As a PSD2HTML.com representative let me add some comments on the topic discussed.When you have your design files ready and it comes time to sit down and write the HTML code for your new site, you have two choices: to use a WYSIWYG editor (such as Dreamviewer, ImageReady or Photoshop itself) or hire someone to do it right, to convert your design to a professional, valid markup.While using a WYSIWYG editor to generate the code for you may be an attractive option, it will not give you the best end result. Let me make this point clear.First of all, the HTML code generated by several editors may not be compliant with existing web standards which are typical for the modern professional web-development. Secondly, WYSIWYG editor produces files of large sizes what can not guarantee fast load time for your users. Thirdly, any automatic tools simply do not provide enough support and help in optimizing your pages for search engines, what reduces the chances of having your web site ranking highly for your targeted keywords. Finally, you have your page looks just like your design did, but does it work in all browsers?It`s good to use WYSIWYG editors, however, if you want to save your time and plan to produce high-quality product – professional hand coding service is definitely the way to go.

[jovita 0]

Just a clarification.When you say that 'professional hand coding service is the way to go' do you mean to say that you
do the work without using any of the modern tools? I would have assumed that a service like PSD2HTML will use some
form of batch processing to get the conversion done in a efficient way.


Hi there,

As a PSD2HTML.com representative let me add some comments on the topic discussed.

When you have your design files ready and it comes time to sit down and write the HTML code for your new site, you have two choices: to use a WYSIWYG editor (such as Dreamviewer, ImageReady or Photoshop itself) or hire someone to do it right, to convert your design to a professional, valid markup.

While using a WYSIWYG editor to generate the code for you may be an attractive option, it will not give you the best end result. Let me make this point clear.

First of all, the HTML code generated by several editors may not be compliant with existing web standards which are typical for the modern professional web-development. Secondly, WYSIWYG editor produces files of large sizes what can not guarantee fast load time for your users. Thirdly, any automatic tools simply do not provide enough support and help in optimizing your pages for search engines, what reduces the chances of having your web site ranking highly for your targeted keywords. Finally, you have your page looks just like your design did, but does it work in all browsers?

It`s good to use WYSIWYG editors, however, if you want to save your time and plan to produce high-quality product – professional hand coding service is definitely the way to go.

[iGuest 3]

We test my PSD TO XHTML- Custom hand coded HTML / XHTML in 24 hours.- The Best Price in the market- PSD, JPG, PNG and even old HTML formats- WordPress Integration http://forums.xisto.com/no_longer_exists/ by Adrian Clark

[iGuest 3]

Convert psd to html

Converting PSD To HTML

 

Replying to Zeeshan HashmiHello, you can use psd2html. They can do it fairly cheap in under 8 hours. https://www.psd2html.com/

 

-reply by John

[iGuest 3]

Why don't you try to do it by your self ? You can find a lot of tutorials. Or if you need hosting service u can get free psd to html conversion here.

What ever you do - don't use psd to html software.

 

-reply by thewindKeywords: free psd to html

[iGuest 3]

website design Converting PSD To HTML

Great article and helpful tips. It’s nice to see that people still takeThe time to teach others by offering free advice and information.That’s what keeps ‘em coming back!

-reply by website design hampshire

 

[Atomic0 0]

Those paid PSD to HTML are a bit expensive (most charge per page and depending on the delivery timeframe), so unless you can afford it or you expect the site to profitable, you are probably better off slicing and coding the HTML page yourself. There are numerous articles and post on the topic of slicing PSDs and coding HTMLs, though I would recommend following these tutorials before starting on your own project.