Web Design Experiments: Creating Patterns and Backgrounds with bgMaker

Thursday, May 3, 2012

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.

Color Codes - Useful Online Resources

For more information about color codes see any (preferably all) of the following websites:

Have fun!

AnonymousMarch 12, 2022 at 10:02 PM

Web Design Experiments: Creating Patterns And Backgrounds With Bgmaker >>>>> Download Now

>>>>> Download Full

Web Design Experiments: Creating Patterns And Backgrounds With Bgmaker >>>>> Download LINK

>>>>> Download Now

Web Design Experiments: Creating Patterns And Backgrounds With Bgmaker >>>>> Download Full

>>>>> Download LINK Jf

Web Design Experiments

Pages

Thursday, May 3, 2012

Creating Patterns and Backgrounds with bgMaker

Creating a Pattern/Background - Simple Example

Color Codes - Useful Online Resources

15 comments: