Igor Plac

How to make illustrations? Find out in this engaging step by step tutorial.

Simple ways to start illustrating - Prototyped



An illustration is a visual interpretation of a concept — usually accompanying
text or an article, and it’s a great way to communicate, and explain your ideas
in away that is easy to understand.

If you’re already a UI / UX or some other kind of digital designer, having the
ability to create your own illustrations can come pretty handy at times.

I often hear the phrase “I can’t draw”, but fear not, even if you are not the
reincarnation of Michaelangelo, it doesn’t mean that you’re a lost cause. There
are simple ways of learning and practicing how to dissect real-life objects, and
transfer them to paper (or a computer).

Dividing everything into shapes
The most basic thing to learn is to start looking at all objects around you as
compositions of simple geometric shapes. It’s pretty much like playing Tetris
‘till you cover complete object with simple shapes.



First cover largest shapes and then proceed with smaller details

Of course, it is much easier to do this with man-made objects since they are
(usually) less organic shaped as opposed to.. well, organic forms.
Let’s try to do the same with this owl and toucan.



As opposed to strictly geometric objects, organic ones are a bit harder to
trace.


That’s our starting point. This first pass just determines the general shape of
the object you’re drawing. With these baseline shapes defined we can start to
play around by exaggerating some and dialing back others—depending on how much
of a caricature-esque look you want to achieve.



Once you set up larger shapes you can move on to smaller ones.

Next up is refining the shapes we drew and connecting them in a meaningful way.
This further outlines the final character we’re going to work within the next
and final step.



After setting up a skeleton it’s time to apply the look and feel of the
illustration

The last thing to do is start fleshing out the finished illustration from all
the previous steps. In the example above I used a simple geometric style with a
thick outline simply because it was the quickest thing to do. But there’s a
mindbogglingly vast choice of styles and techniques—modern, comic, pop-art,
realistic, ink, geometric, watercolor and, of course, combinations of any of the
above mentioned. That’s a good thing of course, but it can be a little
overwhelming also if you are staring at an empty canvas or paper.

Illustration style
When talking about the style of illustration we are referring to the visual
interpretation of the concept you want to convey. What does that mean, you ask?
Well, pretty much all visual design is a reference to something else and picking
out a style is actually connecting with your audience’s cultural background. All
of us associate certain images with a specific theme, depending on the place and
time we live in as well as our previous experiences. When there’s enough history
of using that specific sort of images in the same context, a theme evolves.



What time period does this image remind you of?

So which one is the right one for you? The short answer is — it depends (on what
exactly you want to communicate, and to whom).

It’s up to you not to pick the prettiest rendering of your object but decide
which one is going to support what you’re trying to convey to your audience.
E.g. if you are creating an illustration for a tech company, you probably won’t
pick a hand drawn-style with freehand-drawn elements but rather a more
technical, geometric or futuristic style.



Two images displaying nature in different styles.Different styles can result in
completely different illustrations, but all are based on the same initial shapes

So, browse around the net if you’re in need of inspiration, and have a long
think about what’s the message you want to get across to your readers. The style
that does that the best is the one you should pick.

Start practising
The most important thing when starting to illustrate is to practice. Having
talent helps but it is by no means the deciding factor in learning. By
practicing on different objects you can learn to spot patterns that will help
you “construct” the basis of your image with ease.

Design

Simple ways to start illustrating

Learn all about the different techniques to keep readers engaged with large portions of text. 

What to do with large portions of text - Prototyped



Ever been handed a chunk of content so hefty, it feels like you've just been
passed the secret tomes of a lost civilization? I'm talking about those
sprawling epics of text that seem to recount every detail since the invention of
the steam engine.

We’ll skip the obvious solutions such as splitting those into more pages or
simply shortening the text and concentrate on typographical (and graphical) ways
of dealing with such a beast.

There are different ways to keep readers engaged for large portions of text,
similar to speech techniques which add rhythm and emphasis.

Before starting your paragraph formatting exploration, it’s necessary to take a
closer look at what your objectives are, as not all techniques are suitable for
all cases. And, of course, keeping in mind the medium you are working with is
vital since designing for print and screen is largely different.

Here we have an example of an unformatted wall of text. It takes the whole width
of a page and lacks distinctive elements that emphasize, draw attention or
impose a rhythm. Text formatted without any distinctive elements is generally
considered unreadable (try to read it if you have any doubts).

A lovely paragraph no one is ever going to read.Let’s try to fix this by adding
visual and spatial elements that add clarity and distinctiveness to portions of
text.

Paragraphs
The first thing we can do to break up text is dividing it into paragraphs.
Shorter sentences and paragraphs keep the reader engaged and makes your content
more scannable.

Dividing the text into paragraphs makes it easier to read and less frightening.
Much better. There is a hint of the structure through the text now.

Columns
Paragraphs did a good, however, really long lines make it harder for the eye to
find the next line while reading. The total length of a paragraph is called
“line length”. We usually use characters for line length measurement.

The ideal length of a single line is considered to be 45–75 characters long. The
ideal line length is achieved by dividing the blocks into columns or simply
squeezing one column to the desired width.

With lengthy reading, a multi-column layout is not very practical for screens
since a user could be forced to scroll below the viewport to reach the end of
one column only having to return to the top and continue at the beginning of the
second column.

Now we’re getting somewhere. The text is much easier to read than the one we
started with.

Text set in multiple columns and a single, narrow column.However, there are
quite some more things we can use to make this layout even more interesting.

Drop Caps
Drop Caps are traditionally used to indicate the beginning or resumption of a
text section. They are created by emphasizing the color, size, or style of the
first letter of a paragraph. Here we have an example of how to use them in large
portions of text.

