30 OpenCity Systems & Structure

OpenCity collection of illustrations shares the perspective, light source & palette. Their representation is not stylistically restricted by structural constraints. The primary goal is to provide a realistic representation of the metaphor that is true to the material attributes of the object that is being rendered. The style is more realistic than illustrative, but not quite photorealistic. OpenCity illustrations are symbolic images—they should look better than photorealistic ones!

OpenCity Systems & Structure

The key concept that defines the illustraStock OpenCity Collection is a system-based design approach to the structure of the illustrations. The illustraStock OpenCity Collection is based on 5 guiding principles that all illustrations share (Perspective, Padding, Object fill vs Stroke, Color palette and Sizes):


OpenCity collection of illustrations uses the Axonometric projection (isometric 2:1 projection). Projection where a line is drawn at a 26,565 degree angle has a 2:1 ratio between its width and height.

Sides of the Unit: A: 64px B: 32px C: 35,777*px

Side C: 35,77708764px = 0,0126337840729m = 1,263cm

(For our mathematical calculations based in our computers with an Apple MacBook Pro mid 2012 LCD screen 1280 x 800: The conversion px to meters is: 64px = 0,0226m and 1m = 2.831px )


Elements should all have their own padding or margins – or white space inside or between them. We need at least 1px (2px recommended) between two lines in order to be able to change the color of the space between lines.

Object fill vs Stroke

It is important to create the illustrations in the same way, we:

Fill ( draws stuff in the interior of the path )

No, if something is Fill, it is because it is wrong.

Actually the truth is the illustrations must be fill, but in white for a later personalization. (a link to a tutorial about how to create illustrations, how to use the join tool)

Stroke (draws stuff on the border of the path)

There are different Strokes for different situations. If the size of the Stroke must be changed, only even numbers are allowed.

The different styles use a different size of stroke because the brush of the style. Also the size of the object conditions the size of the stroke.


All our illustrations are made by Strokes, that is why it is important to choose the correct Brush for each illustration and style. Read our tutorial about Brush and Strokes.

Color Palette

A color palette is ready for different styles. Remember, Black is Black with K= 90% (grey color 90% (26, 26, 26)), never pure black and always white color for fillings. Always RGB.


Isometric Draws are designed on pixel-precise grid of 1.024×1.024px or 2.048xpx and intended to look their best at 64x64px or some multiple (64×64, 128×128, 192×192, 256×256, 320×320, 384×384, 448×448, 512×512, 576×576, 640×640, 704×704, 768×768, 832×832, 896×896, 960×960, 1.024x.1024).

Scale (((((open city have the illustrations in 2 scales ….)