Is there any software that can convert from layered psd file to div based xhtml file

Hello Fellow members -

I was looking for software that can convert from layered psd files (Created in adobe photoshop) to xhtml files. It should generate complete div based xhtml code.

 

Photoshop ImageReady can do it perfectly with some proper settings on it. Like DIVs usage, classes and ids names, etc. I have used it several times just for this. All you need to do is mark the slices and peaces that needed to be turned into HTML code

 

Wow, great.. I havent heard about this.. Thanks for sharing the info.

Is there any website where one can learn to convert from psd to html? I mean like tutorials.

If there is one, please do share.

Thanks

 

I think this is what you're looking for.

 

Dude, these are tutorials for you to convert them manually. I just asked if there is any place where we can convert the psd layered to html automatically.

Thanks for your help

 

I think the Photoshop 7 Suite and CS1 (or CS2) comes with ImageReady, and they can be picked up pretty affordable these days from a retailer. Adobe has discontinued support and production of ImageReady, with their release of Adobe Fireworks and Photoshop CS3+, though there's no natively built-in option that renders the HTML for you in the newer photoshops. You can do it in fireworks though. Check this link: http://www.ehow.com/how_5892346_convert-fireworks-files-pages.html

This site also offers online conversion of psd to html, though i've never used it and can't verify the reliability of the code it produces: http://psd2cssonline.com/

This site is a good tutorial of how to convert a psd to html manually, yet easily: http://line25.com/tutorials/how-to-convert-a-photoshop-mockup-to-xhtml-css

Hope this helps you out!

 

Don't use software, dude! Google instead how to do it manually and correctly!

 

Dude, if there was a magic softaware, coders wouldnt exist

 

1. Open a new document.
If they are not already visible, open the Animation and Layers palettes, as well. In Photoshop Extended, make sure the Animation palette is in frame animation mode (click the Convert to Frame Animation button in the Animation palette).

2. Add a layer or convert the background layer.
Because a background layer cannot be animated, add a new layer or convert the background layer to a regular layer. See Convert background and layers.

3. Add content to your animation.
If your animation includes several objects that are animated independently, or if you want to change the color of an object or completely change the content in a frame, create the objects on separate layers.

4. Add a frame to the Animation palette.
See Add frames to an animation.

5. Select a frame.
See Select animation frames.

6. Edit the layers for the selected frame.
Do any of the following:

Turn visibility on and off for different layers.
Change the position of objects or layers to make layer content move.
Change layer opacity to make content fade in or out.
Change the blending mode of layers.
Add a style to layers.
Photoshop provides tools for keeping characteristics of a layer the same across frames. See Changing attributes of layers in animations.
7. Add more frames and edit layers as needed.
The number of frames you can create is limited only by the amount of system memory available to Photoshop.

You can generate new frames with intermediate changes between two existing frames in the palette using the Tween command. This is a quick way to make an object move across the screen or to fade in or out. See Create frames using tweening.

8. Set frame delay and looping options.
You can assign a delay time to each frame and specify looping so that the animation runs once, a certain number of times, or continuously. See Specify a delay time in frame animations and Specify looping in frame animations.

9. Preview the animation.
Use the controls in the Animation palette to play the animation as you create it. Then use the Save For Web & Devices command to preview the animation in your web browser. See Preview optimized images in a web browser.

10. Optimize the animation for efficient download.
See Optimize animation frames.

11. Save the animation.
You can save the animation as an animated GIF using the Save For Web & Devices command. You can also save the animation in Photoshop (PSD) format so you can do more work on the animation later.
Thank you.