Photoshop Mockup

[aaronoafc]

Just about to create a photoshop mockup for a website I want to do, I'm fairly new to photoshop as a whole (using it within web design) but been very familiar with html css and javascript for well over a year.

However when creating this file, what size should I make it? I mean I'm going to add in guidelines for a 960px width anyway so does it really matter? Or should I not be starting up creating the mockup using a 960px width?

Cheers

[waxdoc]

Hope you are not thinking of "SLICING" -- a bad idea by people who do not want to dirty their hands with HTML, CSS. Slicing a Photoshop or Illustrator or any other type of image creates a filled <TABLE>, and we all know <TABLE> layouts are bad. A filled <TABLE> is even worse.

So-o-o-o-o-o? Cannot figure why the image "mockup" dimensions would matter???

[aaronoafc]

Originally Posted by waxdoc

Hope you are not thinking of "SLICING" -- a bad idea by people who do not want to dirty their hands with HTML, CSS. Slicing a Photoshop or Illustrator or any other type of image creates a filled <TABLE>, and we all know <TABLE> layouts are bad. A filled <TABLE> is even worse.

So-o-o-o-o-o? Cannot figure why the image "mockup" dimensions would matter???

Oh I was going to create the file to the correct dimensions then use guidelines and create the mockup.

What do people usually do? Create a huge file say 1200 x 1500 or something then put in guidelines for a 960px website?

[waxdoc]

Not sure how you are proceeding. Also could not find suitable info about Web monitor sizes (http://www.w3schools.com/browsers/browsers_display.asp or http://www.tastyplacement.com/monito...eb-design-html).

I am a Photoshop and Illustrator user. Don't use image programs to create Web pages so do not understand your approach. A simple pencil sketch (1 column or 3 columns, etc.) works fine.

Think "aspect ratio" might be more appropriate than pixels. Seems you are aiming for a "landscape" desktop computer monitor. What about portable devices and phones, some of which can be "portrait" oriented? Viewers (like me) will likely change screen resolutions to suit themselves.

Seems like you are going for a "fixed" layout instead of fluid and/or responsive

Cannot, at the moment. imd good reference links for you.

[aaronoafc]

Originally Posted by waxdoc

Not sure how you are proceeding. Also could not find suitable info about Web monitor sizes (http://www.w3schools.com/browsers/browsers_display.asp or http://www.tastyplacement.com/monito...eb-design-html).

I am a Photoshop and Illustrator user. Don't use image programs to create Web pages so do not understand your approach. A simple pencil sketch (1 column or 3 columns, etc.) works fine.

Think "aspect ratio" might be more appropriate than pixels. Seems you are aiming for a "landscape" desktop computer monitor. What about portable devices and phones, some of which can be "portrait" oriented? Viewers (like me) will likely change screen resolutions to suit themselves.

Seems like you are going for a "fixed" layout instead of fluid and/or responsive

Cannot, at the moment. imd good reference links for you.

Oh okay, I just thought with most designs say you wanted to do one you would create the entire mockup in photoshop first then go from psd to html and code it up? Or would you just code it from scratch and organise it into collums etc with code (css)

[waxdoc]

Don't mean to impose my personal approach on you -- other than do NOT slice. Try to avoid <TABLE> layouts, which is what you get when you slice.

When searching for links before, saw a couple "Photoshop to html" but did not pursue them. It depends who the mockup is for? Are you presenting the fully rendered image to a client? Or is mockup just for your own guidance?

The structure of a Web page lies in HTML tags, and its appearance is controlled by CSS applied to the HTML. That's the nut and bolts. A pretty image is useless if the HTML and CSS do not function properly.

In the past, I have seen and referred to free Web page examples and tutorials, just cannot put my finer on some at the moment.

Decide what best suits your content and your prospective visitors. I prefer "fluid" and "responsive" Web pages and find that, for display8ing sample images, a single column layout works best. For example see mobile versions of http://www.josephdenaro.com/indexmobile.html or http://www.jacquimorgan.com/other/indexmobile.html