Thursday, December 24, 2009

What size should the picture-background be in a web page because I'm making it in photoshop?

I'm making an image in photoshop that will be the background of a website. What should be the size of that image that will fit in the site perfectly?What size should the picture-background be in a web page because I'm making it in photoshop?
There will be no perfect size because everyone's screen size %26amp; resolution will be different. The best thing to do is design your website to a fixed ';width'; of your choice that fits the most common ranges... like 600 - 900 pixels wide lets say.





Whatever size you choose to make your ';website width'; - make your image the same width.What size should the picture-background be in a web page because I'm making it in photoshop?
You can't really- like the other posters said, every screen is different.





Your best best is to make something that tiles. It can tile in every direction, or be a wide one pixel strip that tiles downward (or a tall one that tiles horizontally). Or you can make one that is fairly large and use a background color on your page that matches the edges or a large portion of your background image, to blend them together. (Eg. if you have an image and gradually fade it out on the top and bottom.)





I'd suggest doing a complete tiling of a square, or the strips, since the file size is smaller. You'll need to be careful not to make a background that is too overwhelming - typical mistake people make.





good luck.
It really depends on whether you want a repeat-tiles or just one big picture.





I think that you want the second, and there are several approaches to it:





1) Lowest common denominator. Make your picture, say, 800 pixels wide, and make sure your page is vertically centered. This will look good on almost all monitors, but leave blank space on the edges.





2) Let it go wide. Make your picture 1280-1600 pixels wide. The picture will be cropped on small monitors, but it's the best choice if cropping is not an issue.





3) Build it with intelligence. Provide several versions of background (like 800, 1280, 1600 pixels) and load the proper one dynamically based on client's properties. Not good because it depends on browser scripting and obviously more work.





Remember, you have to choose one - one-big-picture or the tiles. If big background picture is getting repeated on big screens, and it's noticeable - this is a clear sign of poor web design.





Good luck!
This is an impossible-to-answer question, as the size will vary depending on screen resolution, the size of the window at the time, and the content on the page.

No comments:

Post a Comment