How It’s Made: “Old Posy Gold”

July 13th 2009 - Tutorials

“Old Posy Gold” was inspired by two elements – that wonderful color “goldenrod” and some late 60’s vintage wallpaper. It has that harvest, floral feel but still remains geometric here and there. I have no idea what the technical title of this form of pattern making is, but the end pattern gets created into offset vertical stripes. Each pattern is duplicated, moved vertically and then copied again parallel to it. That next stripe of pattern is then offset vertically and the whole thing gets duplicated over and over.

Step one: sketch out half of the pattern
I use grid paper to sketch out one side of the pattern. In this case, I started with the left side.

The first rough sketch

When sketching the pattern, I always envision the design sitting in a half circle. That way when we offset the final pattern, the pattern will flow and blend easier around.

An example of the half circle method

Step 2: tracing and coloring
For this pattern, I went straight into photoshop and started coloring. After choosing a few gold colors (brights, darks and midtones), I make a path around the parts I wanted to color first with the pen tool.

After creating a path, click on the “paths” tab on the layers palette, find your path and right click on it. Click “make selection” and you’ll get the selection box prompt.

For a hard edge, keep the feather radius set to zero. Now you’ll have an area selected that you can fill.

I try to keep each element in a separate layer. That way, I can add depth and shadows to each individually.

One quick method to add depth and shadows is by using the burn and dodge tools. Look at your pattern and try to select natural edges. In this case, I wanted half of the leaf to be lighter than the other, so I drew a path splitting the leaf in two.

After making the selection, I used the dodge tool to brighten up the right side of the leaf. I continue to select areas and color until I have the pattern almost fully colored in.

You’ll notice there’s a lot of refining that happens in this step. I keep close to the original sketch, but my drawing skills just aren’t as clean as using the pen selection tool. This pattern took around 20 layers, each dodged and burned in different ways.

Step 3: copy and flip horizontally

The next step is pretty quick and easy. Simply select the design, copy (ctrl+p) and paste (ctrl+v). In photoshop, go to Edit>Transform>Flip Horizontal.

Move the new copy to the right to line up with the left.

Now you can drop out the sketch and choose a new color to create the pattern over.

Step 4: copy and paste vertically
To create the first repeating stripe, we duplicate the pattern and begin tiling vertically. Make sure to space the patterns evenly. I usually hold shift and press up or down and count the spaces. Holding shift forces photoshop to move the element in 10 pixel increments (if pixels is set as the measuring unit).

I usually just eyeball the pattern and find a natural place to start and stop the pattern. With this pattern, the top slips into the bottom rather nicely. Keep duplicating and moving ten or so times so you have plenty of pattern to work with.

Step 4: copy and paste horizontally
Now let’s create a copy of the stripe and offset a bit to create the rest of the pattern. Again, move the pattern in increments of 10 or 1 and keep track of how far you move. If the patterns aren’t spaced evenly, then we won’t be able to create the seamless tile later on.

You should now have two stripes of pattern. Find a good place to offset the stripe that fits with the other.

You’ll notice the pattern fits a bit snugger moved vertically just a bit. You may run into some overlap here and there, so keep moving the pattern around until you have a good balance of the pattern and negative space.

Now duplicate both stripes and move horizontally. Move the copy twice as far as you did before. If you moved the first copy right 100 pixels, move the second copy with both stripes over 200 pixels to get an even spacing.

You should now have a pattern with a good amount of coverage.

Step 5: find the seamless tile
If you have moved the copies evenly, you can now zoom in and find the seamless tile to crop out. Find some good focal points and drag guides onto them. It helps to zoom way in and see each pixel to make sure you line them up evenly.

In this case, I used the smaller flowers to use as reference points.

A zoomed in view:

Now if you select within those guides, you should have your seamless tile:

To test the pattern, open a new document and copy and paste multiple copies. Line them up and make sure the edges are clean. If they aren’t, your guides may have been off a pixel here or there. Go back to your master file and make sure you’ve selected the correct area.

Hope this helps!


6 Responses to “How It’s Made: “Old Posy Gold””

  1. Avatar
    fotomurthy Says:

    hi | as a advanced photoshop user i myself | i just cant stop adoring ur talent | way to go | god bless | happiness to u 🙂

  2. Avatar
    clippingimages Says:

    Great tutorial,Awesome tutorial to learn artwork in photoshop. Thanks for sharing this nice post.

  3. Avatar
    Martin Katz, Ph.D. Says:

    Since you know how far you moved the pattern in step 4, the size of your pattern in step 5 is always a multiple of your movement in each direction. This should avoid having to find the repeat by eye.

    It also means you only need to repeat 4 times vertically and repeat your double row twice horizontally.

  4. Avatar
    Suzanne Silk Says:

    Again…Thank You for these tutorials.
    I purchased Photoshop 7 + Illustrator at the same time + I’m up to speed on CS4 (CS5 is out I believe)…and I’ve not used Illustrator at all.
    I feel quite limited due to this creative omission; nonetheless, photoshop has won my heart+brain power !
    Your work is terrific. Namaste
    Suzanne Silk

  5. Avatar
    Aurore Says:

    Great tuto, thank you !
    I love your work and patterns ! 🙂

  6. Avatar
    Cat Food Coupons Says:

    For newbie in image editor, your tutorial very help me to improve my skill. Thanks

Leave a Reply




Comments:




About DinPattern.com

DinPattern.com is an online pattern design resource for designers, artists, web developers and social network users that enjoy customizing their pages. Patterns can be used for twitter backgrounds, artwork, web design and anywhere else desired. More about how we got started.

All patterns and work within ©2014 Evan Eckard.

You may use these patterns for any personal or commercial web and screen use only (no print). If used, please link back to DinPattern and author credit would be appreciated. Also, feel free to leave a tip.

If interested in using any patterns within for print purposes or are looking for something custom, please get in touch for more information.