Michael Oxborrow

Before you begin:

If any of the palletes mentioned in the tutorial below are not visible on your screen; for example you can't see the Swatches pallete, you can simply go to the menu bar and select: Window » Swatches . From the menu bar select: View » Show » Smart guides and make sure Smart guides is ticked. Also from the menu bar select: View » Snap To and make sure Smart Guides and Layers are ticked. Also make sure from the view menu that Snap is ticked.

If for any reson you make a mistake:

From the menu bar select: Edit » Step Backward or press Alt+Ctrl+Z to go back a step

Step 1 - Create a new document

Create a repeating pattern using Photoshop - Step 1

Open Photoshop and from the menu bar select: File » New or press: Ctrl+N Make sure that your document has:

• Resolution - 72 pixles/inch
• Width & Height - 300 pixels
• Background contents - Transparent

Now click the OK button or press the Return key.

Step 2 - Create a background layer

Create a repeating pattern using Photoshop - Step 2

From the menu bar select: Select » All or press: Ctrl+A Now set a new foreground colour by clicking on your primary colour in the tools pallete and selecting black. Now select the Paint Bucket Tool and click on your image to fill it with black. From the menu bar select: Select » Deselect or press: Ctrl+D to deselect.

Step 3 - Create a star shape layer

Create a repeating pattern using Photoshop - Step 3

On the tools pallete click and hold the shape tool button (usually a square by default) briefly until a pop-up menu appears. Select the Custom Shape Tool and choose the star shape. There is a small arrow to the top right of this drop down menu, click it and select: All if you can't see all the available shapes.

• From the layers pallete click the Create new layer button or press: Shift+Ctrl+N .
• Now set a new foreground colour by clicking on your primary colour in the tools pallete and selecting white.
• With the custom shape tool selected and holding the Shift key to constrain the dimensions of your star click and drag a new shape onto your new layer.
• With the custom shape tool selected and holding the Shift key to constrain the dimensions of your star, click and drag a new shape onto your new layer.

Step 4 - Styling your star

Create a repeating pattern using Photoshop - Step 4

You should now have a background layer which is black and a star layer which is white.

• In the layers pallette make sure your star layer is selected and click the Add a layer style button (fx) and select Outer Glow.
• Set: Opacity - 100%, Spread - 0% and Size - 25px and click the OK button.
• Your star should have a nice outer glow now, you can experiment with these settings yourself.

From the menu bar select: Image » Canvas Size or press: Alt+Ctrl+C and set the width and height of your document to 500 pixels and press the OK button. This will give you some wiggle room to move your shapes around the border of the background layer.

Step 5 - Placing more stars

Create a repeating pattern using Photoshop - Step 5

Now, using the arrow tool from the Tools menu, move your star to the edge of your black background layer square so that it half hangs over the edge. You will see snap guides and feel it snap into place. Now, holding Alt (to create a duplicate) and Shift to (keep the duplicated shape in line) click and drag your first star to one side creating a duplicate shape. Move it so that it also hangs half over the opposite edge.

Step 6 - Placing even more stars

Create a repeating pattern using Photoshop - Step 6

• Whilst you have a star layer selected create another star by holding the Alt key and clicking and dragging that star. Do this to create a third star.
• From the menu bar select: Edit » Free Transform or press: Ctrl+T . You can now, whilst holding the Shift key, click and drag the corner of this new star to change it's size, make it slightly smaller than the first two.
• Whilst in Free Transform mode moving your cursor to the outer corner of the bounding box will transform your cursor into a curved arrow. Clicking and dragging when this happens will allow you to rotate the star. Rotate it slightly so that it is also at a dirfferent angle to the first two.

Once you are happy with the size and rotation of this new star click the check icon at the top of your screen or hit the Return key. With the Arrow Tool selected move your new star to the top of your black background square so that it hangs half over the edge as before. Now hold the Alt and the Shift keys and click and drag a duplicate star to the opposite edge of your background layer (half over the bottom of the black square). You can repeat this until you have shapes all around the border of your square.

Step 7 - Finishing the pattern

Create a repeating pattern using Photoshop - Step 7

Now you can build up the middle of your image with more stars of differnet shapes and sizes. Once you have done this go to the menu bar and select: Image » Canvas Size or press: Alt+Ctrl+C and set the width and height of your document back to 300 pixels and press the OK button.

Step 8 - Saving and uploading the pattern

Create a repeating pattern using Photoshop - Step 8

If you are happy that each of your border stars are matched to the stars on the opposite sides of your black background you can now save your pattern for use on your website by going to the menu bar and selecting: File » Save for Web & Devices or pressing: Alt+Shift+Ctrl+S . Save as a jpg (full quality) and use as a desktop background pattern or upload to your website image directory and reference it in the body tag of your CSS: body { background: url('yourimagefolder/yourimagename.jpg'); } Or in the HTML body tag as style="background: url('/yourimagefolder/yourimagename.jpg');"

You have completed the 'Repeating Pattern Using Photoshop' Tutorial

The finished result should be a pattern that repeats seamlessly, as above. I suggest experimenting, as I have, with different shapes and colours to create your own repeating backgrounds.