Hi Class,
Here is how to make an easy graphic that you can have fun playing with in buttons, backgrounds and images.
1: Open PAINT (I cannot give you instructions with Gimp but if you are using it then I am sure you can figure out the differences in what I am saying.)
2A: DECIDE:
2B: If you want an image that is going to go VERTICALLY/DOWN (repeat-y) the left or right side of an area such as Masthead, Body etc., you will want to create a image going ACROSS and if it is a box image, you will have to create it in a way that the bottom of the image will work well with the top of the image since they will be stacking on top of eachother.
2C: Likewise, if you are creating a HORIZONTAL/ACROSS image (repeat-x) you will need to create it in a way that the left and right sides will match nicely since this will be meeting up ACROSS at the seams.
3: For VERTICAL you will make a line or box across the page or even short will do.
4A: Pick your colors that will match the site and add from the paintbrush tool little splotches of color that match your site as well. Remember that you can use the Zoom Magnifier to see better while you plan it. The more colors you add and the closer together they are, the more stripes there will be down the page.
4B: For the HORIZONTAL IMAGE you will create a line or box in the same way but your original line will go straight up and down so that when you are finished your image will be repeated across the section of background you choose.
4C: For the “boys” page, I simply make a box of one color and used the Spray Can tool and sprayed evenly around the box. Play with the tools and see what you want to do.
5: Save your image either very shallow for the Horizontal one or very thin for the Vertical. Save as a “jpg” file so that the color is not distorted. Make sure to save to your “images” folder and NO CAPS in the name of the file. Here are a couple tips: You can use the “invert colors” tool under IMAGE on the tool bar. It is fun to see the opposite colors that occur. You can also save the image and then from the IMAGE tool bar you can then flip the image and save it as the “right” side so that you can use left and right versions of it. PLAY AROUND.
6: Go to your CSS. Find the background area that you would like a background image to cover.
6A: For the VERTICAL such as with the left side of your site you will look for the BODY element. It will look something like this: body { background-image: url(“…”); background-color: pink; background-repeat: repeat-y; }
6B: For the HORIZONTAL such as in an active link (a: on your style sheet of the navigation) you can use it to make buttons without using a larger image. It would just keep repeating UNDER the link name. Just make sure you are using a color that will show up for text on top of the image. Keep your images small. This is why it is good to zoom in when creating them.
6C: You can also just do a {border-left-style: dashed green; background-color: blue; border-width: 15px; } Add this to your BODY element or your navigation, content, sidebar, masthead or footer and see what happens. Do the same by changing it to border-right-style etc and change the top, right or bottom as well. Change it from Dashed (NO CAPS I’m just using them to accentuate the names) to Solid, Dotted, Ridge, Groove or Inset, Double etc. Change the pixels as well to larger or smaller for fun. Now you can use an image or create a fun border around your site without even using images at all.
7: Play with it. HAVE FUN! Email me if you have any questions at all.