Entries Tagged as 'backgrounds'
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.
<head>
<title></title>
<style type=”text/css”>
body {
background-image: url(green-purple-sidebar.jpg);
background-repeat: repeat-y;
background-position: center;
}
</style>
</head>
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
Tags: backgrounds · css · graphics
When we look at a computer screen and see a 3d image it isn’t really 3d it has just been shaded. We add an imaginary light point. Parts of an object closest to and facing our light point we color slightly lighter than those further away.
Another word for shading it ‘gradient’. Most graphics programs will have some built in gradients and make it easy for you to create them. CSS lets you tile a background strip either horizontally or vertically.
We will create a shaded vertical strip 128×1200 pixels.
I did this in Gimp. I created a 140×1200 strip. I then made two 140×600 images. I painted one with a brown gradient. Use the ‘fill with gradient’ button, and I chose ‘Golden’ for the sand and ‘Deep Sea’ for the sky. Click your mouse at one end of the image and drag the line across to the other end and click and the gradient will fill the area.
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.
To make the gold part have some texture like sand I used Filters->Artistic->Gimpressionist->Paper and the default settings. Click OK. I then copied and pasted the golden gradient in the bottom and the blue gradient in the top of my large strip. Anchor the layers down.
Next crop the image to 128×1200. This gets rid of any white pixels that may be hanging around the edges. To keep the image from having seams when you tile it select Dialog-> Layers and make a duplicate layer. Then select the ‘Flip Layer or Selection’ button. Flip the top layer horizontally. Then in the layer box make it 50% opacity. That will erase any seams there might be.
In your HTML you’ll need to center this background vertically and tile it horizontally.
<head>
<title></title>
<style type=”text/css”>
body {
background-image: url(sand-sky.jpg);
background-repeat: repeat-x;
background-position: center;
}
</style>
</head>
You can download the background to look at, experiment or use here
See also:
3D vertical backgrounds
Gimp Basics: Beginning
Tags: backgrounds · css · gimp · graphics
Way back when, any ‘cool’ website had a black background and lots of animation. We’ve gone through several designs along the way. Web 2.0 design involves drop shadows, 3d gradients, rounded corners, lots of white space and grayed out pastel colors.
The rounded corner backgrounds are very easy to create in GIMP. The CSS code is not difficult either. Both of these examples have a rounded corner background with a drop shadow. Then each has an image behind the title. TimesToCome has a drop shadow image behind the title which is not a link. TimesToCome Blog has an image with a border and the title is a link.
Rounded corners in GIMP:
- Use a slightly smaller image than you need, rounding the corners will increase your image size.
- Select Script-Fu -> Decor -> Round Corners { if that is grayed out be sure your image is Image -> Mode -> RGB, and be sure to click Layer -> Anchor Layer }
- Choose a reasonable Edge Radius, Shadow X Offset etc for your image. You may have to experiment a bit. I usually tell it to work on a copy, add a background if you choose or leave it unchecked for a transparent background.
* That’s it.
I used the rounded corners for both background images and the title image on TimesToCome.
Border Image in GIMP:
- Again use a little smaller image, adding borders will increase the image size by the amount of the borders.
- Choose Script-Fu -> Decor -> Add Border
- Select your border size, color and delta. The higher the delta the larger the difference between sides and the more of a 3d effect you’ll get.
* That’s it for adding the border
Layering the image:
- On the TimesToCome main page the title is not a link, we’re already at the home page. So I created a logo in GIMP and rounded the corners and added a drop shadow.
- I rounded the corners and added a drop shadow with a background to the main background image. We’re using a white background there anyhow.
- This looks like several layers but is only one image. I used Layer -> New Layer with Transparent fill on the main background image. I then pasted the logo image into the new layer. Then I went to Dialogs -> Layer and opened up the layer dialog. I changed the opacity of the new layer so you can see a little bit of the main background through the title image. When everything is as you like Layer -> Flatten Image.
- The CSS for TimesToCome main page:
body {
background-color: #ffffff;
}
#container {
background: url( images/background.jpg ) no-repeat #ffffff;
height: 600px;
width: 800px;
margin: auto auto auto auto;
}
#menu {
float: right;
margin: 150px 30px auto auto;
}
The CSS for the TimesToCome Blog header is a bit more complex:
#blogtitle
{
width: 980px;
height: 230px;
display: block;
color: #786;
margin: 0px auto 0 auto;
padding: 5px 0 0 0;
background: #fff url(img/header.jpg) no-repeat;
text-align: left;
}
h1.blogtitle
{
font-size: 32px;
margin-top: 10px;
margin-left: 15px;
background: url(img/headingbg.gif) no-repeat top left;
background-position: -10px -1px;
}
You will have to adjust the padding and background-position to center your title on the background image properly.
If you are looking for cool images, try My flickr account. These are all CC attribution copyright. There are also many CC attribution images there if nothing I’ve added interests you. Just drag and drop the images you wish to work with to your desktop and fire up The Gimp.
You Tube Tutorial, Gimp for image stacking
Tags: backgrounds · css · flickr · gimp · graphics · how to
Here are some tips on creating backgrounds.
Use colors that are close together. (navy w/ black, tan w/ white) (see color notes ) Your background should be in the background not draw people’s attention away from the text, and other things on your site.
Use bland colors. Bright colors hurt to look at for long times. People won’t stay long if your background is glaring at them.
Watch the size (you get to learn from all my mistakes!) I tested the download times on my pages and learned the background was the largest image! I fixed it but make sure you pay attention to the size. It’s in the back and not the main eye catcher so how good does the detail need to be?
Making backgrounds is easy. I’ve been using the Gimp to do the ones on the TimesToCome site.
- First choose an image that isn’t too busy.
- Tone down the colors.
- In Gimp I choose colors, hue-saturation. Then darken or lighten all the colors by moving the Saturation slider.
- Then you have to match seams.
- In Gimp choose Filter, Map, make seamless. It is all automated.
- By hand
- Add 4 layers all of which have clear backgrounds.
- Copy the image and put it off center by 1/2 in each layer. (one so the bottom of the image is in the top 1/2, one so the top of the image is in the bottom 1/2 etc.)
- Make each layer transparent by about 50%.
View your image tiled in a web page. What looks good small doesn’t always look good when it is tiled over the whole page. The colors often seem much brighter when you tile the image. You may have to go back and tone down the colors a few times.
See also Gimp Basics: Beginning
Tags: backgrounds · gimp · graphics
