Systems & Structure

The illustraStock Perspective Style is based on 5 guiding principles that all illustrations share (Perspective, Padding, Object fill vs Stroke, Color palette and Sizes):

Perspective

For perspective, we use according to which illustration a different type. According to what we want to achieve in every moment.

Padding

N/A

Object fill vs Stroke

Is important to create the Perspective illustrations in the same way, we

  • Fill only draws stuff in the interior of the path.
  • Stroke only draws stuff on the border of the path.

Fill

If we need to add contrast to the image. Also we use it in the characters creation.

Stroke

  • Generally in size 0.25 – 1.0.
Brush

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

tut-isotype-07

  • Generally, use Vectips_30_free_sketch_brushes 8.
  • If you have too much of a brush effect, use Vectips_30_free_sketch_brushes 1, 2 or 3.
  • Use Basic, 3pt oval, 5pt oval for artificial objects, for example metal, plastic. You can also use them to objects that are neutral or abstract.
  • The brushes used are taken from www.vectips.com, then you can download them from here.

Color Palette

A color palette will make your decorating choices so much easier and help connect one illustration to the next so that even if the style varies a bit, it will still make sense. Because we use the images for web site, we use a 8-bit color palette making our illustrations more lightweight.

  • Black and white. But remember, Black is Black 90%.
  • You can only use colors if the word can not display without using them.
  • If you use gradation, note that you do not have the parts transparent when the illustrations are finished.

 

Typography

Typography as a part of drawing, it has to be Adobe Caslon Pro regular or bold. If the letter is not suitable, use Myriad Pro.

Technical Aspects

Icons

tut-isotype-11

Strokes

  • Keep in mind that the paths have a defined thickness, if we reduce or enlarge the illustration will have to adapt the path to the new size.
  • For this reason, when the illustration is finished, it is recommended to expand the form, to work only with fillings. This also expedites the task of changing the color to all illustrations should the case arise.

Fillings

tut-isotype-12

  • Avoid white fillings. Whenever we want to include an empty space in the form we will apply Pathfinder for the lower form.
  • To create different planes we will first give a white line to the shape, of a thickness of 2 to 5pt, depending on the distance we want it to appear. We will expand the form and ungroup it. This way we will have the gray fill on one side and the white (now fill) stroke on the other. We will apply pathfinder, subtract, on the second plane.

Background-measurements

tut-isotype-08

  • In each work table we will include two boxes with rounded corners as background.
  • The box above will have a size of 464x464px.
  • The 2nd one will be 500x500px. Leaving margins of 18px on each side.
  • The guides will limit the area to approximately where the illustrations can be expanded.
  • You will find 50px counting the edge of the 2nd box.
  • Remember: The box above has a slight gradient, is not a hole on the bottom.

Background-color

tut-isotype-09

  • The front case will have a degraded color. It is not a simple white hole, therefore never do searchers on the bottom box.
  • The lower case is 90.195% black.
  • A good practice when using color is to save the sample once made and name it so that we can identify it.
  • Linear gradient, -90º, gray (CMYK) and white. 100% opacity at both ends.
    • End 0 = White
  • tut-isotype-10

    Extremo 100= (C15,23%)+(M10,94%)+(Y10,55%) +(K0%)Pictogramas, Aspectos Técnicos (Color)

  • Utilizaremos el mismo color para las ilustraciones en los pictogramas que en la caja inferior. Un negro al 90,195%

Illustrations

objects

  • Place in the center of the dough. It occupies every possible mass of work.
  • Artwork of objects does not always need background, but you have to cover spaces so you do not see illustration behind when they combine the illustrations.
  • The shadow has to be avoided to create the object. However, you can add it without including it in the group.

Scenarios / Background

  • Artwork of scenes does not need full background.
  • When using perspective tool, it has to be 1 or 2 vanishing point.
  • Recommended brush is Vectips_30_free_sketch_brushes 8, in size 0.25.
  • It is advisable to separate the layers with each plane and objects.
  • It is advisable to save the scenes in an arcive to save only backgrounds (background_sample).

Objects and scenarios

  • The illustrations continue to be of objects or people performing actions, although they can also become scenes and scenes.
  • They are also made in 500x500px although it is intended to establish a reference scale and then reuse objects for larger scenes.
  • Less detail as possible.

Family treetut-isotype-13

  • In this case we have more freedom when using paths, fillers and white areas. By not having a certain fund gives greater possibility to variations.
  • The color that has been set is 100% black.
  • These illustrations have a more realistic character, they do not have that pictogram appearance that the previous ones show.

Style

The style is intended to offer a range of flexibility while maintaining a consistent brand approach.

Had Made (Doodle) Doodles are simple drawings with concrete representational meaning, generally thoughtless drawings with simple and minimal recreations.

Export

  • When we want to save the illustrations in separate files, we will export them in PNG if we want raster files and SVG if we want vector files.
  • When exporting we must select the tab “use artboards”. In this way each worktable is a separate file and with a unique name.
  • Depending on whether we are going to make a complete exportation or not, we will select “All” or only the desks that interest us.
  • tut-isotype-04

    Illustrator forces us to name the documents. As previously we have named each table in a unique way, the name of the resulting file in PNG or SVG will be a combination in which will always appear the name of the Adobe Illustrator file followed by the name of the table of each tarbajo Of the corresponding files. When you export everything this way, he adds a low bar and the name of the work table at the end. 

  • tut-isotype-05Depending on the quality / size we want when exporting, we will use 72ppp for the applications of our illustrations to the web (in this way the resulting size is the same as our work table), or 300ppp for diffusion in larger size (When we want to print them on physical media).
  • It is important to select in the “Background color” the transparent option in the case of pictograms. White if we want the illustration to have a background and a fixed size.

Notes

  • Illustrations can recycle to create another. The illustrations use Strocke so you can modify. When you resize, you have to convert the lines as an outline, or simply change the brush size.
  • When creating an illustration, you need to creathe the one is more general or the original oneat (eg car: NOT electronic car, but old car).

* Workspace: Composes the whole area of the document. Editable or working area, including printable area and non-printable area.
* ArtBoart: Area containing printable illustrations.