Exploring Shapes to Create Star Wars Characters: A Guide for Non-Designers — Design + Sketch App — Medium

January 26, 2016 admin

Source: Exploring Shapes to Create Star Wars Characters: A Guide for Non-Designers — Design + Sketch App — Medium

 

When it comes to the epic that is Star Wars, there are very few ways to stay excited and be productive. Unable to concentrate on work, the only way I could channel my almost-paralysing excitement toward something productive was by whipping up a quick illustration of the new stormtrooper.

A glimpse of what’s to follow!

I decided to share my illustration with a developer friend I’m working with, who remarked quite casually that he could never make something like it. I insisted that he totally could, while he insisted that he absolutely, most definitely, and certainly, couldn’t. I tried to tell him that I’m only a beginner in illustration, and that I could make a simple image only because of my recent exploits in mobile app UI. An exploration in basic shapes was all he needed to do to start making illustrations he’d be excited to share too. Then he added,

I’m just not that creative.

Hmm.

The character looks complex, I can’t even begin to draw that.

Luke: I don’t, I don’t believe it.
Yoda: That is why you fail.

I am now taking it up as a challenge to make every non-designer feel confident in their ability to design simple and beautiful illustrations. My hope is that this article will act less as a guide and more as an exercise. I encourage you to create as you read and throw away the belief that you can’t.

There are three parts to this guide —

  1. Understanding the Blocks: A quick exercise to visualise basic shapes as blocks and recognise how flexible and powerful they can be for image-making.
  2. Breaking the Character into Blocks: Choose your Star Wars character, and reduce the image to its simplest form – into basic shapes.
  3. Bringing the Blocks Together: Manipulate, layer, transform or combine blocks to build your character.

Understanding the Blocks

Before you can begin to make the Star Wars character of your choice, you must get your hands dirty and orient your mind to recognise shapes for the powerful objects that they are.

I use Sketch to experiment with images and create my illustrations. I find its set of tools handy and simple to use. However you can do this with virtually any vector graphics design program. You can even use something like MS Powerpoint to make it, no kidding. As long as it’s got a set of default shapes and the ability to layer them, you’re set.

Your building blocks!

Picture the shapes as potential building blocks, much like Lego blocks — which you would combine to create an image with context and meaning.

The key is to study them individually, in their existing shape, and then proceed to combine two or more of them together. Here you can experiment with direction, size, angle, and if you’re using Sketch or something similar, the four ‘Combine’ tools — ‘Union’, ‘Subtract’, ‘Intersect’ and ‘Difference’ to create more shapes.

Here are some great Sketch resources I found useful while working with shapes and paths:

Just have fun playing around with the blocks. Do this quickly, and make many versions. Critically analyse your new shapes after you have a made a couple dozen of them.

As you complete this exercise you will start to think of shapes as essential building blocks of an image and understand their relevance in making gorgeous illustrations.

Breaking the Character into Blocks

Draw out your lightsabers cause here’s where we start making our favorite Star Wars characters! The emphasis in this section will be to reduce an imposing and complicated image into many easy-to-work-with parts.

Do this by superimposing default and created shapes onto the image of the character. You can also print the image of the character and draw basic shapes over it with a marker. It doesn’t have to be perfect. The focus of this exercise is to get you to look at images as a combination of shapes.

It should look something like this:

Boba’s not gonna be happy with this dissection

As you no doubt would have noticed, I ended up using various combinations of ovals, quadrangles and triangles to achieve this. If you find yourself enjoying the process, do it for more characters! The more images you trace with shapes, the faster and easier it becomes.

You must see the shapes around you; here, between you, me, the tree, the rock, everywhere, yes. Even between the land and the ship.

Love the circly mess that is BB-8

For complex shapes you can cheat a little and trace a closed path like I have for the Stormtrooper’s temples. Also you must keep in mind not to get too lost in the details. Your objective for now should be to create a simple representation of the characters. If however you wish to create a rich illustration, you can break down the image further.

