Final image preview of the Gothic Style Vector Wing

Drawing something from scratch will require both knowledge and imagination. Therefore, we need references. Just look up on Google some pics of bird wings and maybe watch some bird flight videos.

Understanding the geometry of your design is very important, because you will be able to draw it in multiple poses a lot easier.
I started sketching up the pose of the wing, completely disregarding the small details, maintaining only the proportions. You will be tempted to add a few details, just to see how it will look. Don’t do it! This will distract you from viewing the overall design and the wing will look crooked and disproportionate.

The arrows show the direction and length of the feathers we will add later on.
For now, keep it rough until there’s a solid sketch to build details on. There is no point in drawing beautiful feathers if your wing looks like it’s about to fall apart.

Now it’s time to add some detail to it. We will draw four types of feathers : tiny, small, medium and large arranged in layers. In the image below I’ve marked the feathers placement.

Start by drawing the tiny feathers, followed by the small and medium and ending it with the large  ones. I’ve added below a close-up of how the feathers look.

Time to turn it into vector!

STEP 1

Open Illustrator and create a new document (File > New…) of 600×600 px in RGB color mode.

STEP 2

Click-drag the scan into Illustrator and click the “Embed button”. In the Layers palette (F7), double-click the “Layer 1” layer tag and name it to “sketch”. Lock this layer and create a new one (click the “Create New Layer” button). Name it “outline”.

STEP 3

In the Brushes palette (F5), double-click the first brush and use the settings below. Do the same for the next two brushes.

STEP 4

Select the first brush and start outlining the wing. Do not correct the lines too much, nor use the Path Tool. We want the wing to look artistic, and rough brush strokes are perfect for this.

STEP 5

Grab the second brush, create a new layer (name it “hatch” and click-drag it below the “outline” layer) and draw in some details, as below. As for the outline, keep it a bit rough. The secret is in the line spacing: if you start with dense lines and gradually spacing them out, it will create a nice “gradient” effect when you zoom out.

STEP 6

Grab the third brush, create a new layer, name it “shadows” and place it below the “hatch” layer. Draw in the strong shadows on the feathers. Use a dark gray, so the hatches can be easily seen.

STEP 7

Unlock all layers except “sketch”, grab the Selection Tool (V) and select all artwork.  Go to Object > Expand.

STEP 8

Go to Object > Path > Clean up. Select all artwork again and click the “Merge” button in the Pathfinder window (Window > Pathfinder). Make sure you have no Stroke.

STEP 9

Grab the Rectangle Tool (M), draw a large rectangle over the wing and press CTRL+SHIFT+[ ).

STEP 10

Select all artwork and click “Merge” again in the Pathfinder window (Window > Pathfinder). Use the Direct Selection Tool (A) to select and delete the unwanted areas.

Done!

- use the 3D tools to your advantage
- Make use of symbols
- Effectively apply gradients
- Use blending modes to increase the quality of your image
- Use gradient mesh to create cool backgrounds

Difficulty: Advanced
Completion time: 2 hours
Tools: Illustrator CS3

Final image preview

STEP 1

Create a document with the “Letter” setup (612 x 792 px) in RGB color mode at 72 dpi.

STEP 2

Grab the Pen Tool (P) and draw a shape like below or similar. Select a thin default brush for it.

STEP 3

Go to Object > Expand Appearance, then go to Object > Path > Clean up…
I will refer to this step often, so try to remember this command sequence.

STEP 4

Change it’s color to a light gray, then go to Filter > 3D > Extrude and Bevel. Use the settings below or a bit similar.

STEP 5

Select the Rounded Rectangle Tool and create a shape like below, with the same proportions. To adjust to corner roundness, hold click while creating the shape and press Up or Down arrows.

STEP 6

Grab the Selection Tool (V), hold the ALT key, then click-drag the shape, hold the SHIFT key and place it near the original. Hit CTRL+D to create a very long row.

STEP 7

Select all the rounded rectangles and hit CTRL+G to group them together.

STEP 8

