|
|
Step 1: The strip
Please sign my guestbook. It would
mean so much to me to know what you thought of my pages.
This tutorial will cover the basics of tiling a background image on your strip, and give you some simple ideas and tips for making your own backgrounds. It is to be an all purpose strip tutorial, to go along with other tutorials which may or may not show you how to do the strip. What is a strip you say? A strip is the background of a stationery. It usually is filled with some sort of pattern, and an image is pasted along the left side. It is wide enough that it will cover the monitor of whomever may view it. A strip is also used on the border backgrounds on web pages. Strips should be optimized before using them on a web page or in stationery. Go here when you are ready to save each of your strips.
 |
Strip 1
Let's start by opening a new canvas, and filling it with a color. This is just a practice strip, but this tutorial will show you how to make a very simple web page background or stationery strip. Click file/new, and enter the dimensions 1152 for the width and 300 for the height. Click on the box beside the word canvas, and choose a color for your fill. For this strip, choose a pastel color. Click ok. |
 |
Now click effect/ noise/ add noise. Click
the options button. Change the variance to 5. Click ok.
Your strip is now filled with a nice muted fill. |
|
Now go to the object library, in the easy
palette, and find a flower or other image to use to decorate your strip.
Double click on it, and it will be added to your strip. You may need to
resize the image to fit on your strip. Save your strip using the image
optimizer.
Click here to learn how to re-size. Click here for the tutorial on the image optimizer. Click here to see my finished strip. |
 |
Strip 2.
Making a background tile. I will show you three different ways to make a background tile. Tile 1. Open a new canvas 100 X 100 pixels, again using the canvas box to choose a color. You don't have to choose a pastel color this time. |
|
This is a little known method for making
a background tile.
Change to the paint tool, and right click on the color box in the attribute tool bar. Click background color. Right click and click windows color picker, and choose a color several shades darker than the background color. Change the brush shape to the square, and the size to 100. |
 |
Double click the paint tool icon.
This will open the brush panel. Click on the options tab, and change the
transparency to 70. |
  |
Click the texture tab, and click the down arrow, and choose a texture. I chose Paper 13. You can tell the name of the teture by hovering your mouse over the thumbnails. |
 |
Center your brush in your canvas, and click.
If you preview your tile now, you will see that you have a sort of plaid pattern which is not what we want. So click on web/shift image, and enter 50
in both the horizontal and vertical boxes.
|
| Again, center your brush on the canvas and
click. Now again, preview the tile to check the seams. You should now have
a seamless tile.
Right click the tile, and click copy to copy it to the clipboard. Note: Please experiment with the other textures. The one I chose was just an example. At right, you see my finished tile in the background of the cell. |
|
|
Tile 2. This one assumes you have an image
you are working with while doing a tutorial.
With your graphic open, click the selection tool, and in the attribute bar, change the shape to square. Place a check mark beside fixed size, and type 100 for the width. |
 |
Look at your image, and choose an area with colors in it with which you would like to fill your strip. Click on the upper left hand corner of the area you chose. This will place selection lines around the area. Right click, and click convert to object. Click effect, creative, creative warp. |
 |
Click the button shown here. This will change your tile to a seamless texture automatically. Now you can choose any of the other buttons, and apply more effects until you get something you like. You can also click the undo or reset button if you apply a template and you don't like it. |
| Now, depending on the colors in your tile, you may need to mute it. Click on your tile, and drag it off the canvas to a blank area of the workspace. Now right click on the tile, and click properties. Beside transparency, type the amount of transparency you want. Move the properties box over so you can see the tile, and make sure the box next to preview is checked to instantly see the effects of the amount of transparency you have chosen. Usually, I choose 50 to 60 %. Right click and click merge all. Tile 2 is done. Again, copy the tile. CTRL + C. | |
 |
