TUTORIALS SUBMENU ---->

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING

In the ever evolving world of web design, the basic tiling floral pattern seems to be making a comeback in a BIG way! Simple to make, pleasing to the eye and, best of all, light on bandwidth, floral patterns have graced many great sites recently, and looked fantastic in the process. So, how are they created? Read on and be enlightened...

Step 1:  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. Bring out the custom shape tool and pick 'floral ornament 2', as seen highlighted in red below:

Step 2: Create a new transparent layer on top of the single color background. Hold down SHIFT and draw out the flower shape (holding down SHIFT will keep the shape proportional). Now whip out the Eraser Tool and get rid of the four linear shapes outside the flower. If you have done everything correctly, your image should resemble mine on the bottom right.

Step 3: Duplicate the flower pattern layer and then Edit > Transform > Rotate. Hold down SHIFT and rotate the object in the duplicate layer until you end up with a composite flower that resembles the image on the left. Hit ENTER on your keyboard once the pattern is rotated into place to finalize the change. Now, go to your Layers palette and select both the original and duplicate pattern layers. Right click and choose Merge Layers from the context menu that pops up.

Step 4: Go to View > Snap To > Guides and make sure they they are checked OFF. Choose the Rectangular Marquee Tool and select the top left corner of your image. Right click the selection and choose Layer via copy.

Step 5: Using the Move Tool, move the new piece that we have just created to the bottom right corner of the document. 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 6: Choose the Rectangular Marquee Tool once again and form a selection around the bottom right corner of the image. Right click the selection and choose Layer via copy. Choose the Move Tool once again and move the piece into the top left corner.

Step 7: Are you noticing a pattern here?! Good! Repeat steps 5 & 6 with the last two corners. You should end up with a floral image that closely resembles my creation to the left. Now let's bring it all together. Select all the pieces including the original centered pattern, Right click and choose Merge Layers. The resulting pattern is a bit strong, so soften it by lowering the 'Layer 1' opacity to 25%.

Step 8: And there we have it - one seamlessly tiling floral texture! Now all you need to do is save your image and you're ready to use it as a pattern on your website! VARIATIONS: The techniques mentioned in this tutorial will work on any symmetrical object, as long as the canvas size is big enough to contain the seamlessly-tiling components generated in steps 5-7. Photoshop comes with dozens of high quality shapes that are instantly usable. Just have a play around and see what you can create!

- Tutorial written by Jacorre

Automatic Translations: