24 Reproductive approach

The following recommendations do not apply to 3Dimensions collection.

The creation of a new illustration starts always from a template. The templates are ready with all the needed settings, like: number of artboards, size of the artboards, brushes, strokes, colors…

It is mandatory to follow the order of styles for the creation of the illustrations. Each style always uses a previous one as a base, we DO NOT start to draw again the same illustration in a new style, we just do modifications on our previous style.

Design

An illustration’s primary job is to be clear and intelligible. Each illustration is designed with the highest priority (Legibility-focused aesthetic ).

Each illustration weight is designed according to a specific grid system—which in turn creates a consistent aesthetic (Precise pixel grid).

Process

Step 1: Conceptualize

  • Use established concepts where possible, to ensure consistency of meanings for the illustrations and its relevance to other uses.
  • Consider how the illustration will appear in the context of the UI, and how it might work as part of a set of illustrations.
  • While revising an existing illustration, consider whether complexity can be reduced.
    Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in illustrations. Depict representations of people or users as generically as possible, if needed.
  • While combining multiple objects into a single image in an illustration, consider how the image will scale to smaller sizes.

Step 2:  Illustrate

  • Use a vector tool (such as Inkscape or Adobe Illustrator).
  • Use a template (with all the settings with it) to make sure that work is done within our standards. Use the palette and style characteristics as outlined earlier in this article.
    Remember, each template has different sizes and artboards.
  • Place the illustrations at the bottom of the squares, so that all illustrations in a directory are positioned consistently.
  • If you are adding another object to an image or series, keep the main object in a fixed position, and place flat smaller sized images in a fixed position, such as the lower-left or upper-right depending on the case.
  • Apply the proper brush to each line.
  • Apply the proper size of the strokes.
  • Name the artboards with the proper names.
  • Do not merge the image layer with the background layer or the assets layer.
  • https://www.behance.net/gallery/28145793/Pixel-Icons-visual-guide

Step 3: Technical recommendations

  • Use outlines! Instead of drawing a simple 20px long and 2px thick line, make a 2px tall and 20px long rectangle. It will be so much easier when you will need to change something.
  • Join all the anchor points together. They should form one shape. You can connect two points by selecting both and clicking Cmd+J (if you are a Mac user).
  • Always connect paths. Everything changes when you decide to resize your illustration or change the thickness of your outline.
  • Use whole measurements for your strokes. Using non-integral numbers will result in blurry illustrations.
  • Use “nice” numbers for the stroke thickness. Using non “nice” numbers will result in blurry illustrations after resizing.
  • Always align stroke to the center of your path. To change stroke alignment variations go to Stroke Panel.
  • Don’t let the strokes overlap each other. It shouldn’t be a big problem if the illustrations are pixel perfect.

Step 5: Evaluate

  • Look at all sizes.
  • Look at the family together to evaluate family resemblance, optical balance, and distinction.
  • Look at context to evaluate relative weights and visibility (make sure that one doesn’t dominate).
  • Consider cases that may not be used now, but could be in the near future.

Step 6: Create the .png and .ai file

  • Create the Readme.txt file (use our Readme.txt example as the base for your illustration).
  • Save files as “Name of the file (.ai)” inside a folder for the cc version and other for cs5 version.
  • Export files as “Name of the file (.png)” inside a folder for the png version. Remember to use all the artboards and export with transparent background.
  • All the files and folders will be inside of another folder with the name of the .ai file. Zip the folder.

Step 7: Upload illustrations to illustraStock

  • Wait for the feedback and sales.
  • For more detailed information please refer to the illustration style section of your collection.

References: