31 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.


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).


Step 1: Preparation

  • Use a Dropbox folder or similar cloud service for the creation and saving of the work.
  • Ask for access to all the standardized components or old work.
  • Ask for free downloads at www.illustrastock.com if necessary.

Step 2: 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 3:  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 (work in px and RGB). Remember, each template has different sizes and artboards.
  • Once the file is saved, must be fully finish. Do not left empty arboards, if the template do not fit your situation, ask for the creation of another one or modify the current one.
  • If you need to create drafts, use an empty template. NEVER a new file without illustraStock settings included.
  • 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.
  • Align properly the lines.
  • No lines can exceed the dimensions of the artboards.
  • Organize the illustrations by groups properly.
  • 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 4: Technical recommendations

  • Remember to follow the scale (1:50 or 1:250)
  • Use “nice” numbers for the stroke Weight. Using non “nice” numbers will result in blurry illustrations after resizing.
  • Use whole measurements for your strokes. Using non-integral numbers will result in blurry illustrations. Remember to use a 64 px grid approach.
  • Always align stroke to the center of your path. To change stroke alignment variations go to Stroke Panel.
  • Apply the proper brush to each line.
  • Apply the proper size of the strokes.
  • Don’t let the strokes overlap each other. It shouldn’t be a big problem if the illustrations are pixel perfect.
  • 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.

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.
  • The Download image and Grid image should follow the follow the illustraStock formatting standards or a scale of the proportions.
    • Grid image 740 x 600 px (1,233333333333333).
    • Download image 1.024 x ∞ px.

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.



Designer's guide Copyright © by illustraStock. All Rights Reserved.

Share This Book