These days the Web is filled with forums having elements such as buttons like Post, New Topic, etc. using background images to apply various effects. Common effects include gradient among many others. I don't really have much idea about how this is done and what are the effects that they use.

 

I would like to know which image editor they use and how to create such small graphics so that the net size of those graphic files do not exceed 20 KB in a page (other than the site logo). Any links to good online tutorials would be appreciated. Do they use Photoshop or some light-weight editor to get this done? What are the benefits of staying away from them other than the obvious reason of faster loads.

 

Some sites use an image with a gradient effect as the background for the entire page. I would like to know how the background image in the entire page is done? They obviously use the background-repeat: repeat-x property in the CSS file but how to create such lean graphics?

 

I hope that I have been clear i posing my question.. Expecting some good advice and links to tutorials (even reference to any book might do).

I use photoshop to create these buttons. and then save for web. their size will be small ... maximum 10 kb.

Know your file formats.. jpg and gif are handy for creating small files. Each has their speciality. Gif is good for files where you have limited colours and large patches of the same colour. Jpg is better at compressing images where there is a lot of variation in colours (like photos).

 

You can create a faded background by using a one px wide graphic that repeats-x. You can make it say, 1280px in height and set scroll:none, or you can make it shorter but set the body background colour to match one of the faded colors (depending on the positioning of the graphic - usually you'll set it to the bottom colour)

 

The image editor doesn't really matter, as long as it gives you the option to tweak the quality of the saved file. Gif and jpg files have settings where you can adjust the image quality to keep the file size down.

You can create a faded background by using a one px wide graphic that repeats-x. You can make it say, 1280px in height and set scroll:none, or you can make it shorter but set the body background colour to match one of the faded colors (depending on the positioning of the graphic - usually you'll set it to the bottom colour)

 

I actually don't know how...I am more or less well conversant with the CSS properties but need to know how to create thse graphics to make the site look really cool. Plain CSS and background colors can't take the page a long way in the visual department. I have written the docs with pure semantic markup. Just need to give it a visual overhaul!

 

Lead me to some useful tutorials that might help me pick this trade up...

Paint.net

 

That's a free image editor. I use it myself quite a bit. It's pretty easy to pick up, and there are tutorials on the site. There's also a support forum with lots of common questions answered. It's useful for quick jobs like making gradients (where something like Photoshop is overkill).

Paint.net

 

That's a free image editor. I use it myself quite a bit. It's pretty easy to pick up, and there are tutorials on the site. There's also a support forum with lots of common questions answered. It's useful for quick jobs like making gradients (where something like Photoshop is overkill).

 

Thanks for the tip!! Anyways I use Photoshop Elements with came with my digital camera...Hope it solves my simple quest (like the gradients and stuff)...

You do have some options to fake it though:

 

1) Create an image that when tiled doesn't look tiled.

2) create an image with a background that matches the page background. You can then center the background image and have that background color so it looks like it takes up the full size.