Home
  • home

  • face race

  • blog

  • client work

  • contact

« Take the wide turn, love what you do.

iDevBlogADay Advertising Opportunity »
Screencast 2: How and when to use clipping masks
Mike Berg
14
Jul 2010

The latest entry in my iDevBlogADay “Photoshop for Devs” series, we’re going to talk about clipping masks in Photoshop and when to use them to make things easier.

Helping iPhone developers hate using Photoshop a little less with simple tricks that make workflows more efficient. View the rest of the screencasts in the “Photoshop for Devs” series.

Part 1:

  • Place a photo in a Polaroid border, without having to crop it. Keep its full resolution so you can scale and rotate it as much as you want.
  • Texture a chess board. Combine the texture layer with layer effects applied to the base layer.

Part 2:

  • Add a reflection to windows in a building and change the colours with a clipped adjustment layer. Add art to a billboard shape with rounded corners and perspective.
  • Create perfect silhouettes for your vector art. Mask multiple layers with a single base shape and apply layer effects to the entire group.

Part 1

Click the YouTube logo to watch there in higher-res.

Part 2


Thanks to @OwenGoss for letting me use his art from LandFormer for iPhone. Go check it out!

Addendum: You can use any layer as a clipping mask, not just vector layers. Plain-old bitmap layers work great too, if you need a “paintable” mask, or if you have a transparent PNG you want to use as a mask, for example.

Download the Photoshop files used in this screencast (except for the LandFormer artwork).

Category: Blog, Photoshop for Devs, Resources  Tags: clipping masks, iDevBlogADay, Photoshop, screencast, vector
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
View Comments
  1. Brian Stormont says:
    July 15, 2010 at 2:34 am

    Great overview of masks! Thanks for taking the time to put together those videos! Very helpful!

  2. George Sealy says:
    July 15, 2010 at 3:15 am

    Nice work Mike. Every time I see a professional using Photoshop, I always learn something new. Keep them coming!

  3. kwigbo says:
    July 15, 2010 at 11:46 am

    Awesome tutorial, I will definitely have a use for this. No matter how much you know about Photoshop there are always new things to learn. Thanks!

  4. Owen Goss says:
    July 15, 2010 at 1:32 pm

    Awesome-sauce, Mike! So if I send you the rest of the LandFormer art, do you want to fix it up for me? ;) I kid, I kid…

  5. WeHeartGames says:
    July 15, 2010 at 2:55 pm

    I do *want* to (I'm just like that when it comes to Photoshop, especially when it comes to games), but I don't have the time right now! :P

  6. Ken Carpenter says:
    July 15, 2010 at 4:45 pm

    Thanks Mike! I was just saying to myself the other night that I need to figure out how that masking stuff works. I've managed to use it once or twice before, but wasn't really sure if I was doing it “right”. And the adjustment layer stuff I've never used, but I've wanted to do exactly that, so it's good to know that feature exists!

    BTW, does the color of the pixels in the mask have any effect on the masking or is it just the transparency?

  7. WeHeartGames says:
    July 15, 2010 at 5:08 pm

    Great! Glad to have helped. There is another way to do layer masks, I'll be going over that in another screencast. It's a bit different, but this way is more flexible in some ways.

    Pixel colour for the base layer has NO effect on the masking. Try painting on a layer and using it as a mask to test it out.

  8. Photoshop Tutorials For iPhone Developers | iPhone iOS 4 iPad SDK Development Tutorials, Programming Tips, News says:
    July 17, 2010 at 2:24 am

    [...] How and when to use clipping masks – how to place a photo within a special border, texturing a chess board, adding reflections, adding art to a shaped and angled surface (in this case a billboard), and creating sillhouettes for your vector art. [...]

Leave a Reply Click here to cancel reply.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

blog comments powered by Disqus
« Take the wide turn, love what you do.

iDevBlogADay Advertising Opportunity »

    Follow us:

    RSS | Twitter | YouTube
    We ♥ these games: Hover for mini-review
    Have a good game I can recommend?

latest blog posts

  • How to effectively communicate with designers
  • Screencast 6: 65 Layers tips in 8 minutes
  • Graphics for Star Fighter X2
  • How to get your game made, even if you’re not a programmer
  • Now taking client work

Part of #iDevBlogADay:

    Sunday
    • Bunnyhero Dev
    • kwigbo
    Monday
    • Area 161
    • Parade of Rain
    Tuesday
    • Struct.ca
    • The Pocket Cyclone
    Wednesday
    • Funky Visions
    • We ♥ Games
    Thursday
    • Digital Sinigang
    • Games From Within
    Friday
    • Acorn Heroes
    • Retro Dreamer
    Saturday
    • Québarium
    • Rizer Games

Buy it now
on the App Store

A camera-based
party game for iPhone

© 2010 - We Heart Games Inc. All rights reserved.