Preview:

Level: Intermediate
Some of the most popular website are using a subtle tone on tone patterned background. The one we are going to make today is fairly easy and once you know how, you’ll be able to experiment with many other designs. Let’s get started!

1. Open a new image (Ctrl+N) using custom color #670020, image size 200 x 200 pixels.

2. Click View >>> Show Ruler.

3. Place your cursor over the left vertical ruler edge and drag a guideline out to 100 pixels. (See Blue line).

4. Place your cursor over the top horizontal ruler edge and drag a guideline down to 100 pixels. (See green line)

5. Click View >> Guidelines and Grids >> Snap to Guidelines. This will help you make a perfect selection later.

6. Using the Path Drawing Tool, select the flower, F105. The fill color is #77001A and the border is set to 1 with color #4F0010.

7. Draw the flower on the screen; double click on it and resize it to 150 x 150 pixels. Center the flower both vertically and horizontally.

Now you should have a sample like this:

Hint: Now is a great time to save your image as a .ufo file.

8. Be sure the flower is still selected!!!
Choose the marquee tool >> Standard Selection Tool>> select the rectangle.
Make sure you have unchecked the fixed width. Place your cursor in the top left corner and drag the marquee tool to outline the top left portion of the grid. Now you’ll see why we used the Snap To Guidelines feature.

9. Right click on the top left highlighted grid and Convert To Object.

10. Right click on the top left grid AGAIN and copy. Paste image in the right lower grid.

11. Move the portion of the flower to the lower right corner so it’s snug up against the edges.

12. Right click on the little corner flower and Duplicate. Now there is a duplicate stacked directly on top of the first flower. You can’t see it but it’s there. Move it with your mouse. Drag the new little flower to the top right corner. Using the transform tool, rotate the flower a ¼ turn to the left.

Now you have TWO corners completed. Repeat that last step (#12)two more times until all four corners are filled!

Now comes the fun part! Take a look at your design in a browser by clicking File >> Preview in Browser >> As Tiled Background! Don’t be alarmed if it doesn’t look perfect. With a little adjustment of the four corner pieces, you will get it working just fine. Hint: I find that the top two pieces need to be positioned -2 from the top.
Reminder: Save file

Now to add the final touches. You are almost finished!

13. I placed a straight line in an “X” pattern behind the flowers. To do this, select your Line/Arrow Tool. Choose color #77001A, straight line, 2D object.

Now to add the final touches. You are almost finished!

14. Holding down your shift key so you get a perfectly straight line, place your cursor on the top left corner and drag the cursor diagonally to the bottom right corner.

Set your bevel to a width of 2.

15. By holding down the Crtl key, using your mouse, click and select both of your new diagonal lines. When they are both selected, right click and Arrange >> Send to Back.

There you go! Your design is now complete and should look like this! Reminder: Save you image! Give your design a last bit of tweaking by previewing it in your browser as a tiled background.
File >> Preview in Browser >> As Tiled Background
SAVE your image as a .jpg at

these 200 x 200 dimensions. For many designs this is just too large but I love having the original in case I want to make adjustments to the .ufo file in the future. This design looks really nice saved as 80 x 80 pixels which is what you saw at the very beginning of this tutorial.

OPTIONS: Once you have the design, you can easily change the Hue. Open the .jpg and click Photo >> Color >> Hue and Saturation. Set the Hue to -138, Saturation 0, Lightness -16 and you’ll get a beautiful Blue pattern.

About The Author
Linda Chadbourne, has been a professional freelance website designer and developer since 1998. Linda donates many hours helping Webforumz members with technical aspects of website design and development as Lead Moderator, which has over 10,000 members. She is also a contributing writer to Creative Coding Newsletter.
This tutorial was created by Linda Chadbourne of Maine-ly Web Design.