How does Mailbox get the effect of their icon and an image underneath it?

Question

Apparently there is an image underneath another image, so is the super image (the one with the mailbox icon) just designed to be transparent in Photoshop, or Gimp, etc, or they used some other cool trick inside Cocoa?

I want to replicate this look.

Thanks!

Answer 1

Photoshop solution:

You can do it much easier with Photoshop (or with Gimp, i never used it but it is a fundamental feature it should exist). To do it in photoshop create a layer like your M shape filled with white or any other color, then copy the image you want to be masked to a new layer, arrange it to be the upper layer to M-shape layer. Then right click on image layer and press "create clipping mask" in context menu. It is very easy but then you won't be able to change image.

Programmatic solution using layer masks:

A dynamic alternative is to use CALayer's mask property. Again create a .png mask image with an M-shape and make sure other parts of the image are transparent. Then you may use this code to mask any image with the mask you created.

CALayer *maskLayer = [CALayer layer];
UIImage *mask = [UIImage imageNamed:@"mask.png"];
maskLayer.contents = (id)mask.CGImage;
maskLayer.bounds = (CGRect){CGPointZero, mask.size};

UIImageView *viewToMask = [[UIImageView alloc] initWithFrame:someFrame];
viewToMask.image = [UIImage imageNamed:@"picture.png"];
viewToMask.layer.mask = maskLayer;
viewToMask.layer.masksToBounds = YES;

You may also have a look at answers posted in :How to Mask an UIImageView