For most sites, the background of each page is as important to the design as is the main content area. The backgrounds come in varied types: striped, checked, plain and sometimes with a lot of weird designs. Among these, the striped backgrounds can be used to produce a pleasant visual effect when used in sync with appropriate designs.

Most professional designers create their backgrounds using Photoshop or the GIMP or the likes of them. But, for laymen it is very difficult to do so unless he/she is following a tutorial. Now, this is indeed time consuming and error prone. So, this service called Stripe Generator is the boon for all the amateur designers and time conservers out there.

stripe gen 1

This nifty tool can be used to design your own choice of stripes with a variety of formatting options. Of course, since this is to be used in stylesheets, it is advised to used the background repeat feature to spread the background to the whole page. Using the above 2 sliders you are able to set the width of the 2 different colors constituting your image.

stripe gen 2

The stripe color option can be used to select the first color or one of the colosrs in the stripe pattern you want to generate

The background style option can be used to choose among 3 different styles.

  • The first one is to generate the default and normal stripes.
  • The second one is to generate a linear gradient (e.g. an image of size 1×100 px). This is effectively used for headers and footers.
  • The third one is to generate checked or intersecting stripes. You are also able to set the amount of shadow along with this option.

stripe gen 3

Here, you can choose the colors of the 2nd stripe. The third color is used when the linear gradient option is earlier selected. This can be used to give the pattern a kind of shimmer with the chosen color.

The stripe orientation feature is used to set the angle of the stripes. They can be diagonal, vertical or horizontal.

You are also provided with a live preview nearby which enables you to preview the resulting image after you make modifications.

stripe gen 4

Clicking on the center of the image, the image alone refreshes and shows you the result with the modifications you have done. And finally, you can download the finished image by clicking on the “Download” button and you can save the file to the computer. You can also check out the blog.

Have fun designing and send in your comments. :D

stripe gen 5


Keep up to date

Want to know the latest? Subscribe to our RSS or get Regular Email Updates.

Share the Post

Stumble  Digg This Post  Technorati  Delicious  Reddit

Related Posts

Post-Plugin Library missing