Hold ALT again and click-drag a copy below. Hold SHIFT key to move it vertically.

STEP 9

Select both rows and click-drag them into the Symbols palette (Window > Symbols).

STEP 10

Go to the Appearance panel and double-click the 3D Extrude and Bevel. It will open the 3D settings window. Use the settings below for the shown surfaces. Basically, we are now adding the holes in the film strip. Once you’re done, hit OK.

STEP 11

Select the 3D shape, Expand and Clean up, like in STEP 3.

STEP 12

Now the shape is a group. Go to Object > Ungroup (CTRL+SHIFT+G) multiple times, select each surface and hit Merge in the Pathfinder window (Window > Pathfinder). I’ve marked with different colors the surfaces that need to be merged.

STEP 13

Grab the Magic Wand Tool (Y), select the rounded rectangles and hit Delete.

STEP 14

Grab the Path Tool (P) and draw a black shape like below. This will be the base for the film’s frames.

STEP 15

Grab the Selection Tool (V) again, select the newly created shape and the film strip piece behind it and hit CTRL+G.

STEP 16

Double-click it to enter group edit mode. Select the green part, copy it (CTRL+C) and paste it to front (CTRL+F). Hit CTRL+SHIFT+] to bring it to front, remove its Fill, SHIFT-select the black shape and right-click > Make Clipping Mask. Then hit Merge in the Pathfinder window.

STEP 17

Select the shapes again and go to Object > Group (CTRL+G).

STEP 18

Repeat STEPS 14-17 for the other parts of the film strip.

STEP 19

Grab the Direct Selection Tool (A) and select the black part of the film. Now grab the Eraser Tool (SHIFT+E), hold ALT key and click-drag a rectangle like below. The erased part will represent the gap between frames.

STEP 20

Repeat STEP 19 for the rest of the film. Make sure you erase in gradual thicknesses, to add more perspective to the film strip.

STEP 21

Select the thin line that gives the filmstrip thickness and set its foreground color to white and a 0.5 px Stroke.

STEP 22

Go to Window > Swatches and Window > Gradient to open the swatches and gradient windows.
From the Swatches window, click-drag a rich black and a dark gray colors onto the gradient in the Gradient window.

STEP 23

Click-drag the resulting gradient into the Swatches palette. Grab the Direct Selection Tool (A), select the frames in the frontal side of the film strip and click the gradient in the swatches. Grab the Gradient Tool (G) and click-drag as shown below.

STEP 24

Select the other pieces and apply the same gradient. We will work on each piece separately, but a basic lighting never hurt anyone . Do the same for the gray part of the film, but use tones of gray instead of black. Don’t get into detailed lighting yet, keep it simple.

STEP 25

