LebGeeks

Kassem

Member

Website Background

Hey everyone,

One of the reasons I hate designing websites and prefer to work with a designer is the website's background. In most cases, a solid color background or a gradient just doesn't look good, it's kinda dull. But I really do not know what can be used as a background. Sometimes using a pattern would look okey, but sometimes it's just not right. Over the past hour, I've been looking around for some inspiration and I noticed some websites use textures such as wood, ground textures and many others. I searched for some of those textures and I noticed that the files are usually huge (1MB+). So really, I would appreciate some tips and guidelines about what could be used for a website's background and how to optimize it for the web.

spicydesign

Member

Re: Website Background

Hey Kassem,

a large background image doesn't mean it's a huge file, you can save for web within photoshop and optimize the image. a good file size for a large bg image (and I'm talking about something about 1800px wide) is 80k to 220k, below you can see some websites with huge images but the images size aren't that big

http://deanoakley.com/
http://alexarts.ru/en/index.html
http://www.gazelletouch.com/
http://www.seemonterey.com/
http://www.cinq7.com/
http://www.csslayout.com/

you can use different techniques to load the background image if you think it's too big, then maybe you can slice it to 2 or 3 images, see if you can use repeat bg image in some places for example if you have a cloudy sky I'm sure you can photoshop it to use a chunk of the image and repeat it (just an example)

I disagree that solid or gradient backgrounds doesn't look good, it really depends on the way you use it.

Cheers
Alex

Last edited by spicydesign (November 16 2010)

rolf

Member

Re: Website Background

Here are some things I did:
www.m3allem.com
www.weknowtoomuch.com/airut2

Kassem

Member

Re: Website Background

@spicydesign: interesting tips there, I see your point in the sites you provided. Maybe I should optimize the images by converting to PNG or do I just have to reduce the quality? I'll give that a try and see what works best... Thanks anyway :)

@rolf: I really like the second website, great job man! Keep it up :)

Last edited by Kassem (November 18 2010)

xterm

Moderator

Re: Website Background

Here are some things I did:
www.m3allem.com
www.weknowtoomuch.com/airut2

I like the design of m3allem, nicely done.

spicydesign

Member

Re: Website Background

Maybe I should optimize the images by converting to PNG or do I just have to reduce the quality?

what format to save as really depends on the image (colors, quality,...), when you try to save for web and devices in photoshop, you can compare up to 4 versions, look at the quality and compare file sizes and you'll be able to determine which format is the best.
also when you're done slicing images, I'd suggest using smush it to optimize your images even more. http://www.smushit.com/

Cheers
Alex

rolf

Member

Re: Website Background

Here are some things I did:
www.m3allem.com
www.weknowtoomuch.com/airut2

I like the design of m3allem, nicely done.

Thanks :) I'm proud of it.

rtp

Member

Re: Website Background

am currently working on this

http://www.serge.host22.com/bio.php

i think the background is ok...

rolf

Member

Re: Website Background

am currently working on this

http://www.serge.host22.com/bio.php

i think the background is ok...

Cool
I suggest trying this:
- Remove the 2 px border around the photo. If you want a border try one px and gray.
- Try justifying the text (text-align:justify).
- The font typo of the menu is different then the one used for the dates. Change the menu typo so that the same font is used through the site. That would mean probably changing it to arial or verdana (whichever you use for the date).

rtp

Member

Re: Website Background

@rolf
really appreciated noted

will fix that as well
thanks a lot

rolf

Member

Re: Website Background

For the photo, 1px black is good actually. I think 2 px is too thick.
And if you justify text you may also need to add "direction:rtl".
I think the most important is to change the font of the menu. The font used in the date is actually "sans-serif". Also, maybe what bothered me in the menu is that the words are not centered vertically (they are a bit too high).
I tested all that with Firebug.
Hope I'm not bothering :)

The website looks OK, but I think the design is a bit simple... or "raw". These are modifications I think will add a bit, but they're not necessary it seems - except maybe for the font of the menu, it's the 1st thing I noticed.

The background seems OK, you can tell the size of a tile if you look closely (the tiling is not perfect) but I like the "jeans" effect :)

The top image BTW (with the book) is relatively big (100KB). If you make it JPEG with "Very high" quality in Photoshop, the size will be reduced to 25KB without noticeable difference.

Don't feel obliged to take my comments, I am not your customer after all :)

Last edited by rolf (December 5 2010)

rtp

Member

Re: Website Background

@rolf

no i really appreciate your opinion

when am fixing it which should be soon, i will fix those banner is sure to be changed to jpeg and the menu is going to be arabic as well so it is bound to be san-serif since arabic breaks with serif, i think

ok i will try to fix these i still have other stuff to fix as well

thanks a lot