Convert Photoshop designs to CSS website

Posted on April 26, 2008 at 5:13 am

Are you a kickass Photoshop person? Can you create amazing looking designs using your Photoshop skills? If so, you might find yourself creating web site mockups in Photoshop for clients and then passing on the design to web site coders to get the final product in HTML.

If you’re one of the many people who create web sites in Photoshop, you might be interested in a free online service that will let you convert your Photoshop design into a strict XHTML compliant CSS web site!

Trying to understand and code a CSS website can be a difficult and arduous task (thanks to Microsoft and there four versions of IE in the market!). It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs.

PSD2CSSOnline is completely free and allows you to upload files in either Photoshop or GIMP, so if you don’t have a copy of Photoshop, you can use the free open-source photo-editing program, the GIMP.

When creating your web site design, you need to make sure you use layers as this is what PSD2CSSOnline reads to figure out the different parts of a web page. The trick is to keep the parts of your page that you want separate in different layers of your .PSD file.

There are a couple of simple guidelines you should follow in order for this process to work.

Don’t make a bunch of layers – If you are an advanced Photoshop user, you might have created many layers that all combine together to make a single object. For example, your logo might actually be made of 5 to 6 different layers – but the logo is still one object. Do not upload the file with the logo still separated out into the 5 or 6 layers – merge them together into one single “logo” layer.
Opacity and Blending Options – You need to rasterize any layer with opacity at anything other than 100%. In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “Rasterize Type” or “Rasterize Layer“. In the Gimp, create an empty layer just below the one you want to rasterize and then right click on the new layer and choose “Merge Down”. This will rasterize the layer and merge it.
Modify Gimp Layer Sizes – For some reason the Gimp likes to make layers the same size as the image. This makes inefficient as you end up with lots of big image files in your web page. For any layer in the Gimp where the object is smaller than the whole page (most of your layers), click on the layer, then in the layer menu choose “Autocrop Layer”.
4MB PSD File Size Limit – This is the largest file size that you can upload, but it was just a random number picked by the creator. You can email him and he’ll let increase the limit!

That’s all you need to keep in mind! Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out!

Hopefully, the look you had created comes out in your final HTML output. You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free:

http://psd2css.com/

http://www.xhtml4u.com/

http://www.psdslicing.com/

http://www.htmlblender.com/

This service is also called PSD slicing, if you want to know the technical term for it. If you don’t feel like paying people to do this slicing for you and PSD2CSSOnline didn’t work out for your complicated design, you can do the slicing yourself!

Here are some cool tutorials and guides that you can read on how to design a site in Photoshop and then convert it into HTML:

http://www.sitepoint.com/article/design-website-photoshop

http://www.entheosweb.com/photoshop/layout.asp

While PSD2CSSOnline may not be the best tool for big designers, it’s a great way to get started if you’re not very familiar with CSS and HTML coding. And it’s free, so it’s always worth a shot! Enjoy! Source: ToThePC

[tags]websites to photoshop, psd to css, psd2cssonline, photoshop to website, convert psd to css, psd to xhtml css, psd to css tutorial[/tags]

» Filed Under Web Site Tips

Comments

11 Responses to “Convert Photoshop designs to CSS website”

Siddharth said on : April 26th, 2008 at 8:38 am

Nice thingy
Will use it whenever in emergency

Shaun said on : April 26th, 2008 at 10:41 am

Hi Aseem -

I want to thank you for the great website and the great article on psd2cssonline.com .

I just wanted to let you know that the max file size has been bumped to 8MB now.

And we’re adding new features all the time! Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more.

Thanks again for the great website and article. Keep up the good work!

–
Shaun
http://psd2cssonline.com

akishore said on : April 27th, 2008 at 7:14 pm

Shaun, no problem at all, it’s a pretty cool service! Converting from Photoshop to an actual website can be a pretty daunting task if you’re not a pro, so this really helps.

dilip patel said on : April 30th, 2008 at 2:09 am

hi like the site very much like psd2cssonline.com and and it’s relay working in it and the give whole div base codding in within a few second and also i have try to make his naming conversation and after i have uplode that file on it and seen the result its good only the few changes are require after the codding like bg color etc

Thanks
dilip

chris said on : July 11th, 2008 at 8:32 am

i used 99 designs to get a good design, then i used htmlblender to slice it. they added an ajax slider and some menu dropdowns. thanks for the tips on this site.

Booby said on : October 20th, 2008 at 12:06 am

The types of sites generated by psd2cssonline.com are exactly what we don’t want in 2008! All of the text is converted to image making it impossible for Google, or anyone else, to index. Also, it it completely inaccessible to the disabled (anyone using a screen reader) or the ever more prominent mobile devices. You’d be far better off making pages using the worst templates (or even completely unstyled text) than with psd2cssonline.com.

auray james said on : October 24th, 2008 at 9:27 am

I use mypsdtohtml.com. the quality is excellent and you can choose the turnaround, as i read they have 24 programmers which is very good because they always can be reliable. another thing is the seo position is brilliant for a young company which is already first page in yahoo and very well in google.

andrew said on : November 25th, 2008 at 3:57 am

i have tried xhtml.pixelcrayons.com for my last project and their turn around time is true to their promise i.e. 8hrs. their quality of wrk is also good, i am looking them for my next project too

Vince said on : December 4th, 2008 at 9:19 am

I’ve made order on http://www.htmlcut.com
But I don’t see it in the list. Did anybody use their services?

Joseph said on : March 23rd, 2009 at 3:34 pm

I havent used htmlcut but have used http://www.webartsense.com they charged me 90 USD that was my budget i got my xhtml in 30 hrs it was great service. but hopefully someone would have used htmlcut if not try webartsense.com

Marc Winson said on : April 14th, 2009 at 12:31 am

XHTMLWeaver is another great PSD TO HTML service provider.
I have used them since last year and these guys are pretty reliable and nice.