Grab the Path Tool (P) and draw a path like below, with a light gray stroke. Select it and press CTRL+SHIFT+[ to send it to back. Go to Object > Expand Appearance. I’ve added a black background so you can see it better.

STEP 26

Repeat STEP 25 to add thickness in different areas.

STEP 27

Grab the Direct Selection Tool (A) and select the shape shown below. Now it’s time to tweak the gradients we applied earlier. Notice that in the Gradient window, it shows the gradient of the selected shape.

Let’s consider the light source is in the top right corner and behind the viewer. Knowing this, we will render lights and shadows via gradients. Do not forget about the environmental lighting though. So let’s begin!

STEP 28

With the front shape still selected, go to the Gradient window (Window > Gradient). From the Swatches palette (Window > Swatches), click-drag  gray tones positioned like below. Do not use the Gradient Tool (G) after this, you will most likely ruin the position.

STEP 29

Following STEP 28, create the following gradients for the surfaces shown below.

STEP 30

In the Layers palette (F7), click the “Create New Layer” button and drag it below the current layer. Lock the current layer and select the layer you just created. Grab the Rectangle Tool (M) and create a large dark blue rectangle.

STEP 31

Grab the Mesh Tool (U) and add points like below. Then grab the Direct Selection Tool (A), click one of the points you just created and click-drag the handles to make it look like below.

STEP 32

Click the point in the middle and select a light blue color. For the rest, select midtones of blue. It will look like below.

STEP 33

Lock the current layer and unlock the one above it. Select all (CTRL+A) and go to Object > Group (CTRL+G). Then grab the Selection Tool (V), hold ALT key, click-drag the goup and hold SHIFT key to move it orthogonally. Place it below the original, like below.

STEP 34

In the Layers palette (F7), set Opacity to 20%. Grab the Path Tool (P), draw a shape like below and set its Blending mode to Multiply and Opacity to 55%.

STEP 35

Create the following gradient, and apply it to the shape created in STEP 34.

STEP 36

Repeat STEP 35 for the shape below.

STEP 37

Create a new layer and select it. Make sure it’s ontop of any other layer. Grab the Rectangle Tool (M), draw a rectangle and apply the following radial gradient. Set Blending mode to Soft light. This will give the film strip a subtle blue tone.

STEP 38

Let’s add some crop marks so we cut out the image nicely. Grab the Crop Area Tool (SHIFT+O) and click-drag an area to make the image look clean. Then grab the Selection Tool to exit crop marks.

Done!

Difficulty: Beginner
Tools: Adobe Illustrator (CS3 – works with earlier versions too)
Completion time: 2 minutes

STEP 1

Create a document of 600×600 px in RGB color mode.

STEP 2

Grab the Ellipse Tool (L), hold ALT and SHIFT keys and draw random, overlapping circles of different, random dimensions. The only thing you should pay attention to is that you don’t leave any blank spaces between them. I’ve drawn them in different colors so they would be easily noticeable.

STEP 3

CTRL+click somewhere on canvas to deselect everything. Now go to the gradients window (Window > Gradients) and click-drag a white color from the Swatches palette (Window > Swatches) on the left side of the gradient bar.

STEP 4

Double-click the Foreground color and pick a bright teal color. Hit OK, click the small icon shown below, then click-drag it on the right side of the gradient bar.

STEP 5

click-drag the gradient into the Swatches palette.

STEP 6

Select all artwork (CTRL+A) and click the gradient you just created and set Angle to “-90”.

STEP 7

Go to Window > Symbols to bring up the Symbols palette, Then click-drag all artwork into the Symbols palette. Name it “Clouds” and hit OK.

Done!

Here’s an example of how to use them.

Now you have a really nice element to place in background and you can access it any time you want.

What you’ll be creating

This is how the final image will look like.

Scenario

Let’s say you have a sports team manager requesting a mascot for his team. He wants a lion head, looking aggressive, bold and imposing.

As example, he wants something similar to “Minnesota Timberwolves” mascot, but a bit simpler.

What do you do?

Basics

First of all, you need to make a quick analysis of what your mascot will look like. For this, take a pen and a piece of paper and write down keywords in the following categories:

“Positives” and “Negatives”. This part will guide your drawing in a certain direction and it will prevent you from going astray, due to the future ideas you’ll have.

Analysis

We want to create a lion head for our mascot, so we need a couple of keywords to guide our path. Think of the feeling you have when you hear the word “lion” and write them down.

Positives:

- Ferocity
- Aggressiveness
- Boldness
- Majesty
- Strength

Negatives:

- Cartoonish
- Funny
- Cute
- Detailed
- Grungy
- Too many colors
- Glossy
- Vignette
- Turn into a character

If you “find” even one of the “Negatives” in your final drawing, then something went wrong at some point. So pay attention from time to time at the direction you’re heading with the drawing so you don’t undo all the time.

References

Always use references. Look up on Google the “Minnesota Timberwolves” mascot and an image of a real lion.

It is important to already have a finished, high quality design as inspiration and follow that style.

Then you’ll know that your design is of high quality if you can compare it with the reference.

Observe small details

Looking at the “Minnesota Timberwolves” mascot, observe the simplicity, colors and line art. Again, keywords are a must here also.

Do’s:

- Thick lines
- Curved and sharp
- Spiked contour
- Few colors

Sketching up

Grab a piece of paper and a pencil, look at the photo of the lion and stylize his contour, using the criteria established earlier.

Don’t get into much detail, keep it simple. Here’s my sketch. Feel free to use it if you don’t have a scanner.

Turning into vector

Now we will import the sketch in Illustrator and use it as guides for the outlining.

STEP 1

Create a new document of 1000×1000 px in CMYK color mode.

STEP 2

Drag-drop the sketch into our canvas and click “Embed”.

STEP 3

Go to Window > Transparency, click the sketch and set Opacity to 60-65%. Then go to Window > Layers (F7) and lock the layer – click the empty checkbox near the layer thumbnail.

STEP 4

Create a new layer (CTRL+SHIFT+N) and name it “contour”.

STEP 5

Grab the Pen Tool (P) and trace the contour of the lion. To make sharp corners (like the fur tips), click again on the anchorpoint to make it sharp.
Only trace half, you’ll reflect the other side later.

STEP 6

Make sure you have fill and no stroke. Go to Object > Path > Offset Path. Set it to about 10 to 12 px. Hit OK.

STEP 7

Hit CTRL+click outside your artwork to deselect. Select the fill of the shape and give it another color, preferably a midtone.
Hit CTRL+SHIFT+[ to send it to back.

STEP 8

In some areas, the Offset created some blunt areas. Grab the Direct Selection Tool (A) and click-drag the anchorpoints to make them sharp spikes.
Press “-” key and click the unwanted anchorpoints to erase them. Do this for all similar areas.

STEP 9

Select all artwork, grab the Eraser Tool (SHIFT+E), hold ALT key and erase the unwanted areas beyond the vertical Axis.

STEP 10

With the entire artwork selected, go to Object > Group (CTRL+G). Copy it (CTRL+C) and paste it to front (CTRL+F).

STEP 11

Go to Object > Transform > Reflect (CTRL+SHIFT+T) and select “Vertical”. Hit OK. Then grab the Selection Tool (V) and place it symmetrically opposed to its original.

STEP 12

Create a new layer above the top-most layer and name it “face”. Turn off visibility of the “contour” layer.

STEP 13

Make a trace of the facial lines: nose, nose bridge, eyes and a bit from the forehead. Then repeat STEPS 10-11 to make the other side of the face.

STEP 14

Go to Object > Expand Appearance, then Object > Path > Clean Up. Erase the anchorpoints shown below.

STEP 15

Select the facial outlining and go to the Pathfinder window (Window > Pathfinder). Click the “Merge” button.

STEP 16

Grab the Live Paint Bucket (K) and fill the eyes with a light color. Then go to Object > Expand, Object > Path > Clean Up.

STEP 17

Turn on visibility of the “contour” layer. Select all the layer’s content, grab the Selection Tool (V) and make it larger, to fit the facial contour.

To select the layer’s content, click the small circle in the layer’s palette. Hold ALT+SHIFT keys to make a centered resize.

STEP 18

Create a layer below the “face” layer. Then grab your Pen Tool (P) and draw a shape like below with a darker red color.

STEP 19

Repeat STEPS 10-11 to make the other side.

STEP 20

Repeat STEPS 20-21 to create the eyes’ shadows.

STEP 21

Select the contour, cut it (CTRL+X), create a new layer above all layers and paste it to front (CTRL+F).

STEP 22

Below the “face” layer, create a new layer (click the “New Layer” button in the Layers palette) and draw these shapes.

This will make the face to stand out more and make the hair more suggestive.

STEP 23

Reflect them like in STEPS 10-11. Select all artwork and click the “Merge” button in the Layers palette.

Adjust colors

Grab the Magic Wand Tool (Y), press Enter and set Tolerance to “0″.
Select each color and change it to any colors you like.

Done!

Here are some of the variations you can create. The idea is to maintain a strong base color and a dark contour, so you can be able to see it from distance.

How about you? How do YOU create your mascots?