Main menu home | Pixopedia 24 | news | forum & faq | gallery | contacts | links
logo   This site is under heavy redesign!
Some links may not work correctly.
 
Pixopedia 24 introduction & features | screens | download | buy online | tutorial | tips & tricks | registered users
 
Examples

Click on desired image to see how it looks as web page background.

Plain color image

Noisy image

Median pattern

Warping pattern

Free hand drawning

Free hand retouch

Multiple filters 1

Multiple filters 2

BumpColor Shift

Bump Shift


Some useful hints

Create pattern on larger image and then cut out a portion of that image and then apply the last filter touch on the portion of that image.

You can create a pattern on larger image and then resize that image to obtain some additional effects.

When blured brushes are used, you'll have to cut a small amount of margins
(ImgCtrl->Canvas->Cut Margins) or use some filter to get seamless pattern, because of blured brush behaviour on image borders.

Try to awoid tilling of large images for background pattern of your web pages. Smaller the background image, faster the loading time.

v_line


Creating seamless patterns

Seamless patterns are very useful for web backgrounds. In order to obtain an image that can be tilled as background, we must prepare our image in such a way that border pixels wraps to each other. In this way, we get an image that is "borderless". We can do it by applying any filters (Filters 3x3 or IPL filters) with Wrap option checked.
Also, we can create patterns with free hand drawing and retouching with Wrap FH option checked. In this way, drawing outside an image is wrapped to the opositi side of image. We can also apply some other actions (warping, shifting), but we must apply some wrapped filter after those actions to obtain seamless pattern effect.

Noisy Patterns

These are steps needed to create noisy pattern:

  1. Creat the new image with any color desired. This color does not have any effect in further steps, so you can simply choose white background.
  2. Select foreground color that will be dominant color of your pattern.
  3. Open Transparency & Channels of interest dialog, and set PixelVary slider to desired amount. The higher amount will introduce the higher noise in your image.
  4. Select Draw action with normal mode and apply foreground color on complete image (apply button).
  5. Reset PixelVary to 0 if you don't want to apply noise in further actions.
You have created a noisy image which consist of foreground color pixels varied by an amount specified in step 3. This is starting point for some seamless patterns. We will simply name this starting image as noisy image.

Median cut

This filter is very useful for obtaining some simple but effective seamless patterns. Start with some noisy imageand set PixelVary slider to some amount in order to introduce some noise after median cut. In this way we can repeat median action on and on and our pattern changes every time.

If you set PixelVary amount to 0 median cut will stop after two or three steps and image will not change any more. This can be used to obtain very soft backgrounds. You can combine median action with various PixelVary amounts. Also, you can play with various size of median kernel, from 3x3 to 9x9 or higher.

Using other filters

Beside median cut, you can use sharpening, bluring, erode, dilate or your own convolvers. The best way is to try filters and to see what is the best solution for your pattern. Creating patterns is a process of dicovering and trying. For simple test, start always with noisy image.

Warping

Warping actions (especially ripples method) are also useful for patterns creation. Start from some noisy image, go to Warp action, select Ripples method with or without antialiasing and apply ripples effect few times on image. You'll get a marble-looking pattern. To obtain seamless pattern, use some wrapped filter after this action (median 3x3 or sharpen 3x3).

Drawing and Retouching

Using free hand drawing and some retouching action can create very interesting patterns. The best way is to perform simple normal drawing with Wrap FH option checked, or using free hand Spread methodon some noisy image. You can set PixelVary amount to 0 or set some small amount of noise in order to obtain a dusty pattern.

Pixels shifting

Pixels shift action (especially intensity and bumping) can also be used to obtain nice patterns. Create noisy image and shift it few times with some method. You can use shift action in combination with various filters. You can also play with direction of shifting as well. Set PixelVary amount to 0 while applying shift action.

Note!

You'll notice that these background patterns have "screaming" colors. These examples are used only to present possibilities of various actions in creating seamless patterns, not as a gallery of backgrounds.

 

Copyright by SigmaPi Design, all rights reserved.

SigmaPi Design assumes no liability or responsibility for any errors or omissions in the content on the site.
Intel, the Intel Logo, and Pentium are registrated trademarks, and MMX is a trademark of Intel Corporation.
Windows 95/98/ME/NT/2000 are registrated trademark of Microsoft Corporation.