by
Have you ever looked at something and thought, "That would look awesome in vector," but didn't know where to even start?
Half of the battle is knowing your vector program of choice, and the rest is being able to break down scenes, objects and more into manageable elements. It's knowing which areas you can create more easily with vector tools, which will reduce your workflow and improve the overall appearance of your rendering.
In this article, I'm going to show you some handy tips and tricks on learning to "see in vector" and to be able to render anything in vector.
1. Break Down Your Composition Into Base Shapes
When you're wanting to tackle a subject, consider breaking it down into base shapes.
Base shapes are shapes which represent core areas of a design. They're great for creating, as you can get a good impression of the overall composition based purely on these flat shapes of colour.
When you've broken down the image into base shapes, you can then look at how each area should be rendered. By using base shapes, you may avoid overwhelming yourself.
In the majority of my tutorials which work from a stock image, my first step will always be marking out my base shapes and then working from there. Whilst many areas of my process may have changed, this step has not in over ten years.
2. Don't Dismiss Basic Geometric Shapes
I work a lot from stock images, although it's of course not the only way to approach an illustration. There are plenty of illustrators who don't need to look at stock images. They work from sketches and their imaginations. When you're working in this way and you've not got precise base shapes to follow, don't dismiss basic shapes. I'm talking about circles, rectangles, triangles. But not everything in reality is a perfect shape.
As I said at the beginning, knowing your vector program of choice is half the battle, and this is where you have to think of effects which warp basic shapes, with ease, into the shapes you need. Not only will you create clean shapes, but you'll also save time.
The tutorials of Nataliya Dolotko are prime examples of this technique. The majority of her tutorials use basic geometric shapes and Warp effects to create otherwise complex shapes. My favourite is her living room scene where the majority of the illustration uses one basic shape. Can you guess?
3. Look for Repeating Elements
Many objects and scenes have repeating elements. Being able to spot them will save you time in workflow. If you're going for a realistic look, learn how to duplicate elements and then modify them (be it colour, texture, size or rotation) to make them look unique. There's nothing worse than a realistic render and elements looking like carbon copies. However, if you're working with something a lot more simple, there's no shame in copy and paste (or using clever Transform effects).
In How to Create a 3D Lego Text Effect in Adobe Illustrator, it's obvious to see that the bricks are made from repeating elements. However, the finesse comes in making sure all the angles and sizes of the bricks are rendered separately first and then brought together as duplicates.
Another great example of repeating elements is this awesome tutorial on creating a Cartoon Bear Scene Using Repeating Shapes in Illustrator. Notice how groups of shapes are duplicated, but then modified by scale and colour to add variety.
4. Learn How Brushes Can Save Time
Like repeating elements, brushes can work in a similar way. If you can identify a simple object being used over and over again, consider it may be easier to make it into a brush. I love brushes and I love seeing creative ways of using them to support illustrations and sometimes making them the core of the illustration.
A good example is my night-time cat tutorial. If you look in the sky, we have stars. It would be time-consuming to create each star individually, but with the use of a Scatter Brush, you can create stars of varied size and spacing in no time at all. The fence in this is also a good example of how to use basic shapes and repeating elements using Blends!
Brushes can also help with other small details within a composition. Although this tutorial by Andrei Marius (in fact a lot of his tutorials demonstrate a lot of ways to use brushes creatively) focuses on creating a rope text effect, it perfectly illustrates how taking something as small as rope, perhaps a small detail in a design, can be done quickly and effectively with a brush.
However, if you really want to push your creativity with brushes, consider checking out this tutorial on creating a snake brush. While a lot of work has gone into creating a single snake, imagine if you had a client wanting a massive illustration of several snakes and each snake had to look just as sleek as the last? Ah, Pattern Brushes... such a wonderful function.
I could really go on and on about brushes, but let's look at something else which you may not consider when you see repeating patterns.
5. Are There Any Textures?
In an ideal world, everything would be flat. There would be no textures. It would make things so much easier. But we don't live in that kind of world. Surfaces have textures. Thankfully there are a variety of ways you can render textures in vector. Let's have a look at some of them.
Create Texture From Patterns
Texture can be created by using vector patterns. Wood is one of those areas in which you can save time by using a pattern. Check out this tutorial on creating a wicker pattern, which is a great example of a texture that can be created in a Pattern.
Create Texture From Effects
Within Adobe Illustrator there are a variety of Photoshop effects which can be used to add anything from a dirty surface to a grain effect to your work. In this tutorial, we look at adding grain and sponge effects to create a stone texture.
Create Texture From Brushes
I wasn't kidding, I love brushes! Here is a tutorial I created a while back on how to use brushes to create a grunge effect pattern, then Graphic Style.
Not all textures are symmetrical, so consider using brushes when the texture needs to be different in certain areas.
6. Talking About Symmetrical Effects...
If you've got one or more shapes which appear to be the same style along a line or within a shape, then consider creating Graphic Styles to render the shape. This will help create a clean, even look to those elements, and will save you time.
I've got a few examples of when Graphic Styles and the Appearance panel have been used to render random objects. Let's try a simple kiwi fruit made from one shape.
As you can see, within a close, even shape, the kiwi fruit takes on the same layers from the outside to the inside. You'll know you can create a Graphic Style for an object when you could cut a section from the shape and it could be any part of the overall shape.
However, the shape doesn't necessarily have to be a perfect ellipse. How aboutcreating an avocado from a single shape? Avocados aren't a regular shape. This is again when knowing your vector program is an asset... the stone of the fruit is created using Convert to Shape and Warp Effects.
Take Graphic Styles further. Some images can be made up using mainly the Appearance panel... I should know, I created this kitchen scene using mainly Graphic Styles and the Appearance panel!
7. Creative Shortcuts Aren't Cheating
When we think about "cheating" in terms of vector, we perhaps think of using tools such as Image Trace. It's "cheating" to create an image just from Image Tracing a stock image and selling it to the client, right? Of course it is—it's unethical of us to do such a thing.
However, there are some "direct from stock" instances that create subtle details in your work, which isn't "cheating".
Create a Background With Image Trace
The first is using Image Trace to create a background detail. It's not the main focus of the image—that is the cat—but the tree in the background is used to add atmosphere to the illustration.
Create a Background Using Gradient Mesh
If the background is a minor detail, why not create a defocused background using Gradient Mesh? This tutorial shows you how to create one from a low resolution photograph.
8. Don't Over-Complicate the Task
Even with detailed renderings, you don't need to illustrate every single element to create a complete picture. An extreme example of this is when I used negative space to fill out the remainder of a graphic I did of my dog, Shelley, when she was a puppy.
I didn't need to render all of her fur, because the background filled this in for me. I simply added highlights and shadows in the red to give her shape.
If you've got a brief that's rendering a specific object or scene showing specific details, stick to that brief. Don't over-complicate it and bombard the viewer.
Do you really need to add all of those flyaway hairs? Do you really need to show the texture of a very small area? Do you really need to show the crack in the glass on the shelf when you're illustrating a larger composition? Yes, we should be all about the small details, but not the unnecessary details which ultimately lead to clutter and heavy files.
9. Keep It Consistent
The whole point of this article was to break things down into more manageable chunks to deal with. However there's one final thing to point out, and it's probably the most important. That is, keep your composition style consistent.
While you may be treating each object differently, remember they belong to the same design and they'll need to work cohesively together so that it doesn't look like a mixture of independent objects.
There are a few things to keep in mind with this one:
- Either use line art in all areas or no areas. Keep an eye on core styles such as line art for defining areas. If you're going to use it, use it throughout your whole creation.
- Use the same palette throughout. Introducing new colours to one area only may make that element stick out like a sore thumb.
- Remember how light interacts with your illustration. One of the tell-tale signs of a stitched-together composition is the inclusion of objects which appear to have different light sources.
Test Your Knowledge by Looking at Stock Images or Your Surroundings
I'm not kidding when I say I see in vector. I'll go for a walk and I'll break down objects I don't usually encounter and think of how I'd render them. So let's look at some stock images and put all these theories into practice. I'll start with an easy one... look at the image and see how you'd render it.
Remember, there's more than one way to approach things, and what I'd do may not be what the next person does. That being said, I'd tackle this as follows:
- Base shapes and not over-complicating: I'd break the image into base shapes for the green grass and the sky only. I may show a slight bump where the horizon meets the sky, but I don't need to illustrate every lump and bump, only enough to show it's an organic surface.
- Repeating elements: The trees could be looked at as repeating elements... they are so small in the context of the image that they won't need rendering from scratch individually. I'd be tempted to render perhaps two or three types of foliage, and then add subtle brush strokes to duplicates to make them look unique.
- Textures: The grass is an obvious texture and it always makes me think of this awesome tutorial on rendering grass. However, I'd be tempted to use a pattern fill with a warp effect to create perspective, and then draw individual blades of grass in the foreground to make it look less pattern-like.
- Graphic Styles: The ball could be created using Graphic Styles, using gradients to create depth and using a pattern to create the dimple effect.
- Ahh, but what about the clouds? Well, I'd use a combination of the tip for using a defocused background and using soft brush strokes from Bristle Brushes to create a soft texture.
So let's try another image, a more difficult one. Of course I could be here forever describing how I'd tackle it, but the exercise is to pick out the core objects and surfaces in the image. How would you tackle the below image of a group of peoplefrom a bird's-eye point of view?
Time to break this down:
- Base shapes and decluttering: Base shapes for most things will be created, but perhaps just one coffee cup. Do we need eight people at the table, or will the illustration work with just six? Not entirely sure what the white triangle is, perhaps a napkin or something? I don't know what it is, so I'd exclude it from the base shapes. A lot of these shapes are geometric shapes... the laptop, table, glasses, cups, and even consider the plant pot underneath the basil.
- Textures and patterns: The obvious pattern/texture here is the table surface. I wouldn't need to render the whole texture, just enough to show that it is panels of wood making the table surface. Maybe some grain effects could be used in the clothing to give the impression of texture. I'd definitely not render the plaid shirt at the bottom middle or the detailing on the denim on the top middle, because I feel those may over-complicate the illustration.
- Repeating elements: There's a repeating element here, and that's the coffee cups. They could be rendered with a Graphic Style and then perhaps a couple of shapes on top of each to make them look unique. The same applies to the glasses of water.
- Brushes: There seems to be a basil plant in the middle of the table. Perhaps I could create an art brush of a basil leaf and just draw the leaves from that, meaning I'd only need to render one leaf and then create the brush.
- Creative shortcuts: Things such as the keyboard and newspaper could be done with Image Trace, avoiding the need to create these shapes individually but still giving the impression of the objects they're meant to be.
I hope this article has given you insight into how you can vector anything. If you want to test me or anyone else in the comments, why not upload an image and see if people can advise how they'd go about rendering it? Or if you're struggling how to render something, perhaps ask in the comments to see if the community can assist. Happy vectoring!
