31Three

Creative services for the design-challenged developer



Creating Clipping Groups in Photoshop

Although creating “clipping groups” in photoshop is a fairly basic technique, I thought I would take a few minutes to outline the process here because I’ve found that many designers have yet to discover it.

The nice thing about clipping groups is that you can crop images (and other artwork) non-destructively to any shape you want to. If you end up changing your mind on how an image should be cropped later on in the design process, it’s a simple procedure. They are also very handy to use when you want to constrain an adjustment layer to just one section of your layout. Ok… less talk, more screenshots.

image
Step #1: Start by creating a photoshop document with three separate layers as shown above.

image
Step #2: Drag the middle image layer above the text layer. The shape that you want to clip other layers to, always needs to be on the bottom.

image
Step #3: Now to create the clipping group, just option-click (alt-click for the windows folk) between the image layer and the text layer. The cursor should change to a image icon as you hover between the layers.

I realize that this example is pretty lame and that the demand for image filled text is fairly low (as it should be). So I’ve mocked up a quick version of the www.hrpan.ca website to demonstrate how clipping groups can be used in everyday layouts.

image Download the .psd file


Thanks for the tutorial. Never even knew that feature existed. I usually just hold down command on the layer I want to turn into a mask to create a selection and click the layer mask icon. This way seems less destructive since you can use vector shapes for the masks.

Love it. Basic enough to learn and apply quickly—even for those of us who’re (still?) using masks.

Keep ‘em coming.

Excellent tip. Thanks from a newbie.

i was wondering how to do that, once i upgraded to CS2. i was so used to CMD+G (which now makes a group out of the selected layers)...

once that didn’t work, i remembered you had a tip regarding clipping masks (that i ignored the first time around, seeing as i thought i knew how to make them).

:D

Damn, hehe. I was doing something completely different to achieve the same affect earlier. Thanks for the lesson.

Oh, yes – look at that! useful. hmm. my words are auto-previewed strange – another thing i havent seen b4. time to open up photoshop and have a play….

best,
Alex

That’s fantastic! I’ve been wondering how to do this the easy way!

When designing sites I use multiple clipping masks. Actually I build the majority of the initial design that way. It makes it so easy to make client desired modifications on the spot if need be. I also use the blending options perfusly. At my work, a local television station, I try to avoid using blending options, but if a client wants to change this color hear or there all I have to do is tweak a blending option. Hopefully this can be usefull but I kind of assume that most people use these features already. I appreciate how open you are to the general public about your business and I hope you keep up the good work.

Cheers,
Matthew Pare
Pare Technologies

Thanks for the the refreshing reminder. I was trying to do this same thing in a much more difficult manner. Thanks!

Thanks for useful description!

Pretty good tutorial, thank you.

Very Nice tutorial, thanks.

Commenting is not available in this weblog entry.

me Hello, my name is…
Jesse Bennett-Chamberlain, a stay at home designer from Grimsby ON, Canada. To get in touch use the contact form.

The Globe and Mail are looking for a web designer… looks like it could be an interesting gig. View the post at Authentic Jobs

Lovely work from 10am.

Terminal method to disable shadows in os x screen window captures.

Thanks for the interview Geof! Man I need haircut.

A New Day for Jason Santa Maria. Very very nice redesign rethinking.

View Archives →

Authentic Jobs

authentic jobs signHelp Wanted
Recent openings posted at Authentic Jobs.

Post your own job opening.


idologic hosting Idologic Hosting
I've been with Idologic since January 2006, and can vouch for their amazing support and reliablity.

ref_ee ExpressionEngine
A feature-rich content management system that allows PHP illiterate folks like myself to create dynamic sites.

ref_basecamp Basecamp Project Management
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.