|
Home Tutorials
Beginners Classes
11 Making Seamless Backgrounds
|
|
Making Seamless Backgrounds
Created by: Charith
Modified by: PSPUG Learning Center
and the Prof
|
|
|
We are going to learn what it takes to make seamless backgrounds using a graphic. It is not always easy to make seamless backgrounds. It takes a lot of time and a lot of painting to make it a true seamless tiled background.
Seamless images are often used as backgrounds (wallpaper) for Web Pages and for Rich Email (html email). A good seamless image will be tiled meaning that the image will be repeated over and over creating an appearance of a single image that covers the whole background.
A good seamless image will be able to be repeated both vertically and horizontally to make a pattern without seeing any edges. In this tutorial we will explore some PSP features that create seamless images and explore a technique to turn images into seamless tiles.
Below, the Left Image (sandstone.gif) is a good seamless tile. The Right Image (marblewings.gif) is a poor seamless tile.
(The sandstone.gif tile will create a very nice soft brown sandstone effect as a background on a Web Page. The marblewings.gif will create a very awkward background with clear tile border lines and no smooth repeating patterns.)
(Tip: If you know how to use Rich Email and graphics for backgrounds you are able to test out any image as a background image. You may also use the tiles as a background on a web page to see the results.)
(Note: The illustrations are done on a 100 x 100 canvas. You may want to copy them and paste them four times on a new 200 x 200 canvas to see how the image will replicate. Also, you may want to duplicate them on a 300 x 300 canvas to see more of the image.)
|
|
Textured Tiles using PSP Effects
|
|
There are a number of PSP Effects that may be used to create simple, quick and effective seamless images that may be used as background tiles. (As a rule, a background tile for a web page or rich text email is usually not very busy and is light in color in order for text to be easily seen.)
|
|
Creating a Sandstone Effect Using NOISE
- Create a New Canvas:
- 100 x 100 pixels
- White Background
- 16M colors
- Add Noise
- PSP5 & PSP6: Image || Noise || Add
- PSP7: Effects || Noise || Add
- Noise = 100 %
- Random = Checked
- Click on OK
- Make Image a Grey Scale Image:
- Colors || Grey Scale
- Note: This function reduces the colors to 256
- To Increase the Colors use:
- Colors || Increase Color Depth = 16M (24 bit)
- Color the Tile:
- Colors || Colorize
- Hue = 16
- Saturation = 128
- Click on OK
Note: This tile is the same you downloaded for this tutorial. Also, you now have a basic background tile. You are able to use the Colors || Colorize to create any color tile you want. Just experiment with the values for Hue and Saturation. (Try increasing the Hue by a factor of 16 and you will go through the basic colors of the color wheel.)
Also, the larger image illustrated is the image tiled to show a seamless pattern. (This effect is accomplished by creating a new canvas, 200 x 200 and pasting the image as a new layer 4 times and moving each layer so no background color or transparency is showing.)
|
|
Using a Sculpture Effect -- Frosted Glass
PSP has a number of Effects (sculptures and textures) which are able to be used to create a seamless tile. (PSP5 does not have these effects.) We will use just a couple of them to illustrate the effects. However, take time to explore them all and find ones you like for your background images.
- New Canvas: 100 x 100, White Background, 16M colors
- PSP6: Image || Effects || Sculpture
- PSP7: Effects || Texture Effects || Sculpture
- PSP6: Pattern = #14 (Pink looking image)
- PSP7: Pattern = #23 (FrostedGlass.bmp)
- Size = 100
- Smoothness = 0
- Depth = 1
- Ambience = 0
- Shininess = 0
- Color = White
- Angle = 315
- Intensity = 50
- Elevation = 30
- Click on OK
|
|
Using a Sculpture Effect -- Cement
Let's use one more example with Sculpture. Later, experiment with other sculpture patterns.
- New Canvas: 100 x 100, White Background, 16M colors
- PSP6: Image || Effects || Sculpture
- PSP7: Effects || Texture Effects || Sculpture
- PSP6: Pattern = #6 (Cement looking image)
- PSP7: Pattern = #10 (Cement.bmp)
- Size = 100
- Smoothness = 0
- Depth = 1
- Ambience = 0
- Shininess = 70
- Color = White
- Angle = 315
- Intensity = 50
- Elevation = 30
- Click on OK
|
|
Using a Texture Effect -- Letters
In PSP, using Texture Effects also are able to create some nice simple and easy background images. Take time to also explore these effects.
- New Canvas: 100 x 100, White Background, 16M colors
- PSP6: Image || Effects || Textures
- PSP7: Effects || Texture Effects || Texture
- PSP6: Texture = #27 (Light Letters)
- PSP7: Texture = #36 (Letters2.bmp)
- Size = 100
- Smoothness = 0
- Depth = 1
- Ambience = 0
- Shininess = 0
- Color = White
- Angle = 315
- Intensity = 50
- Elevation = 30
- Click on OK
|
|
Using a Texture Effect -- Marsh
In this example we will use a green background (R208, G228, B208) with a Marsh Texture.
- Set Foreground to light Green: (R208, G228, B208)
- New Canvas: 100 x 100, Foreground color, 16M colors
- PSP6: Image || Effects || Textures
- PSP7: Effects || Texture Effects || Texture
- PSP6: Texture = #37 (dark image)
- PSP7: Texture = #40 (marsh.bmp)
- Size = 100
- Smoothness = 0
- Depth = 1
- Ambience = 0
- Shininess = 0
- Color = White
- Angle = 315
- Intensity = 50
- Elevation = 30
- Click on OK
|
|
There are an unlimited number of possible seamless tiles one is able to create using Sculpture and Texture Effects. With the Texture Effects, one could also use Colorize to get other colored tiles. Explore them all and you will fine many different ways to create interesting and unique background tiles.
Next, we are able to use two additional features of PSP to create interesting background tiles. One is able to take any image and apply either the PATTERN or the KALEIDOSCOPE effects and create interesting background tiles.
|
|
Creating Seamless Tiles with the Pattern Effect
|
|
In this and the next illustration, use the Marblewing.gif image from the download, or, any image you wish. Just duplicate it first to save the original (Window || Duplicate). Also, make sure the image is a 16M color image. If not, use Colors || Increase Color Depth to 16M Colors.
First, notice that this tile is a very poor background image as it stands at this point.
By using another PSP feature, Pattern we are able to turn this canvas into a wallpaper type pattern that will make a very nice background image.
- PSP6: Image || Effects || Pattern
- PSP7: Effects || Reflection Effects || Pattern
- Horizontal and Vertical Offsets = 0
- Rotation Angle = 0
- Scale Factor = 0
- Number of Petals = 10
- Number of Orbits = 0
- Radial Suction = 0
- Click on OK.
Now just experiment with different settings in the Pattern Options window to see how you can create many, many interesting and effective background images from just one canvas.
Example: In the settings from above just change both horizontal and vertical offsets to minus 100 ( -100 ) to produce a whiter background with diamond shapes. Then experiment with the horizontal and vertical offsets set to plus 100 ( +100 ) for another pattern.
The more you experiment, the more you will find interesting ways to use this PSP Effect.
|
|
Creating Seamless Tiles with the Kaleidoscope Effect
|
|
Another PSP feature, Kaleidoscope, also will turn this canvas into a wallpaper type pattern that will make a very nice background image.
- PSP6: Image || Effects || Kaleidoscope
- PSP7: Effects || Reflection Effects || Kaleidoscope
- Horizontal and Vertical Offsets = 0
- Rotation Angle = 90
- Scale Factor = 0
- Number of Rows, Columns = 3
- Horizontal and Vertical Shift = 0
- Click on OK.
Now just experiment with different settings in the Pattern Options window to see how you can create many, many interesting and effective background images from just one canvas.
Example: In the settings from above just change the number of petals = 2 to produce another patterned background. Then experiment with these settings: Offsets = 0, Rotation = 0, Scale Factor = 20, Number of petals and orbits = 4, radial suction = 50.
The more you experiment, the more you will find interesting ways to use this PSP Effect.
|
|
Creating Seamless Tiles with Flip and Mirror
There is also a technique for making any image seamless. By using Image || Flip and Image || Mirror, one is able to produce a seamless image that is an interesting pattern. By Flipping and Mirroring images and then copying them onto a new canvas one is able to line up the horizontal and vertical edges that will then replicate seamlessly.
The basic technique: (Information)
- Create a new canvas twice the size of the original image.
- Copy the original image and paste it as a new layer on the new canvas.
- Create four new images (on four new layers) which will look like this:
- #1 - Top Left | #2 - Top Right
- #3 - Bottom Left | #4 - Bottom Right
- Then use Image || Flip or Image || Mirror on an image and line up that image in its position on the canvas.
- The order is as follows:
- #1 - Unchanged | #2 - Mirror
- #3 - Flip | #4 - Mirror, then Flip
- Then, Merge all layers, save your image and use as a background.
|
|
Ok, let's use this technique on the MarbleWings.gif image from the download.
- Make sure the image is 16M colors: Colors || Increase Color Depth to 16M colors. (This tile is a 100 x 100 pixel tile)
- Create a New Canvas twice the size of the original canvas:
- Width and Height = 200 pixels
- Background Color = Red (to be able to see spaces.)
- Copy the Original Image: Edit || Copy (Control + C)
- Highlight the New Canvas:
|
|
- Layer #1: Paste as a new layer - Edit || Paste as a New Layer (Control + L). Then, use the your mouse to move the image to the Top Left area of the canvas. Make sure there are no red areas at the top or on the left.
|
|
- Layer #2: Paste as a new layer (Control + L). Then use Image || Mirror. Then use the mouse to move the image to the Top Right area of the canvas making sure there are no red areas at top, right or left of image. If needed readjust the Layer #1.
|
|
- Layer #3: Paste as a new layer (Control + L). Then use Image || Flip. Then use the mouse to move the image to the Bottom Left area of the canvas making sure there are no red areas at top of this image, to the left or on the bottom. Adjust as needed.
|
|
- Layer #4: Paste as a new layer (Control +L). Then use Image || Flip and then Image || Mirror. Then move the image to the Bottom Right area and adjust so that no red is showing anywhere.
|
|
Once you are satisfied that no red areas show up just Merge and then save your image.
- Then Merge all layers: Layers || Merge All (flatten)
- Save the image and use it as a background.
- You may want to resize the image to create a smaller file size.
You are ready to use it as a background image.
This technique will create a seamless image on any image. Try it on a picture of a person, or a scene, or anything you choose. Just start with a relatively small image so that when you double the new canvas your final image is not too large. Remember you also are able to resize the final image.
|
|
|
|
Using Selections || Convert to Seamless Pattern
|
|
A very powerful feature of PSP is the ability to create a seamless pattern from any image by using Selections || Convert to Seamless Pattern. Although this feature is very easy to use, the skill to develop will be in the image you use and the selection you make for the conversion.
First, we will use the 11seamlss-25.gif image you downloaded to learn this conversion technique. The image at the top left is a relatively light image. Although it appears that it might replicate correctly when used as a background for a web page, in fact it will not do so seamlessly. Just study the image at bottom left (/tutorial/html/beginclass/11seamlss_26.gif) created from the Flip-Mirror technique.
Basically, the Convert to a Seamless Pattern feature of PSP takes a selection made and makes it seamless by using areas surrounding the selection to eliminate the appearance of seams. The best way to learn this feature is to just use it and in time you will see how to make excellent seamless images from any graphic.
|
|
Let's create a Seamless Tile
- Use the 11seamlss-25.gif image
- Use Colors || Increase Color Depth to 16 M colors.
- Use the Selection Tool and Draw a rectangle selection.
- Selection Type = Rectangle
- Feather = 0
- Antialias = Unchecked
|
|
The result is a seamless image. Although it appears similar to the original image, when you use it as a background, there are no seen edges as the images tiles smoothly.
Thus, you are able to use any image. Select an area you want for a background image and then use Convert to Seamless Background. The more you experiment with this feature, the more you will find it a very useful tool to create some fantastic backgrounds.
To view all the background images used in the lesson and some extra background, click here for the Prof's Tour on Seamless Patterns.
|
|
-- Enjoy -- :o)
In our next lesson, we will make Bordered Backgrounds.
|