Tile 3.
Pi has the ability to make a seamless tile with a feature called the background designer. The number of tiles that can be made with the background designer is unlimited. I will show you how to make one tile here, and teach you how to use it. Coming up with your own tiles is up to your imagination. Click web, background designer. Beside cell size, change the dimensions to 100 X 100. This is the size your background tile will end up being. |
|
Beside schema, click the down arrow, and
click pattern 19.
In the preset area, click the tan one in the middle of the bottom row. Under background type, click type 3. |
 |
Beside the gradient wheel, click the edit button and change the gradient wheel if you wish to. You can either choose a new wheel, or you can adjust the tone on this one, changing the color. Click ok. |
 |
The frequency and density are important here too. I've found you can duplicate this pattern only if the density is twice the number of the frequency. Thus, you can use 5 and 10 or 4 and 8. Some of the other background types will not produce the braided edge, and some of them will. |
 |
You can also add your own background files
to the fill gallery. Just click the add button in the background designer
when you find one you really like. If you make your own, you will know
the height, making them easier to use. If you want another color when you
go to use it, you can right click on the thumbnail in the easy palette,
and click modify properties and apply. You can then change the hue of the
gradient ramp, and make it match your stationery.
Click here for more help with the background designer. You can save this help file by downloading the zip file here. For another method of making a background tile, see my tutorial on 20/20 here |
|
Now we have a
tile, and we need to fill a strip with it.
When you start with a tile to fill your strip with, remember always to check the height of the tile. This is very important in ensuring the seamlessness of your strip. Even though you have a seamless tile, your strip could end up with a seam if you are not careful. Here's how to avoid that. Check the height of the tile. In this case, the height of the tile we will fill the strip with is 100. The strip must therefore be a multiple of 100 for seamlessness. So our strip could be 100, 200, 300, or 400 pixels high, but not 178, 236. or any other number not a multiple of 100. Always multiply the height of your tile by 1, 2, 3, or 4 etc. to determine the height you should choose. What number you multiply by is determined by the size of your tutorial piece. Choose a size that will fit. Click file/new. Enter 1152 for the width, and the multiple of 100 you chose for your height. Don't worry about choosing a canvas color this time. Click ok. |
 |
Click edit/fill, and click the tab at the
top that says image. Click the circle in front of
clipboard, and make sure tile the image is selected. Click ok. You should now have a seamless strip ready
to use for your tutorial piece.
|
| Installing plugins | Strip 3. This is the method I use all the
time. It is very easy once you have plugins installed. If you have never
used plugins in Pi before, you will need to set it up in preferences. Here
is a tutorial showing you how to do that.
Get the dlls you need for plugins at PIRC, and install them according to the directions given. Click on useful tools, and you will find them under the downloadable files section. Click here to download the texturizer plugin. Once it is installed, make your strip as in strip 1. |
 |
Click effect/texture/texturizer.
Here you have a choice of four presets: brick, burlap, canvas and sandstone. Choose one, and change the relief to 1 or 2. You can use a higher number if you are applying texture to a small area such as a frame, but I highly recommend using a relief of 1 or 2 for strips, because high amounts of relief both make it hard to read your text, and make the strip larger in kb size. Both things should be avoided. My favorite of all the preset textures is the sandstone texture. There are other options you may want to change. If you use the canvas one, to achieve the look of cloth, click the box next to invert and the light direction to top right. Just remember the other options are there, and experiment to get the look you want. |
 |
When you use the texturizer all the time,
you may get bored with the four presets included. Don't despair, because
there is also a fifth option under texture. Click the down arrow under
texture, and you will see a fifth option. It is called load texture. The
catch is that you must have some texture files in psd format to load, because
the texturizer can only use psd files. You
can download mine or find out how to make your own here:
Some of these textures may require
a higher number of relief for them to show up well on your strip. Just
experiment with the settings when using them to get the right effect. Also,
when using other psd textures, it is important to know the height of the
texture and make your strip a multiple of that height. See the notes on
the page with my textures for more on this.
Click here to see my
finished strip.
|
Click here to visit my main site, and see my stationery and backgrounds.
