Pages

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.

http://bgmaker.ventdaval.com/index.php?edit=242763
http://bgmaker.ventdaval.com/index.php?edit=242759
http://bgmaker.ventdaval.com/index.php?edit=242758
http://bgmaker.ventdaval.com/index.php?edit=242756
http://bgmaker.ventdaval.com/index.php?edit=242751
http://bgmaker.ventdaval.com/index.php?edit=242671
http://bgmaker.ventdaval.com/index.php?edit=242672
http://bgmaker.ventdaval.com/index.php?edit=242676
http://bgmaker.ventdaval.com/index.php?edit=242741
http://bgmaker.ventdaval.com/index.php?edit=242740
http://bgmaker.ventdaval.com/index.php?edit=242709
http://bgmaker.ventdaval.com/index.php?edit=242710
http://bgmaker.ventdaval.com/index.php?edit=242714
http://bgmaker.ventdaval.com/index.php?edit=242715
http://bgmaker.ventdaval.com/index.php?edit=242716
http://bgmaker.ventdaval.com/index.php?edit=242451
http://bgmaker.ventdaval.com/index.php?edit=243139
http://bgmaker.ventdaval.com/index.php?edit=243027
http://bgmaker.ventdaval.com/index.php?edit=243028
http://bgmaker.ventdaval.com/index.php?edit=243029
http://bgmaker.ventdaval.com/index.php?edit=242754
http://bgmaker.ventdaval.com/index.php?edit=242768
http://bgmaker.ventdaval.com/index.php?edit=242766

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!

7 comments: