Implementing photoshop layout


As some of you will be aware I am ncompletely new to web design.

Ive picked up some tips and had a lot of help from other users in order to build a website for my girlfriend.

Im trying to learn the basics and start building a portfolio as I go along.

My last site that I built was primarily html/css with not a lot of design work.

Ive created a cool layout in photoshop that I would like to use on my site.

I understand that using the save for web function of photoshop is a no go as it puts everything in tables.

I have built the structure of my site but would like to know if there are any tutorials I can follow to implement my design or do I have to go about overlaying images over navigation bars, backgrounds etc…

Any help would be appriciated

There is a way to cheat in Photoshop, at least earlier versions, you can export as “sliced” images and it will make the ‘website’ for you. Use the slice tool. Fiddle to see what I mean.

Urgh, slicing the PSD works, sort of, but a lot of folks don’t recommend it.

It’s worth noting that a PSD produces a picture of a Web site. The code behind the scenes IS the site. Photoshop will generate some (generally not so hot) code to get that PSD up and running in Web format, but it isn’t guaranteed to function well in all browsers, or to even do what you want it to do.

There are a million Photoshop-to-Web tutorials out there. Your best bet is to experiment with the ones you find via Google and use the one that makes sense for you.

Slicing a PSD to create a website is a bit like building a house based on a rough sketch of one side of it. It might look sort of right from one angle, but it’s sure as heck not going to look right from other angles, and the chances of it actually doing what you wanted are pretty close to zero…

Someone’s going to thunder in here saying that many excellent designers with better portfolios than mine routinely use sliced PSDs to make their sites, and they’ll be right. I don’t say it’s wrong, or bad, or that lightning will fry you if you do it. It’s just a method that I have issues with. Maybe had I learned to design via Photoshop and not by building sites in the browser, I’d have a different take. The few times I’ve worked with sliced PSDs, I spent more time fixing the problems in the code than I would have designing the site from scratch.

There’s a happy medium in there, where you can take advantage of Photoshop’s terrific graphics capabilities to design flexible, elegant, and functional sites. But it’s a mistake, IMO, to rely on PS to do your design and your coding.

Thanks for the response, although I think people have misunderstood me slightly.

I do not want photoshop to generate the code for me. I have coded the site using html already. What I want to do is implement my photoshop design into the html.

Im aware that it is an “image” of a website as such, do i position the images using css or is this method not recommended at all?

CSS is the standard for creating layouts.