Herself's Webtools

Scripts, HowTos, Templates, Plugins, Widgets, Tips

How to create 3d vertical backgrounds for sidebars

3d isn’t really 3 dimensional on your computer screen. It is an optical illusion we create by making some parts of an image a little lighter than other parts.

For 3d vertical side bars you will want a horizontal strip as wide as your side bars plus center area. This is usually 800 or 1024 pixels depending on your template or web page design. You can find this information along with the width of your center area and side bars in your template information.

Make the height of the image 140 pixels we’ll trim it up later. I create 2 side bar images; one for each side. Usually you would use a 400 pixel or 600 pixel white area in the middle so your main blog text will be easily readable but a light textured background will work also.

Create your two side bars by using Gimp or and selecting a gradient you like. Experiment with the gradients until you achieve the effect you want. The green shaded button is your gradient button in Gimp, select that and a gradient you like for each side. Click your mouse at one end of the image and drag the line that appears to the other end and click to fill the image with your gradient.

The green shade button, second row, 3rd from right does gradients.
The black shaded area under the dot and woodlike texture bottom right is where you click to change the gradient.
The button in the middle of the second row left of T is what you use to flip your images.

Copy and paste the sidebar images on the ends of your 800 or 1024 pixel background. Merge the layers down. Use Layers->anchor to do this. Now trim up the edges to get rid of any white pixels hanging on the edges. Choose Image->Canvas Size and crop the image to 128 x 800 (1024). Be sure to center the image and crop off the edges.

Create a duplicate layer, Dialogs->Layers and flip it vertically this time. Use the ‘Flip Layer or Selection Button’. Then set the layer to 50% opacity to remove any seams. Flatten the image and save it.

Your CSS will look like this.

<style type=”text/css”>
body {
background-image: url(green-purple-sidebar.jpg);
background-repeat: repeat-y;
background-position: center;

If you want your sidebars to appear to be floating above the main section put a grey edge to the same side of each ( both right or both left ). The grey side strip will look like a shadow. Since all shadows fall the same way with one light you’ll want both sides to have the shading on the same side. Use a shaded grey darker near the side bar and lighter at the edge away from the sidebar.

You can download both backgrounds to look at, experiment or use here

See also:
3D horizontal backgrounds
Gimp Basics: Beginning