Skip to content

Photoshop layer styles for iOS icons. Stop maintaining a separate file for each color, resolution, and style.

Notifications You must be signed in to change notification settings

peyton/MOOMaskedIconView

Repository files navigation

Masked Icons

#Introduction

MOOMaskedIconView is a UIView subclass that uses black-and-white masks to draw icons of different styles at any size or resolution. It's like Photoshop layer styles, using the same technique as UITabBar to generate various effects from a single icon mask.

Tab bar icons

MOOMaskedIconView displays common image formats and PDFs, the native vector file format of iOS and OS X. PDFs are best—they're easy to maintain and resolution independent.

#Examples

###Create a green icon from a PNG

MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithResourceNamed:@"icon.png"]
iconView.color = [UIColor greenColor];
[self.view addSubview:iconView];

###Resize a PDF icon and add a reusable gradient trait

MOOStyleTrait *grayGradientTrait = [MOOStyleTrait trait];
grayGradientTrait.gradientColors = [NSArray arrayWithObjects:[UIColor colorWithWhite:0.7f alpha:1.0f],
                                                             [UIColor colorWithWhite:0.5f alpha:1.0f], nil];

MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithPDFNamed:@"icon.pdf" size:CGSizeMake(32.0f, 26.0f)];
[iconView mixInTrait:grayGradientTrait];
[self.view addSubview:iconView];

###Add an overlay and a shadow to a red icon

UIImage *overlay = [UIImage imageNamed:@"overlay.png"];
MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithImageNamed:@"icon.png"];
iconView.color = [UIColor redColor];
iconView.overlay = overlay;
iconView.shadowColor = [UIColor darkGrayColor];
iconView.shadowOffset = CGSizeMake(3.0f, 3.0f);
[self.view addSubview:iconView];

###Render a PDF icon into a UIButton

MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithResourceNamed:@"icon.pdf"];
iconView.color = [UIColor magentaColor];
iconView.highlightedColor = [UIColor orangeColor];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[iconView renderImage] forState:UIControlStateNormal]
[button setImage:[iconView renderHighlightedImage] forState:UIControlStateHighlighted];
[self.view addSubview:button];

For more examples, check out the Demo Project.

For the full list of styleable properties, see MOOMaskedIconViewStyles.

For information on reusable styles, caching, and other advanced topics, see Advanced Use.

#How to install

###First: Clone into a submodule

In your project's folder, type:

git submodule add git://github.com/peyton/MOOMaskedIconView.git

A submodule allows your repository to contain a clone of an external project. If you don't want a submodule, use:

git clone git://github.com/peyton/MOOMaskedIconView.git

###Next: Add classes

Drag MOOMaskedIconView/ into your Xcode project's file browser.

Note: An options dialog will pop up. If you're using MOOMaskedIconView as a submodule, you should uncheck "Copy items into destination group's folder (if needed)."

###Then: Add Accelerate.framework

Accelerate.framework process

With your application's target selected in the navigator, click on the "Build Phases" tab. Under "Link Binary With Libraries," click the "+" button and add Accelerate.framework.

###Finally: Import the header

#import "MOOMaskedIconView.h"

###Later: Update to the latest version

cd into the MOOMaskedIconView directory and run:

git pull

#Creating image masks

Image mask process

An image mask is a black-and-white image that clips drawing. Quartz clipping follows three simple rules:

  • Black pixels render opaquely.
  • White pixels render transparently.
  • Gray pixels render with an alpha value of 1 - source pixel's gray value.

Mask images may not use an alpha channel, so icons with transparency must be set on a white background. For more information about Quartz image masking, see the Quartz 2D Programming Guide.

#Scalable icons with PDFs

MOOMaskedIconView makes it easy to use PDFs as icons, eliminating "*@2x.*" files. Many Apple applications on OS X use PDF icons for resolution independence.

Next to the network, the biggest source of latency on an iPhone is the disk. For small, simple icons the PDF format adds a few KB of overhead over PNG. Because the iPhone loads data in chunks, in practice the difference in loading time is nothing. For larger icons a PDF of vectors can save space.

Some editors need a little massaging to export PDFs suitable for iOS icons. How-to instructions are here.

#Contributing

Forks, patches, and other suggestions are always welcome and addressed as quickly as possible. Here's a quick guide to the process.

About

Photoshop layer styles for iOS icons. Stop maintaining a separate file for each color, resolution, and style.

Resources

Stars

Watchers

Forks

Packages

No packages published