Flower Pattern Background

Tutorial Category:

Share This:

In this detailed tutorial, you’ll learn how to make a nice flower pattern background.

STEP ONE

Let’s start with a 200×200 pixel canvas. Drag out two guidelines, one at 100px vertically and one at 100px horizontally. Choose a color for the background and fill it in.

STEP TWO

Choose the custom shape tool and pick the floral ornament 2 as seen highlighted in red below:

STEP THREE

Create a new layer. Now hold down SHIFT and draw out the flower shape. Holding down SHIFT will keep the shape proportional.

STEP FOUR

Now I don’t like those 4 linear shapes so let’s get rid of them. You should be left with the following:

STEP FIVE

Now duplicate the flower pattern and then go to Edit > Transform > Rotate. Hold down SHIFT and rotate the object until you get the following:

Hit enter once the pattern is rotated into place as above.

STEP SIX

Go to your Layers palette and select both the original and duplicate pattern layers. Right click and choose Merge Layers.

STEP SEVEN

Go to View > Snap To > Guides and make sure it’s checked off. Now choose the Rectangular Marquee tool and select the top left corner. Right click the selection and choose Layer via copy.

STEP EIGHT

Now choose the Move tool and move the piece to the bottom right corner.

STEP NINE

One corner down, three to go! Go back to your Layers palette and make sure the original centered pattern is selected, not the piece you just moved.

STEP TEN

Choose the Rectangular Marquee tool and select the bottom right corner. Right click the selection and choose Layer via copy.

STEP ELEVEN

Choose the Move tool and move the piece to the top left corner.

STEP TWELVE

Are you noticing a pattern here?! Good, then continue with the last two corners. You should end up with the following:

STEP THIRTEEN

Now let’s bring it all together. Select all the pieces including the original centered pattern. Right click and choose Merge Layers.

STEP FOURTEEN

The pattern is a bit strong so let’s soften it. In your Layers palette lower the opacity to 25%.

You should end up with the following:

Now save your image and you’re ready to use it as a pattern on your website! If you would like to use CSS then include the following in your body tag, making sure the path to the image is correct:

1
2

background-image: url(images/background.gif);
background-repeat: repeat;

Enjoy!

Share This:

Related Tutorials