Hello guys I’m new to designing please help me out by telling me that how can i convert my photoshop PSD file to CSS? or i should have to do proper coding in CSS for it?
You’ve answered your own question there 
When someone asks me to build a website for them, I get as much info as I can from them regarding the content, existing images, layout, color scheme they want and then make a mockup either in Photoshop or html and css without any functionality.
The final mockup is then used solely as a “blue print” for the building of the website which should be, if you want to do it properly, with validated and semantically correct (x)html and css.
The last thing you want to do is say crop out a jpg menu bar from your psd and use an image map to build the navigation functionality. That is a big no-no 
.
So in summary, use your mockup (psd or whatever) as a guide only and learn to code valid (x)html and css.
DS60, is USSUALLY right. However I see your point. I still agree with DS60, but as an art director, I can say that roughly 65% of the folks that approach me for web stuff don’t know how they want things structured… or even WHAT they are going to say on their sites. However, once they see a potential layout… they START to get ideas about arranging and organizing their info. In other words I can begin with a look in mind, into which I will pour, order and segment information, or segmented and ordered information around which I will drape a style or look. Maybe I am the oddball AD, but for this reason I don’t think PS is THAT evil.
That being said, the question is did you do do the PSD RIGHT. Yes it can be done wrong.
Did you think of your layout and graphic as a collection of containers for content with the occasional highlighting element? Or was it something that simply looks cool as a PSD.
Pretty much that’s your answer. If you are of the school that design is forethought, then your PSD should be like a skin on a framework… now code content to mimic that SAME framework in HTML… then slice your PSD to serve as background images for the tags in the aforementioned HTML code.
USEFUL things to google:
- “SLIDING DOORS” CSS
- BACKGROUND TILING
- IDs and CLASSES (hint think of classes as a useful way to containers)
This is but the VERY TIP, and you have to learn a few things along the way as well as gain experience that will help you anticipate which method is most efficient, but if you start from this mind set your learning experience will be quicker and your code more graceful… even as a noob.
Which for me was always the litmus test of whether they should even HAVE a website in the first place. If they don’t know what they want for content, they probably aren’t ready to have a site.
The mere notion of working from a PSD, as others have said, is … well… not all that bright an approach. Even when forced into that situation, you basically need to pretend the PSD doesn’t even exist when making your HTML, pretend the graphics on the layout don’t even exist during your first pass at the CSS… and then only at the end hang the graphics on the layout.
Worse, quite often you’ll hit up against the “But I can do it in photoshop” nonsense which pretty much pissses all over accessibility, and comes down to little more than shoe-horning content into a layout not designed for it, instead of the proper approach of hanging graphics on the HTML content and CSS layout… which is why the goof-assed paint program should be the LAST step in site development, not the first!
How such an idiotic approach to building a site became the industry norm is beyond me – but then there’s a reason 90% of the sites people vomit up rarely last more than 6 months, and the rest are such bloated piles of garbage they’re little more than loss leaders at best, money pits at worst.
Converting a PSD file into proper HTML and CSS is a bit like building a house from a sketch on the back of a napkin … you don’t have enough information. Sites that have been designed in Photoshop and then converted to HTML+CSS are usually obviously because they have quite, um, distinctive ways in which they don’t work properly.
The best way to do it is to learn HTML and CSS, and build your site from scratch, only applying the graphic design at the final stage in the process…
Hi, welcome to SitePoint!
If you’re asking for a tool, then I think most of the software that makes PSD’s have some kind of “PSD-to-HTML” thing where it’ll make all these disgusting b0rked tables in a desperate attempt at recreating the image in a browser.
So yeah, if you have an image and you need to make a web page resemble it (this is the best you can hope for, really, since while I can’t make text bigger in a PSD, I always make it bigger in my web browser(s)), yes you’ll want a good knowledgeable human being to write HTML and CSS for it.
If you’re looking for some kind of middle-way, something cheap that you don’t have to do yourself that’s something better than the poor output image editors give, there are a lot of so-called “PSD-to-XHTML” companies out there that will likely give you very very cheap “conversion” of your PSD.
I guess it depends what you want/need quality-wise, but I think that’s your range of options.