36 iCon System & Structure

iCon collection of illustrations share the perspective, light source & palette. The primary goal is to provide a representation of the metaphor that is true to the material attributes of the object that is being rendered in illustrative style.

iCon Systems & Structure

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

Perspective

iCon collection of illustrations use the orthographic projection (orthogonal projection). Projection with the  views of an object onto a drawing surface in which the lines of projection are perpendicular to the drawing surface.

Padding

Elements should all have their own padding or margins – or white space inside or between them. We need at least 16px (32px 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.

Normally, the recommendations for icons are:

When working on icons, try to keep the object height and width measurements in even numbers (4, 8, 12, 16, 20, 24, 28, 32 etc…). When you’re working with bigger icons (>64px), blurry edges usually look unaesthetic, and if you need to use them on a smaller scale (16px – 32px) they might be even unrecognizable.

That theory is for templates of 64x64px. As the template have 1.024×1.024px, the 64px grid , 16px in the template is 1px if we downscale to 64x64px. That is the reason why the brushes must be proportional to 16.

Brush

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.

Sizes

Icons are designed on pixel-precise grid of 1.024×1.024px 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).

We do not offer responsive icons, with several versions of each icon designed and optimized for display at several sizes (small, medium…).  When a user accesses a site that implements the technique, they will see a different version of an image (or icon) that is optimized for their screen size. http://responsiveicons.co.uk/. What we offer is Vector illustrations to represent ideas (firstly thinking about book creators) that is why we just offer one version for each icon.