Creative services for the design-challenged developer
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.

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

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.

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
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.
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.
Help Wanted
Recent openings posted at Authentic Jobs.
Idologic Hosting
I've been with Idologic since January 2006, and can vouch for their amazing support and reliablity.
ExpressionEngine
A feature-rich content management system that allows PHP illiterate folks like myself to create dynamic sites.
Basecamp Project Management
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
Ian Lawson
November 03, 2005
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.
Sean Sperte
November 03, 2005
Love it. Basic enough to learn and apply quickly—even for those of us who’re (still?) using masks.
Keep ‘em coming.
Dennis Bullock
November 23, 2005
Excellent tip. Thanks from a newbie.
m. auayan
December 01, 2005
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
Kenneth
December 10, 2005
Damn, hehe. I was doing something completely different to achieve the same affect earlier. Thanks for the lesson.
Alex Beston
December 13, 2005
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
James AkaXakA
February 12, 2006
That’s fantastic! I’ve been wondering how to do this the easy way!
Matthew Pare
July 04, 2006
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
Jason Britton
July 31, 2006
Thanks for the the refreshing reminder. I was trying to do this same thing in a much more difficult manner. Thanks!
Fashion girl
August 29, 2006
Thanks for useful description!
milo
October 19, 2006
Pretty good tutorial, thank you.
Kamlesh V. Khatri
November 25, 2006
Very Nice tutorial, thanks.