Splash Screen GorillaCam Stop-Motion Composite Image GorillaCam Timelapse Composite Image GorillaCam Composite Image GorillaCam Preview Composite Image GorillaCam Share Composite Image

GorillaCam & GorillaCam Pro
Style Guide

October 2012

Hello there!

In an effort to create a clear and cohesive source of information, this style guide will act as an index to the production of GorillaCam and GorillaCam Pro. It is meant to be a helpful resource and reference for your convenience.

As the project progresses, this document will grow to contain any necessary notes or materials.

-Joey

Colors

Textures

Texture Swatch at 2x Texture Swatch

Background White Noise

Generated using two layers of Gaussian noise. Layers were blended in screen mode over a background of color [#fbfbfb].

This texture will need to be used in the menus and other windows. The texture is already baked in to the buttons that are rendered in the buttons section.

I'm currently unsure if a noise background is applicable for non-Retina displays.

Fonts

Source Sans Pro - via Google web fonts

How razorback-jumping frogs can level six piqued gymnasts!
Light 200 // Extra Light
How razorback-jumping frogs can level six piqued gymnasts!
Book 300 // Light
How razorback-jumping frogs can level six piqued gymnasts!
Normal 400 // Regular

Sounds

Camera Countdown

File Here

Button & Image Files

All buttons are transparent (where necessary) 24-bit PNGs.
 

App Icon - GorillaCam Free

Download All (6)

App Icon - GorillaCam Pro

Download All (6)

Splash Screen

Instructions Splash Screen

Instructions Splash Screen (OLD)

Settings Toggle

Options Button

61x32

Help Button

21x29

Menu Button

55x55

Menu Button (While Shooting)

55x55

Gallery Button

55x55

Camera Button

94x94

Timelapse Button

94x94

Stop-Motion Button

94x94

Remote Control Button

213x241

Advanced Settings Button

157x58

Share Button

60x58

Share - Facebook Button

94x94

Share - Twitter Button

94x94

Share - YouTube Button

94x94

Share - E-Mail Button

94x94

Footer Bar

320x63

Shutter Button

132x59


I've split the shutter button into separate elements. The background, "Shutter Button", will remain stagnant and the mode icons will float on top. This should make things more rotation friendly.

Also note that the shutter button is now wider to accommodate the up/down/active states. -Joey


Shutter Button - Camera

37x37

Shutter Button - Timelapse

37x37

Shutter Button - Stop-Motion

37x37

Bubble Level - Ends

8x23

Section Divider

186x7