Easy website background image

Posted July 26th, 2009 by Rachel

I’ve stumbled upon an easy to do background effect for a web page if you’re looking for a fairly “natural”/neutral background if you don’t want a stark white background on a page.

This gives you a nice texture which takes the ‘glare’ off a stark white page (works best with “natural” type themes) which is very quick and easy to do.

How?

  • Open your favourite graphics programme (I used PhotoPlus X3 for this, but any graphics app should do it).
  • Create a new image of a fairly large size (I used 100px x 65px)
  • Flood fill the background with white
  • Look on the menu of your graphics programme for the “noise” option (in PhotoPlus X3 which is my current new toy I’m playing with it’s under “Effects”, but it may be elsewhere in other apps).
  • Under “Noise” you should find an “add noise” option, which is what you use to create the background image.
  • Once you’ve added noise, simply save as a jpg (which gives a file size of just over 1kb, which isn’t bad for a background image). Using a jpeg format as well, you can slightly tweak the effect by playing around with the quality slider for the jpeg when you come to save it. Altering the quality of the final file you can get some interesting effects from the same ‘noise’ pattern at different quality levels
  • Use tiled/repeated as the background for your page!

The settings I used for the “add noise” step were…

In PhotoPlus X3…”Coverage” at 10% with a “uniform” distribution.

To get a similar effect in Paint.NET (which is the other graphics app I use regularly) I used:

  • Intensity: 40,
  • Colour saturation: 0
  • Coverage: 70.

Basically have a play around and have a look what it looks like tiled and play about with the settings until you’re happy with the effect.

This is my resulting background image…

Background image produced with Paint.NET

…and:

Background image produced with PhotoPlus X3

Background image produced with PhotoPlus X3


Be the first to comment on this post.


Post a Comment

Enter Your Details:


You may write the following basic XHTML Strict in your comments:
<a href="" title=""></a> · <acronym title=""></acronym> · <abbr title=""></abbr>
<blockquote cite=""></blockquote> · <code></code> · <strong></strong> · <em></em>

  • If you’re a first-time commenter, your response will be moderated.
  • If your response includes a link, it will require moderator approval.
Enter Your Comments:



Note: This is the end of the usable page. The image(s) below are preloaded for performance only.