Photoshop Basics - Issue 2

I’d already started writing my next topic when Justin commented that he wanted a “masking tutorial for dummies”. I’m not sure I know exactly how to approach that, but I do use Photoshop’s layer masking quite often, so I think I’ll take a shot at it.

To start with, a lot of people don’t really even understand the concept of masking. A mask is basically a hole that allows you to see part of an image and hide the rest. The diagram above shows the basic concept - I have an image of Amy and I at a football game and I only want to show an oval shaped portion of that image.

Now for a similarly simple real-life example:

The above is a section of the comp for a website we just finished at work. On each main page of the website, we wanted to swap a different image into the area where the purple heartbeat is. From the comp, I cropped out an area just large enough to show the entire oval.

Next, I used the Ellipse Tool to create a shape that was the same size as the purple one in the comp. Anytime you use one of the vector shape tools (like the ellipse), you’re actually just creating a color layer and a mask. To apply that mask to another image layer, I went to the ellipse in my layers window and clicked the chain icon between the color and the mask for the vector shape. Once that chain is gone, you can drag that vector mask onto another image layer. The benefit of applying a mask versus cropping an image to your desired shape is that even after you’ve applied the mask, you can still move the image around to show different areas.

Play around with this sample psd if you don’t get what I’m saying.

That’s about as simple as I can make masking, but once you understand the basic concept behind them, they have a world of possibilities. I would go into these details, but there are already a ton of advanced masking tutorials out there. I haven’t seen anybody explain yet that Photoshop’s vector tools create their own masks, so I think this tutorial has some merit as an introduction to the topic. For more info though, try out some of these:

• Vered’s Photoshop Masking Page
• Simple exploration of alternative masking techniques.
• Nice, advanced tutorial creating masks from channels.
• A similarly advanced masking tutorial from Adobe.

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:

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 () in 1600%, which is as far as you can.
3. Use the Rectangular 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 () 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.

One of my favorite blog posts of all time is Jason Santa Maria’s Grey Box Methodology. Even though he posted this back in May of 2004, the principles he lays out for breaking the process into intermediate steps are timeless. My own personal design process is often similar, except that I usually skip Illustrator. The step of “plotting out” the layout is important, but I find that Photoshop has just enough vector capabilities to do that job for me these days.

With that in mind, you can tell I spend a lot of time in Photoshop. There is rarely a moment during my work day that the Photoshop application icon doesn’t have a little black arrow under it in my dock. Even when I’m coding, or working in Flash, I still keep it open for various reasons. So just what am I doing in this application all day, and why don’t I ever write about it? I suppose it’s because a goal of mine as a designer is to always do things a little differently. As a result, I avoid writing about the technical aspect of design. It’s not that I’m hiding behind some secret curtain like the Wizard of Oz, but rather wondering whether those specific techniques or tips are worth posting. Nevertheless, there are a few tried and tested Photoshop techniques that I’d like to post over the next few months as I find time. Some of them I’ve developed on my own, and some I’ve picked up from books, classes, and tutorials. I’m not sure exactly what techniques I’m going to post yet, but it should be interesting.