Ever wonder how I did the flower background you see being used on Jacorre Design Studio? Well here's a very detailed tutorial to learn from!
STEP ONE
Let's start with a 200x200 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 11
STEP TWELVE
Are you noticing a pattern here?! Good, then continue with the last two corners. You should end up with the following:
step 12
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 13
STEP FOURTEEN
The pattern is a bit strong so let's soften it. In your Layers palette lower the opacity to 25%.
step 14
You should end up with the following:
step 15
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:
background-image: url(images/background.gif);
background-repeat: repeat;
Enjoy!