Scalable Assets Presentation

10
Nigel Barber @mindbrix

description

These are the slides for a presentation I gave on creating vector scalable assets for iOS apps. The accompanying code is at https://github.com/mindbrix/UIImage-PDF

Transcript of Scalable Assets Presentation

Nigel Barber@mindbrix

scalable assets

BITMAPS ARE FROM MARSVectors are from Venus

• Smoother work flow• Efficiency• Save time• Future proof

• Fonts• Character Viewer• Apple Symbols (glyph variants)

• The web• thenounproject.com• Google: filetype:eps

• Your pencil• straight edge and compass

Vectors, vectors, everywhere

• Create in Illustrator• Renderer is not Quartz

• Save a copy as EPS• Edge to edge• Huge files (© Adobe)

• Convert to PDF• Preview does use Quartz• Small files (e.g. 400K → 8K ≈ 50x less)

A sample work!ow

• iOS - UIImage+PDF• https://github.com/mindbrix/UIImage-PDF• +(UIImage *) imageWithPDFNamed:(NSString *)resourceName atSize:(CGSize)size;• +(UIImage *) imageWithPDFNamed:(NSString *)resourceName atWidth:(CGFloat)width;• +(UIImage *) imageWithPDFNamed:(NSString *)resourceName atHeight:(CGFloat)height;• +(UIImage *) originalSizeImageWithPDFNamed:(NSString *)resourceName;

• OS X-(NSImage *)pdfImageNamed:(NSString *)name atWidth:(float)width{ NSString *pdfPath = [[ NSBundle mainBundle ] pathForResource:name ofType:@"pdf" ]; NSPDFImageRep *pdfRep = [ NSPDFImageRep imageRepWithContentsOfFile: pdfPath ]; float pdfAspect = pdfRep.bounds.size.width / pdfRep.bounds.size.height; NSImage *pdfImage = [[[ NSImage alloc ] init ] autorelease ]; pdfImage.scalesWhenResized = YES; pdfImage.size = NSMakeSize( width, width / pdfAspect ); [ pdfImage addRepresentation: pdfRep ]; return pdfImage;}

Rendering

One PDF, many sizes...

One PDF, many sizes

Nigel Barber@mindbrix

#indieApps