PSD to HTML

0amanda · 07-01-2008, 07:47 AM

Hi all, I'm new to web design. I wanna do a new theme for my blog (powered by wordpress) and I've finished the design with photoshop. Now I wonder how to convert the PSD to HTML? Any help?

suz · 07-01-2008, 12:37 PM

You could try to find a free wordpress theme with similar layout to the one you designed and substitute their images with your images.

PCC_Australia · 07-04-2008, 05:28 AM

Here's a link that will help you:

http://www.wpdesigner.com/2007/08/13...rdpress-theme/

@suz....if she's designed her own theme and wants to code it, why suggest using a common free theme?

lookgood_cool · 08-19-2008, 02:05 PM

after designing in photoshop you slice it in photoshop with slice tool and save it in save for web option. with slicing you could cut the images into pieces and you use dreamweavour software to convert into html coding - either use table layout or AP DIVS.
CSS also best method make layout

nighthawks · 11-09-2008, 01:41 PM

You can learn it online at http://www.w3schools.com/

Lally Nettie · 11-22-2008, 02:35 PM

you got to slice your images up and then insert them into a <td> or <div> tag to make it appear in a html file, also these images have to be converted to a gif, png or jpeg.

inline853 · 11-30-2008, 03:51 AM

there is no simple way to do this. you cant use Save for Web in ImageReady cause you need to code it in CSS for the WordPress theme.

Heres a quick guide of how to do this:
Learn CSS
Learn how to slice PSD
Slice up the layout.
Learn how to create WordPress theme.
Put slices in approriate divs
Voila! You're done.

All sarcasm aside there is no easy way to do this. Hire a wordpress designer to slice it up and code it for you. Be prepared to pay upwards of $1500 for a good designer

PixelPusher · 12-08-2008, 05:03 PM

Like many have said, you need to cut up your PSD image/design with the slice tool. One method I have found to work very well, is using the guides to set up your slice cutting. Meaning drag out guides from the ruler on the left and top of your window and set them to the areas you will cut with the slice tool. Using the "Snap" feature will also make the cutting easier as the slices will snap to the guides. Try to cut slices in area where say two colors meet, or any other logical/visual border exists. Ideally you want to use as little images as possible, not meaning make large slices, but use HTML to for text (unless it is an elaborate font) and large flat color areas. There is no point making your site larger with images that can be created the same with code.

W3 schools would be a great training place and there are many others, like this:

http://www.metacafe.com/watch/564070...op_slice_tool/.

If you are using pre-CS3 version of PS you will have Image Ready and that will help will the HTML setup. However I prefer to gather all my slices and then build it in DW (dreamweaver).

conor · 12-08-2008, 09:06 PM

wordpress themes are tough for beginners. they include a lot of php, i recommend just geting the standard kubrick theme and editing it to your needs. Try to not touch the php code unless you know what your doing - or else you could mess something up.

twendesign · 01-03-2009, 03:28 AM

Slice tool using Photoshop.

Best of Luck to you.

John

http://www.twendesign.com

07-01-2008, 07:47 AM	#1 (permalink)
0amanda New Member Join Date: Jul 2008 Posts: 1	PSD to HTML Hi all, I'm new to web design. I wanna do a new theme for my blog (powered by wordpress) and I've finished the design with photoshop. Now I wonder how to convert the PSD to HTML? Any help? __________________ software review

07-01-2008, 12:37 PM	#2 (permalink)
suz Moderator Join Date: Dec 2004 Posts: 378	You could try to find a free wordpress theme with similar layout to the one you designed and substitute their images with your images. __________________ Art for the web - Web page templates The work from home blog

08-19-2008, 02:05 PM	#4 (permalink)
lookgood_cool New Member Join Date: Aug 2008 Posts: 11	after designing in photoshop you slice it in photoshop with slice tool and save it in save for web option. with slicing you could cut the images into pieces and you use dreamweavour software to convert into html coding - either use table layout or AP DIVS. CSS also best method make layout __________________ visit http://www.pixelseffect.blogspot.com for easy photoshop tutorial - cool filters effects free web utilities http://www.limitsnomore.blogspot.com Adsense Tips

11-09-2008, 01:41 PM	#5 (permalink)
nighthawks New Member Join Date: Sep 2008 Location: Jaipur, India Posts: 17	You can learn it online at http://www.w3schools.com/ __________________ Faseeh Webmaster Nighthawks Design Studio http://www.nighthawks.co.in http://www.GoodTimePass.com http://www.JaipurBandhej.com

11-22-2008, 02:35 PM	#6 (permalink)
Lally Nettie New Member Join Date: Nov 2008 Posts: 6	you got to slice your images up and then insert them into a <td> or <div> tag to make it appear in a html file, also these images have to be converted to a gif, png or jpeg. __________________ Web Development Company

07-04-2008, 05:28 AM	#3 (permalink)
PCC_Australia Bronze Member Join Date: Jul 2008 Posts: 27	Here's a link that will help you: http://www.wpdesigner.com/2007/08/13...rdpress-theme/ @suz....if she's designed her own theme and wants to code it, why suggest using a common free theme?

11-30-2008, 03:51 AM	#7 (permalink)
inline853 New Member Join Date: Nov 2008 Posts: 18	there is no simple way to do this. you cant use Save for Web in ImageReady cause you need to code it in CSS for the WordPress theme. Heres a quick guide of how to do this: Learn CSS Learn how to slice PSD Slice up the layout. Learn how to create WordPress theme. Put slices in approriate divs Voila! You're done. All sarcasm aside there is no easy way to do this. Hire a wordpress designer to slice it up and code it for you. Be prepared to pay upwards of $1500 for a good designer __________________ John inline853@aol.com http://johnharrisdesign.com

12-08-2008, 05:03 PM	#8 (permalink)
PixelPusher New Member Join Date: Oct 2008 Location: Arizona, USA Posts: 11	Like many have said, you need to cut up your PSD image/design with the slice tool. One method I have found to work very well, is using the guides to set up your slice cutting. Meaning drag out guides from the ruler on the left and top of your window and set them to the areas you will cut with the slice tool. Using the "Snap" feature will also make the cutting easier as the slices will snap to the guides. Try to cut slices in area where say two colors meet, or any other logical/visual border exists. Ideally you want to use as little images as possible, not meaning make large slices, but use HTML to for text (unless it is an elaborate font) and large flat color areas. There is no point making your site larger with images that can be created the same with code. W3 schools would be a great training place and there are many others, like this: http://www.metacafe.com/watch/564070...op_slice_tool/. If you are using pre-CS3 version of PS you will have Image Ready and that will help will the HTML setup. However I prefer to gather all my slices and then build it in DW (dreamweaver). __________________ JD SmarterTools Inc. Information Technology Management Software Website \| Forums \| Blog

12-08-2008, 09:06 PM	#9 (permalink)
conor Silver Member Join Date: Oct 2008 Location: Ireland Posts: 133	wordpress themes are tough for beginners. they include a lot of php, i recommend just geting the standard kubrick theme and editing it to your needs. Try to not touch the php code unless you know what your doing - or else you could mess something up. __________________ My Blog Web Design

01-03-2009, 03:28 AM	#10 (permalink)
twendesign New Member Join Date: Jan 2009 Location: US Posts: 7	Slice tool using Photoshop. Best of Luck to you. John http://www.twendesign.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode