How to Export a Photoshop Pattern to an Image

Nicholas Cerminara
👁️ 5,121 views
💬 comments

Sometimes when you're slicing a website during front-end development, you'll need to export a photoshop pattern to an image so that you can set it as a repeatable background with CSS. If you don't can't get the perfect dimensions of the pattern, this could be a huge pain. I'm sure there are multiple ways that you can do this, but here is the method that I have successfully used.

You simply open the pattern library or the patterns tab through the blending options in photoshop. Once you have the patterns open, hover the pattern with your cursor to see some meta information about it. The Tooltip popup will show you the dimensions of the pattern. It will look like this:

photoshopscreen

After you see this, it's as simple as creating a new file with the dimensions of the pattern, setting the pattern on the file, and saving it as an image.

If you know an easier, better, or can improve on this method, please share!