Converting PSD to XHTML

Question

If I was to convert PSD to HTML, what should my document size be in Photoshop when creating a typical web page?

I have not tried this out yet but what I am thinking in my head is that I will be scaling my images depending on my document size and if my document size is too big or too small, it wont reflect what I am trying to achieve in my web page.

How do I design a typical web page in photoshop so that the layout appears identical to that of the web page in terms of size?

This is based on a centred webpage and not a full width webpage.

Answer 1

That depends on your target monitor size. You should look for the lower common denominator. If you think you will get a lot of small screens, then 955px is a good size to start with (target size would be 1024), but if you think your site will be viewed in larger displays, you can go as high as 1140px (targeting 1280 screens).

It really depends on who you plan to target. There is no one answer for this.

Also, keep in mind, that with the advent of responsive design, then you have to design different layouts, for different resolutions.

Answer 2

Simple really.. You obviously know how wide you want your 'centered' web page to be? Create a canvas in Photoshop exactly that size. Save for web and devices and Photoshop should automatically create you a table of that size. Then all you have to do is center it.

Answer 3

1. Start by analyzing your user-base. Is it mainly mobile users? Laptop users? Desktop power-users?
2. Look up some stats on the most popular screen resolutions, based on your analysis.
3. Decide whether you are going to go for a fixed-size layout, or a fluid layout. Fixed-size will be more "comfortable" for a graphic designer new to web design, as it means that, once you set your outermost-width, a large number of your decisions are based on precision measurements. Fluid is a little more complex, but it has the advantage of being scalable and flexible enough to deal with things like differing monitor sizes.

You should do some research into some grid-based solutions, such as Twitter's Bootstrap (http://twitter.github.com/bootstrap/), 960gs (http://960.gs/), or Blueprint (http://www.blueprintcss.org/) ... there are Photoshop templates out there that will help you design to their specifications, as well.

The number one rule, here on the web, is to give up the need to control everything. Some battles just aren't worth the effort, and you'll often find that conventions on the web as so ingrained in users that trying to produce a design that runs counter to those conventions will often create more hassle for you (as you try to move from design to code) and confuse your users in the process.

Good luck!