I want to create wooden rectangular photo frames of custom size for using it in an e-commerce project where we will be selling photos with wooden and plastic frames. But I don't have images of the full frame instead just the image of the pattern of those frames. For example see this PDF below:

Patterns and Styles of the frames

I hope you won't mind viewing this as this would be of great help to me. And I hope this can be done with Photoshop. I hope I am making this clear enough. Please suggest and help.


enter image description here

What would be the best tool to do such tasks??


1 Answer 1


You need to take the portion you have an cut it up into repeating patterns. For the example you provided, the frame can be broken down into 4 sections:


You have the "floral" section at the top, the repeating lines in the middle, the spiral pattern below that, and the linked spheres pattern at the bottom.

This section is not naturally repeatable as it stands, but some tweaking can fix that:


I left the floral pattern untouched, adjusted the spacing of the vertical lines, and did some cut and pasting for the other two sections to make it work.

Using the finished product, I then created this finished frame:

enter image description here

  • Note: if one takes the repeatable section, and a clip of a mitered corner, then it would be trivial to programmatically size the frame preview to the item's dimensions. It would also be possible to do this with only the repeatable section if one wanted to create the miters on the fly. The ins-and-outs of that program would be better suited to a different stackexchange however
    – horatio
    Jan 8, 2013 at 18:11
  • @John Thanks a lot for such a help. If you won't mind I have to ask a little bit more from you. How can I make this frame shrink towards its outer border, thereby creating more space in the white area for the photo to be placed? the overall size of the frame would stay intact but only just the inner portion would push outwards to meet the outer border. Hope I am making it clear. BTW the part you said "some tweaking", can you please elaborate it a bit cuz the end result looks really promising. Thanks.
    – Dave
    Jan 9, 2013 at 7:03
  • @Dave, I added in an animated GIF to the answer to show you the tweaks I made. I adjusted the spacing of the horizontal bars, filled in the gap created by doing so, continued the spiral pattern, then continued the spheres pattern. It's mostly just cutting and pasting to make the pattern repeatable. For more help on that, I'd recommend searching for "creating a seamless pattern in photoshop". Once you have the seamless pattern, you can make the frame any size you want. Here is a 710px wide segment: i.imgur.com/QE3Mu.png. To make a larger frame, copy and paste it a few more times.
    – JohnB
    Jan 9, 2013 at 15:30
  • @dave: you will need to take the seamless tile which john has shown, and your web application will need to tile it out to the appropriate size. The standard framer's formula for ordering frame stock is: (dimension of the object) + (2 * (width of frame moulding)). You know the width of the photo, so calculate the desired width, make a length of moulding using the tile image equal to or greater than the desired size, crop it to the desired size, miter it, dupe and flip, then repeat for the height of photo. Blt them all together. The specifics of programming it depends on your app.
    – horatio
    Jan 9, 2013 at 17:15
  • This is the only way to make it flexible enough to accommodate arbitrary photos on an e-commerce site.
    – horatio
    Jan 9, 2013 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.