Going Backwards: Extracting a Jpg Tile from a Photoshop Pattern File

It's pretty easy to go forward in the pattern making process—use Photoshop to define a pattern from an existing graphic. It's a little trickier to extract the original file — convert a Photoshop pattern to jpg.

A lot of the free patterns available online are available in Photoshop pattern (.pat) format, but if you want to use a Photoshop pattern as a website background, you need the original tile in jpg or gif format, not the pattern file. Here's how to get an accurate jpg file from a Photoshop pattern (so you don't have to guess where the seams are, crop, test, crop again, test again):

  1. Open your file in Photoshop. Choose the layer you want to apply the effect to and choose Pattern Overlay. In the Layer Style dialog box, Pattern Overlay, scroll through the patterns to select the pattern you'd like to use. Click on it to select it.

  2. With the thumbnail view still open, hover on the pattern you selected for a while until its tool tip appears. The tool tip will tell you the original file name and pixel dimensions of the original tile! (If there's somewhere else this information is, I'd love to know - this was the only place I could find.) Write down or screen capture the pixel info. In this example the pattern is 250px x 307px. Click OK to to exit the Layer Style dialog box.

  3. Select Image > Canvas Size. Select the top left corner of the canvas (patterns are always applied from the top left corner down) and enter the pixel dimensions from the previous step. Click OK to crop the canvas.

  4. Export the cropped file as a jpg or gif.

  5. Bonus step: If you would like to test your file in Photoshop to be 100% sure the tile was created correctly, make sure the file is flattened, select all (Cmd-A) and select Edit > Define Pattern and save your pattern. Create a new document at a much larger size than your pattern. Then choose Edit > Fill, choose pattern, find your pattern (usually new patterns move to the end of the list) and click OK. The pattern should fill the document seamlessly.

Southern Savers Magnolia

I saw this sweet magnolia web header at SouthernSavers.com. Love the colors and vintage style.

No Coast Craft-o-Rama Poster

Folk art with sophisticated color scheme and a little grunge: poster from No Coast Craft-o-Rama event.

Book Cover Inspiration: Moody and Dark

These covers show the drama and atmosphere that the color black can convey. I love the moody silhouette and type on the branch in the To Kill a Mocking Bird anniversary cover. I like how the colors work together in The Bells cover. Torment's strength is artistic photography and interesting fonts. The over the top gothic swirls and grungy photo make Beautiful Darkness deliciously dark.