Thursday, May 3, 2012

Creating Patterns and Backgrounds with bgMaker

If don’t you have experience with some kind of image editing software and you want to make some simple, eye-catching backgrounds, then bgMaker is an ideal tool to start with. This free online pattern/background generator works like a pixel editor with an instant preview of your design. You can create stunning backgrounds in few minutes.

Overview of the bgMaker Editor (click to enlarge)

The editor is quite simple. By default, you will see 12x12 grid. Each square in the grid represents a pixel. You can add an extra row of pixels by clicking on the plus sign on the left side of the grid. To remove a row of pixels, click on the minus sign on the left side of the grid. To add or remove a column of pixels click on the corresponding sign above the grid. Be aware that the editor adds rows at bottom and columns on the right side of the grid. The same goes for removing rows and columns. You can create a pattern with up to 99 rows or columns of pixels. Instead of clicking on the plus or minus signs, you can click between the signs and replace the number 12 with any number between 1 and 99.

Creating a Pattern/Background - Simple Example

Pick a color from the color palette in the left corner (to start, just click on the any color). Alternatively, you can edit the hexadecimal code for the desired color. Use the “Fill” button to fill the whole area with a single color. Below is the fill result for color with hex code DB99CD for 9x9 pixels pattern.

(click to enlarge)

Let’s pick a darker shade of the same color by clicking on the rectangle right next to the color palette (notice that both the hex code and the numbers for rgb percent have automatically changed). Then click on each square in the grid along the diagonal, starting from the upper left to the lower right. You should have a result like this one:

(click to enlarge)

If you repeat this with the opposite diagonal, you will get this result:

(click to enlarge)

Now, suppose that you want to use some of the colors that you've used before but you don’t know which shade (or the hexadecimal code) you've used. Never mind, bgMaker has a feature similar to a color picker. To do this, click on the area that indicates the selected color and move over the editor. The small hand should change in cross-shaped pointer. Click on the square that’s colored with the desired shade and once again you can work with a color that’s already used

After creating the final version of your pattern click on the “Save” button. The pattern you’ve created will be downloaded to your computer. This pattern will also be saved in the bgMaker’s Gallery. You can access the Gallery, which contains more than 244500 user created patterns, via the “Gallery” button. You can view, edit and download (in PNG format) any pattern in the Gallery.

Below is a list of links to some of the patterns that I've created with bgMaker.

Color Codes - Useful Online Resources

For more information about color codes see any (preferably all) of the following websites:
  1. Color Codes: Hexadecimal, Decimal, Percent, HSL, Swatches, Safe, SVG, 16 Named
  2. 500+ Colours
  3. RGB to Color Name Mapping (Triplet and Hex)
  4. Web Design Group's RGB Values Page
  5. HTML Colors
  6. Percent Color Codes
  7. Color picker
Have fun!


  1. this seems very easy and attractive thanx for the tutorial

    my website

  2. This comment has been removed by the author.

  3. This comment has been removed by the author.

  4. This comment has been removed by the author.

  5. Web designing is the most well known device in the realm of PCs. Today is a universe of advancements and everyone needs to utilize this innovation for their improvement.
    Creative Web Design Services | Dynamic Website Design Services

  6. Spark Interact web design Agency Sydney with 12+ years experience in Web development & WordPress.

    With High quality Website Design & Affordable prices. Check below the website links for more details (Apply for Job at Spark Interact)
    web design
    website design sydney
    web development sydney
    web designers
    web designer sydney
    logo design sydney
    web developers sydney
    website designers sydney
    website designers
    sydney web design
    web designers sydney