In this tutorial, i’ll explain the process of converting a sketch into a smart illustration using a platform called illustrio.
Creative people love sketching. Transforming ideas into drawings can take an idea to the next level. What would my drawing look like if this fish is actually swimming, how would that hair look if it’s curly? Your head bursts with non-static ideas and flows when you look at your sketch. Transforming certain elements in a drawing can give more value to it because it becomes more interesting to look at. The good news is, we can do this and we can transform our sketch into lines and shapes and then into code to have it adapted! Even others can adjust your work to personalize it and have it integrated into a document or presentation. Let’s take a look at all the possibilities we have with the illustrio platform.
I’ll guide you through the process of smart illustration to take it to the next level with code and have it interact with style elements such as color, interactive text, transforming effects and other cool properties.
What is SVG?
SVG stands for Scalable Vector Graphics and SVG files are text files with XML inside. Visual information in an SVG file is defined by human-readable code, which is then calculated and rendered by your browser or graphics software.
Why use SVG?
Let’s take a look at a personal project
I did some sketch work for educational purposes and sketched students, a school, teachers and other elements.
Below i show some of the initial sketches that were scanned and placed into a vector program, I use Adobe Illustrator (other software is Sketch, InkScape, …). These sketches were traced into vectors with the Pen Tool. You have other options with the Image Trace command but that is beyond the scope of this tutorial (google it, you’ll find plenty of great tutorials). Using the Pen Tool, you’ll have full control of the vector points to alter, in this case i recommend using this process.
Ideas resulting in sketches
Before you begin your sketching, it’s a good idea to have a subject for your illustration work. My project subject here is ‘education’ and i sketched several ideas and elements around this topic to give myself the flexibility to redraw or switch to another sketch while in the process of drawing. In case you’re not satisfied with the result, start another sketch with a different subject and fresh inspiration for the subject will pop-up.
I started my sketches by dividing every item into 3 parts: the first static part or initial state of the element — the second frame of the element in a different state and the last part in the final state.
An example: i started with a schoolbag open, then fruit and food dropping into the schoolbag and the final state is the filled schoolbag closed.
Starting the Adobe Illustrator vector process from scratch
Once your sketch is scanned and imported into a vector program, make sure to place it on a separate layer and lock the layer.
For every individual element use a layer and name the layer accordingly. This way, your work stays organized and it will help you identifying the CSS classes and id names later in the SVG code.
Start by drawing and combining shapes and draw separate elements. Make sure the artwork isn’t too complex as every line of SVG code should be clear later on. Try to keep this rule as a reminder because your illustration can quickly become too complex to have it transformed into a SVG.
Exporting the Illustration to SVG
Options for SVG
Once you have a stroked and filled shape illustration/icon, make sure that your artwork is saved before exporting it to SVG. In Adobe Illustrator, choose File > Save a copy and choose SVG in the drop-down menu with file extensions. It can be a bit confusing not to use the File > export command.
Fill out the options in the SVG Options pop-up panel:
TIP: The illustrio’s documentation has a section called How to have a compliant SVG code, use it as a guideline while saving your SVG illustrations.
Introducing the illustrio web platform
Use illustrio to code your smart illustration
illustrio allows you to add a layer of styling and customization on top of your SVG illustrations. Its language structure is heavily inspired by Sass, an extension of the CSS language. If you know CSS, you’ll master illustrio’s language in no time.
The first step will be to export your vector in .SVG format. Next, you can add some CSS-like coding variables. The functions allow you to:
- Scale and move elements
- Transform objects with rotation, length
- Change colors
- Add text input
Apply to become a designer on the illustrio platform and create smart illustrations and gain an income. illustrio is looking for talented designers, apply to become an illustrio.
Get to know the work area
Bring your illustration SVG code into illustrio
Log in to the illustrio platform and get to know the work area. Make sure you have the SVG code open in a text editor before starting the illustration process in illustrio.
illustrio has extended documentation
Best start your illustrio’s process by reading the documentation as the illustrio’s language will be needed into your code. Illustrio’s forum is also a great place to start reading about designers’s experiences with the platform.
Series and illustrios
It’s a good idea to start by creating a serie of icons/illustrations. Creating a serie will give more value to the illustrations and inspiration to potential users of your work.
Export your SVG code into illustrio
Once your illustration is ready for SVG export, select the SVG code in a text editor and copy it into the illustrio’s SVG code pane and paste it here. Click the Clean SVG button to clean up your SVG code. Clicking this button will adjust your code so that your work is aligned, zoomed and centered in the work area of the editor. It will exclude overhead code an align the code correctly. Once this code is cleaned, the CSS process in the right pane can start.
The CSS process
Add the illustrio’s language to your CSS code
Add variables to your CSS code to control the 3 main colors of your illustration: use logic class names like main color, highlight color and additional color.
Make sure the SVG group id names or path class names correspond to the names you use in your CSS code (see figures below). Start adding the illustrio’s controls, you’ll use these id and class names to identify the controls.
Customize your illustration
Once your illustrio’s code is correct, you’ll have unlimited freedom to add interaction to it. Make sure you have your initial idea with you because you’ll soon have too many options to interact with the illustration and forget what the initial purpose was. Adjust the color controls (with the 3 colors), decide whether you want a stroke and define the stroke with a slider control to limit the amount of stroke, will your illustration have transformations or interactive text? Will some elements be hidden or shown, let the user decide. Test here and add the controls to the code until you are happy with the result.
Use the illustrio’s documentation to guide you through the step-by-step process of customization:
- Boolean Checkbox
- Color Picker
- Text Input
Categories of methods:
Submit for review
Make sure to give your illustrio a name and add it to a serie. Save your illustrio and once you decide it’s finished and ready for publication, hit the submit for review button.
Drafs and reviews
Once your illustration work is added to illustrio, you can overview your work by selecting the “My illustrios” in the left pane of the interface. You will get an overview with the name of your illustrio, the series to which they belong to, when it was last edited, if it was accepted by illustrio’s staff and the status.
Add more series and illustrios
Once you are acquainted with the process of illustrio, you can start building your series and have additions to it. Expand your series over time with more illustrio’s and submit them for review.
illustrio’s build-in themes
illustrio has custom build-in themes to apply a custom look to a complete series of icons or illustrations. You can choose between 5 themes or create a theme yourself: give it a name and 3 colors: main, highlight and additional and save this theme. You can apply it to every series you create.
- Sir yes sir!
- 80's Monoski
- Customize me!
Check out the galleries
In the galleries, you can discover several adjustable and great smart illustrations, the galleries are divided in 2 main categories: the inspiration galleries and the technical galleries with these subcategories:
- Artwork & inspirations
- Fish sector series
- Flat & sleek food serie
- Petroleum sector series
- Fill, Fill-Shade, Fill-Hue, Fill-Sat
- Move-X, Move-Y
- Opacity, Fill-Opacity, Stroke-Opacity, Visible
- Rotate, Rotate-Anchor
- Scale-X, Scale-Y, Scale-Anchor
- Stroke, Stroke-Shade, Stroke-Hue, Stroke-Sat, Stroke-Width, Stroke-Linecap
- Stroke-Length, Stroke-Offset
These galleries are a work in progress, so come visit to check out the latest additions!
Testing your illustration on the illustrio platform
Test and refine your code
I recommend testing the code of your smart illustration on the illustrio platform and look for any potential malfunction or inconsistency. Help improve the quality by making sure that every line of code is correct and that the overall illustration works fine.
Approval and promoting your illustrations
Once your illustration is approved, it’s time to promote your work! Explain the illustration on other platform (Dribbble, Behance, …) so that users understand the purpose of the illustration. An even better way is to actually use your illustration in a real world environment, like a presentation or slideshow to provide potential users with the added value of your illustration
Download illustrio’s interface as SVG code
As a bonus, i provide you with the SVG code of the illustrio’s interface. You can use it to paste your illustration idea. The code is available for download from CodePen.io
I hope you enjoyed this tutorial. If you have questions, suggestions or remarks, please do not hesitate to contact me. Thank you!