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.





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.






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.





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.





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.





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.





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

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.

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.

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.


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


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


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.


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