This post first appeared on www.vickiwenderlich.com.
But what if you want to save the Photoshop patterns as individual .PNG or .JPGs so your programmer can tile the art as a background image?
Believe it or not, the solution to this isn’t straightforward. Sigh.
This problem stumped me for a long time, causing me to avoid patterns that I didn’t make myself or create from a jpeg.
It turns out that getting the source image is easy, though it’s not intuitive.
By the way, the .pat file from Subtle Patterns is awesome. Download it, then the next time you are applying a pattern, click the upper right arrow and select Load Patterns. Navigate to where you saved it, and click Load.
Step 1: Open Photoshop
No, don’t open a document yet.
Step 2: Select the Paint Bucket Tool
It’s in the Tools panel.
If you don’t see it, right-click the gradient tool and select it from the pop-up menu.
Step 3: Select Your Pattern
Go up to the Options panel and choose Pattern from the first drop-down menu.
Then click the second drop-down menu and hover your mouse over the pattern you used.
The name and size of your pattern should come up after a second.
Take note of the size (here I find that it is 200 by 200 pixels).
Click the pattern to select it.
Step 4: Create a New Document
Now you get to open a new document. Give it the dimensions of your pattern swatch – mine was 200 x 200pixels.
Or, if you didn’t listen before, resize your canvas (Image>Edit Canvas) to your pattern swatch dimensions.
Step 5: Click The Canvas
That was easy, right? Good.
Step 6: Save The Image
Go to File>Save For Web & Devices. If you are saving for the web, save it as a JPEG. If you are saving for the iPhone or iPad, save it as a PNG.
Now you can use the pattern as a repeating image in a website or app background!
Rarely do I use a pattern as a background without customizing it first. This includes modifications such as:
- changing the color
- applying it over another texture or background color
- changing the pattern’s blending mode
So how do you save out a pattern like that?
When you are done with your mockup, take the background layer(s) and paste them into a new document. Crop the document to the size of your pattern tile (it doesn’t matter where on the document you crop it, what matters is the pixel dimension) and save as usual.
This way you will get a perfectly repeating tile with all of your modifications intact.
Have any questions? Ask below. And if you know of a better way, please add your knowledge in the comments! Thanks :]