Photoshop Basics - Issue 1

One of the Photoshop sub tasks that I find myself doing on a regular basis is creating and using custom pattern fills. Often times when I’m designing something in Photoshop (for print or web), I have graphic elements that need to be repeated over and over…with per pixel accuracy. I used to do it the hard way. I’d create one item, copy it, paste it. move it where I wanted it, merge it with it’s parent layer, copy that group of 2, paste it, move it, merge that…etc. That method works ok when you’re working with larger repeated element, or if you don’t need to repeat them that many times. But what about teeny things like dots or 1px lines or plaid (I dislike plaid, by the way)? That’s where pattern fills come in handy.

I don’t want to go too in-depth here into making complicated patterns, so for the sake of brevity, we’ll make some horizontal scanlines:

Hooray Pattern Fills!

Ignore the drop-shadowed white text and gradient blue background for a moment and notice the teeny black lines in the background. Yea, that’s the scanline pattern we’re making. Scanlines are the simplest pattern imaginable. This particular pattern is 2px tall by 1px wide. The top pixel is black and the one below is white. When repeated vertically and horizontally, it creates the lines you see above.

  1. In Photoshop, click “File » New”, fill in 1 pixel for the width and 2 pixels for the height and make sure your resolution is 72. (Note: For webdesign you always want to be working at 72 pixels/inch as this is screen resolution…for further confusion on THAT matter, refer to Art, Lebdev’s Image Resolution section.) Also be sure your color mode is set to RGB Color, 8 bit, and the background contents should be Transparent. Click OK.
  2. Zoom (Zoom) in 1600%, which is as far as you can.
  3. Use the Rectangular Marquee (Rect Marquee) to select the top half of your 2 pixel image and paint it black.
  4. Click “Select » All” to select the entire image and then “Edit » Define Pattern…”
  5. Give your pattern a name, perhaps “2px horizontal scanlines”.
  6. Find a picture or something you want scanlines over, open it in photoshop, create a new layer (Layer » New » Layer) above the image.
  7. Click on the Fill (Fill) Tool. In the top bar, there should be a dropdown menu that says foreground, select “Pattern”
  8. Click on the dropdown to the right of “Pattern” and select your pattern image, which should be on the bottom right.
  9. Click on your image and watch the magic scanlines appear. In the example above, I have my text on the top, my scanlines in the middle at 50% opacity and my gradient on the bottom.

Hooray scanlines, indeed. But don’t stop there. You can use patterns for any image asset you wish to repeat a bunch of times. So, there you have it, Photoshop Pattern Fills.

Here’s a zip of my sample PSD file.