Great for starting a block of text or a section and are stylish.

Sections starting with Drop CapsFleurons and flourishes
Fleuron (or Hedera) is a typographic element used either as a punctuation mark
or as an ornament inside pages. They are usually displayed as forms of flowers
or leaves; that’s where the very term originated (old French: floron meaning
“flower”). They come in different shapes and sizes — as full horizontal
dividers, paragraph marks (pilcrows), space break symbol, flourish, etc. And as
mentioned they are primarily used as a paragraph divider or an element inside
the typographic composition.

Fleurons are not very common on the web, but are really cool actually.Titles and
subtitles
Using titles and subtitles in a large wall of text includes editing of the
source material since they usually symbolize the start of a chapter or a larger
portion of text. They are to be used in places that make sense (duh!).

Generally speaking, titles and subtitles belong to the primary and secondary
level of typography respectively and are nuggets of scannable information that
help readers stay with the design. The design of these text blocks is on the
large side, compared to the tertiary level of typography (actual body text).

Titles and subtitles add clarity and sense of orientation. Don’t you like it
when you can take a pause after a chapter of a book?Quotes
A pull quote is a quotation or excerpt taken (pulled) from the text and
displayed inside layout in a graphic way. Its purpose is twofold: to attract
attention by offering a teaser intended to draw the reader into the piece, as
well as to break up text-heavy content.

Quotes are a part of the secondary level of typography hierarchy — along with
elements such as subheads, captions, and other small blocks of text that add
information to the primary level of the text.

> This is a quote.
Images
Photographs, graphics, animations, infographics, and other visuals are all great
tools in keeping the reader engaged. Those are one of the most common (and
natural) ways to break up long texts. In most cases, you’ll want to make sure to
leave a good, clear space around image for your text (unless you are trying to
achieve that “breaking the rules, grid, and readability” look, but that’s
another article).

Combination of above
All of the above are good ways to break up long and boring text but they usually
work best when used in combination with each other. You can experiment with
images, quotes, drop caps and other graphical and typographical elements to
achieve interesting and appealing design and composition. A word of the
wise—adding too many elements and you run the risk of actually drowning out your
content. And trust me—I went through Geocities phase.

Cameron Askin: Cameron’s WorldCombining distinctive elements to make a visually
impactful, hierarchical and generally beautiful article.Conclusion
There’s more to text than just breaking it up into paragraphs. It’s about how it
looks on the readers’ screen or page and the way it’s presented and arranged.

Always design text for rhythm, visual appeal, readability and general text
usability.

Interested in working with us? Want to say hello? Drop us a line at 
hello@prototyp.digital. We are always on the lookout for new projects and
talented people.

Crafting Copy: Best Practices for Managing Large Text in Web Applications

In this tutorial you can discover how to create a custom Sketch keyboard shortcuts.

How to bind shortcuts for Sketch in macOS - Prototyped

Tooling has always been an important part of the design process. And using
shortcuts in your favourite app can speed up your workflow considerably. Now, if
there’s a menu command you use all the time that doesn’t have an associated
keyboard shortcut in macOS, here’s a bit of good news — it’s easy to make your
own.

Let’s take transforming text to uppercase in Sketch as an example. Each time you
have to click that little button in the sidebar or even worse option — navigate
to main menu, Text, then Transformation and lastly Uppercase. Madness!

This is where creating custom keyboard shortcuts come to the rescue. Custom
shortcuts have been a part of macOS system for over a decade now and here’s how
you can make your own.



Down to business
1. First, navigate to System Preferences and select Keyboard preferences pane
inside it.

2. After switching to Shortcuts tab select App Shortcuts and little + button on
the right side of the panel.

3. In the dropdown menu, you can choose to apply your new shortcut to all
applications or just a specific one. Since we’ll use them specifically for
Sketch let’s continue by select it.

4. Next order of business is filling out the Menu Title field. This has to match
the exact menu structure of the command you are binding. This includes any
capitalisation and punctuation — it’ll have to match the menu item otherwise the
menu keystroke won’t work. (Quick tip — some items use …, which is not 3 dots.
For this, you type ⌥+; ). In our example this should be
“Text->Transformation->Uppercase” (without quotation marks).

5. And lastly, you need to assign a specific shortcut to the menu command. Click
on the Keyboard Shortcut field and press the desired key combination on your
keyboard. Click on “Add” button below.

6. That’s it — congratulations, you just made your first custom keyboard
shortcut.



Putting it to good use
One way of checking if everything works as it should (apart from actually trying
it out) is to open Sketch and navigate to the menu item you just assigned the
shortcut to. The custom combination should be displayed next to it.



Shortcuts
Here are some of the shortcuts that saved me a lot of time:


╔══════════════════════════════════════╦══════════════╗
║   Menu command                       ║   Shortcut   ║
╠══════════════════════════════════════╬══════════════╣
║  Arrange->Align->Right               ║     ⌘→       ║
║  Arrange->Align->Vertically          ║     ⌘'       ║
║  Arrange->Align->Bottom              ║     ⌘↓       ║ 
║  Arrange->Align->Left                ║     ⌘←       ║
║  Fit Artboard Height                 ║     ⇧⌘H      ║
║  Arrange->Align->Top                 ║     ⌘↑       ║
║  Arrange->Align->Horizontally        ║     ⌘\       ║
║  Text->Transformation->Uppercase     ║     ⇧⌘U      ║
║  Text->Transformation->None          ║     ⇧⌘N      ║
║  Text->Transformation->Lowercase     ║     ⇧⌘L      ║ ╚══════════════════════════════════════╩══════════════╝


Hopefully, this will help you upgrade your Sketch game a bit and save your mouse
miles of travel time :).

AuthorIgor Plac

Start a Project