Go ahead and also try a more complex looking character like Kylo Ren. You’ll come out stronger!

Wonder who’s behind the mask

Kylo’s hood is made of many unusual shapes, so I thought it better to trace a closed path over the image. Do not hesitate in doing this. Again I must say, it doesn’t have to be perfect. Use different colours if you find yourself getting confused with the many shapes.

Bringing the Blocks Together

The focus here is to combine the basic shapes you created through layering, combining (or subtracting), manipulation and transformation.

Fill and Opacity: To put some order in this process, first fill all the basic shapes with one colour, and decrease the opacity to say, 25–35%. It now becomes easy for you to visually identify which shapes to combine and which to subtract by studying the overlapping shapes, which will appear as a darker shade. By doing this, you can even identify gaps you might have missed earlier, like I did for the stormtrooper’s chin.

Easy to visually identify combinations

Groups and Layers: ‘Group’ the shapes that you identified need combination (or subtraction). Don’t forget to layer them appropriately. The advantage of smart layering is that shapes in lower layers can be drawn roughly since most of it gets hidden behind the upper layers. For example, I only need to create a black rectangle for the insides of the stormtrooper’s helmet. The edges of this block will get covered by the white portions of the helmet, thereby creating the shape without having to create a complicated path.

Master blocks looking clearer!

Combine and Subtract: Combine, subtract and build the shapes in the groups you created earlier. Here it is important to keep duplicates of your basic shapes handy. As a beginner in this process, I find myself committing mistakes about which shape to subtract from which other shape and would often go back a few steps to make it right.

This is how I went about creating the precise forms for the Boba Fett helmet jawline.

Intersect ‘em, intersect ‘em again, layer ‘em, voilà!

I first intersected the blue quadrangles with the smaller yellow ovals to create the inner hollow, which is the lighter army green shade in the final image. I then did the same by intersecting duplicates of the blue quadrangles with the larger yellow oval, resulting in the darker army green shape in the last image. Also note how by placing the dark green shapebehind the light green shape, I saved myself the effort of creating a precise dark green shape.

Tip: If you’re using Sketch or something similar, Union, Subtract and Intersect create separate shape paths which can get difficult to edit. Instead, use the Flatten tool to work with one shape path.

Refine: Once you have created your master blocks (as I’d like to call them), it’s time to refine those paths. Continue to work with lower opacity blocks against the original image if you aren’t feeling too confident. This (again from the Sketch website) is an excellent resource you can refer to make this process easier.

Stormduckers

Coloring and Details: It’s best to add color at the absolute end because it is easier to make explorations in color with the complete form available to you as context. You might be better off ‘Eyedropping’ colors off the original images to find that perfect shade though.

What’s left to do now is adding those characteristic embellishments like the li’l buttons and screws I included for the adorable BB-8. Don’t forget to add details like shadows to really make the illustration come alive. This is another area where it’s totally upto you to choose how much detail you want to add to the character.

Shapes to Colour to Embellishments to Shadows — still doesn’t explain how BB-8 moves

Tip: Create the shape for the shadow by editing the existing blocks you have. Set the fill to absolute black, #000000, and the opacity to 5–10%. The shadow should be the top most layer for the effect to work across all the elements.

Final BB-8 illustration. Beep bwoop!

Play around with different colors and you’ll have the Jango Fett helmet too! You can try adding more detail such as the dents and scratches on Boba’s helmet or add slight gradients as I have for the hollows of the cheek.

Final Boba Fett illustration

I added a slight gradient for the chin of the stormtrooper as well, which is a simple way to give the image a sense of depth.

Final Stormtrooper illustration. Can’t unsee its duckiness though.

Final Thoughts

Often with any result of creation, you might end up feeling unsatisfied with your illustration. This means you have improved during the process and recognise the flaws in the design. It’s a positive sign and should push you to create more.

I hope to continue to share tidbits of what I learn as I continue my journey in design. Evidently, much to learn, I still have.


Find the source file of the illustrations here.