Jump to content


Photo

Website Size, in Photoshop?


  • Please log in to reply
6 replies to this topic

#1 w1lz

w1lz

    Young Padawan

  • Members
  • Pip
  • 190 posts

Posted 12 June 2007 - 02:51 PM

Hi,
Im preety new to all this photoshop stuff, i found pixel2life.com and it has helped me greatly. I have had a request to make a website, for a friend (who codes websites).
And what im struggiling with is the relationship between the size of the photoshop document and the size it will look like on the web. Many people have said "just do it 800x600", but im like "how can that be right, that would give me a wider page than it is longer, and websites 90% of the time are longer than wider.
So basically.. how do i determine what size (pixels) to make the website in photoshop? and... how does that tansfer to going onto the web?

Cheers,
w1lz

Edited by w1lz, 12 June 2007 - 02:51 PM.


#2 albinoAZN

albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 12 June 2007 - 04:18 PM

You're right, 800x600 is wider than long, but those dimensions are used so that the site isn't wider than 800px, the lowest screen resolution. Most people code their sites so that it will expand downward when content is added. That means that, after content is added, the site will eventually be longer than it is wider.

Most of the time when I start designing a site, I use 800x600 canvas, but I don't make the width of my actual template expand all the way across, I usually keep the width at about 780 or so.

Hope that helps.

#3 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 12 June 2007 - 05:29 PM

If you're good enough, you can design a website in a 2x2 document. But then you have only so many possible designs you can come up with.

Unlike in life, when designing a template, size doesn't matter. Anybody who knows 2 things about coding a website can take a photoshop document of any resolution and make it work on any resolution of monitor. What i try to do is just keep the documents resolution to a 4:3 ratio. That way, i know what it will look like when the resolution of the monitor changes (not including widescreen monitors of course). But i'm also a fan of the liquid layout, they are more interesting to both design and code :wink:

Now, if you're going to try and use some kind of program to do the coding for you (like photoshop...), then size does matter and i wouldd suggest simply not wasting your time... but thats just me.

Edited by rc69, 12 June 2007 - 05:30 PM.


#4 Adam Sheridan

Adam Sheridan

    Young Padawan

  • Members
  • Pip
  • 119 posts
  • Gender:Male
  • Location:Colchester, Essex, UK.
  • Interests:Web Design, Web Development, Graphic Design and Corporate Identity.

Posted 12 June 2007 - 05:35 PM

Personally when I am designing a website I will use a 1200px x 1000px canvas, however I will mark out the page for 800px width and not cross it (except for the background obviously). This gives you the advantage of people who visit with big or small resolution monitors with both have an equally enjoyable experience.

If you need to add more content, simply increase the canvas' height and carry on.

:wink:

Hope this helps,
- Adam

Edited by Adam Sheridan, 12 June 2007 - 05:36 PM.


#5 w1lz

w1lz

    Young Padawan

  • Members
  • Pip
  • 190 posts

Posted 13 June 2007 - 07:15 AM

Firstly thanks for the help guys...

If you need to add more content, simply increase the canvas' height and carry on.


How do i do this exactly? Do i just make a new document thats longer and move everything over?

Thanks,
w1lz

#6 Adam Sheridan

Adam Sheridan

    Young Padawan

  • Members
  • Pip
  • 119 posts
  • Gender:Male
  • Location:Colchester, Essex, UK.
  • Interests:Web Design, Web Development, Graphic Design and Corporate Identity.

Posted 13 June 2007 - 08:24 AM

Firstly thanks for the help guys...

If you need to add more content, simply increase the canvas' height and carry on.


How do i do this exactly? Do i just make a new document thats longer and move everything over?

Thanks,
w1lz


In Photoshop, just go to Image > Canvas Size. Increase it by however many pixels you need as if you don't use them, you can always trim it down aferwards :o

Increasing the canvas size might mean that you need to add your background colour to the new section aswell.

- Adam

#7 w1lz

w1lz

    Young Padawan

  • Members
  • Pip
  • 190 posts

Posted 13 June 2007 - 10:21 AM

Thanks bud,

Take a look at my website in the general art section, need your thoughts!!

w1lz




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users