Although I'm not a cosplayer myself, I do enjoy browsing inspiring cosplay creations. One of my favourite forms of cosplaying is when people alter the gender or gender identity of the character or create their own version of the character's aesthetic inspired by the original. I think it's because you're not so constrained by the original character's clothing and physical features... with a drastic change in character, you've got a "concept", and you work from there.

In this tutorial, I'm going to design Gambit as a woman. Gambit is a character from the X-Men universe, who is said to be getting his own movie in October 2016.

What You Will Need

In this tutorial, I'll be using two stock references available for purchase on Envato Market.

• Chinese woman with bandage on arm
• Yellow card in a woman hand

1. Character Research

Basic Information

If you've had a slight brush with X-Men, you'll know that Gambit could be most associated with the ability to control and create kinetic energy to his will. You may also associate him with playing cards and his handy staff. As I'll be creating more of a portrait composition, I'll stick to including the playing cards. 

Gambit's Aesthetic 

From doing a Google image search, you can find the basic look of the character from the movies and from the original comics. I've always been a fan of keeping fan art as close to the original styling as possible, so I'll be leaning more towards the comic book clothing and colours. The key aesthetics to include in this design should be:

• Flowing hair
• A face harness which cuts at the cheeks, chin and forehead
• A brown, collared jacket or coat
• Chest and neck covered
• Armor clinging to chest which is coloured purple/pink with a silver trim
• Glowing eyes

Loads of things to consider in the design. Of course I don't have to include all of them but enough variations so you look at the portrait and think "That's Gambit!"

Gambit as a Woman

What I want to make sure of when I create the design is that I don't use the trope of the "chainmail bikini". Whatever Gambit looks like must be realistically functional for an active superhero. I want my Gambit to be ready for action, whatever the challenge. 

I found out that playing cards originated in Imperial China, so I thought it would be a good idea for Gambit to have Chinese heritage. This dictated my ethnicity selection when it came to looking for an appropriate stock image. 

2. Work on a Concept

Step 1

I'm going to start by creating a New print document. The dimensions are not important at this stage as I tend to modify these during the process.

I set up my Layers panel as follows:

• Sketch layer to contain my concept sketch
• BG layer containing a white filled Rectangle (M) set to 50% Opacity which covers my reference image
• Ref layer: I File > Place my reference image in this layer

Step 2

When sketching, you can use a variety of different tools—whatever makes the process most comfortable and enjoyable for you. 

I find that using the Blob Brush Tool (Shift-B), with its Size influenced by graphic tablet Pressure, is easy and organic to use in my workflow. To enable this, double-click on the Blob Brush Tool icon in the Tools panel to access the Options.

Step 3

I sketch the concept, tweaking some of the key clothing items to keep her looking like the character.

• I figured a simple collared jacket, perhaps suede or leather wouldn't get in the way of her kicking ass. 
• Realistically, if you're going to be on the go, you'd have your hair tied up. I never found it realistic that women superheroes had long hair that wasn't tied up. There's creative license, but when you've had long hair, you'll know it's a lot easier to save the day with it tied up.
• Even though she's got a black top on which covers her neck and chest, I've decided to have a subtle nod to her purple/pink armor by way of a vest top.
• I've kept her face harness as the original, but instead of sharp angles, I've softened them to curves to make it more comfortable to wear.

3. Cut Out the Largest Areas

Step 1

I want to create a line art style. I want to carve out the line art from a black Rectangle (M) and have some key areas in colour.

The reason is that she has glowing eyes and a glowing playing card (which I'll be adding later on), so a dark atmosphere would work well with this lighting contrast.

Step 2

Using the Pen Tool (P), I draw the main areas I want to remain white. That would be the face, the ear and the vest area. 

I then use Pathfinder > Minus Front to remove them from the original black rectangle.

I'll be using the Pathfinder panel a lot during this project, so if you need to brush up on this, why not check out our Illustrator in 60 Seconds: Pathfinder Panel video.

4. Create the Line Art Hair

Step 1

If you've followed my tutorials in the past, you'll know I like to use an Art Brush to create the hair. This is no exception, and the same tapered shape brush will do the job.

I strongly recommend you have a collection of brushes similar to this in your brushes library. There are hundreds of Illustrator brushes available on Envato Market.

Step 2

Using the Pen Tool (P), I carefully follow the sketch to lay down the initial strokes. I set them to a white stroke so I can see them against the black. However, note that when you do remove these shapes from the black (once they've been Expanded), they will appear slimmer. I've used a 2 pt Stroke Weight to prevent this from happening.

Step 3

Now that I've drawn the initial strands, I then continue adding more so the majority of the area is covered. I don't worry about the strands overlapping onto the jacket, as you can trim those later on.

Step 4

Once I've drawn the hair, I use Object > Expand to expand the stroke to filled shapes. I'll then use Pathfinder > Unite to combine them into one shape. I'll use Pathfinder > Minus Front to trim off the edges which would be hidden by the jacket.

Finally, I make sure the shapes for the hair are a Compound Path (Control-8) so I can remove them using Minus Front from the black shape. There we have our hair, and Gambit is starting to take shape.

5. Create Line Art for the Face

Step 1

I'm going to start work on the face. The majority of the shapes can be created by the Pen Tool (P) and the Ellipse Tool (L). I don't want to create complex shapes which have heavy detail where it's not required. Her eyes are going to be glowing, so the majority of detail will be lost.

You can learn how to create detailed line art for the facial features in my course, An Introduction to Vector Line Art.

Step 2

I continue to add line art with the Pen Tool (P) around the face and ear.

Step 3

Using the taper Art Brush and the Paintbrush Tool (B), I add eyelashes, eyebrows and small details around the face.

6. Add Detail to the Clothing

Step 1

Time to begin work on the clothing. I want to add enough detailing for you to get an impression of clothing but not spend so much time on it that the details distract from the main focal points, which are the face and the hand.

The trim of the jacket will have two parallel lines of stitching. To ensure that the lines of stitching are uniform from start to end, I draw thick lines with the Pen Tool (P) for each area requiring stitches. Then for the collar, and shoulder join, I taper the lines using the Width Tool (Shift-W).

Step 2

Once placed, I Object > Expand the lines to a filled shape. I then switch the fill to stroke. 

In the Stroke panel, tick the box for Dashed line and give the stroke a 4 pt dash and 1 pt gap to create a stitching effect. Then Object > Expand the lines to fills.

With the Eraser Tool (Shift-E), remove the ends of the lines and overlapping areas where you don't need stitching.

Step 3

I then go around the rest of the clothing and face harness to add line art to define the edges. 

I keep in mind the angle that Gambit is looking at the viewer to check where the edges need to be defined to have a 3D-looking edge. For example, with the inside of her jacket, you can see the edge on the left side, but not the right as this is hidden from the viewer.

7. Add the Hand

Step 1

As the original stock image didn't have a hand holding a card, I'm going to need to include one. After making sure that the hand is at the right angle (the thumb is on the outside—try the pose yourself to make sure) I use Photoshop to remove the white background and save it as a transparent PNG. I then place it on my artboard.

Using the Line Segment Tool (\), I draw a simple arm to estimate the placement of the hand to make sure it's believable. When scaling the hand, I keep in mind that the hand when spread out usually covers the face, so I use this as a rough estimate for the size (I bet you're covering your face now).

Step 2

I draw the initial shapes for the hand and the card. For the card I use the Rectangle Tool (M) and duplicate it. I rotate the original and keep the duplicate for later on when I create the card design.

Step 3

I use Live Corners and the Selection Tool (V) to bring in the corners slightly for the card. 

Step 4

I then use Pathfinder > Minus Front to remove the hand and card from the black background.

Step 5

Using the Pen Tool (P), I add further line-art detailing to the hand. I must admit that, although I want to create a realistic look to Gambit and avoid gender cliches, I love nail art and long nails... so my Gambit is getting long nails.

8. Create the Ace of Spades

Step 1

I'm going to create a basic heart shape for the base of the symbol, from two Ellipses (L). They are then combined with Pathfinder > Unite and I pull their bottom three points down to create a smooth heart shape.

Step 2

I turn the heart upside down and add an arrowhead shape to the bottom to create the symbol for a spade. I duplicate these two shapes as they will be handy to create the smaller symbol in the card corners.

Then using the taper Art Brush, I add black and white strokes, mirrored either side of the spade, to create a more elegant-looking symbol.

Step 3

After using a sans serif font for the "A", I add the symbols to the corners on the duplicate of the card shape. I then Group together all of the shapes (Control-G) and rotate it onto Gambit's hand. 

I set the group to 50% Opacity so I can line up the card much more easily. I then hide the duplicate card.

9. Add the Finishing Details

Step 1

I want to make the card flaming. I first use the duplicate card and Offset Path to create a boundary outside of the card. This is where the flames will start.

Object > Expand the card so you're left with a larger shape than the original card.

Step 2

Using the Blob Brush Tool (Shift-B), I draw flames around the boundary set. I then use the larger card to Minus Front from the flames so the flames do not touch the original card.

I then Minus Front this shape from the original black rectangle.

Step 3

Behind the black rectangle, I add shapes behind the card flames, eyes and vest, and fill it with a purple to pink Linear Gradient to add a splash of colour.

Awesome Work, You're Done!

Creating your own look for an original character can be a lot of fun. Take inspiration from clothing and key traits, and be sure to add your own styling. 

I hope you've enjoyed following along with this tutorial, and hope you're enjoying X-Men week here on Envato Tuts+.

When you have an awesome idea for a character, you can feel how great it would be to see it on paper. But what if you don't have "talent"? Or maybe you can draw, but humans are simply not your area of expertise? Are you supposed to spend hours learning just to draw this one character for fun?

The solution is to use a reference, one as close to your idea as possible. However, there's a risk you'll need to compromise your idea, because there's no close reference you can use. Here, Fuse, a new addition to the Adobe family, comes to the rescue! It lets you create a human character from scratch using an advanced editor straight from RPG video games. Then you can edit it in Photoshop CC to finish the process to create a perfect reference for a drawing or digital painting.

Disclaimer: At this time, Adobe Fuse is still in an early development stage. Minor bugs and inconveniences may occur.

1. Build the Body

Step 1

Download Adobe Fuse from the official site. For the time being, it's free for every member of Creative Cloud, even if you don't have a subscription.

Step 2

There are four stages of creating every character. Let's start with Assemble.

Pick the head that is the closest to your idea. It doesn't need to be perfect—we will adjust it in a moment!

You can see a preview of the head on the left. We could assemble all the other parts now, but because we have the head in such a nice close-up, let's customize it already.

Step 3

Click Face to reveal the list. I want to create the evil incarnation of Jean Grey, Dark Phoenix, so my goal is to make her look powerful and angry. This emotion is easy to picture, but keep in mind that more complex emotions may require playing with more sliders.

You should see the effects of your changes on the left. If you don't see them right away, you may need to hover the cursor over the image to update it.

Step 4

Open the Head list. Experiment with the sliders to get the look you want. You don't need to copy everything I did!

Step 5

Go back to the Assemble tab and add the other parts of the body. You don't need to use the same elements, but mixing them may lead to some problems when it comes to adjusting skin color.

Step 6

Switch to the Customize tab and adjust the sliders for every part of the body. Remember that it's a 3D model, so you can rotate it to get a better view!

2. Add and Adjust the Clothing

Step 1

Go to the Clothing tab and pick something for every part of the body. Again, it doesn't need to be perfect—it's just a reference, and we can change everything later. Just pick something close enough.

I want to create a superhero costume, so I've picked the tightest clothes I could find.

Close enough!

Step 2

Go to the Texture tab. Click the part of the clothing you'd like to customize. In the lower right corner you'll find a list of materials the clothing can be made of. Select one of them.

Step 3

On the left, under the model, you'll find a list of materials you can use instead. Try them on!

Step 4

Adjust the materials for every part of the clothes.

Step 5

To make the material shinier, play with the Plastic Roughness slider.

Step 6

Adjust the materials for all the clothes. Now, it looks more like a superhero costume!

Step 7

Select hair to adjust its properties, too.

Step 8

If you select the skin of the model, you'll be able to adjust a lot of other properties. In my case I just decided to add some makeup.

3. Import the Model to Photoshop CC

Step 1

Once the model is ready, you can save it either to Mixamo or to a CC Library. I'm going to show you the second option, because it allows more advanced editing, but if you don't have a CC subscription (and you can't use a trial of Photoshop anymore), Mixamo is the way to go.

Disclaimer: for now, neither Fuse nor Photoshop allows full control over the poses. If you need something really unusual, try Mixamo instead to create a model ready to be edited in a 3D program.

Step 2

Save the model to your chosen Library.

Wait for it to get uploaded.

Step 3

When you get information that the file has been synced, open Photoshop and Create a New File. If you want to create a drawing, 2000 x 2000 px should be enough. For a digital painting or a photo-manipulation you may need more, but keep in mind that the bigger it is, the slower your computer will process it.

Step 4

You should find your model in the Libraries panel. (If you don't have it, open it with Window > Libraries). Drag it to the canvas to load it.

Here it is, ready to be edited!

4. Adjust the Textures and Materials

Note: If you want to use it as a reference for a sketch, you can skip this part, as we will be working on colors mainly.

Step 1

Our model created a special kind of layer: a 3D layer. Because of this, it has special properties you can edit. Two of them will be especially useful for us:

• Diffuse: base color
• Specular Color: color of the gloss

Every element of the model has its own properties. Let's start with Top. Double click it to open it.

Step 2

You should see a 2D mesh of the top part of the body. Whatever you paint here will be visible in its 3D view. Test it! Create a New Layer (to make the change reversible) and paint it with the main color for the top.

Save it (Control-S) and come back to the model to see the change.

Give all the materials your preferred colors.

Step 3

If you want to create a more advanced pattern, first draw a few marker strokes to see what the mesh looks like in its 3D version. You should be able to imagine the 3D result when painting in 2D.

I've used this method to paint the characteristic phoenix symbol.

As long as you paint on a separate layer, everything can be adjusted after saving:

Step 4

If you want to edit the material on the legs or arms, it's often necessary to make it symmetrical. Paint the first leg...

... and then Duplicate it (Control-J) and Edit > Transform > Flip Horizontal.

It's starting to look more like my idea!

Step 5

For now the costume looks like cheap plastic, so let's work on it. That plastic feel comes from the white shine, so if we color it, it should change drastically. First, go to the Diffuse mesh of the part you want to color and Copy it all (Control-Alt-Shift-C). Then go to its Specular counterpart and paste it.

Works like a charm!

Use this trick for every other part:

Step 6

Let's go back to the Diffuse meshes to adjust the eyes...

... and hair:

The character is done!

5. Pose the Character

Step 1

Open Window > 3D panel to see even more options for our model. Select anything with Skeleton in the name.

Open the Window > Properties panel to find a pose for our character. As I mentioned before, we can't (yet) create a pose from scratch, but the library of poses is so huge it shouldn't really limit you.

After you have chosen the pose, if it's animated, you can pick a certain frame of that animation using Window > Timeline. In my case it wasn't necessary.

Step 2

What is necessary, though, is that I should change the perspective to something clearer. Use the Move Tool (V) to rotate the character and/or its ground.

Step 3

With the Skeleton still selected, go to the other tab in the Properties panel. Pick any expression you wish...

... or if you don't want it, pick any and then lower its Strength to 0%.

Now you can edit the head's coordinates to create a more fitting pose.

6. Add the Lighting

Step 1

In the 3D panel you'll find something named Infinite Light 1. This is a default light—you can remove it or change its Properties to fit your needs.

You can also change its location with the Move Tool (V).

Step 2

To make even more interesting lighting, you can add more light sources:

This is how it may look in the end. I've removed the shadows, because they would look unnatural in the light situation I've planned. I've also fixed the silhouette with Filter > Liquify (works only if the layer has been rendered).

To render the layer and improve shading this way, right click the 3D layer and select Render 3D Layer. The bigger the resolution of your picture and the textures, the longer it may take.

Your Reference Is Done!

You can now use it to create a drawing (to trace it or use as a reference—it's your choice), or as a base for digital painting. This way you'll be able to show your idea to others without trying to obtain a skill you don't really need. And even if you're a skilled digital artist, this method lets you create an accurate lighting reference, which is especially useful for specular highlights—they're very hard to calculate.

As a side note, a 3D layer from Photoshop can be exported to popular 3D formats, so that you can edit it in a more advanced manner. If you want, you can learn the basics from our tutorials covering various programs:

• Blender
• ZBrush
• Maya
• Modo
• 3ds Max

In the following steps you will learn how to create a neat X-Men logo in Adobe Illustrator. 

For starters you will learn how to set up a simple grid and how to create the main shapes using basic tools and vector shape-building techniques. Moving on, you will learn how to add color and subtle shading/highlights using the Appearance panel and some simple blending techniques. Finally, you will learn how to add a subtle texture and a neat background.

If you're looking for a different type of design, you can find a variety of logo designs and templates on Envato Market.

1. Create a New Document and Set Up a Grid

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 600 in the width and height boxes and then click the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid) and Snap to Grid (View > Snap to Grid). You will need a grid every 5 px, so simply go to Edit > Preferences > Guides > Grid, and enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-" keyboard shortcut.

You can learn more about Illustrator's grid system and how it can make your work easier in this short tutorial from Andrei Stefan: Understanding Adobe Illustrator's Grid System.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don't forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

2. Create the Main Shapes

Step 1

Pick the Ellipse Tool (L) and focus on your Toolbar. Remove the color from the fill and then select the stroke and set its color to R=137 G=147 B=150.

Move to your artboard and simply create a 310 px circle—the grid and the Snap to Grid feature should make this easier. Make sure that this shape remains selected and focus on the Appearance panel (Window > Appearance).

Click that "Stroke" piece of text to open the Stroke fly-out panel and then increase the Weight to 40 px and also check the Align Stroke to Inside button. With your shape still selected, simply go to Object > Path > Outline Stroke.

Step 2

Using the Rectangle Tool (M), create a 50 x 280 px shape and place it exactly as shown in the following image. Fill it with R=41 G=171 B=226 and make sure that there's no stroke color set for this rectangle.

Step 3

Make sure that your rectangle is still selected and go to Object > Transform > Rotate. Set the Angle to 52 degrees and then click the OK button.

Step 4

Make sure that your rotated rectangle is still selected and go to Object > Transform > Reflect. Check the Vertical box and then click the Copy button.

Step 5

Select all the shapes made so far, open the Pathfinder panel (Window > Pathfinder) and click the Unite button.

Step 6

Using the Ellipse Tool (L), create a new 310 px circle and fill it with R=226 G=0 B=9. Place this new shape exactly as shown in the following image and then send it to back using the Shift-Control-[ keyboard shortcut.

Step 7

Disable the Grid (Control-") and the Snap to Grid (Shift-Control-").

Make a copy in front of your blue shape using the Control-C > Control-F keyboard shortcut. Select this copy along with the red circle that lies in the back and then click the Minus Front button from the Pathfinder panel. Select the resulting red shapes and turn them into a simple compound path using the Control-8 keyboard shortcut.

Step 8

Reselect your blue shape and make a new copy in front using that same Control-C > Control-F keyboard shortcut. Select only this copy and go to Object > Path > Offset Path. Enter a -5 px Offset and click the OK button. Select the resulting shape and replace the existing fill color with a random yellow (R=255 G=185 B=0).

Now, select your yellow shape along with the copy of the blue shape made in the beginning of the step and click the Minus Front button from the Pathfinder panel. Make sure that the resulting group of shapes is selected, Ungroup it using the Shift-Control-G keyboard shortcut, and fill all those shapes with that same yellow used a few moments ago.

3. Color the First Large Shape

Step 1

Select your blue shape and go to Object > Path > Offset Path. Enter a -5 px Offset and then click the OK button. Select the resulting shape, bring it to front using the Shift-Control-] keyboard shortcut, and replace the existing fill color with R=47 G=57 B=59.

Step 2

Make sure that your dark shape is still selected, focus on the Appearance panel, select the existing fill, and go to Effect > Stylize > Inner Glow. Enter the attributes shown in the following image and click the OK button.

Step 3

Make sure that your dark shape is still selected, keep focusing on the Appearance panel, and add a second fill using the Add New Fill button.

Select this new fill and replace the existing color with the linear gradient shown in the following image. Keep in mind that the blue numbers from the Gradient image stand for Location percentage. Simply click on the gradient bar to add a new gradient slider and go to Window > Gradient to open the Gradient panel.

Return to the Appearance panel, expand the fill added in this step and click that "Opacity" piece of text to open the Transparency fly-out panel. Change the Blending Mode to Soft Light and lower the Opacity to 70%.

Step 4

Make sure that your dark shape is still selected, keep focusing on the Appearance panel, and select the existing stroke.

Use the linear gradient shown in the following image, lower its Opacity to 10% and change the Blending Mode to Overlay, and then open the Stroke fly-out panel. Increase the Weight to 10 px and check the Align Stroke to Inside button.

Step 5

Make sure that your dark shape is still selected, keep focusing on the Appearance panel and add a second stroke using the Add New Stroke button.

Select this new stroke and replace the existing linear gradient with the one shown in the following image. Remember that the blue numbers from the Gradient image stand for Location percentage. Return to the Appearance panel and keep focusing on the newly added stroke. Lower its Opacity to 75%, change the Blending Mode to Soft Light, set the Weight to 5 px, and don't forget to check the Align Stroke to Inside button.

4. Divide and Color the Yellow Shapes

Step 1

Select the round yellow shape and simply replace the existing color with the linear gradient shown in the following image.

Step 2

Now, you need to divide the remaining yellow shapes. First, enable the Smart Guides feature (View > Smart Guides or Control-U) to make things easier. When turned on, Smart Guides create a number of onscreen guides that appear when you create or manipulate objects or artboards. In this case the "anchor" smart guide will make it easier for you to know when to start and end a path.

Using the Pen Tool (P), create a series of straight paths that connect the corners of your yellow paths as shown in the following image. Add a simple stroke for these paths only to make them noticeable.

Step 3

Select the paths made in the previous step along with the yellow shapes and click the Divide button from the Pathfinder panel. Make sure that the resulting group of shapes is selected and Ungroup it using that same Shift-Control-G keyboard shortcut. In the end you should have 12 separate yellow shapes.

Step 4

Select the five yellow shapes highlighted in the following image and replace the existing fill color with the linear gradient shown.

Step 5

Select the two yellow shapes highlighted in the following image and replace the existing fill color with the linear gradient shown.

Step 6

Select the three yellow shapes highlighted in the following image and replace the existing fill color with the linear gradient shown. Adjust the gradient angle for each shape as shown below.

Step 7

Focus on the remaining yellow shapes. Select the left one and fill it with the linear gradient shown below, and then select the other yellow shape and fill it with the same linear gradient, but hit the Reverse Gradient button.

5. Darken the Grey Area

Step 1

Focus on the Layers panel, open the existing layer, select the blue shape that lies in the bottom of the panel and bring it to front (Shift-Control-]).

Step 2

Make sure that your blue shape stays selected and focus on the Appearance panel.

Select the existing fill, lower its Opacity to 35% and change the Blending Mode to Overlay. Replace the existing fill color with R=25 G=26 B=30 and then go to Effect > Stylize > Inner Glow. Enter the attributes shown in the following image and click the OK button.

Step 3

Make sure that the shape edited in the previous step is still selected and keep focusing on the Appearance panel.

Select the existing stroke and make it black. Lower its Opacity to 50%, change the Blending Mode to Soft Light and then open the Stroke fly-out panel. Increase the Weight to 3 px and check the Align Stroke to Inside button.

6. Color the Red Shape

Step 1

Select your red compound path and focus on the Appearance panel. Select the existing fill and go to Effect > Stylize > Inner Glow. Enter the attributes shown in the following image and then click the OK button.

Step 2

Make sure that your red shape is still selected, keep focusing on the Appearance panel and add a second fill.

Select this new fill and make it black. Lower its Opacity to 15%, change the Blending Mode to Overlay and then go to Effect > Artistic > Film Grain. Enter the attributes shown in the following image and then click the OK button.

Step 3

Make sure that your red shape is still selected and keep focusing on the Appearance panel.

Select the existing stroke and set the color to black. Lower its Opacity to 80%, change the Blending Mode to Soft Light and then move to the stroke attributes. Increase the Weight to 2 px and check the Align Stroke to Inside button.

Step 4

Make sure that your red shape is still selected, keep focusing on the Appearance panel and add a second stroke using that same Add New Stroke button.

Select this new stroke and set the color to black. Lower its Opacity to 60%, change the Blending Mode to Soft Light and then move to the stroke attributes. Increase the Weight to 5 px and check the Align Stroke to Inside button.

Step 5

Make sure that your red shape is still selected, keep focusing on the Appearance panel and add a third stroke.

Select this new stroke and set the color to black. Lower its Opacity to 40%, change the Blending Mode to Soft Light and then move to the stroke attributes. Increase the Weight to 10 px and check the Align Stroke to Inside button.

7. Add Shading and a Background

Step 1

Enable the Grid (Control-") and the Snap to Grid (Shift-Control-").

Using the Ellipse Tool (L), create a 310 px circle and fill it with black. Place this new circle right above the existing shapes, send it to back and then go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the top left window (in the following image), click the OK button and then add the other three Drop Shadow effects shown in the following image.

Step 2

Using the Rectangle Tool (M), create a shape the size of your artboard, fill it with the radial gradient shown in the following image and then send it to back (Shift-Control-[).

Step 3

Make sure that your background rectangle is still selected, focus on the Appearance panel and add a second fill.

Select this new fill, lower its Opacity to 75% and then replace the existing gradient with the one shown in the following image. Keep in mind that the yellow zero from the Gradient image stands for Opacity percentage.

Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

Every superhero movie needs a villain. In the new X-men Apocalypse, that villain is none other than the fierce En Sabah Nur... aka Apocalypse.

Today I'll teach you how to create your very own Apocalypse, using photo manipulation and digital painting techniques.

1. Research and Inspiration

The magic to making photo manipulations work, especially when they're inspired by fan art, is to do thorough research while gathering inspiration online.

About Apocalypse

With a little help from Wikipedia, we know that Apocalypse is "the world's first and most powerful mutant." Born from ancient times, he had a merciless philosophy of eradicating the weak at all costs.

For this portrait of Apocalypse, I'll be using this Strong Male Stock from Envato Market.

Make sure your stocks have their own sense of character! Here are some reasons why this stock is perfect for Apocalypse:

• The male subject has strong facial features, including a wide jaw, prominent brow bone, and thick neck (most likely from body building).
  
• His blank expression is perfect for warping into a villainous one.
  
• Since his hair is cut really short, it'll be easier to make him bald.
• The image is a nice closeup shot, which will be perfect for a portrait-style manipulation.
• The portrait is also well lit so all of his original features are clearly visible.

Sticking With the Old Design

If you've seen the trailer to the new X-Men, then you probably realize this design is not like the one from the movie. That's because I've decided to stick to the original character design as a way to pay homage to the comic. The choice to change the armor and style is ultimately up to you. But once you've made your choice, you can start the first steps of this manipulation.

2. Prep Your Stock

Step 1

Since we're treating this manipulation almost like a digital painting, it's a good idea to increase the resolution. Go to Image > Image Size and change the resolution to at least 300 dpi.

Step 2

Next, use the Magnetic Lasso Tool (L) to create a selection around the model. Right-click and press Select Inverse, and then hit Delete to get rid of the background.

Since the model's face is currently set at an angle, Control-T to Free Transform and Rotate the image for a more centered head.

Step 3

Apocalypse's skin tone is a muted blue color. We can pull this off easily by using Hue & Saturation. Go to Image > Adjustments > Hue & Saturation and change to the following settings:

• Hue: -150
• Saturation: -67
• Lightness: +3
  

Step 4

Now let's move on to a quick sketch of the armor. Use a Hard Round Brush to draw a quick sketch of the armor using inspiration you've gathered online. Keep the design simple and symmetrical. The armor design will ultimately change a bit in future steps, so keep an open mind about its potential.

Step 5

Even though the face is centered, I'd like to make the neck more symmetrical. Use the Polygonal Lasso Tool (L) to make a selection around the left side of his neck. Control-J to create a duplicate on a New Layer and flip it into place by going to Edit >Transform > Flip Horizontal.

3. Creating Apocalypse's Face

Step 1

Did you know that most villains are created with strong, angular features? To make our model look more like Apocalypse, we'll need to adjust the structure of his face. Go to Filter > Liquify and carefully adjust his eyes, brows, jaw, nose, and mouth. Leave a copy nearby just in case you mess up.

Raise his eyebrows, make his head more round, widen his jaw, and make his bottom lip much thinner using the Forward Warp Tool (W) to push each feature around.

Continue to exaggerate his brows. Begin to change the expression of his mouth by pulling the ends of his lips down. Don't worry if he starts to look like a caricature.

Step 2

To create that smooth, bald-headed effect, we'll simply use the Clone Stamp Tool (S). Sample a part of his skin and begin painting it on top of any visible hair. Continue covering up the hair with skin until the head is completely covered.

4. Digitally Paint Villainous Features

Step 1

Now that we have the photo manipulation aspect of this tutorial finished, we can move on to the digital painting. First begin by filling the Background Layer with a Linear Gradient of black to deep blue.

On a New Layer with Mode set to Vivid Light, use the same deep blue color to Fill the layer and adjust the Opacity to 20%.

Use a Hard Round Brush to begin painting the base colors for the armor. Since I forgot the metal ears in the sketch, I'll quickly paint over them.

Step 2

Let's get back to the face. On a layer set to Color Burn, use the Brush Tool (B) to carve out Apocalypse's menacing expression with a dark blue color. Try to work with Blend Modes that are doing justice to your photos. Here we can see that Color Burn allows us to create the expression while still letting the shine from the model's lips show through.

Step 3

Now use layers set to Multiply to create the proper light and shadow for this scene. Remember it's a pretty dark portrait, so make sure to concentrate shadow underneath his neck and towards the bottom of his armor.

Use the Eyedropper Tool (E) to pick up nearby colors on his face before applying more shadows. Carve out his face with shadow in order to make it look more angular. Concentrate on creating features like sunken eyes, prominent cheekbones, and a tense brow.

Decrease the size of your brush and begin painting wrinkles on the same layer. Exaggerate the wrinkles that are already on the model and draw some more to intensify that aging effect.

Step 4

It's important to incorporate more light into the scene as soon as possible. This step will help you understand which direction you need to go with the lighting scheme. Paint rim light along the edges of the armor and allow the light to bounce onto Apocalypse's face.

On a New Layer with Mode set to Overlay, paint more light onto his forehead and add a sinister glow to his eyes. You can create shine on any area easily by creating highlights with white. Use the Eraser Tool (E) at any time during this process to soften the effect.

5. Rework the Armor

Step 1

Don't stay on one part of the painting for too long. Keep bouncing around to see what needs to be done next. Since the face is almost finished, I can now move on to the armor.

The base is way too plain, so I'm going to add a few more design details to make the armor more interesting. One quick way to cheat this is to use the Polygonal Lasso Tool (L) to make selections around the neck and letter "A". Control-J to duplicate these features onto new layers. Reposition the neck piece to look like an additional sheet of metal, and resize the "A" to make it larger by hitting Control-T to Free Transform.

Step 2

Take this opportunity to begin cleaning up all the edges. Metal is hard and smooth so you'll need a Hard Round Brush with 100% Hardness to keep those edges crisp and clean.

6. Final Touches

Step 1

Villains are usually up to no good, so their armor should reflect that. To add more texture, consider using grunge brushes. Here I used a Chalk Brush from the Brush Presets to paint random texture all along the armor.

Play around with the armor's features. Add character by making it look beaten up and dented from battle. If you're like me, you might not be too familiar with the technicalities of armor design. Just try your best to have it all make sense, and keep plenty of metal references nearby. Here I even added small rivets to hold the "A" in place.

Step 2

Then I go in with a tiny Hard Round Brush to add scratches on the metal. You can make the scratches go in any direction because they should look as natural as possible.

Step 3

The last step of this manipulation is to make it a little brighter. Set a New Layer to Linear Dodge (Add) and begin painting highlights all across the metal for extra shine and intensity. Continue to tweak the highlights until you're happy with the result.

Awesome Work, You're Now Done!

Photo manipulation techniques and digital painting skills prove to be a lethal combination! By taking advantage of all your skill sets, you can create a super villain of your very own.

I hope you've enjoyed working on this fun tutorial. Feel free to leave any questions in the comments below.

And for more photo manipulation tips, check out these tutorials:

• 10 Tips for Improving Your Photo Manipulation Skills
  
• Create an Abstract Portrait Photo Manipulation With Adobe Photoshop
  
• Create Unique Rust and Distress Effects in Adobe Photoshop

Relighting is a post-production technique that takes a base image and alters the appearance of the lighting sources, or even adds the appearance of new lighting sources altogether, to improve the image.

Sometimes the light in a photograph just isn't what you want it to be. Maybe you're working on a stock image, the desired look changes after the shoot, or you need to fit a portrait from one location into the background from another. There are many reasons why a perfectly servicable photograph in one scenario might not work in another. Relighting is often just the trick to save the day.

Last time we looked at relighting and how to add natural-looking effects with Knoll Light Factory. Here we’ll look at six Photoshop actions that add a more dramatic lighting look to your portrait photographs.

Wait, What is an Action?

An action is a file containing instructions for Adobe Photoshop. Running an action performs a series of automated steps on an image. Actions usually have more than one preset within them, designed work together. They also often contain points along the way for user input. Using an action as part of your workflow can be a great addition, and save you time. Although many actions seem like ‘one-click’ solutions, it’s important to still treat the image in the way you usually would and have a plan for it. I like to think of actions as an addition to your workflow, not something to solve all your post-production problems.

For a more in-depth introduction to actions, see Harry Guinness's useful tutorial,
Getting Started With Photoshop Actions.

• Photoshop Actions
  Getting Started With Photoshop Actions
  Harry Guinness

6 Photoshop Actions That Add Dramatic Light

This is the image I'll be using on all the actions, so that you can see the differences of each accurately:

All of the actions in this tutorial are available on Envato Market.

1. Soft Focus

Soft Focus by Sevenstyles costs $6. Here is the instructional video:

Watching the video for each action helps a lot, but the basics are to make sure your image is RGB Colour and 8 bit.

Applying the Action

Create new layer called 'brush'. On this layer, paint over in any colour, the bits of image you'd like to keep in focus. In this case, I want the face and part of the neck to remain sharp.

Run the action.

This is the result after running the action, so obviously some tweaking is needed here.

The menu is broken down into colour and soft focus. Let’s look at tweaking some of the soft focus options to get a better result. Mostly the background blur and bokeh textures are the things obscuring the image, so I’ve scrapped some of the larger bokeh and dipped the opacity on the background blur layer:

In the colour folder, there are a number of options, which in essence really do just change the colour, so it’s a matter of preference. Each of these can then be tweaked again though for finer tuning. There’s also an adjustment mask for brightness, contrast, colour tint and saturation.

The colours are mostly pastels with a couple of nice complimentary colour gradients thrown in. They’re quite heavy handed so chances are you’ll need to pull them back a bit on your image.

Here I’ve dipped the overall saturation for a softer look and although I like the pink tone, I’ve gone for a cooler one to show you the difference to our earlier image.

You can use more than one in conjunction with each other but I wouldn’t recommend using too many, piling lots of textures and fill layers on top of one another will really degrade the look of the image.

Finally, I’ve added some contrast using the layer within the colour folder and some overall sharpening using the layer within the soft focus folder. Remember, you can use the mask on each layer to brush over areas to reduce or increase the effect.

Soft Focus: Before and After

2. Soft Focus 2

Soft focus 2 by Sevensyles costs $6. Here's the instructional video:

Once again your image will need to be RGB Colour and 8 bit.

Applying the Action

Create new layer called brush and paint over in any colour the parts of the image you want to keep. This time use a soft brush to keep the edges from being hard, or you'll end up with a rough line when you run the action.

Half way down the image will be the transition point from light to dark, so you may want to avoid colouring the very bottom part of your image in so that it fades to black.

After running the action, you're left with a number of options grouped together

Soft Focus 2 group is where we’re going to look, and particularly at the reveal normal photo mask.

I think the action has left this a little too dark, so I’m going to use a soft brush with low opacity to just brush back in some of the detail:

Next I want to bring a little detail back into the background by brushing over the ‘background colour’ mask

In the colour folder, as well as adjustments to brightness,contrast and saturation, there are a number of colour options, each of which then break down again so you can really tweak until your heart’s content.

Soft Focus 2: Before and After

3. Soft Focus 3

Soft Focus 3 by Sevensyles costs $6. Here's the instructional video:

We've had Soft Focus and Soft Focus 2, how could we not have 3?! Once again for this action, make sure your image is RGB Colour and 8 bit.

Create a new layer called 'brush' and paint over your subject; this doesn't need to be perfect.

Run the action.

The result without any tweaking is quite soft and very orange. Let’s have a look at our options.

Essentially this is broken down into warm and cool casts with an overall contrast layer. The warm 1 option is selected alongside the cool 4 and as always, the folders can be opened again to break down the action into even more parts.

Unlike the previous actions, the folders here are broken up into many more layers inside. Here’s an example of warm 3:

As you can see you really could go on forever with tweaking here and there. I think the best option when faced with so much choice is to choose your base folder and decide what you want from it. So from the example picture right now, it’s too bright, too blurred and there are too many warm tones, so that’s what I want to try and fix.

Have a plan for your image and then address the layers that help you work on that plan. The colour fill layers tend to be the things that have the most impact in these type of actions, so try and find those and dip the opacity accordingly, or paint out over the layer mask.

Above,  I’ve dropped the opacity on a lot of the colour fill layers, removed some of the edge glow and blurring effects and brought some definition back to the face. This is still only using ‘Warm 3‘ so now I’ll add a ‘cool’ layer and adjust in the same way I did with the warm.

Remember, if you’re using more than one part of the action and they’re designed to do similar things, you may well be repeating things like sharpening and contrast – so it may be best to hide those duplicate layers rather than piling too much on.

Soft Focus 3: Before and After

4. Smokey Scene

Smoky Scene by Hemalaya1 costs $4.

This action requires you to load in some brushes. Place the .ABR file that comes with the action, into the Brushes folder found in the Adobe folder of Program Files if you're a Windows user, or Applications if you're on a Mac. Then load your brushes

Create a new layer called 'object' and brush over your subject on that layer.

Run the action.

There are a couple of weird joins on the background which could be down to my selection or an anomaly on one of the action's layers. It's easily fixed with a quick clone at the end.

Let's look at the menu options for this action.

As well as the masks, which make it easy to adjust the effects, each smoke effect is also available in your brushes menu, as you just installed them.

If you want to add more effects, then it’s easy to create a new layer and brush those on, you could even experiment by bringing in different colours that way, too.

Personally I’m not a fan of the yellow fringe, so I’m going to tone that way down in the ‘object in fire’ folder.  I’ll also lower the gradient opacity to lessen the orange/red effect on the model and ditch the ‘sparks’. 

I found the smoke layers tricky, there are almost too many of them for you to do anything but make an opacity change.

Smoky Scene: Before and After

5. Glam

Glam by Sevenstyles costs $5. Here's the instructional video:

Glam doesn’t require any pre-brushing but it does have a ‘run setup’ folder as part of the group. Running this will give you the choice of adding a glow, desaturating the image, darkening it or lightening it. Each numbered action also has these as an option (deselected) once you run it.

After that, Glam has 40 presets. That's far too many to look at here, but we’ll go for one at random, number 20:

The other presets are a variation of this: multi-coloured zazz added to your images! The effect is made up of a number of colour gradient to transparent layers, one on top of another. Each comes with a layer mask so you can brush over the colours to change the effect

As pretty as the colours are, they’re incredibly distracting from our model and so the aim with this image and action is to bring the definition back to the face, while keeping our punchy colours. I’m going to brush over the masks with a soft, low opacity brush to remove some of the bright colours

That's better, but only one example. Let's look at another; number 42.

You can see it’s much the same problem again although less on the face this time. The same method applies, brushing with a low opacity soft brush until you get the desired effect.

Glam: Before and After

6. Legendary

Legendary by Sevenstyles costs $6. Here's the instructional video:

As with Sevenstyle's other actions, make sure your image is RGB Colour, 8 bit and start with a new layer called 'brush'.

When you run the action, it will stop part way to ask you to create a light source.

Use the shape tool or pen tool to draw in where you’d like your light source:

When you’re happy, you can go ahead and hit play again on the action and it’ll resume.

Yours may look different depending on the light source that’s been drawn in, but you can see it’s created a ‘ball’ of light from my shape circle at the top left.

Once again there are many options including ten colour changes, amendments to ‘glow’ and ‘dust’, the background texture, essentially, and some overall changes to things like contrast, sharpening etc. 

This picture is far too orange coloured for me now so I’m going to tone that right down and make it a little more neutral.

This is colour option nine with the opacity lowered a little. I’ve also reduced the glow, increased sharpness and contrast around the face and toned down the textured background.

You can see the result is a much paler, stylized look to the original, although we’ve kept some of the colour and toning from the background, so it blends much nicer with the model than the previous ‘orange’ look did.

Legendary: Before and After

Conclusion

As I mentioned at the start, I believe actions are something to compliment your editing process, not replace it. They can often be a good place to start, deciding what you want from an image, seeing how the action works and then breaking each layer down until you’ve achieved that.

The actions in this article are for the most part (with the exception of Glam), very flexible—there’s a lot you can do and many outcomes you can achieve by using them. These actions are particularly suited to images of people and in particular studio style portraits. If you’re aiming for a stylised, ‘wow’ look then they’re right on the money. If you’re looking for something for a bit more natural and subtle then you have to be prepared to dive in a little deeper and spend time adjusting each layer and mask to get the right look.

Today I'm going to show you how easy it is to create your own “Website Under Construction” illustration using Adobe Illustrator. Hopefully this quick tutorial will inspire you to create something unique of your own which you can then unleash on the web. So grab a cup of coffee and open up Illustrator so that we can get started.

1. Plan Ahead

Since the purpose of doing this type of illustration is to bring some character to your website that is currently under development, you should consider a few key points that may affect the final product.

To do this, you’ll have to answer two relatively easy questions:

Number one: How wide will your main content container be?

This is actually really important, since you’ll want to have your illustration fit within a certain space (viewport), especially if you’re doing just the design and not the coding part.

By doing so, you’ll have a basic idea of the size (Width and Height) of your illustration, which is something that you’ll need to pin down by yourself or with the help of your coding buddy.

Now whether it’s a 960 px wide container, or something bigger (1024 px), you should always take a second and decide what other visual elements you will be using, which takes us to the second question.

The way you center your information is really important, since you will want to have the user focus on a specific part of the page. Whether it’s a bunch of social links or a subscription form, you’ll want the illustration to be the center stage, where everything else happens, since the whole idea is to make something useful and visually appealing at the same time.

In my case, I decided that using a 960 x 480 px size should have me covered, since the composition would theoretically be used on a white background and take up the center spot.

Of course, if you’re doing the illustration for an actual project, you can always go bigger depending on the way your content will be displayed, but for now I hope that the 960 px Width will be a perfect match for most of you reading this.

2. Let Your Brand Show

According to the Online Business Dictionary, a brand can be defined as a “unique design, sign, symbol, words, or a combination of these, employed in creating an image that identifies a product and differentiates it from its competitors.”

In today’s market, it’s really important to set your company apart by creating an image that can be easily recognized using a couple of simple visual triggers.

The whole idea behind the project for this tutorial is to build something appealing that can actually be put to use as soon as you finish creating the final product.

I encourage you to make your design your own by “branding” the illustration, so that in the end you’ll have a unique version of it.

How, you might ask?

Well, here are some starting points.

Use a Unique Color Palette

Color is easily one of the most helpful tools when it comes to building brands, since the right value can easily set you apart from your competitors, as long as you make it interesting.

I’ve gone with a nice yellow for the accents and main focus point, but that doesn’t mean you have to stick to it.

Let the Illustration Talk About Your Product or Business

Once you’ve figured out your color scheme, you can show off your brand or company by taking on a theme that describes its core business. This is where you can get down and creative and reflect on the visual elements that you want to communicate.

For example, if you’re building a website that is going to be dealing with data analysis, you could create something that uses graphic charts and percentage indicators, in order to give your viewers a little taste of what your business is all about.

Or, if you’re dealing with a digital product, let’s say a piece of software, you could create an abstract window with some little functions from within the actual program, which would give them a hint at the nature of your product.

In this particular tutorial, I’ve decided to go with something a little bit more generic, since I thought you might use my version as a starting point and build on that.

That being said, let’s stop wasting precious time, and get creative.

3. Create a New Document

Bring up Illustrator, and create a New Document (File > New or Control-N) using the following settings:

• Number of Artboards: 1
• Width: 960 px
• Height: 480 px
• Units: Pixels

And from the Advanced tab:

• Color Mode: RGB
• Raster Effects: Screen (72 ppi)
• Align New Objects to Pixel Grid: checked

Quick tip: As you might have already guessed, we’re going to be creating the illustration using a pixel-perfect workflow, so I strongly recommend you read my tutorial on how to create pixel-perfect artwork, which will help you a lot.

4. Isolate Your Composition Using Layers

Before we start building anything, I strongly recommend you identify and separate the illustration's main sections on their own layer, since it will be easier to target and edit them later on if you need to.

Taking a look at our composition, we're using six layers, giving them easily recognizable names which will help with the process of identifying a specific element from the whole.

• Layer 1: background
• Layer 2: ground line
• Layer 3: dumpster
• Layer 4: macbook
• Layer 5: crane
• Layer 6: pretend image

5. Start Working on the Illustration

Once you’ve layered your document, we can now start working on the actual illustration, and we will do so by creating the ground line and the background.

Step 1

Position yourself on the ground line layer, and using the RoundedRectangle Tool create three different width shapes with a thickness of 6 px and a 3 px Corner Radius. Color them using a dark reddish-grey (#3f3838) and then make sure to position them about 8 px from one another.

Then group them using the Control-G keyboard shortcut, and center them to the Artboard using the Align Panel’s Horizontal Align Center option, making sure to leave a gap of 46 px between them and the Artboard’s bottom side.

Step 2

Position yourself on the background layer, and using the Ellipse Tool (L), create a 536 x 536 px shape which we will color using #efefef and then partially mask in order to hide the bottom section that goes underneath the ground line.

Then, add another smaller 46 x 46 px circle towards the top right corner, and color it using the same value (#efefef).

Quick tip: if you want to use a different color for the background you can easily do this, but when you end up exporting the file, try and remove it, since a transparent PNG file could be a better fit, especially when your content width is larger than the illustration itself.

Step 3

Start working on the MacBook by creating a 426 x 24 px base with a round bottom, which we will color using #e2e2e2 and then give a 6 px outline (#aaaaaa) using the Offset Path tool.

Quick tip: You can learn how to create outlines by taking a look at my in-depth comparison between Offset Paths and Strokes used as methods for creating line icons.

Step 4

Once you have the main shapes for the base (1), start adding some details to it, such as the lighter top section (Width: 426 px; Height: 16px;Color: #e2e2e2) (3), the 426 x 6 px thick divider line (#3f3838) (2), the subtle highlights (Color: white;Blending Mode: Overlay; Opacity: 80%) (4), and the touchpad area (5) in order to make it look like an actual laptop and not a dinner plate.

Step 5

Start working on the MacBook’s top section by creating the lid and the actual display.

First create a 364 x 220 px rectangle with an 18 px Corner Radius applied to the top left and right corners. Color the shape using #756c6c and then give it a 6 px outline (#3f3838) (2).

Then, create another 184 x 328 px rectangle, color it using your brand color (which in our case is #edd87e), give it the same 6 px outline (#3f3838) and then position the two towards the center of the lid, leaving a gap of just 6 px between them and the MacBook’s base (3).

Add a couple of highlights and a shadow to give the piece a little more polish (4).

Step 6

Once you’ve created the MacBook, you can start working on the theme of your website, so take your time, get creative and figure out exactly what it is that you want to show your viewers.

In our case, it’s a simple website layout, with a top navigation menu, an image placeholder, a call to action button, and a couple of funny elements such as the ladder and the white unpainted area.

When you’re done, don’t forget to group all the MacBook’s elements together using the Control-G keyboard shortcut, and then lock its layer, so that we can move on to the next section of the illustration.

Step 7

Start working on the crane, and see if you can add the brand color or colors to some of its composing pieces, in order to create some accent colors to help you carry out the theme.

In our case, we’ve used our sunny yellow (#edd87e) for the crane operating cabin and the small side elevator.

Step 8

Continue working on your theme by adding elements which would be relevant to your website, or simply fill in the empty space so that the illustration won’t end up looking unbalanced.

I decided to keep things simple by adding a little dumpster towards the right side of the MacBook, which could be a metaphor for the things that were recycled during the construction of the site.

Step 9

Finish off the illustration by adding the last piece of the puzzle, which in our case is the little “pretend image” that is held by the crane’s arm.

It's a Wrap

So there you have it—a nice, straightforward guide to building an interesting "Website Under Construction" Illustration, which can help your personal or company brand stand out from the rest.

Thank you for your time and attention, and be sure to show us what you've come up with after reading this piece.

P.S.

Since I know this is a quick tutorial, and I didn’t have time to walk you through the entire creative process behind the illustration, I'm going to give you the editable source file, so that you can tinker with it however your heart desires. See the download link in the right sidebar.

Welcome to our Photoshop in 60 Seconds series, in which you can learn a Photoshop skill, feature, or technique in just a minute!

Artboards in Photoshop

Artboards are a welcome recent addition to the lineup of Photoshop features. The premise is to be able to work on several different "canvases" all within the same document. This is a great feature for User Interface designers, and if you have just a minute I'll show you what they are and how they work.

A Bit More Detail

Learn more about Adobe Photoshop on Envato Tuts+:

• Photoshop Tutorials for Beginners tutorial series
• Mastering Light & Shadow in Adobe Photoshop free course
• Photoshop Essentials course
• Advanced Photoshop Techniques course

60 Seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ in which we introduce a range of subjects, all in 60 seconds—just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you'd like to see explained in 60 seconds!

Follow this tutorial and learn how to draw a pretty detailed chocolate chip cookie in vector form. First, you'll create the whole cookie and after that, you'll learn to create the bite and the cookie crumbs. This tutorial is a great example of what you can do with the brushes available in Illustrator. Let's begin!

If you are hungry for more food icons or vector icons in general, then Envato Market has you covered with plenty of designs to choose from.

1. Start a New Project

LaunchIllustratorand go to File> New to open a blank document. Type a name for your file, set up the dimensions, and then select PixelsasUnitsandRGBasColor Mode. Make sure that Align New Objects to Pixel Grid is not checked.

Next, go to Edit> Preferences > General and set the Keyboard Increment to1 px. While there, go to Unitsto make sure they are set as in the following image. I usually work with these settings and they will help you throughout the drawing process.

2. Create the Shape of the Cookie

Step 1

Use the Ellipse Tool (L) to draw a 184 x 184 px circle; then fill it with the radial gradient shown.

Step 2

While the circle stays selected, go to Effect > Distort & Transform> Roughen and apply the settings shown below. Next, go to Effect > Distort & Transform > Transform, select a 10 degrees Angle in the Rotate field and hit OK.

Step 3

With the circle still selected, Copy and Paste it in Front (Control-F) and then choose Expand Appearance from the Object menu. Ungroup (Shift-Control-G) if necessary. This will be the “cookie shape”.

Now, take a look at the Appearance panel. Press Add New Fill and select black as the fill color. Next, go to Effect > Sketch > Reticulation and apply the settings shown. Set this Fill attribute toBlending Mode Screen and 50% Opacity.   

Step 4

With “cookie shape” still selected, add a 2 pt Inside Stroke and then go to Effect > Stylize > Feather and apply a Radius of 3 px. 

Step 5

If you take a closer look at the cookie, you will notice the pixelated edges that have been generated by the Reticulation effect. To fix that, you will create a mask.

Select “cookie shape” and then Copy and Paste in Place (Shift-Control-V). Remove all existing appearances. Now, select everything on your artboard and go to Object > Clipping Mask > Make (Control-7). 

3. Create the Texture of the Cookie

Step 1

Use the Pen Tool (P) to draw a straight path over the cookie as shown in the following image. Select black as the stroke color and the Chalk Art Brush from the Brush Libraries Menu > Artistic > Artistic_ChalkCharcoalPencil. Increase the Stroke Weight to 3 pt; then set to Blending Mode Color Dodge and 85% Opacity. 

Step 2

Draw another path in the bottom left side and use the Chalk Art Brush again. Set the Stroke Weight to 2 pt, the Blending Mode to Color Burn and the Opacity to 20%. 

Step 3

Draw a new path over the cookie and use the Chalk Art Brush again to stroke it. Increase the Stroke Weight to 4 pt and select a light brown color this time. Next, go to Effect > Blur > Gaussian Blur and apply a Radius of 2 px. Set this path to Blending Mode Color Burn and 50% Opacity. 

Step 4

Next, draw a curved path at the bottom of the cookie. Stroke this path with the Charcoal-Rough Art Brush from the Brush Libraries Menu > Artistic > Artistic_ChalkCharcoalPencil and increase the Stroke Weight to 2 pt. Go to Effect > Blur > Gaussian Blur, apply aRadius of 2 px, and then set to Blending Mode Overlay and 30% Opacity. 

Step 5

Draw another path like in the following image. Stroke it with theChalk-Scribble Art Brush from the Brush Libraries Menu > Artistic> Artistic_ChalkCharcoalPencil. Apply a 2 px Gaussian Blur; then set to Blending Mode Overlay and 50% Opacity.

Step 6

You are almost done. Draw another path at the top of the cookie and use the Chalk–Scribble Art Brush to stroke it. Increase the Stroke Weight to 2 pt, apply a 2 px Gaussian Blur and set the Blending Mode to Overlay. 

Step 7

Draw the last two paths in the left side of the cookie as in the image below. Stroke them with the Chalk-Scribble Art Brush, set the Stroke Weight to 2 pt, apply a 2 px Gaussian Blur and then set to Blending Mode Color Dodge. 

Step 8

It's time to clean up all the mess. Select the “cookie shape” and Copy and Paste in Place (Shift-Control-V). Remove all existing appearances from the Appearance panel. Now, select this copy along with the eight stroked paths and go to Object > Clipping Mask > Make (Control-7). You can name the resulting group “cookie texture”. 

4. Create the Cracks on the Cookie

Step 1

Take the Pencil Tool (N) and draw a few random paths on the surface of the cookie. The number of paths depends on how many cracks you want on your cookie. 

Select all of them and use the Charcoal-Rough Art Brush to stroke them. The two green paths have a 1 pt Stroke (bigger cracks) and the rest of the paths have a 0.75 pt Stroke (smaller cracks). Next, go to Effect > Stylize > Feather and apply aRadius of 2 px to all of them. 

Step 2

Select all the paths and then Copy and Paste in Front (Control-F). Change the color, reduce the Stroke Weight to 0.25 pt, apply a 2 px Feather Radius and reduce the Opacity to 65% for all of them. 

5. Create the Chocolate Chips

Step 1

Use the Pen Tool (P) to draw some random shapes next to the cracks and between them. Add as many as you want. Fill these shapes with dark brown. 

Step 2

Let's add some shine. On each chocolate chip, draw another smaller shape or two. Fill the smaller shapes (blue) with the first gradient and the slightly bigger shapes (pink) with the second gradient shown.

At this point the cookie is ready, but let's not stop here....

6. Create a Bite in the Cookie

Step 1

First, select all the shapes that make up the cookie, Group (Control-G) them, and then make a copy of the group.

Use the Pen Tool (P) to draw a path as shown in the following image that will define the shape of the bite. Starting from the end points, close the path around the cookie to obtain a shape. Set this shape to fill-none and stroke-none. Now, select the cookie group along with this path and go to Object > Clipping Mask > Make (Control-7). 

Step 2

Follow the edge of the bite and draw the blue and red paths. Stroke both of them with the Charcoal-Rough Art Brush and set the Stroke Weight to 0.75 pt. 

Step 3

Draw a new path as shown in the following image, use the Charcoal-Rough Art Brush again, and set the Stroke Weight to 0.5 pt. 

Step 4

Draw another path as shown below, use the Charcoal-Rough Art Brush again, and set the Stroke Weight to 0.5 pt. 

Step 5

Draw a smaller path on the front left side of the bite, use the Charcoal-Rough Art Brush again, and then set the color and the Stroke Weight to 0.25 pt. 

Step 6

The bite in the cookie is ready, and in the next image you can see both of them. 

7. Create the Shadow under the Cookie

Step 1

Use the Ellipse Tool (L) to draw a 143 x 53 px ellipse filled with white and then a 88 x 25 px ellipse filled with gray. Arrange both shapes at the bottom of the cookie, as in the image below, and send them in back.

Having both shapes selected, go to Object > Blend > Blend Options, choose 20 Specified Steps and hit OK. Now, go back to Object > Blend > Make (Alt-Control-B). Set the resulting blend group toBlending Mode Multiply and 75% Opacity. 

Step 2

Make a copy of the blend group from the previous step and arrange it behind the other cookie as well. 

8. Create the Cookie Crumbs

Step 1

Go to the Symbols panel and in the Brush Libraries Menu > Nature find the Rock 5 symbol. Drag it onto your artboard and press the Break Link to Symbol icon at the bottom of the Symbols panel in order to expand it. Make the rock smaller by moving the sides of the bounding box closer to each other.

Use the Direct Selection Tool (A) to select only the main shape of the rock and then Copy and Paste in Place (Shift-Control-V). Fill this copy with orange and change the Blending Mode to Hard Light. Finally, make a copy of the shadow under the cookie, make it smaller, and arrange it behind the cookie crumb. 

Step 2

Move the cookie crumb next to the cookie and make a smaller copy or as many as you want. That's it! 

Congratulations! You're Done

I hope you enjoyed this tutorial, and if you recreate these cookies, don't forget to share an image with us. I bet they're gonna be yummy. 

Filter Forge 5 is an Adobe Photoshop plugin and stand-alone software that gives you the ability to create your own complex filters and textures. Its node-based Filter Editor is powerful and intuitive. One of the most useful features is the export of Render Maps which can be used to craft 3D materials and shaders. In this tutorial we use Filter Forge to craft custom 3D materials to create a "Wood vs. Metal" chess set.

1. Create a Custom Wood Texture

There are several wooden textures available within the Filter Forge software, and even more available through their online gallery. But the process of creating your own custom wooden texture is an excellent way to learn how to use the various features and capabilities of the Filter Editor.

Step 1

Open Filter Forge 5 and go to Filter > New (Control-N). This will open the Filter Editor with a blank workspace. The only node is the Result node, which is the required finishing node for every texture network. 

Step 2

Open the Components panel and drag a Cells component from the Noise group onto the workspace. Then make the following settings:

• Contrast: 13
• Scale: 246
• Stretch: 59
• Enable the Vertical Stretch option

This will create the start of the wood grain.

Step 3

Wood grain is more convincing and realistic when it includes knots. We'll use another noise component to add knots to the grain. Add a Perlin Noise component and make the following settings:

• Noise color: AEAEAE
• Roughness: 0
• Contrast: 15
• Scale: 246
• Stretch: 7
• Angle: 90
• Details: 52
• Variation: 3935

Step 4

Add a Bezier Curve component from the Curves group and connect the output to the Profile input for the Perlin Noise. The noise will have a noticeable increase in splotches.

Step 5

Click on the Curve thumbnail in the Bezier Curve properties to open the Curve Editor. Adjust the curve to look similar to the figure below. The result should show the Perlin Noise as mostly dark with just a few spots of light gray.

Step 6

Add a Blend component from the Processing group. Attach the output of the Perlin Noise to the Foreground. Attach the output of the Cells to the Background input of the Blend component. Then change the Blend's Opacity to 100 and the Mode to Screen. This will combine the white spots of the Perlin Noise with the grain of the Cells.

Step 7

Add a Noise Gradient component from the Gradients group and make the following settings:

• Base Color: C4A16A
• H Range: 0
• L Range: 26
• S Range: 7
• Roughness: 41
• Contrast: 17
• Scale: 162
• Enable the Vertical option
• Enable the Randomizable option

This gradient will create the basic coloring for the wood texture.

Step 8

Add an Elevation Gradient component from the Gradients group. Attach the output from the Blend component to the Elevation input and the output from Noise Gradient to the Gradient input. This will add the grain pattern to the gradient color, and the texture is finally beginning to look like wood.

Step 9

Add another Perlin Noise component from the Noise group and make the following settings:

• Noise color: 9E9E9E
• Background color: 373737
• Roughness: 100
• Contrast: 0
• Scale: 300
• Stretch: 42
• Angle: 90
• Details: 100
• Variation: 3444
• Profile: Organic

Step 10

Add another Blend component node from the Processing group and attach the output from the Perlin Noise to the Foreground input. Attach the output from the Elevation Gradient to the input for the Background. Set the Opacity to 100 and the Mode to Overlay. This adds the finer, noisier grain from the Perlin Noise to the wood texture.

Step 11

Attach the output from the Blend to the Source input of the Result component. At this point the texture is a simple filter and can be saved as such. But if you want to create Render Maps to use in a 3D material, continue to the next section.

2. Add Depth to the Wood Texture

Step 1 

Change the Result node from Simple filter to Surface. You will need to reconnect the Blend output, but this time attach it to the Surface Color.

Step 2

Add a High Pass component from the Processing group. Attach the output from the Elevation Gradient to the Source input. Do not move the current connect from the Elevation Gradient to Blend, but just add another connection, as each component can have multiple outputs. Make the following settings to the High Pass component:

• Contrast: 52
• Radius: 10
• Enable the monochrome option

Step 3

Add another Blend component from the Processing group. Attach another output from the second Perlin Noise component to the Foreground input. Attach the output from the High Pass to the input for the Background. Then set the Blend's Opacity to 100 and the Mode to Multiply. This should create a dark gray version of the wood grain.

Step 4

Add a Stones component from the Noise group and make the following settings:

• Roughness: 79
• Contrast: 0
• Scale: 228
• Stretch: 64
• Enable the Vertical Stretch option
• Details: 89
• Variation: 4919

Step 5

Add another Blend component from the Processing group. Attach the output from the Stones component to the Foreground input. Attach the output from the last Blend component to the Background input. Set the Opacity to 15 and the Mode to Multiply. This adds a touch more roughness to the overall surface texture.

Step 6

Attach the output from the Blend component to the Height input of the Result node. The preview won't appear any different, but this completes the work of creating a wood texture that will have a convincing surface to it. Press the Save Filter button and name this filter "Custom Light Wood".

Step 7

Back in the regular Filter Forge interface, go to the Lighting tab and set the Surface Height to 10. Then go to the Settings tab and check the Seamless Tiling option. Then adjust the Variation slider until you get a wood grain arrangement that you like. 

Step 8

Go to Filter > Render Maps and choose the Diffuse Map. Then press the Save Image As button to save the diffuse map for the wood.

Do the same for the Bump Map.

And the Normal Map.

3. Customize a Brushed Metal Texture

Building your own texture from scratch is a rewarding process, but a lengthy one too. If you don't have the time to craft your own complex network, consider downloading one from the gallery and modifying it to meet your needs. We will do that here with the brushed steel to create the texture for the metal chess pieces.

Step 1

Launch Filter Forge again and use the top link for Filter Library: Download more filters. This will launch your web browser and direct it to Filter Forge's online gallery of textures and filters.

Step 2

Use the Search bar to search for some Brushed Metal textures. Select the Brushed Stainless Steel and Beveled Mirrors by ronviers texture. Click the Open this filter in Filter Forge button to download and open the texture in Filter Forge.

Step 3

Go to the Settings tab and make the following settings:

• Bevel Depth: 0
• Bevel Width: 0
• Enable the Seamless Tiling option

Step 4

Generate the same Diffuse, Bump, and Normal maps for this brushed metal by going to Filter > Render Maps and save each image after it is finished rendering.

4. Generate a Wood and Metal Checkerboard Texture

In order to make this Wood vs. Metal game look authentic, the chessboard needs to have alternating wood and metal squares. Fortunately, we have both texture networks already, and they just need to be combined into a checkerboard pattern.

Step 1

The custom wood texture you created is available in the My Filters folder. Select it and press the Filter Editor button. When prompted, select the option to Edit this Filter. 

Step 2

Zoom out and draw a selection box around the entire network. Then go to Edit > Copy (Control-C). Hit the Cancel button to close the filter editor without making any changes to the filter.

Step 3

Find the Brushed Stainless Steel texture again in the Techno folder. Launch the Filter Editor to edit this texture. The dialogue box warns that a copy will be created.

Step 4

When the metal texture opens in the Filter Editor, zoom out enough to see some empty workspace next to the network and go to Edit > Paste (Control-V) to add the entire network of the custom wood texture next to the network for the metal texture.

Step 5

Zoom back in and find the Result node. Break all the inputs off it by just dragging each arrow away from the node.

Step 6

Add a Checker component from the Patterns group. Set the Repeat H to 4 and the Repeat V to 4. Then go to Edit > Copy (Control-C) to copy this node before any connections are made to it.

Step 7

Find the wood network's Blend component that is combining the grain colors. Connect the output to the Color 1 input of the Checker component. 

Find the Blend 1.017 node in the metal network; it has a Brightness Slider Control attached to it. Connect that output to the Color 2 input of the Checker component.

Connect the output from the Checker node to the Surface Color input of the Result node.

Step 8

Go to Edit > Paste (Control-V) to add another unconnected Checker node. Find the Blend node of the wood network that used to feed into the Surface Height of the wood texture. Connect that output to the Color 1 input of this second Checker node.

Find the Brightness/ Contrast 1.017 node of the metal network and connect that output to the Color 2 input of the second Checker node.

Connect the output of the Checker node to the Height of the Result node.

Step 9

Go to Edit > Paste (Control-V) to add a third Checker component node. Set the Color 1 to black and connect the output of the metal network's Blend 1.017 node (the same node that is connected to Color 2 of the first checkerboard node) to the input of Color 2.

Connect the output of this third Checker node to the Metallic input of the Result node.

Step 10

The custom wood and brushed metal checkerboard texture is finished! Save this filter as Custom Checkerboard and return to the main Filter Forge interface.

Step 11

Go to the Lighting tab and set the Surface Height to 10. 

Step 12

Generate the render maps for the checkerboard texture through Filter > Render Maps. Generate a map for Diffuse, Bump, Normal and Metallic. The Metallic map is a new one for the checkerboard texture and will be used as a reflective map so that only the metal squares will generate a reflection.

5. Going 3D!

All our node networking is done, the filters are tweaked, and the Render Maps are created. It's time to start applying these textures to a 3D model in Photoshop. To save time, I've provided the 3D file with everything set up, except the textures. You will need to look for the 3DChessBoard.zip file attached to this tutorial. 

If you care to set up your own 3D scene to match this one, here's the resources that were used to create it:

• 3D Chess Set
• HDRI image for the environment lighting
• Park Background

Step 1

Download the 3DChessBoard.zip file attached to this tutorial. Unzip the 3DChessboard.psd file and open it in Photoshop. Switch to the 3D workspace if Photoshop doesn't automatically prompt you to do so. In this file the lights, environment, model and camera are already all set up, so we just need to apply the custom textures.

Step 2

In the 3D panel, use the icons near the top of the panel to filter by Materials. Select the Wooden_Pieces material. In the Properties panel, use the folder icon next to the Diffuse color chip to Load Texture. Select the diffuse map you generated for the custom wood texture.

Step 3

Load the Bump map in the same way, and set the Bump value to 10%.

Step 4

Load the Normal map (located toward the lower left of the Properties panel) in the same way the Diffuse and Bump maps were loaded.

Step 5

Switch to the Metal_pieces material and choose the following settings for the material properties:

• Specular color: H:0, S:0, B:64
• Ambient color: Black
• Shine: 19%
• Reflection: 16%
• Roughness: 20%
• Refraction: 1.35

Step 6

Load the Diffuse map for the custom brushed metal texture. Then click the same icon to Edit UV Properties. Set the U/X Offset and the V/Y Offset both to 50%.

Step 7

Load the Bump Map created for the brushed metal and set the Bump amount to 52%. Likewise load the Normal Map too. Set the UV Properties on both to match the 50% settings on the Diffuse maps.

Step 8

Next, select the board_tex material and make the following settings:

• Ambient color: H:0, S:0, B:59
• Shine: 100%

Step 9

Use the folder icons to load the checkerboard maps for Diffuse, Bump, and Normal. Then use the Metallic map for the Reflection texture.

Step 10

Now it's time to render! Save your file first and go to 3D > Render 3D Layer (Alt-Shift-Control-R). Let Photoshop cook on the file for a while. The rendering process may take up to a couple of hours, so be patient.

6. Final Effects

The most advantageous thing about working with 3D elements in Photoshop is that all the post-processing features are right at your fingertips. Don't feel as if the render must be perfect—it's much faster to create finishing effects with the more traditional Photoshop features.

Step 1

Once the rendering is finished, switch back to your preferred workspace configuration as we are finished with the 3D tools. Create a merged copy of the final render with the background by holding down the Alt key while going to Layer > Merge Visible.

Step 2

Switch over to the Channels panel and verify that there's a channel called BlurDepth. This is included to assist in creating a convincing focal blur effect. Go back to the Layers panel and Duplicate the merged layer with Layer > New > Layer Via Copy (Control-J).

Step 3

Go to Filter > Blur > Lens Blur and make the following settings:

• Depth Map Source: BlurDepth
• Blur Focal Distance: 3
• Enable the Invert option
• Iris Shape: Hexagon (6)
• Radius: 20

Step 4

Add a Curves adjustment layer and set the curve shape to be a very slight "S" shape to enhance the image contrast.

Step 5

Create another merged layer by holding down Alt while going to Layer > Merge Visible. Then set this new to be a Smart Object with Layer > Smart Objects > Convert to Smart Object.

Step 6

Go to Filter > Camera Raw Filter, and in the Basic tab make the following settings:

• Exposure: +0.15
• Highlights: +40
• Blacks: +29
• Clarity: +18
• Vibrance: +5

Then switch over to the Effects tab and set the Post Crop Vignette Amount to -13. 

Step 7

Add a new layer with Layer > New > Layer (Shift-Control-N) named Flare and fill it with black using the Edit > Fill command. Then change the blending mode to Screen so the black disappears entirely. Then go to Filter > Render > Lens Flare. Move the flare epicenter to align approximately with the top of the queen piece.

Step 8

Once the flare is rendered, set the layer Opacity to 50%. Then reposition the flare layer to refine the placement of the flare onto the very edge of the queen piece, as if it's a glint of sunshine reflecting off the metal edge.

You Are Done!

Congratulations on your Wood vs. Metal chess game! You've created a custom wood texture, modified a metal texture, and combined them into a new texture. And you've applied all the Render Maps to create a fun and compelling final image. Nice work!

In this tutorial, you will learn how to create fancy, decorated arrows. We will use basic shapes and then apply Warp, Roughen, and Zig-Zag effects. You will also learn how to create different feathers from basic shapes.

Before we begin, you can check out Envato Market for more inspiration. I promise that you’ll find so many beautiful decorative arrows made by many talented illustrators.

And now—let's get started with our tutorial!

1. Create the First Arrow

Step 1

Let's start out by creating our first arrow from a regular rectangle. Take the Rectangle Tool (M) and draw a long rectangle. The fill color you can see in the image below. 

Since we want to create colorful, ornamental arrows which we see on Pinterest rather than those that we see in Game of Thrones, we will decorate our arrows. So let’s make a copy of the light brown rectangle that we just created in front (Control-C, Control-F), make it shorter, and change the fill color to blue. 

Holding the Alt and Shift keys on your keyboard, move the blue rectangle to the left and you will see that you now have two blue rectangles. Change the fill color of the newly created rectangle to yellow. Again, holding the Alt and Shift keys, create a copy of the yellow rectangle and change the fill color to red. 

You should now have four different colored rectangles. We just created the wooden shaft of the arrow.

Step 2

Let’s move on to the tip of the arrow, known as the arrowhead.

Start with the Ellipse Tool (L) and draw an ellipse. Then hit the Convert Anchor Point Tool(Shift-C) and click on the right anchor point—you’ll end up with a sharp point. Using the Direct Selection Tool (A), select the top and bottom anchor points and move them to the left by pressing the left arrow keys on your keyboard. Add a rectangle using the Rectangle Tool (M) with the same fill color, and your arrowhead is done.

Place the arrowhead on the shaft.

Step 3

Let’s start adding some decorations—we’ll start with a feather. Some time ago, someone asked me to create a tutorial on drawing feathers. Your wish has been granted!

Draw an ellipse using the Ellipse Tool (L). While keeping it selected, go to Effect > Warp > Arc and apply the options you see below. Expand the shape (Object > Expand Appearance). For the stem of the feather, we will use a copy of this shape. Just make the copy darker and narrower. Place the stem in front of the first ellipse and centered in the middle.

Step 4

Hold your horses—our feather is not done yet. Let's add some details. Take the Polygon Tool and click on your artboard. In the new dialogue window, enter 3 Sides with any Radius and press OK. Rotate the triangle to the right. 

A little trick: if you want to rotate a shape exactly 90 degrees, select the shape, hit the Shift key and start rotating. You’ll notice that you are rotating exactly in 45 or 90 degree increments.

Make the rotated triangle very narrow, and then apply the warp options. Go to go to Effect > Warp > Flag. Enter the options shown below. We will call it “a flag shape”. Save a copy of this flag shape for later.

Step 5

Make a few copies of the flag shape and place them on the feather shape. First, place them on the left side. Then make a reflection of them by right-clicking the mouse, Transform > Reflect. Check Vertical, Angle 90 degrees in the dialogue window and click Copy. Place them on the right side of the feather. 

When you are satisfied with the result, select all these little flag shapes along with the feather, but not the stem. Go to the Pathfinder panel and press the Minus Front button. Now, select the stem and put it in the front (Control-X, Control-F).

Step 6

Place the feather on the arrow and warp it: go to Effect > Warp > Arc. Expand the feather (Object > Expand Appearance).

Step 7

Now we will create another feather. Instead of a feather with a narrow top and wide bottom, we will make one with a wide top and narrow bottom. Take the stem from the previous feather and recolor it blue (see fill color below). Then add a light blue ellipse in the back. 

Using the Direct Selection Tool (A), select the left and right Anchor Points of the light blue ellipse and move them up. Remember the flag shapes? Bring those and place them on it. Select all the flag shapes along with light blue ellipse and press Minus Front in Pathfinder. Be sure to put the stem in front (Control-X, Control-F).

Place the feather close to the previous feather that we created before.

Step 8

To finish off our arrow, we will decorate it with a wavy green branch. Delete the fill color and set the stroke color as shown below. Take the Line Segment Tool (\) and draw a line over the shaft. Adjust the stroke Weight on the Stroke panel as you want. While keeping it, selected go toEffect > Distort & Transform > Zig Zag... and enter the options you see in the image below.

Step 9

Now, choose the previous stroke color as the fill color and draw an ellipse. Take the Convert Anchor Point Tool (Shift-C) and click on the left and right anchor points to make them sharp. This will be our leaf.

Step 10

Create a bunch of the leaves and place them on the wavy branch. Our first arrow is done!

2. Create the Second Arrow

Step 1

The shaft of the second arrow will be the same fill color as the first one. Draw a tiny dark gray rectangle on the right side of the arrow. While holding down the Alt and Shift keys, move it to the left. Keep pressing Control-D, and a copy of this tiny rectangle will move further. Change the fill color of every second tiny rectangle to light gray.

A quick side note: All the decorations that I’m adding are just examples—feel free to decorate these arrows to your taste!

Step 2

Now the arrowhead. Let’s first place a gray rectangle on the left side of the arrow shaft. Then draw a little square. While holding down the Shift key, rotate it 45 degrees. Take the Direct Selection Tool (A) and move the left anchor point of the square to the left. Can you see the pointy arrowhead now?

Step 3

Using the Rounded Rectangle Tool, create three identical tiny rounded rectangles as marked with the black arrow. 

Remember the violet feather that we created for the first arrow? Make a copy of it, and change the fill color to yellow—we’ll use it for the second arrow. To make it little bit different, create a horizontal reflection of this yellow feather: right-click > Transform > Reflect and check Horizontal, Angle 0 degrees and press OK. Place it as shown below, but remember to place it behind those three tiny rounded rectangles.

Step 4

Let’s continue decorating. In the next few steps, we will make a green branch. In a newly created green ellipse, move the left and right anchor points up. That's our simple leaf.

Step 5

Set the stroke color to the same color and delete the fill color. Using the Line Segment Tool (\), draw a stalk. Place the previously created leaf on top. Make a copy of this leaf, rotate it 45 degrees and place it as shown in the third image below. 

Holding together Shift (for moving it straight) and Alt (for making a copy), move that leaf down a little bit. Keep pressing Control-D to repeat your last movement until you finish filling in the stalk on the left side. Then select all the leaves on the left side and make a vertical reflection: right-click > Transform > Reflect. In the new dialogue window, enter Vertical, Angle 90 degrees and press Copy. Move it to the right. Our green branch is almost ready.

Step 6

Let’s show that the branch is flexible. Just go to Effect > Warp > Arc and enter the options you see below. Don't forget to expand the branch (Object > Expand Appearance). We are expanding the shapes all the time because we want to rotate them without distorting.

Put the green branch close to the yellow feather.

Step 7

Delete the fill color and set the stroke color. Go to the Stroke panel and make the stroke Weight thick, and check Round Cap. Using the Line Segment Tool (\), draw a brown branch. To make it more realistic, go to Effect > Distort and Transform > Roughen and enter the options shown below. Expand the branch.

Place the branch between the green leaves and yellow feather.

Step 8

Let's create one more feather. Be sure to delete the stroke color and set the fill color. Draw a dark gray ellipse and move up the left and right anchor points. Add a stem (just take a copy from some previous feather) and change its fill color. 

Remember the flag shape? Take a copy of it and place it on the stem as shown below. Make a few of them and then reflect them on the other side as well.

Step 9

The last detail we want to add is the stains. Draw a few light gray ellipses and then apply a Roughen effect to them (Effect > Distort and Transform > Roughen). The options will depend on the size of your stains.

Place this dark gray feather on the arrow.

3. Create the Third Arrow

Step 1

So here is where it gets easy. I took the first arrow and changed the arrowhead—I created it from a triangle, using the Polygon Tool.

Step 2 

Now, let’s have a quick practice—create a pink feather just following the image shown below. Try it—don't be afraid!

Step 3

Place your beautiful feather on the arrow and warp it. Select the feather, go to Effect > Warp > Arc and in the new window, move the slider in the Bend section to your taste. When it looks good, click OK. Expand the feather.

Step 4

Let’s create a green ellipse. Make the top and bottom anchor points sharp. Go to Effect > Distort & Transform > Zig Zag... and enter in the new dialogue window the options you see below. Your options can be different than mine—just try to find what suits you best.

Place this new leaf close to the pink feather.

Step 5

Delete the fill color and set the stroke color as you see in the image below. Draw three stalks using the Line Segment Tool (\). Now—remember our first arrow when you created sharp cornered leaves? Make three copies of it, and place them on the stalk we just created.

Place it on the arrow.

Step 6

Take the Spiral Tool and click on your artboard. A new dialogue window will pop up; enter the options you see below. Then take the Direct Selection Tool (A) and move the handles of the anchor points to achieve a shape that looks like this:

Make a copy of it and place both of these on the arrow.

Step 7 

Let's create a flower, something like a ranunculus, a peony, or even a rose—it all depends on the options you enter later. 

First, draw a circle and go to Effect > Distort and Transform > Roughen. Check Points Smooth, and move the sliders in the Options section how you like. After that, create a smaller and darker circle in the front, and again apply Roughen effect options to it. And then again a smaller and darker circle and apply the Roughen effect. In the end, draw a few tiny circles inside the flower, and it's complete.

Place the flower on the third arrow.

Step 8

Move up the left and right anchor points in the newly created blue ellipse. Create a copy in back and make it darker. Rotate it slightly to the left. Right-click the mouse and Transform > Reflect. In the new window, enter Vertical, Angle 90 degrees, Copy. Then make a green Ellipse in the back and add a curve using the Arc Tool (no Fill color, stroke color shown below). The blue flower is ready.

Step 9

We want to add some leaves too. Remember the green branch we made for the third arrow before? Take a copy of it, but let’s change the stalk: instead of a straight one, make a stalk using the Arc Tool. Be sure to check Round Cap on the Stroke panel.

Step 10

Place the blue flower with the leaves on the third arrow closer to the arrowhead. Then use the Rounded Rectangle Tool to create three tiny rounded rectangles, to show that the flower is fixed to the arrow.

4. Create the Background

Step 1

Now that we have completed three decorative arrows, let’s arrange them as you want or place them like this:

Step 2

Be sure to delete the fill color and set the stroke color to blue. With the Rectangle Tool, draw a thick stroked frame for your illustration.

Step 3

Keep the frame selected and make a copy in front (Control-C, Control-F). Change the stroke color and now make the stroke weight thin.

Step 4

Go to Effect > Distort & Transform > Zig Zag... and enter the options you see in the image below or just make your own.

Voila!

Fantastic, You're Done!

Awesome work! Now you know how to create feathers, different branches, leaves, and flowers. You've learned how to make arrows with different arrowheads. After this tutorial you will be familiar with the Roughen and Zig-Zag effects, as well as the Warp effect and moving anchor points in basic shapes.

I hope you enjoyed this tutorial and got a lot more ideas to create thousands of arrows!

Want to improve your drawing technique? In our new course, Dynamic Gesture Drawing, digital artist Brian Lee will teach you the fundamentals of gesture drawing step by step. 

You will learn the importance of refining gestures into lines of action and simple shapes, creating strong silhouettes, effectively using negative space, and projecting ideas from a pose rather than just structural anatomy. Finally, you'll learn how to tell stories with different gestures. By the end of this course you should be able to draw any gesture you want.

You can take our new course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

Graphic designers can be a confusing bunch—sometimes it feels as if they’re speaking a completely different language. If you’re at the receiving end of ‘agency speak’, you might feel a little overwhelmed, but often the meaning behind complicated-sounding phrases is easy to deal with once you know how to translate.

This will be an indispensable guide to decoding designer jargon for anyone who’s relatively new to the world of design or just needs a refresh. Read on to learn more about the unique and frequently baffling language of designers...

1.‘We Need to Flush It Differently’

Nope, this isn’t anything to do with toilets. ‘Flushing’ actually refers to the alignment of text on a layout. 

There are several different ways that text can be aligned on the page, the most common being Align Left (the default option for English-language design software), Align Right, and Align Center. You can also Justifyall lines (which stretches lines of text across the whole text frame to create a solid block of text—a common tactic used in newspaper layouts to fit as much text as possible into columns) or Justifywith the last line aligned left or right. If you’re working with two-page spreads, such as for a book or magazine layout, you also have the option to align text Towards or Away from the Spine.

In Adobe InDesign, go to Window > Type & Tables > Paragraph to view the full range of alignment options.

Flushing text one way or another has the power to transform the look of your layout. Some of the more unusual alignment options are a great way of breaking the norm, adding more personality to large chunks of text. You can also make a layout appear more balanced by mixing up the alignment of different chunks of text—one corner aligned left, the opposite corner aligned right, for example. This prevents the layout from looking too heavy on one side.

• Typography
  Quick Tip: How to Align Your Ragged Paragraphs in Adobe InDesign
  Grace Fussell

2.‘Let’s Make It Breathe’

Your design hasn’t stopped breathing, but it might be struggling due to the sheer amount of ‘stuff’ on the page.

This is code for another nugget of designer speak—‘white space’. 

White space doesn’t even need to be white (yep, confusing)—it just refers to an ‘empty’ area on your layout. This can actually be filled with color or a background image, but it shouldn’t have any distracting elements, like text or strong graphics.  

Ever looked at an amazing magazine spread or a beautiful poster design and wondered just why it looks so good? Part of the reason is probably because the designer has allowed parts of the design to appear effectively blank to the eye. This allows a viewer’s eye to relax as they’re not being overloaded with visual content from all areas of the design, which in turn allows them to concentrate on the attractiveness of the busier elements. 

Though it’s not the most obvious element in a professional designer’s arsenal, white space is one of the most effective techniques for making layouts appear instantly and sometimes imperceptibly more attractive.

So make sure to give your designs a well-deserved chill pill and allow them some breathing space.

Want to train yourself to bring in more white space to your designs? Check out this simple tutorial on how to declutter a flyer design:

• Print Design
  How White Space Can Transform Your Adobe InDesign Layouts
  Grace Fussell

3.‘Make It Look More Flat’

Once upon a time, all anybody wanted was to make two-dimensional print designs look as if they were anything but. Instead, 3D, larger-than-life design effects were the order of the day. 

But that was a decade ago, and now the big buzzword in graphics is ‘flat’ design. This is related to the surge in popularity for vintage design styles, which use collage-like graphics and type to imitate lithographic printing styles. Digital design has taken flat design to new places too—flat-style icons, buttons and illustrations give websites and apps a minimal, simple look that makes them super-intuitive to use.

How can you achieve the desirable flat look in your own designs? Steer clear of gradients, shadows, metallic textures and anything else that makes a design feel too ‘real-life’. 

Consider replacing photos with illustrations, and keep your graphics simple, minimal and even a little childlike. Look to 1950s and 1960s print design for ultimate flat design inspiration.

Making a few small swaps in your designs will help you achieve the flat look in an instant—replace metallic or high-shine textures with papery or chalky texture instead; favor neutral, matte color tones over garish brights; choose embossing effects over drop shadows to imitate an on-trend letterpress look.

4.‘Bring in an Infographic’

If you don’t yet know what an ‘infographic’ is, don’t despair. It may be becoming a more widely used term, but it’s still a highly specific branch of graphic design.

The now hugely popular graphic style, meaning ‘information graphic’, is a more visual way of presenting data, such as statistics, survey results or scientific findings. A step up from your average chart or graph, an infographic might use illustrations, maps, typography or even interactive elements to present data in a creative way. Infographics tend to bridge the gap between graphic design and illustration, bringing together techniques and content from each field. 

If you’d rather not spend days slaving over custom-drawn illustrations, you’re in luck—an increasing amount of stock content is geared towards the infographics market, meaning you can source ready-made icons and illustrations tailored for data-led designs. Check out the huge selection of infographic vector elements over on Envato Market.

You can find out how you can create your own infographic elements directly into Adobe InDesign with this tutorial:

• Infographics
  Create a Super Simple Infographic Template in Adobe InDesign
  Grace Fussell

5.‘What’s the DPI/PPI of This?’

These might sound terrifying, but both of these shortened terms are only referring to the resolution of your raster (not vector, see note below*) designs. You want to aim for high resolution in your print designs, to ensure that the final result doesn’t appear blurry or pixelated.

DPI is ‘Dots per Inch’ and this is important to know about for print design particularly. A printer will generate the printed design via a series of dots. If there are fewer dots per inch (a low DPI), the result will be more pixelated. More dots per inch (a high DPI) creates a denser, more high-quality result. The standard minimum DPI for high-quality print design is 300 DPI. 

PPI is very similar, but refers to ‘Pixels per Inch’. You’ll notice that Adobe Photoshop works in PPI—if you make a raster image larger in Photoshop, you will automatically reduce the PPI, and thereby reduce the quality of the image and increase the visibility of pixelation.

When a designer says they want to know the DPI or PPI of an image, they are probably hinting that the image is currently at too low a resolution to be printed at a high standard of quality. Keeping the DPI above 300 and ensuring that you are aware of the final printed dimensions of the item will help you to keep tabs on the resolution and general quality of the graphics in your design.

* DPI and PPI only apply to raster images, which are made up of a series of colored dots. When you rescale a raster image, the colored dots can appear larger and more distant from one another, creating the dreaded pixelated effect. If you're working with large-scale designs, or simply want to make sure your graphics are optimum quality, you're better off working with vector graphics, which are scaleable.

Swot up on the technical issues you’ll need to consider when prepping for print with this useful guide:

• Print Design
  The Beginner’s Guide to Prepping and Sending to Print
  Grace Fussell

6.‘We Need to Change the Font/Typeface/Typography’

Here I present to you one of the biggest differences between what a client will say and what a designer will say.

‘Font’ is the digital version of a typeface—you download and install fonts, and apply them on your documents on-screen. When you come to print your artwork, the ‘font’ becomes a ‘typeface’—the printed incarnation of the font file. You’ll hear clients mostly asking for a ‘font’ to be changed, but most designers will probably say ‘typeface’. 

Even though they are different things, both the client and designer are hinting at the same thing. They both want the look of the type style to be different. Typefaces do have distinct personalities and characteristics—if the designer doesn’t think a serif is working, it may be because it looks too traditional or formal. Switching to a sans serif might make a design look more modern and minimal.

If you’re presented with a typeface challenge, try to extract what exactly it is that isn’t working—what characteristics does the current typeface bring to the design? Can you adjust the whole mood of the design by switching to something slightly different?

‘Typography’ might well include typeface, but it’s also much broader than that. Typography refers to the way that the type is arranged and formatted on the page. 

If the designer’s issue is with the typography on the design, this might refer to a whole range of things that come together to render how the text is arranged, such as leading (the space between lines of text), case (upper- or lower-case characters), tracking (the space between all characters) or drop caps (whereby the first or first few characters of a paragraph are enlarged). 

As typography is so broad, you’ll need to pinpoint what it is exactly about the arrangement of text that isn’t quite right—does it look too crowded, too spaced out, too large, too small? 

In every designer’s arsenal is a great range of classic and modern type styles, ready to be used on all kinds of layouts. Build up your collection with the fantastic range of fonts over on Envato Market.

Don't be in the dark about typography with this definitive A to Z guide to all things type:

• Typography
  The A to Z of Typography
  Grace Fussell

7.‘Let’s Create an Identity’

There’s no need for you to hastily forge a passport, Jason Bourne-style, as an ‘identity’ in design-speak only refers to a brand identity.

Most larger businesses have a brand identity, as do many individual products, but what does this mean? A brand identity is made up of visual markers which are unique to that business or product, such as a logo, mascot, or slogan. More developed identities might have their own color palette, typefaces (see 6, above), and graphic elements such as illustrations and/or photography which have been tailored to the brand.

When a designer wants to create an identity, they might mean a full-blown identity with all the bells and whistles, or they might mean just a logo design—the latter is quite common in agency pitch scenarios when time is tight. Make sure you know what’s needed before you create a whole complex identity from scratch.

• Branding
  How to Create Your Own Brand Guidelines
  Grace Fussell

If a client or designer wants to see a ‘range of identities’, this might mean they want to see a few, maybe three to five, logo designs that may or may not include the name of the company set in a suggested ‘brand typeface’ too. The strongest logo design(s) may then be refined, and the colors and style extended outwards to create the other parts of the identity.

Creating strong brand identities is no mean feat, but you can get started on a sure footing by following along the process for creating our very own Envato Tuts+ ‘Team Awesome’ brand:

• Logo Design
  Team Awesome: From Hand-Lettered Logotype to Vector in Adobe Illustrator
  Roberlan Borges

8.‘Can We Change the Grid?’

Be surprised if a client picks up on this (respect to them if they do!), but a designer won’t shy away from telling you if the grid on your layout looks a bit off.

Grids are the unsung heroes of successfully designed layouts; they are the basic building block for any design. Any layout can be divided into a series of square or rectangular sections to create a grid, making up the invisible columns and rows that section out elements on your design. You can insert a grid in most design programs (for example, in Adobe InDesign, go to View > Grids & Guides > Show Document Grid), which will sit behind the content on your document or artboard. 

Resizing sections of your grid to create smaller and larger areas will help to create balance on your layout and prevent it from looking too modular. For example, placing one image across four square sections of your grid and another photo in just one square section will look better than creating two equally-sized images.

Pick up tips for creating grids in artwork, as well as two other top tips to make your designs look instantly more professional, with this quick tutorial:

• Graphic Design
  Quick Tip: Three Ways to Make Your Designs Look Instantly Better!
  Grace Fussell

9.‘Send Over the Native Files’

This is enough to strike fear into any young designer’s heart. You’ve spent hours or even days poring over designs on your computer, only to get to the end of the process and hear that you need to find something called a ‘native file’. What on earth is it?

A native file is an industry term for the original digital copy of your artwork. So, for example, if you’ve been working on a vector illustration in Adobe Illustrator or Inkscape, you might have provided a JPEG or PNG version of the final illustration. If the client or agency also wants the ‘native file’, they want the original artwork file, perhaps in AI, or more commonly, EPS format. This means that the file can be edited by the client or other designers, allowing them to switch up colors or adjust graphics, for example.

If you’ve been working on an Adobe InDesign file, perhaps for a publishing project like a book or brochure, sending a native file is a slightly more complicated process. In this case, you need to first ‘package’ the file (File > Package)—this will gather up all the font files used in the document and all the images linked to the document, and place them into a new folder, along with a copy of the InDesign file. You also need to remember to provide an IDML copy of the InDesign file (File > Save As > choose InDesign CS4 or later [IDML]) if the intended recipient has a different version of the InDesign software to yours (for example, if you are using CC and they are using CS6).

Depending on who you are sending your artwork files too, you should exercise caution. If an agency has commissioned you to help with a pitch or other project, they may ask you to sign a document that assumes they will then own the copyright to your design. In this case, it is acceptable and common practice to provide the client with your native artwork files.

If you are acting not as a freelance services provider, but instead as an artist, it is in your interest to retain the exclusive copyright to your designs. You should be aware of this when sending artwork files to galleries or shops—often a high-resolution JPEG version of your design will be fit for purpose, and will help prevent others from editing or copying your work.

10.‘Let’s Make It More Commercial’

Whether you’re working for an agency or in-house, there’s one word you’ve got to get used to—‘commercial’.

‘Commercial’ is one of those words that has the power to suck the life force from a passionate designer or artist. This is because ‘commercial’ has the opposite meaning to ‘artistic’ or ‘creative’. Commercial design has one aim, and one aim only—to sell. Ads, magazine covers or flyers with a more commercial slant are more likely to convert to sales than more creative, ‘out there’ designs.

For designers, this can sometimes be frustrating, as commercial design is not the most creative of outlets. If someone wants something to look more commercial, they want it to appear more palatable, more culturally on-trend and less offensive or challenging to the public eye. 

If your client or colleague wants your design to appear more commercial, you might have to be prepared to tone it down a bit, or modify elements of your design to make it appear more fashionable or appealing to a mass market. 

• Flyers
  10 Design Tips to Make a Professional Business Flyer
  Grace Fussell

But do not despair—commerciality and creativity can be balanced, and this can lead not only to favorable sales, but also to iconic, creative designs. 

Book covers are a perfect example of this compromise. Particularly for vintage editions or literary novels, book designers are often encouraged to be as creative as possible. The publisher might then suggest ways of commercializing the design further, adjusting color or typography, for example, to help the cover appeal to different demographics and markets.

Discover how to tailor a classic book cover for a modern market with this tutorial:

• Book Cover
  How to Design a Classic Book Cover With a Modern Twist!
  Grace Fussell

Congratulations! You Can Now Speak ‘Designer’

Designer jargon might sound intimidating, but with some sharpened translation skills you’ll have no problem decoding the real meaning. So when your client or agency boss asks for one of the following when you next present your designs, you’ll know exactly what they’re talking about:

1. ‘We need to flush it differently’—translation: ‘We need to change the alignment of the text.’
2. ‘Let’s make it breathe’—translation: ‘Make it less crowded, with more white space.’
3. ‘Make it look more flat’—translation: ‘Strip out any 3D elements, like gradients or drop shadows.’
4. ‘Bring in an infographic’—translation: ‘Bring in some graphics, icons or charts to visually express the data or information.’
5. ‘What’s the DPI/PPI of this?’—translation: ‘You need to improve the resolution of your images.’
6. ‘We need to change the font/typeface/typography’—translation: ‘Make the type style (of the text) look different.’
7. ‘Let’s create an identity’—translation: ‘Let’s create a brand identity for the company/business/client, probably starting with some ideas for a logo.’
8. ‘Can we change the grid?’—translation: ‘The overall layout and arrangement of elements on the page needs some improvement.’
9. ‘Send me over the native files’—translation: ‘Send me your original digital artwork files, either in editable AI, EPS or PSD format, or as packaged InDesign files.’
10. ‘Let’s make it more commercial’—translation: ‘Tone down the arty stuff and make it appear more on-trend, with mass market appeal.’

Do you have any other nuggets of designer jargon you’d like to share the translation for? I’d love to hear about them in the comments below!

Summer heat is a perfect time to have a cold glass of fresh homemade lemonade to detox and refresh ourselves. In this tutorial you’ll learn how to make a trendy flat-style illustration of a lemonade jar, using basic shapes and working with layers and Blending Modes in Adobe Photoshop. Then we’ll make our image look detailed and unique by adding grainy textures with the help of grungy Adobe Photoshop brushes, which you can purchase from Envato Market or select from the default sets.

You can use your graphic tablet for more convenience, but there are no hand-drawn elements in this illustration, so you can easily make it with your mouse! What is more, these techniques can be applied not only to make a flat jar with drinks, but also flat meals and dishes or even flat cityscapes or any other kind of flat style illustration. These effects will make any of your artworks look fancier. Let’s try it out!

1. Create the Glass Jar Base From Geometric Shapes

Step 1

Make a New Document of 2480 x 1748 px size (horizontal orientation of A5).

Arm yourself with the Rounded Rectangle Tool (U) and let’s make the body of the jar from a 585 x 820 px shape.

Head to the Properties panel (Window> Properties) and from here we can adjust some parameters. Our rectangle remains a vector Live Shape, until we rasterize it manually, so we can change its size without quality loss. 

We can also change its Fill color here by clicking the Fill color square and selecting one from the swatches or from the Solid Color panel, if we click the colorful icon in the top right corner of the drop-down swatches menu. Let’s set the Fill color to a very light turquoise.

Finally, we can change the Corner Radius of the rounded corners. Let’s set it to 85 px, making the corners of the jar smooth.

Press Control-J to Duplicate the shape layer, so that we have two identical shapes one above the other. We will need the copy a few steps later.

Step 2

Let’s add a 350 x 85 px shape on top for the neck of the jar. Set its Corner Radius to 20 px. Keeping the Rounded Rectangle Tool (U) selected, select both shapes and click the right mouse button to open the context menu. Click Unite Shapes, merging them into one Live Shape.

Step 3

Now we’ll add a glass rim on top of the neck. Make a 395 x 40 px rounded rectangle with 20 px Corner Radius. In the Properties panel, change its Fill color to a lighter turquoise.

Press Control-J to duplicate our shape and move it on top of the rim. Let's make the shape a bit larger. You can do this by changing its size in the Properties panel. Otherwise, press Control-T for Free Transform Path and make the copy a bit larger by holding Alt-Shift and using the Move Tool (V) to expand the shape. 

Step 4

Make a 340 x 80 px orange rectangle with 20 px Corner Radius for the cap of the jar. Send the shape To Back by either pressingShift-Control-[ or dragging it down in the Layers panel, thus placing the shape beneath the glass rim.

Step 5

Now it's time to use the copy of the jar body that we made in the very first step! Find it in the Layers panel and drag it on top of the body. Change the Fill color of the copy to light blue.

Step 6

Keeping the Rounded Rectangle Tool (U) selected, decrease the size of the shape, depicting water inside the jar.

Step 7

Now create another rectangle, covering the top of the water shape. Keeping the Rounded Rectangle Tool (U) selected, select both shapes and click the right mouse button to open the context menu. Subtract Front Shape, making the top of the jar empty.

By the way, our shapes are still editable! And we can change the size of the subtracted shape if we click it with the Direct Selection Tool (A) and press Control-T for Free Transform Path.

Step 8

Now switch to the Rectangle Tool (U) and make a 35 x 1110 px light-yellow vertical stripe for the straw. Select all shapes in the Layers panel and Align their horizontal centers from the control panel on top.

Now select only the straw and press Control-[ several times, moving the layer down, until you place it between the jar body and the glass rim. Now the straw looks as if it is inside the jar.

Step 9

Let’s shape the handle of the jar. Use the Rounded Rectangle Tool (U) to make a turquoise shape and then another, smaller shape on top of it. Select both shapes, while the Rounded Rectangle Tool (U) is still selected, and Subtract Front Shape to cut the top shape out. Send the handle to Back by pressing Shift-Control-[, and make its fill color a bit darker than the body of the jar.

2. Make a Lemon From Basic Shapes

Step 1

Now let's prepare the main ingredients for our lemonade. Take the Ellipse Tool (U) and make a 320 x 320 px yellowish-orange circle. 

Duplicate (Control-J) the shape and use Free Transform Path (Control-T) to make the copy smaller. Fill the copy with light yellow for the flesh of the lemon. Then add a third shape on top, making it a bit darker and smaller.

Step 2

We need to divide the top circle in order to shape the segments of our lemon. Make the top circle invisible, so that it doesn’t distract us, by clicking the tiny eye icon in the Layers panel.

Take the Line Tool (U) and make a thin vertical stripe of 9 x 400 px across the lemon. Align the shapes, if needed, to make the centers match.

Duplicate (Control-J) the stripe, press Control-T and rotate the shape 90 degrees, placing it horizontally across the lemon.

Step 3

Make two more copies of the stripe, rotating each of them 45 degrees. Finally, select all the stripes and, with the Line Tool (U) selected, click the right mouse button and Unite Shapes, merging all the stripes into a single layer.

Step 4

Now make our lemon circle visible again in theLayers panel. Select both the circle and the merged stripes. Keeping the Line Tool (U) selected, press the right mouse button and Subtract Front Shape to cut out the stripes.

Great! This way we’ve formed the segments of our lemon.

Step 5

Let’s also shape the body of the lemon. Duplicate (Control-J) the biggest orange circle and move the shape to the right.

Take the Rectangle Tool (U) and make a narrow 86 x 340 px shape, placing it above the duplicated circle.

Step 6

Keeping the Rectangle Tool (U) selected, select both the circle and the rectangle, click the right mouse button and Unite Shapes. Finish up with the body of the lemon by forming a tiny bump on the right side of the shape with the help of the Ellipse Tool (U).

Step 7

Let’s make one more detail for our lemonade: a leaf of fresh mint. Take the Custom Shape Tool (U) and find the Raindrop shape in the drop-down list of Shapes, which is located in the control panel on top.

Make a 190 x 300 px shape and fill it with dark turquoise.

3. Paint the Objects With Textured Brushes

Step 1

Now that the basic shapes are ready, let’s add a touch of texture to make them more detailed and three-dimensional. 

First of all, let’s select the parts of the lemon circle and Group (Control-G) them. Then group the lemon’s body and, finally, group these two groups into one. Keeping our layers neat and organized will help us to find and edit the shapes faster.

Now let’s select the lemon’s body layer, hold Alt and click the Create a new layer button at the bottom of the Layers panel. In the pop-up New Layer window, tick Use Previous Layer to Create Clipping Mask. Now the new layer will be linked to the lemon’s body layer. You will see a tiny arrow next to our new layer in the Layers panel, indicating a linked layer.

Such layers allow us to paint inside the edges of the selected shape, which helps to speed up our work, as we don’t need to use the Eraser Tool (E) in order to clean up the edges. Let’s try it out!

Select the linked layer and take the Brush Tool (B). Click the Right Mouse Button to open the list of brushes. Select any grungy textured brush to your liking, either from your collection of default Photoshop brushes or by trying out one of these amazing textured brushes from Envato Market, which will give your artwork a new fresh look.

I’ll be using a Dry Brush 1 #2 from the default M Brushes set. You can Append or Replace the brushes by clicking the tiny cog icon in the top right corner of the brushes list. Just find your set and there you have it!

Select a dark-orange color in the Color panel and try making a few strokes above the lemon’s body.

Step 2

If you want to add more variety to the brush strokes, try playing with the settings in the Brush panel (Window > Brush). Here you can change the Spacing or make the brush textured or even wet-edged.

Add more textured strokes to the body, varying the color from dark orange to light yellow.

Then select the biggest circle of the lemon, hold Alt and make a new linked layer. Paint over the orange circle of the lemon to make it textured, too.

Step 3

Now let’s make the segments of the lemon textured as well. Add a linked layer to the segments and use the textured brush to paint over it, using dark orange and bright yellow. 

You can vary the Opacity and Flow of the brush in the control panel on top, making the brush strokes light and transparent. I’m using a graphics tablet, so I keep the Pressure for Opacity function turned on. If you’re working with your mouse, that’s totally fine—just play with the Opacity to adjust the thickness of your strokes.

We can also use the [ and ] keys to change the size of the brush faster.

Step 4

Make a New Layer for the minor details. Now I open a Dry Media Brushes default set and use the Charcoal Pencil brush to draw a few tiny red strokes above the segment. Continue adding strokes, making the lemon spotty. Use other colors as well to add variety to our image by switching to orange, bright yellow and white.

Step 5

Add a few spots to the lemon’s body as well. Now it looks complete!

Step 6

Let’s add a couple more variations of the lemon slices. Duplicate the lemon circle group by selecting it in the Layers panel and pressing Control-J. Let’s cut it in half, making a slice. Keeping the group selected, click Add layer mask icon at the bottom of the Layer panel to add a Clipping Mask to the whole group.

Now use the Rectangular Marquee Tool (M) to select the upper half of the lemon. Click the mask in the Layers panel and use the Paint Bucket Tool (G) to fill the selected area with Black color. This will make the top of our lemon invisible. Now we have a nice slice of half-lemon!

Step 7

Let’s apply our techniques to the leaf. Create a new linked layer and use a textured dry Brush to paint over the leaf. Make one of its halves lighter. Add darker blue strokes on the bottom of the leaf.

Step 8

Add a gentle highlight on top of the leaf, using a light-turquoise color. Use the Charcoal Pencil brush to draw the veins of the leaf: dark blue on the dark half and light turquoise on the light half.

Step 9

Now let’s color our jar. Select the body shape of the jar and add a Linked Layer. Use the Dry Brush 1 #2 (or any other textured grainy brush to your liking) and start painting with dark turquoise along the edges of the jar.

Step 10

Add more turquoise along the edges and then switch to dark blue. Paint above, adding more contrast and color.

Step 11

Add a Linked Layer to the water shape and make the water shape textured by painting above it. When you’re happy with the result, work at the handle of the jar, adding dimension to it.

Step 12

Now move to the glass rim. Remember to add a new linked layer to every shape that you want to color. Make the elements three-dimensional by using the darker color at the edges and adding a gentle highlight in the center.

Step 13

Now let’s make a polka-dot pattern on the cap of the jar. Select the cap layer and add a new linked layer to it.

Select a Pastel Rough Texture brush from the Dry Media Brushes set or use any other round brush to your liking. Make a white spot on top of the cap. Add more spots, forming a pattern. Finally, selected the pattern layer and set its Blending Mode to Overlay on top of the Layers panel. Lower the Opacity of the layer to 78%.

Step 14

Let’s shape the straw. First of all, make a new Linked Layer and draw diagonal pink stripes, using the same textured grainy brush as you did before. Now let’s make the straw more three-dimensional by adding a couple more linked layers.

Switch one of the linked layers to Screen Blending Mode and paint along the left edge of the straw with yellow to make a highlight. Switch another linked layer to Multiply Mode and paint along the right edge with pink to add a gentle shadow.

Lower the Opacity of the layers if the shadow or highlight turns out to be too intense.

Step 15

Let’s add a touch of blue to the part of the stroke inside the jar. This way we’ll show that it is behind the glass surface. Add a new linked layer to the straw. Take the Rectangular Marquee Tool (M) and select the bottom piece of the straw, which is inside the water. Fill the selected area with light-blue color and switch the layer to Multiply Mode.

We can add one more linked layer to the straw and this time fill the whole shape inside the jar with light-blue color. Switch it to Multiply Mode, too, and lower the Opacity a bit.

4. Build a Balanced Composition

Step 1

Let’s see, what do we have to make fresh lemonade? We have a whole lemon (I’ve made it by attaching two parts of the lemon body to each other), a half-lemon, a lemon circle, a slice and a mint leaf. Let’s mix everything together!

Step 2

Let’s place some lemons on both sides of the jar. Use the Shift-Control-[ and Shift-Control-] key combinations to rearrange the shapes as needed.

Duplicate the lemon circle and put a couple of copies inside the jar. Let’s edit these shapes a bit. Copy the biggest circle of the lemon and place it on top of the other circles. Change its fill color to blue and switch to Multiply Mode, lowering the Opacity to about 60%. This subtle touch of blue gives our lemons a realistic look, showing that they are floating in the water.

Step 3

Add more slices inside and outside the jar. Start decorating the whole scene with leaves.

Step 4

Now duplicate the water shape and place the copy on top of the lemons. Switch to Multiply Mode, making it look a bit more true to life. Add more leaves to balance the composition.

Step 5

Use the Charcoal Pencil brush to make a thin, arched stroke for the stem of the plant. Attach a few berries by making circle spots. Duplicate the plants and decorate our jar. Use Edit> Transform > Flip Horizontal to mirror some of the shapes.

Step 6

Let’s finish up our illustration, making the composition look balanced. Fill the Background layer with light-yellow color. Create a New Layer on top of the Background layer and use a textured brush to make a gentle shadow underneath the jar.

Wonderful! Our Glass Jar of Fresh Lemonade Is Ready!

Great job, my friends! We’ve learned some useful tips and tricks while working with geometric shapes, linked layers, clipping masks and making our image unique by applying grainy textures with the help of the brushes.

As you can see, a touch of texture gives a really nice look to a flat illustration, making it look unique and detailed. You can apply this knowledge not only to creating a fancy jar, but also to making any other kind of flat illustration look different.

Check out the following tutorial and see how you can make simple flat weather icons look different, when you apply a grainy texture!

• Icon Design
  How to Create Flat Weather Icons in Adobe Photoshop
  Yulia Sokolova

Have fun!

In this era of inbound marketing, one could be forgiven for thinking that print is dead. After all, landing pages, social media, emails and websites are a core part of any successful small businesses’ marketing game plan.

Believe it or not, there’s still impact and influence in traditional, old-school marketing. Print is alive and well, with the Content Marketing Institute declaring that print can complement your digital-marketing strategy.

Small businesses, creatives and agencies can pleasantly surprise their leads by presenting them with longer content that they can turn over in their hands and take their time with. Certainly, this is a great alternative to today’s obsession with 140-character limits and multiple Facebook updates each day.

Those looking for a marketing format that their leads can really sink their teeth into should check out our best Magazine Templates on Envato Market.

You can use them for your next marketing campaign or to start your own publication. Then distribute them through print or digitally as PDFs. They are professionally designed and setup for quick customization to your project needs.

Creative Magazine Templates

Here are our 20 best-selling, recently released, InDesign magazine templates with creative layout designs:

1. Pure Magazine - Creative InDesign Template

Taking a minimalist approach to print design, this magazine template is ideal for any small business that favors a bare-bones approach to its print marketing. With a lot of room for feature articles, interviews, Q&As and striking images, this template can become the centerpiece of your print-marketing strategy. 

It comes with InDesign INDD graphic files and features Montserrat, Varela Round and Bebas Neue font styles. Overall, it’s 44 pages of canvas for your content-marketing or creative print magazine vision.

2. 50 Pages Creative Magazine Layout

Great value abounds in this magazine template that comes with 50 unique pages overall. That’s enough capacity to create a high-quality magazine to deliver to your leads and clients, complete with stories, features, interviews and more! 

With single and dual-column alignment, the template also showcases a card-based layout for easy reading and legibility. It comes with three, premade cover templates and is print-ready for immediate use.

3. Minimal Modern Clean Magazine Design

Readability is very important for any magazine template, and this modern and clean magazine doesn’t disappoint. Featuring a lot of strategically placed white space to guide readers’ eyes to your most vital content, it offers a dual-column design that brings your marketing message across with no uncertainty. Its 28 pages are very easy to customize to your brand. It comes in both Letter and A4 sizes in InDesign.

4. Magazine Template Bundle - InDesign Layout V3

Multipurpose design use is valued by everyone from creatives and agencies to small businesses, and this InDesign magazine template doesn’t disappoint. Ideal for any industry, this template features a clean, cutting-edge and crisp layout that brings your business’ marketing message straight into the hands of your leads and customers. With full customization and Adobe InDesign CS6, CS5 and CS4 formats, it lets you tell your brand story with total control.

5. Simplify - Clean Magazine Layouts Vol. 2

When it comes to print marketing, the simplest and most minimalistic is sometimes the most effective. This magazine template epitomizes this design approach to a tee. 

It features generous white space and copious room for fonts and images to complement each other on any page. It comes with InDesign INDD files and a 24-page layout. It’s great for agencies and small businesses of all shapes and sizes.

6. A4 InDesign Letter Magazine Template

Multipurpose magazine templates like this one are ideal for small businesses of all kinds. Take control of your marketing message and impress your client base by giving them a print magazine in their hands, which allows them to stay longer with your marketing message. 

Print-ready and available in A4 and Letter sizes, this fantastic template comes with 40 pages overall. Each part of the layout designs can be customized to your brand message.

7. Multipurpose Magazine Template (INDD)

Featuring attractive-to-the-eye grid and column layouts, this magazine template is well-suited for agencies, small businesses and creatives looking to deliver a print-based marketing message into their customers’ hands. 

Its neat organization and clean design ensures that your can put high-quality information on paper. The template comes with InDesign INDD files, a fully customizable layout, and 25 unique pages.

8. Vibrant Magazine Template Design

No matter what creative agency or small business you run, you can make excellent use of this fresh and multipurpose magazine template. It features various free fonts, automatic page numbering, and a column-based layout for easy absorption of your brand storytelling. 

Energetic magazine layout templates like this allow you to put something more substantial in your clients’ hands. Print-ready with full-bleed, it also offers 30 unique page designs.

9. Clean InDesign Magazine Template

Small business owners can’t go wrong with this clean column-based and paragraph-styled template that uses print marketing to maximum value. Your readers will thoroughly enjoy the generous word spacing; easy-to-read, chunked paragraphs; and beautiful typeface. 

Fully customizable to your brand’s marketing message, this magazine template is ideal for agencies that want to show off a clean and minimalistic brand story. Print-ready, it features 30 pages and 12 InDesign CS4 and CS6 files to work with.

10. Cool Retro Vintage Magazine Design

This attractive throwback to the magazine layout templates of a bygone era can hook and inspire your leads. Featuring a vintage look that evokes memories of a 1960s print magazine, this unique template is also clean and simply designed, so your marketing message can be clearly conveyed. With 33 pages and different image-display options, it's print-ready and fully customizable for your creative or agency purposes.

11. The Relevant Magazine - Elegant Layout Design

Perfect for creatives and agencies looking to show off their unique approach, this template is characterized by a stylish layout. Adorned with graphic-design touches galore, this magazine template demonstrates how effective a layout can be if it combines simplicity with creativity. You’ll be thankful for its easy customization and multipurpose applications! It’s ready to go with Adobe InDesign CS4, CS5, CS5.5 and CS6 compatibility.

12. 40 Pages Minimal Design Magazine INDD

Superb value and clean, easy-to-read minimalism combine in this amazing magazine template. With InDesign INDD graphics files included, it’s ready to be used as a complement to any well-structured content-marketing strategy. 

Put a juicy, long-form marketing message into your customers’ hands, as this format is perfect for in-depth stories, interviews and feature articles. Fully customizable, the template features Raleway, Bebas Neue and Tall Films fonts.

13. Magazine Template - InDesign 40 Page Layout V7

A great value among our magazine templates, this design features rich and creative content that’s going to make an impression on your reading audience. With readable typeface, a clean and well-organized grid layout, and attention-grabbing headlines, this magazine can make your marketing message come to life in your prospects’ hands. Thanks to Adobe InDesign graphics files, it’s a cinch to edit and customize to your needs!

14. InDesign A4 Print Magazine Template 2

55 pages and four, unique covers combine to create a magazine template that’s bound to put rich, high-quality content into the hands of your leads and customers. 

This template provides your readers with a well-designed, chunked paragraph layout that makes it easy for them to understand your brand story. It comes in A4 size and features Salome Regular, Roboto and Cheddar Jack font styles.

15. Fashionable InDesign Magazine Template

Print-ready and bursting with style, this multipurpose magazine template can help small businesses complement their content-marketing efforts with ease. Ideal for use in any industry’s promotional materials, it features 30 pages that are all fully customizable. This puts you in total control of your brand story and marketing message. The template also features free fonts, paragraph styles and an A4 size.

16. Cultura Minimal Magazine Template

Words that best describe this magazine template are “stylish,” “elegant” and “creative.” Treat your audience to a 38-page read that can efficiently support your overall marketing endeavors. 

Whether it’s to sell your brand story or promote new products, putting a beautifully designed magazine into your customers’ hands is a recipe for success. This template comes with five different fonts, easy customization, a minimalistic design, and is print-ready out of the box.

17. Flexible Magazine Template - Creative Layouts

Whatever industry you’re in, this template will serve your overall marketing needs very nicely. Not all magazine layout templates are as flexible and multipurpose as this one is, which makes it a stunning complement to any well-thought out content-marketing strategy! 

Small business owners will have an easy time using its column-based layout to design the most readable magazine for their clients. With full customization features, this template is print-ready and comes with 28 pages.

18. Simple, Creative Magazine Template Design

Few magazine templates use minimalism as effectively and decisively as this gorgeous design. Featuring a center-alignment format and plenty of generous room for high-quality, professional images, this template is easy to pick up and read. 

Your customers will enjoy its legibility, as they read through your marketing messages with clarity. Boasting 26 InDesign pages in total.

19. Modern Magazine - Multiple Print Design Layouts

Clear paragraph styles, clean layouts, and copious amounts of white space make for an effective magazine template. This design is characterized by a forward-looking modernity that makes its content a pleasure to read. 

Give your leads and prospects some heavy-duty content that they can dig into. This template is ideal for creatives and small businesses. It is print-ready and compatible with InDesign CS4 and up.

20. Stylish Multipurpose Magazine Vol. 3

Magazine templates like this brochure design are too good to pass up. Creatives, agencies and small businesses can breathe easy knowing that its multipurpose design makes it an ideal complement to any industry’s content-marketing tactics. 

All you have to do is just drop in your text and images, and it’s all print-ready! It’s 28 pages long and comes in both A4 and Letter sizes in InDesign format.

How to Design a Print Magazine

Anyone who seriously believes that print is dead is simply not paying attention! In an era of digital marketing and short attentions spans, print is a breath of fresh air and a pleasant surprise that your audience will appreciate. They’ll appreciate longer-form content that’s palpable and gives them more in-depth info than a simple landing page or tweet.

Even though our deep selection of Magazine Templates on Envato Market will let you effortlessly complement your inbound marketing with print advertising, you still need to know how to design a readable magazine. Here are some pointers:

1. Take care of typography design. You’ll want to pay close attention to both the text size and how your typography is set. Magazines aimed at a younger demographic can get away with smaller typefaces, yet a print magazine generally tends to offer better legibility and readability when you’re using serif fonts.
2. Make your content readable and legible. This is a biggie! Without presenting your magazine’s articles and other content clearly, you risk losing readers and your audience because they’ll get frustrated with a format that’s illegible. To make it easy to read, design your magazine text to be frequently broken up by attractive and high-quality images. At the same time, ensure that your text is chunked into shorter paragraphs.
3. Do a final check before printing. Before you’re ready to print your magazine template, ensure that it’s totally perfect. This means going over everything—from the text, to the images, to the cover—with a fine-toothed comb. There’s nothing worse than printing your magazine, only to discover a glaring error that needs to be corrected.

Here are more design tips to make an impact with your magazine: 

• Magazine Design
  10 Tips for Designing High-Impact Magazines
  Grace Fussell

Get Yourself a Magazine Template!

Don’t let the chance to buy magazine templates pass you by! They will help your content-marketing strategy by giving your audience richer and more in-depth content they can really sink their teeth into. Browse through our huge selection of creative Magazine Template Designs today, and find just the right one for your business.

Drawing from imagination sounds cool, but we rarely know enough about the subject to draw it perfectly. You could try and guess, just to impress others with your guessing skills, but is it really worth it? Using a reference to support your memory isn't cheating. It's just getting know what you're trying to draw!

There are three main ways of using a reference:

• Visual tracing: you look at a reference and try to copy every line and every shade.
• Inspiration: you look at a reference to induce some kind of visual idea.
• Support: you look at a reference, but you copy only a chosen part of it.

That first way, indeed, looks like cheating, because it's not really your creation. You can only impress people with your manual skills this way. The other two ways, however, are a recipe for success!

Let's say you want to draw a wolfish bull with ruby horns. You can't find a direct reference for this creature, but you can easily find photos of wolves, bulls, and rubies. If you don't copy them, but rather use a part of each to incorporate into your artwork, you'll get something completely new without guessing. And the end result will look as if you knew what you were doing!

In this tutorial I'll show you how you can use photo references to achieve the right perspective, pose, proportions, silhouette, anatomy, and details of your imagined creature. You don't need to follow my actions strictly—rather, you should understand why I do them. Each case is different—sometimes you'll only need one reference, and sometimes you'll work with them from start to finish. I'll show you the most complete way, so that you know all the options.

Tutorial Assets (Optional)

These are all the materials I will be using in this tutorial. Feel free to find your own, depending on what creature you want to create.

• Elk photo(pose reference)
• Horse photo(proportions reference)
• Bull photo(silhouette reference)
• Lion photo(head reference)
• How to draw deer tutorial (anatomy reference)
• How to draw cows tutorial (anatomy reference)
• Horse photo(lighting reference)
  

1. Find the Right Pose

Step 1

When the idea in your mind is so huge, it's hard to limit it to that first line, especially when the first lines become a base for everything later! That's why it's good to start with nothing spectacular but a pose of the creature.

But posing isn't easy, either. You need to know perspective, anatomy, and proportions even for a seemingly simple sketch. However, if you find a good reference, all these are taken care of.

My goal is to draw a deer, but not an ordinary deer. I want it to look royal and powerful, like a beast that doesn't flee when approached, but rather proudly stands its ground. The elk in this photo looks nothing like this, but I really like its pose. Let's use it!

If you draw digitally, feel free to place the reference somewhere in the canvas, with a lower Opacity. If you draw traditionally, you may find it useful to print your reference, even if it's small and in black and white.

Step 2

Let's copy the pose and the pose only, because that's all that interests us. First, imagine (or draw) points on the reference that define an outline of the body.

Draw them exactly the same way in your preferred scale.

Step 3

Use the dots to copy a few lines that will make the body outline clear. Again, you don't need to draw directly on the reference—these should be the lines you can see without making them 100% obvious.

Step 4

Use a set of points to measure and copy the length of the limbs.

Step 5

Connect the dots to create a simplified version of limbs.

Step 6

Add the head and neck using other lines as points of reference.

Step 7

Establish the perspective of the head with as few lines as possible.

Step 8

Take a closer look at the joints in the legs and the hooves, leaving nothing to guesswork.

Step 9

Your sketch should now have enough lines to recreate perspective lines from them. They will be useful as a reference for further modifications.

2. Adjust the Proportions

Step 1

We have the pose now, but the proportions are not necessarily what I wanted. This may happen if you take a pose from a completely different animal than you want in the end. But that's the power of using multiple references—they're flexible!

Elks have a stocky body with thin legs, which gives it all an unbalanced look. I want my deer to have the elegance of a horse, so I looked for a reference presenting the side view clearly.

Step 2

Imagine or draw the basic pose lines. You can add some new ones, if they're important for defining the silhouette.

Step 3

Adjust the pose to the new proportions. If you draw traditionally, you may need to use another sheet of paper for it.

3. Add the Body Shape

Step 1

This was like a skeleton, so now we need to add some body to it. I want my deer to look powerful and strong, so I'm going to use a bull's body for this purpose.

Start by defining the clearest forms:

Step 2

Adjust the hooves.

Step 3

Carefully analyze the legs. Try to convert them to simple shapes and to recreate them in your sketch.

Step 4

Adjust the torso, staying faithful to the "horse" silhouette you have established before.

Step 5

Add the neck.

4. Create the Head

Step 1

To create a powerful version of a deer, I decided to mix its head with a lion's.

You need to place both references next to each other to clearly see the difference and similarity. Analyze them to understand what makes deer a deer and a lion a lion. You may also need more references to understand certain structures.

Step 2

Create the head, copying most features from the deer's head (it must stay a deer!), and adding some from the lion's.

5. Add the Details

Step 1

Most of the body is well defined now, so let's add the "skeletons" of the details.

Use the first reference once again to create the antlers. If you rotated the head in the process, you'll need to find another reference for them.

Step 2

To stress the fact that my deer isn't a normal deer, I have modified the antlers using the "real" ones as a reference.

Step 3

Add all the other details. You can draw them from imagination, or use a lot of other references, for example for the deer mane.

Step 4

Time to make it all more detailed. Make the anatomy clearer and sketch everything you want to see in the final version.

Whatever animals you base your creature on, chances are I've already written a tutorial about them! Check them out to find a reference for anatomy. Besides cows and horses, we've got tutorials about:

• Dogs and wolves
• Small cats
• Lions, tigers, cheetahs, snow leopards
• Leopards, jaguars, cougars, lynxes
• Bears
• Birds
• Foxes
• And many more!
  

6. Finish the Picture

Step 1

Finally, you can start drawing the final version. Most of the body is clearly established, but you still may need some references for details, for example for the exact shape of the hooves or nose. Even the flow of fur shouldn't be guessed!

Step 2

The last way to use a reference is as a so-called "lighting reference". Find a creature with a similar pose to yours, shaded in a way you'd like to apply to your picture.

Step 3

Edit it in Photoshop or another program to first convert it to black and white...

... increase its contrast...

... and limit the number of shades (for example by using Filter > Filter Gallery > Artistic > Cutout).

Step 4

Shade your creature using the previous picture as a reference.

Your Creation Is Finished!

We have created a mighty deer creature using references as a support for our imagination. Photos of an elk, horse, bull, and lion have been combined to create a new kind of creature. I hope I managed to convince you that using references isn't cheating, and that forcing yourself to draw from memory only is pointless. It takes many years to achieve mastery at drawing, but you don't need to wait this long to be proud of your work!

Portraits are not easy to paint from imagination. They're not only about anatomy, but about the spirit of the person hidden in the facial features and the expression. If you also consider the need to find the right pose, right lighting, right colors, and right technique, it becomes impossible to paint a good digital portrait without a reference.

But it doesn't mean you're doomed to use imperfect photos to create a portrait of your imagined character. Did you know that Adobe has a program designed to, literally, create a character? Of course, it's not perfect, but you can use it to create a highly customized base for a digital painting.

Fuse is basically an advanced character editor, where you can add and modify all the elements of the body. Once you create a character, you can import it to Photoshop CC, where you can adjust the pose and lighting. This way you get 80% of your painting done before you even start! In this tutorial I'll show you exactly how to do it.

Disclaimer:

• For now, Adobe Fuse is still in the development stage, and it can be quite buggy at times.
  
• Although you don't need a Creative Cloud subscription to use Fuse (only an AdobeID is required), Photoshop versions lower than CC don't handle the Libraries necessary to import a 3D model from Fuse. If you have Photoshop CS6 extended, you can still use this tutorial, but only after using the method described in this Adobe forum thread.
  

1. Create the Face in Adobe Fuse

Step 1

Open Adobe Fuse.

Step 2

Pick the head that looks the closest to your idea.

Step 3

Switch to the Customize tab.

Step 4

Find the Face and Head lists and play with their sliders to create the desired effect. The names here may be slightly ambiguous, so if you aren't sure how something works, just drag the marker to one of the extremes. You can easily reset a slider by typing the value 0.

Attention: an inconvenient bug may occur here, making the face change only when you hover your cursor over it.

Step 5

If you switch to the Texture tab, you'll have a chance to play with colors. Be very careful here—it's easy to create an unnatural effect this way.

Step 6

If you're done with the face, go back to the Assemble tab and add all the other parts of the body. This is necessary to move on.

Step 7

The Clothing tab should light up when you're done. Switch to it to add hair.

Step 8

Once you've picked the hairstyle, switch to the Texture tab to adjust the colors. You should also pay attention to the Texture Resolution. Theoretically, the bigger the better, but we'll be working in 3D and this consumes a lot of RAM. Make sure you've got a powerful computer before you pick something higher than 512 x 512!

Step 9

If you feel ready, move your cursor to the upper right corner and click Save to CC Libraries.

Give your file a name and choose a library to save it to. Saving may take a while, depending on the size of the textures you have used.

2. Prepare the Pose of the Head

Step 1

Create a New File in Adobe Photoshop. Again, the bigger the resolution the better, but consider the power of your computer first.

Step 2

Open Window > Libraries and load your chosen library. Drag the character into the canvas.

Step 3

Open Window > 3D and select Hair_Skeleton. Then open Window > Properties and click the mask icon. Here you can choose an expression for your character.

Step 4

You can also use this panel to adjust the position of the head and eyes.

Step 5

Use the Crop Tool (C) to limit the canvas to the head and shoulders.

Step 6

Use the Move Tool (V) to rotate the model and create the pose you need.

Hint: if you get a message about not enough memory, try Edit > Purge > All to free some.

Step 7

Use the Crop Tool (C) once again, this time creating a final frame.

3. Set the Light

Step 1

I'm going to light the character using three-point lighting. In order to better see the lights, we need to turn off the global ambient light.

Go to the 3D panel and select Environment.

In the Properties panel, turn off IBL.

Step 2

Select Infinite Light—this is for now the only light in the scene.

Use the Move Tool (V) to set the light properly. This is incredibly easy, especially in comparison to shading from imagination!

Step 3

In the Properties panel you can adjust the Intensity and Softness of the light. You will see the changes in real time, so feel free to experiment until you find the best outcome.

Step 4

In three-point lighting we need three light sources. The previous one was called key light, and its purpose is to reveal the form of the face.

Let's add another light source. Click the light-bulb icon and select New Infinite Light.

Step 5

Create a second weaker New Infinite Light, as a fill light, that will fill the shadows created by the key light.

Step 6

Finally, add the third New Infinite Light, as a rim light, to create a sharp outline of the face on one side. This light source should be placed in the back.

Step 7

The problem here is that what you see is a "simplified" version of the final model. To see the lighting fully you need to render the picture, but it takes time. To avoid a surprise after wasted hours, perform a test render from time to time to set the perfect lighting.

To do it, use the Rectangular Marque Tool (M) to select a section of the image.

Click Render in the 3D panel.

Wait for a moment, until the section gets at least slightly rendered. Judge the effect, decide what you want to change, and then press Esc to abort the procedure and Undo (Control-Z) it.

Apply the changes you have planned, and then use the same action again to see if it looks any better.

Step 8

When you are positive everything looks OK, you can start rendering the picture for real. Select All (Control-A) and press Render. Depending on the resolution of the image and the textures, it may take from a few minutes to a few hours. However, you don't need to wait for the final effect—if you like what you see, you can stop and proceed with it.

Step 9

Save the file as a new file (Control-Shift-S) to create a copy in case something goes wrong. Then right click the 3D layer and select Rasterize 3D to create a flat image out of the model.

4. Make the Face More Realistic

Step 1

Our portrait looks pretty nice, but it still has that "3D model" feel. To reduce it, we will have to use a few painterly tricks.

First, we need to make sure the image has the proper resolution. At least 2000 px width is a must, and the more the better. Use Image > Image Size to ensure it.

Use the Paint Bucket Tool (G) to fill the background with 50% gray.

Step 2

Use a soft brush to add some gradient to the background.

Hint: you can use the same brushes as me. Just download the attachment from How to Create and Use a Set of Brushes for Digital Painting in Adobe Photoshop.

Step 3

We want to make the portrait look more like a portrait of a real woman, so first we need to find out what a real woman looks like. You may feel you know it, but we need specifics, not feelings.

Find photo references that fit your idea the best. I decided to use:

• Natural woman applying cosmetics on her visage as a reference for skin
• Dark haired woman as a reference for hair
  

You can download both references in your chosen resolution from Envato Market. You can also use this site to find more specific references, for example for lips or eyes.

Place the references behind the head, to see them all the time. This way you'll make your brain compare all three faces, and you'll have a better idea of what else needs to be done to reduce the difference.

Step 4

Let's start with the hair, because it looks more like a helmet at the moment.

Use the Eyedropper Tool (I) to borrow a dark shade from the hair reference, and paint some hair using the Sketch Detail brush (or any brush with variable Flow).

Step 5

Use very thin strokes to draw single hairs here and there. It will make the hair look lighter.

Don't add any details yet. Just make it look more painterly.

Step 6

Next is the skin. Let's swap its shades with the shades of skin of our photo reference.

Duplicate (Control-J) the portrait layer and Clip it (Control-Alt-G) to the original. Then go to Filter > Filter Gallery and pick Artistic > Cutout. Play with the options to create an effect similar to the one below.

Step 7

Duplicate the skin reference, too, and go to Filter > Last Filter to apply the same effect to it.

Step 8

Select the portrait layer (the "filtered" one) and go to Select > Color Range. Pick the brightest shade and experiment with Fuzziness to make it as accurate as possible. Hit OK.

Step 9

A selection should be created. Use the Eyedropper Tool (I) and pick the brightest shade from the photo reference.

Step 10

Create a New Layer, clip it (Control-Alt-G) and use the Paint Bucket Tool (G) to fill the area with that shade.

Repeat the process for all the other shades to create an effect as below. You may need to clean the hair area, too.

Step 11

Now we need to blend the shades of skin. You can use your favorite method of blending here, but if you don't have one, I'll show you mine.

Find the Brush Tool in the Tools panel. Click it and hold for a second to reveal the list. Select the Mixer Brush Tool. Then open its menu and Reset Tool.

Step 12

Right click to open the brush palette and select Rough Round Bristle.

Use it to blend the shades. The motion of your hand is very important here—don't just smudge all over the face, or you'll kill the shading!

5. Add the Details to the Face

Step 1

Slightly lower the Opacity of the layer to mix it with the original. Then use a Layer Mask to reveal the lips. You can learn how to do it here: Quick Tip: Layer Mask vs. the Eraser Tool in Adobe Photoshop.

Step 2

Use the Texture Sketch brush, or any slightly textured brush, to paint over the lips. Use the Eyedropper Tool (I) to pick the color from the area you want to paint over. A photo reference can be very useful here! If you don't want to use one, you can learn more about painting lips in Learn to Paint Beautiful Realistic Lips in Adobe Photoshop.

Step 3

Use the Layer Mask to reveal the eyes and eyebrows. Use the same method as before to paint over the eyelids, eyelashes, and eyebrows. You can also use this step to apply some make-up.

Step 4

Eyes are usually a dead giveaway that we're looking at a 3D model. They require a lot of work before they'll start looking more natural!

Create a New Layer and clip it. Take a dark red and paint the eyeballs with it using a textured brush.

Step 5

Use a soft brush and a brighter shade of red to paint over the inner area. Leave a bit of red around the edges.

Step 6

Use a darker, less saturated red (brown) to paint the shadows.

Step 7

Still using a soft brush, take a very light blue and softly paint over the illuminated area.

Step 8

Use the textured brush to add more details to the iris.

Step 9

Create a New Layer and clip it. Use the Sketch Detail brush and a saturated blue to paint a reflection of the sky. Make it partially sharp, partially blurry.

Step 10

Take white and paint some in the corner of one of the reflections.

Step 11

Finally, use the Layer Mask to reveal the shadow of the eyelashes.

6. Add the Final Touch

Step 1

The biggest flaw of Photoshop's 3D rendering engine is the lack of subsurface scattering. Our skin is slightly translucent, so light can go through it and illuminate it from inside. That's what gives shadows on our face a reddish tint.

Let's simulate this effect. Create a New Layer and clip it. Change the Blend Mode to Overlay. Take a reddish orange and use a soft brush to paint over the terminator (the border between light and shadow).

Step 2

Paint softly on the shadowed side of the line.

Step 3

Add a Layer Mask and erase it softly using a soft brush to create a subtle effect.

Use it wherever shadows seem to be too "cold" or gray.

Step 4

Our 3D model had pores on her skin, but we have removed them when changing the skin color. Let's fix it now!

Create a New Layer and clip it. Fill it with black. Then go to Filter > Noise > Add Noise. Choose the Amount necessary for the white dots to be visible.

Step 5

Double click the layer to open the Styles panel. Change the Blend If to see the noise over the illuminated area only (you can learn how it works here: Quick Tip: the Magic of Photoshop's Blend If). Then lower Fill Opacity to 0.

Check Bevel & Emboss with Contour. Then play with the settings to achieve an effect similar to the one below.

Step 6

Once you're done, you can play with the Opacity to make the effect subtler. You can also add another noise layer and change its Blend Mode to Overlay to add some grain in the shadow.

Step 7

Create another noise layer, this time over the hair. Change its Blend Mode to Screen. Use the Free Transform tool (Control-T) to make the points larger.

Step 8

Add a Layer Mask and Fill it with black to make the noise transparent. Use a soft brush and paint with white to reveal the shiny area. If you want a stronger effect, you can Duplicate the layer and paint once again.

Step 9

Finally, look at your picture from a distance and try to find what else needs some work. I decided to make the hair more detailed and to smooth the skin out some more. If you want to learn more about painting hair, try An Introduction to Painting Realistic Hair in Adobe Photoshop. 

Although this portrait is pretty, it still looks more like a robot than a real human. This is because our faces show more than one emotion at the same time, and the subtle signs of them are very hard to paint from scratch. If you want to learn more about his topic, you'll love Human Anatomy Fundamentals: Mastering Facial Expressions.

So Pretty!

This may have seemed like a lot of work, but it all was just detailing—the most pleasant part of the process of painting. Thanks to Fuse, you don't need to spend hours on building the right pose and establishing the light, because you can do both in a very intuitive way.

If you create a portrait this method, either after doing this tutorial or in the future, please post it in the comment section. I'd love to see your result!

For this article in the international artist series, we turn to Italy, featuring six artists who create fantastic work, from illustration to graphic design and more! I asked each artist how their country and culture inspired their work, and they delivered fantastic answers. Enjoy!

Officemilano

Officemilano is a multi-discipline design firm based in Milan, Italy. I chatted briefly with Matteo and Angela about the influence of their country and culture on their work. You can check out more of their design work on their website or in the small selection of pieces below.

Write Sketch & | Super! Pocket Notebooks

"Design in Italy, and especially in Milan, has always been very important. We have been influenced by 50's and 80's Italian avant-garde [designers].

A Casa di Lora | Brand Identity

Ogami Quotes | Gruppo Cartorama

"We love the international style of the 50's, but also post modernism of the 80's." 

Ogami Quotes New Notebooks

Emanuele Colombo

Emanuele is a motion graphics designer from Milan, Italy. His work is vibrant and so, so fun. You can check out some still images below or see his animations in their full glory in his portfolio.

A Bit of Character Animation

"Italians have a sort of love and hate relationship with their country. It is a beautiful place indeed, known all over the world for its beauty, but it is also a country that doesn’t offer many opportunities to young people.

IBM Patents

"I think that the artistic history of my country has helped me build my aesthetic sense and taught me what beauty is. And let’s face it, we are not very good in following the rules. But doesn’t creativity mean breaking the rules?

YouTube Rewind 2015 Doodles

"At the same time, economic difficulties that began in 2008 forced me to find a way out. That’s why I started working as a freelancer, trying to find clients from all over the world.

ESPN - The Story of the Season... So Far

"Again, Italy is a difficult country; it constantly put you to the test. However, it also gives you the instruments to succeed, and most importantly, it teaches you how to enjoy life and take things easy."

Clarissa Corradin

Clarissa is a freelance illustrator from Turin, Italy. Her work is beautiful and dreamlike, telling little stories in each image. You can check out more of it in her portfolio or in the small selection of pieces below!

Fishing Time

"I live in the northern Italy nearby countryside and hills, so it means pretty landscapes. I often walk through the woods so I like to draw something connected with nature.

Summer Days

"I spend hours at the river so it appears often in my work. 

Rød

"About culture, I usually look back to French illustrators because of their refinement and that vintage atmosphere that they are able to create. They have a really great taste in comics and children books."

Nocturno

Andrea De Santis

Andrea is an illustrator and graphic designer based in Ascoli Piceno, Italy. A lot of Andrea's work has a fantastic retro feel, largely thanks to the color palettes and textures used. You can check out more of it in Andrea's portfolio or in the small selection of pieces below.

Editorial Illustration for Psychologies 4

"Unfortunately my country, and especially the area where I live, doesn't invest heavily in creativity. Growing up in a country where we are always looking for unattainable perfectionism surrounded by the dissatisfaction from your employer, you inevitably train to make yourself stronger or you leave and follow other roads.

Wishing

"Fortunately, I'm a part of one of those rare cases in which that decided to move on, so I can thank Italy because it unwittingly made me who I am and allows me to be sought for my work. 

Pride and Prejudice

"The culture of my country has definitely been important to me, especially the artistic culture of Italy that we all have a bit of in our blood. Mostly contemporary designers were, for me, a reference point that had motivated me to try to experiment and find my own artistic identity."

FLYING

Federica Frenna

Federica is an illustrator and graphic designer based in Agrigento, Italy. Much of her work is character driven, transporting viewers into whimsical stories one image at a time. You can check out more of her work in her portfolio or in the small selection of pieces below.

- Elephant Bath -

"Growing up in a culturally and historically rich country as Italy has unconsciously influenced my visual language for sure. But I have to say first that my passion for American animation was my first influence and inspires me daily.

- Nicuzza -

"I also think that all the regions of Italy offer a lot of different inspiration. The only things of my country deliberately reflected in my work are my love for nature and animals, and the bright colors of the area where I grew up. 

- Viking -

"I love my country, but I always try to be as international as I can and to have a range of many inspirations that I can find everywhere in the world without any restriction."

- Rise Up High -

Diego Della Posta

Diego is an artist based in Rome, Italy, whose work spans from illustration to motion graphics, graffiti, and more! You can check out more of his work in his portfolio or in the small selection of pieces below.

“They Are Still Playing Your Game”

"I think that Italy and Italian artists have contributed a lot in influencing me artistically and creatively.

Fall Winter 2016/17 Collection

"Surely the main feature that I learned being Italian was to always be able to get by, especially in more difficult situations where there didn't seem to be a solution.

"Keep Clean Your Masks"

"I believe that the real strength of Italians is the ability to bring out the best of even impossible situations and always having humor and joy in everything one does."

"Sitting Duck"

Many thanks to the artists above who took time out of their busy schedules to answer my questions. You can, and should, check out more of their work in their portfolios below!

• Officemilano
• Emanuele Colombo
• Clarissa Corradin
• Andrea De Santis
• Federica Frenna
• Diego Della Posta

In today’s tutorial I'm going to show you how to create a cute character illustration, using some of Illustrator’s most basic shapes and tools, combined with the power of Blending Modes.

Let’s get started!

1. Set Up a New Document

As always, with each and every project, the first thing we need to set up is the document. Go to File > New or use the Control-N keyboard shortcut and create an 800 x 600 px file, using the following settings:

• Number of Artboards: 1
• Units: Pixels

And from the Advanced tab:

• Color Mode: RGB
• Raster Effects: Screen (72 ppi)
• Align New Objects to Pixel Grid: checked

Quick tip: since we’re going to be creating the illustration using a pixel-perfect workflow, I recommend you take a couple of moments and read my in-depth tutorial on how to create pixel-perfect artwork, which should get you going in no time.

Name the file however you want, and then let’s move on to the next step.

2. Layer the Project

No matter the project you’re working on, you should always try and use layers since they can help a lot when it comes to creating and structuring your design, letting you focus on one section at a time, without the fear that you’ve accidentally moved or misplaced a shape.

So, assuming you already know how to use the Layers panel, create three layers and name them as follows:

• Layer one: phone character
• Layer two: side symbols
• Layer three: gradient overlay

3. Create the Cute Character

Will begin the project by working on the cute little iPhone character, which will actually be a really easy process, as you will see in the following moments.

Step 1

Position yourself onto the first layer, and then using the Rounded Rectangle Tool, create a 168 x 314 px shape with a 20 px Corner Radius, which we will color using #64c4f1 and then align towards the center of our Artboard.

Step 2

Give the shape an outline, by selecting it and then going over to Object > Path > Offset Path and entering 6 px into the Offset value field. Leave all the other settings as they are and hit OK.

Step 3

Color the outline using a darker hue (#1b456b) so that it can stand out from the main shape.

Step 4

Using the Rectangle Tool (M), create a 230 x 140 px shape (#659def) which will act as the display, and give it a nice 6 px thick outline (#1b456b). Select and position the two shapes towards the center of the phone’s body, leaving a 38 px gap between them and the larger outline.

Step 5

Start adding details by creating the top section sensors (#1b456b), the side buttons (#1b456b) and the iconic bottom round button (outline: #1b456b; fill color: #519fc4).

Step 6

Using the Ellipse Tool (L), start working on the character’s face by creating two 18 x 18 px circles (#1b456b), positioned 60 px from one another, which will act as the eyes.

Then, add another 28 x 28 px circle, which we will need to turn into a mouth, by flipping its fill with its stroke (select the shape > Shift-X) and cutting it in half, giving it a thickness of 6 px.

Position the mouth right underneath the eyes, and then group (Control-G) and position the face towards the center of the screen.

Step 7

Add a pair of flushed cheeks, by creating two 20 x 20 px circles, which we will color using #4f8bd3 and then position underneath the eyes, a few pixels towards the outside.

Step 8

Since the phone is pretty much done, we can now focus on adding little details such as highlights and shadows to its body and the screen.

Start by selecting the phone’s main shape, which we will duplicate (Control-C > Control-F) and then use to create an inner offset by going to Object > Path > Offset Path and entering -4 px into the value field.

Then, select both the duplicate and the offset, and use Pathfinder’s Minus Front to create a cutout, which we will turn into an all-around ring highlight, by setting its color to white (#FFFFFF), its Blending Mode to Soft Light and its Opacityto 80%.

Step 9

Using the same values used for the previous step, add two vertical highlights towards the right section of the phone, and another one just under the bottom section of the screen’s outline, maintaining the same 4 px thickness when possible.

Step 10

Start adding some shadows over the screen and the round button, using black (#000000) for the color and 14% for the Opacity.

Step 11

Finish off the detailing process by adding the diagonal highlights that go over the screen (Color: white #FFFFFF; Blending Mode: Soft Light; Opacity:30%), and the two star-shaped twinkles from the phone’s top left corner (Color: white #FFFFFF; Blending Mode: Soft Light; Opacity:80%).

Then select and group all the shapes together using the Control-G keyboard shortcut.

Step 12

Add a 144 x 10 px ellipse underneath the main illustration, setting its color to black (#000000), while lowering its Opacity level to 20%.

Since at this point we’re pretty much done with the main section of our illustration, we can move on to the second layer, and start working on the little side patterns that will give it a nice, even balance.

4. Create the Side Patterns

This part is actually easy and really fun, since you’ll have to create a bunch of shapes, from squares to circles, plus signs, triangles, and diamonds, which you will then scatter around on each side in order to get a nice-looking pattern.

Use 4 px thick strokes (#1b456b) to create the shapes, and take your time to make sure it ends up looking not only playful but also organic and spontaneous.

5. Add the Finishing Touches

Once we’ve added the side patterns, we can then move on to the last part of the creative process, which will involve creating and overlaying a gradient in order to give our illustration a nice color pop.

Step 1

Create a copy of the phone’s main shapes (its outline and the side buttons) and a copy of the side patterns (which you will need to expand by going over to Object > Expand > Fill and Stroke), and paste them onto the third layer.

Then, select all the shapes, and go to Object > Compound Path and hit Make. This will basically make all your shapes act as one larger piece, which is exactly what we want since we’re going to be applying a gradient over them in the following step.

Step 2

Select the compound path that we’ve just created, and create a linear gradient using #0000ff for the left color and #00ffff for the right one, making sure to set the angle at 90°.

Step 3

Finally, adjust the gradient, by setting its Blending Mode to Hard Light and lowering its Opacity to 28%.

We Did It!

There you have it, a really easy way to create a cute little character using a bunch of shapes and some little tricks involving Gradients and Blending Modes.

I hope you’ve managed to learn some new tricks along the way, and as always I'm looking forward to seeing what you’ve managed to create.

In this tutorial, I will be taking you through the steps of how to animate a squash and stretch. Incorporating squash and stretch into animation of a character or even an object such as a bouncing ball gives your animation so much life!

I will show you how to put squash and stretch into your own animation. This is animation! The sky is the limit, so don't be afraid to exaggerate!

Do you remember our bouncing ball tutorial? There was a wee bit of squash and stretch in our ball animation. Let's use our ball as an example to learn about squash and stretch. Look at this example of the bouncing ball. It looks a bit stiff.

Now, in this example of a bouncing ball, notice how the ball elongates as it comes down. This emphasizes the speed of the ball falling. That is the stretch. Then the ball becomes flatter as it hits the ground as it emphasizes the speed and weight of the ball. That is the squash. I exaggerated the squash and stretch for the sake of this demo. 

Let's look at the drawings lined up. The start pose of our ball is at the top in red. The ball's stretched pose is in green. The squashed pose of our ball is in red on the bottom. Pretty cool, huh? Now let's animate our own squash and stretch using a character! Let's go!

1. Draw Our Poses

I thought I would use a really fun cartoony character with a bean-shaped body to really show exaggerated squash and stretch. He's a cute little guy, don't you think? We are going to animate our character jumping from the left side of the frame to the right side of the frame.

Step 1

Let's start by drawing a floor guideline. 

Step 2

Draw our first pose/extreme. I've started with our little guy in the start position. If you want to have a little extra fun, you can draw hairs on the character's head. As we go along, notice how the hair can be affected by the character's primary movements. That is called the secondary action.

Step 3

For our second pose, our character makes an anticipatory movement down before he jumps.

I put a little bit of a squash into his anticipation pose.

Step 4

Draw our third pose. I'm working very rough! Don't be afraid to get messy and have sketch lines all over the place. Squash and stretch can be messy and fun sometimes! 

Notice how our character is beginning to elongate yet I am keeping the character's mass the same. As he is getting longer and taller, his sides are closer together. The character is getting skinnier, but the mass does not change. If he jumps and he gets longer but his sides do not come closer together, he would just look as if he's growing and becoming a giant!

Step 5

Draw pose number 4. He is back to his original mass/size and he is at the top of the frame. He is about to start his descent down.

Step 6

Let's draw our fifth pose. He is starting to become elongated again on the way down.

See how stretched out he is in comparison to the pose before.

Step 7

Let's draw our sixth pose. As the character makes contact with the ground, he's really stretched out as he quickly descends to the ground.

Step 8

Let’s draw our seventh pose. Now the character's feet are really planted on the ground. 

Step 9

Now that he has come to a stop, he keeps moving downward and squashes as his weight keeps moving downwards. I really exaggerated the squash in pose 8, so much so that his squat little body has hidden his feet! Don't be afraid to really exaggerate when you animate (hey, that rhymed!).

Step 10

Let's draw our ninth pose. In this pose, after he squashes, he stretches slightly as he springs back up.

Step 11

Lets draw our final pose number 10. In this pose, he then settles back down into his end pose. 

Notice how pose 9 over-shoots the last drawing, and then he settles back down to his original "size" in pose 10. This adds a little bit of a "cushion" to our action. Our character has successfully completed his jump. Good work! Let's see how it looks!

Really good work! Looks great! It could use an in-between here and there to smooth out the action.

2. Add Some In-Betweens 

Step 1

Looking back on the animation, I feel that we could use an in-between between pose 1 and pose 2. This smooths out the motion between the pose 1 and pose 2, which is our anticipation pose.

See how the in-between is positioned between pose 1 and pose 2.

Step 2

Now let's add an in-between between our second and third pose.

Step 3

Looking good! Now we could use an in-between between pose 8 and 9 as he comes up out of his squashed pose.

Step 4

Lastly, he can use an in-between between pose 9 and 10 as he settles back into his normal standing pose.

That looks great! Now that's a bouncy, stretchy, squashy guy!

3. Tighten Up Our Animation Drawings

Now that we have our animation looking sweet, we can start tightening up the line for our character. I'm still working loose with an ink line, but improving small things as I go along.

I want to show you the progress so I left my rough line in light grey. I am inking my final line in black so we can see the line against the grey.

Step 1

Clean up drawing 1. See how I left my rough animation line in grey. I cleaned up the line in black in all the steps just to show you how I streamline, neaten and improve the drawing as I go along.

Step 2

Clean up drawing 2. 

Step 3

Clean up drawing 3. Notice how I keep the proportions and feel of my original drawing, but I made small improvements. I made the feet feel more grounded and lined them up more with the feet in the previous drawing.

Step 4

Clean up drawing 4. Notice how I changed the position of the feet slightly so the feet are grounded in the same spot as the previous drains; this way the feet aren't sliding all over the place. Don't be afraid to play back the animation as you clean up each drawing to make sure the animation looks ok as you go along.

Step 5

Clean up the rest of your drawings.

Keep going—you're almost done! Notice how in drawing 12 I improved the position of the mouth. I thought the mouth was a little low in my original drawing.

You are done—this is your last drawing! I cleaned him up and made him look more identical to the original start pose.

Here is our final drawing in all its glory; I am showing it to you sans sketch lines. Good job!! 

Congrats! Great Job!

You did a great job! You're really getting the hang of squash and stretch! Try it out on all of your animation: a bouncing ball, a character jumping or falling. Any number of actions can be enhanced by squash and stretch. 

Don't be afraid to exaggerate or make the squash and stretch in your animation subtle. It is your special animation, so make it yours! And remember, practice makes perfect, so keep animating! 

In continuing with our art history features, I’ve collected some fantastic people of color in art. So very often, when influential artists are discussed, it’s the usual suspects (Da Vinci, Monet, etc.) over and over. While we’ll discuss some familiar faces, I hope this list hits on other artists you may not be as familiar with and opens up some new doors to art movements and styles to explore.

The following list, in no particular order, highlights some fantastic artists who’ve made an indelible mark on the world and contributed greatly to the world of art throughout history and today.

Diego Rivera

Perhaps it’s my being a native Metro-Detroiter and love for the Rivera Court at the Detroit Institute of Arts that places Rivera so high on this list. When considering this list, I immediately thought about Rivera’s depictions of Detroit and his way of utilizing space in large murals. I’m jumping well ahead of myself, however.

Diego Rivera (1886–1957) was a Mexican painter known for his murals and social commentary within them. At 21, Rivera studied art in Europe, having been sponsored by the governor of Veracruz to do so. He was influenced by cubism and similar modern art movements of the day. In 1921, at the age of 35, he returned to Mexico. It’s at this time that he began to create large murals. His first was sponsored by the Mexican government and created at the National Preparatory School in Mexico City, Mexico.

Rivera’s work was vibrant and influenced more and more by his home country. He tackled social subjects within Mexico, like the 1910 Revolution, left-wing political beliefs, and anti-religion stance. His work was largely illustrative, telling stories within each space of his frescos in a bold and detailed fashion that often ruffled feathers in society and still remain controversial today.

Rivera was married five times, twice to Frida Kahlo, whom I profiled in a previous art history article. Rivera’s murals and paintings can be found in several countries, some of which include the piece’s original home, such as the 27 frescos that reside at the Detroit Institute of Arts.

R. C. Gorman

Rudolph Carl Gorman (1931–2005) was a Navajo painter born in Chinle, Arizona. Gorman has been hailed as "the Picasso of Southwestern Art" or "the Picasso of American Indian art". He, like many children, drew from an early age. He was encouraged to develop his interest in art, which eventually led to a scholarship to the Mexico City College from the Navajo Tribal Council.

His passion for his culture's influence in art led to a solo gallery exhibit in 1965 at the Manchester Gallery in New Mexico. Due to his success, he opened the  R. C. Gorman Navajo Gallery in Taos, New Mexico, where he remained in studio and residence for years to come. 

Gorman's work was influenced by artists like Diego Rivera and David Siqueiros. He pushed his work into the realm of abstract realism, playing with abstract forms to create his own style. Many of his paintings focus on Navajo women, their roles within the Navajo Nation, and how they relate to women the world over.

Initially Gorman worked with oil, acrylic, or pastel. As time went on, he moved on to lithographs (especially in making prints of his own work) and ceramics. Gorman was incredibly successful during his lifetime in creating a large body of work and selling his paintings and prints from his gallery.

Utamaro

Kitagawa Utamaro (1753–1806) was born in Japan and is remembered as one of the best ukiyo-e artists in history. His work largely consists of portraits of women (bijin-ga) and nature studies rendered into woodblock prints. Ukiyo-eart typically tackles the subjects of beautiful women, kubuki, sumo, folk tales, nature, and erotica. The genre wasn’t considered serious art, being aimed at an audience of common people.

Utamaro’s life wasn’t well documented. It’s known that he was taught by Toriyama Sekein, an artist who was trained in the Kano school of painting, but shifted his own focus to ukiyo-e work later in life. Under the name Kitagawa Toyoaki, Utamaro illustrated popular literature and kabuki actors.

In the early 1780s he changed his name to Utamaro and eventually worked solely on portraits of women. His models were largely from the pleasure district. It’s with these pieces that he became famous for his subject matter and idealized stylizations of the female form.

In 1804 Utamaro ran into trouble with censorship laws for depicting a banned historical novel. He was sentenced to either being handcuffed or imprisoned for 50 days (accounts differ). It’s said the ordeal was devastating to him and led to his depression, from which he never recovered before his death two years later.

Utamaro was prolific. He produced over 2,000 prints during his career and created many paintings, illustrated books, and more. His work was well known and loved during his life time and beyond. When you think or hear of bijinga or ukiyo-e art, it’s Utamaro’s work that rises above the rest and continues to be amongst the greatest of his age.

Jean-Michel Basquiat

Jean-Michel Basquiat (1960–1988) was an American artist whose short life burned bright before a heroin overdose at the age of 27. His work tackled social issues including power structures, racism, and classism. In 1976 he began spray-painting graffiti under the name SAMO, continuing to do so throughout the late 70s.

In 1980, when he was featured in a group gallery show, his work garnered attention. Soon he was selling paintings for up to $50,000 a piece. Basquiat was a part of the Neo-Expressionist movement, which often depicted recognizable objects or ideas in emotional ways. In the mid-80s, he partnered up with Andy Warhol on a series of collaborative pieces that largely involved Warhol screen-printing elements and Basquiat adding painted components.

Basquiat’s personal work often incorporated words and graffiti-like textures. He tackled issues influenced by his Afro-Caribbean heritage, including a multi-panel painting told stories of Egyptian and Atlantic slave trade. Many pieces of his are sketchy or filled with doodles. Bright colors and crudely drawn imagery covered canvases, sketchbook pages, and more.

His work inspired so many in creating emotional, scribbled, and thoughtful work. Thanks to artists like Basquiat, urban-inspired work entered art galleries and the more serious art world.

Robert S. Duncanson

Robert S. Duncanson (1821–1872) was an African-American painter associated with the Hudson River School, an art movement focused on landscapes and influenced by romanticism. He was not formally trained, but honed his skill through copying prints and observation. In the 1840s, he debuted at an exhibition in Cincinnati, Ohio. Duncanson’s family wasn’t permitted to attend the event with their being African-American and segregation at its peak. Throughout the 1840s, Duncanson focused on portraiture.

It wasn’t until he shifted his focus to landscapes that his work took off. Charles Avery, an abolitionist, commissioned a painting from Duncanson. This led to a network of patrons who were anti-slavery and supporters of the arts; they sustained his career. His landscape pieces were more than just renditions of physical space. They carried the socio-political messages, of the day as well.

Duncanson exiled himself to Canada during the Civil War. He was influenced heavily by the Canadian landscape even after he left for the United Kingdom and later returned to Cincinnati, Ohio. He was one of the first American painters to take up residence in Canada and focus on its landscape. His work added subtle touches from his own experiences as a black man in Antebellum America without his work being categorized strictly as “African-American” in a time when that would have been career limiting.

Abanindranath Tagore

Abanindranath Tagore (1871–1951) was an Indian artist, writer, and founder of the Bengal school of art movement. He’s noted as the first Indian artist to gain worldwide recognition. He studied at the Calcutta School of Art under European painters O. Ghilardi and Charles Palmer.

Tagore considered Western art to be “materialistic” and focused instead on Indian artistic traditions. Mughal art was a major early influence on his work as well as Japanese art and calligraphy, which can be seen within his watercolor pieces. Tagore developed this “Indian style of painting”, as it was also known, combining modern imagery with spiritual qualities. Bharat Mata(“Mother India”) was one such painting that shows a woman with four arms similar to depictions of Hindu deities.

This art style was promoted as the national style of art, gaining popularity world-wide and bringing Indian art and artists into the galleries of Europe. Even to this day, the Bengal school of art is an ongoing legacy of artists and calligraphers.

Amrita Sher-Gil

Amrita Sher-Gil (1913–1941) was an Indian-Hungarian painter who is considered one of the most important female painters of India of the 20th century. Her work, begun as a girl in Hungary, bloomed when she went to India in 1934 at the age of 21. Her artwork’s focus settled on the poor of India, depicting their world and lives in paint.

She captured the reality of India, showing emaciated figures with passive, moody expressions. She focused on farm workers, nurses, and other common people in Southern India. Her style was inspired by European modernism but captured the growing Independence of India as a country and culture.

It wasn’t until her death that her work gained popularity in India and Europe. She’s also regarded as the most expensive Indian artist, having had a painting sold for ₹6.9 crores in 2006 (roughly $1.5 million USD at the time). Her work inspired and continues to inspire contemporary Indian artists.

Tarsila do Amaral

Tarsila do Amaral (1886–1973) was a Brazilian modernist artist whose work combined Brazilian ideas with avant-garde aesthetics. Tarsila was born to privilege, but unlike other privileged women in Brazil at the time, she had a family that supported her education and artistic pursuits. She studied art in Paris where she was influenced by Cubism and Fernand Leger.

She was a part of the Grudo dos Cinco (“Group of Five”) who organized the Semana de Arte Moderna (“Week of Modern Art”) in 1922 in São Paulo. Artists participating in the event challenged the conservative art establishment with their modern aesthetic. This event and the artists involved were pivotal in Brazil’s modern art movement and promotion of Brazilian culture to the world through art.

In 1923, Tarsila returned to Paris and infused her culture into Cubism and similarly modern styles. Thanks to trips back home to Brazil, her work took on Brazilian subject matter, rendering landscapes and people of Brazil into modern, Cubist ideals.

Oswald de Andrade, a poet and member of the Grupo dos Cinco, wrote poetry that she illustrated. His work called for artists to export Brazilian culture to the world, especially Europe whose influence made a great impact on Brazil. They sought to influence the world with Brazilian culture, and thanks to numerous paintings, Tarsila was largely successful.

Tarsila leaves behind a legacy of 230 paintings that helped bring modernism to Latin America and to share Brazil with the world. Her work and intentions influenced and continue to influence artists in sharing indigenous Brazilian concepts and themes in art.

Wen Zhengming

Wen Zhengming (1470–1559) was a Chinese painter, calligrapher, and poet, and is regarded as one of the masters (one of four) of Ming painting. Wen’s work often focused on simple things, like a tree, and the theme of isolation and loneliness. He also focused on celebrating the lives and society of the elite since they were his patrons. He was taught and influenced by the Wu school’s founder, Shen Zhou.

Wen produced work under a number of styles, becoming prolific in both painting and poetry. His paintings were sought after by collectors to the point of counterfeits of his work being common during the late Ming period.

Wen became a leading figure of the Ming period, going on to influence artists for years to come. He became a leader of the Wu school in his own right, attracting many students and influencing his own sons to follow in his footsteps.

Kamal ud-Din Behzad

Kamal ud-Din Behzad (c. 1450 – c. 1535) was a Persian painter known for creating miniature paintings and illuminated manuscripts. Behzad’s manuscripts were created in his own style, which took geometric compositions common to Persian art and opened them up to be more spacious to allow action and movement into his pieces. He also was skilled at guiding the viewers eye around the composition in an organic fashion, creating natural expressions and figures within his work.

Behzad’s work was naturally playful and expressive, which was uncommon to Persian work at the time. He introduced naturalism to Persian work, utilizing realistic gestures and expressions in his figures, and focusing more on the individual within a composition rather than filling up space with design and patterns.

He is considered to be one of the greatest painters of Persian miniatures, and his work and aesthetic went on to influence Persian and even Indian art in years to come.

Conclusion

This list is far too short and incomplete, only consisting of ten artists from around the globe and throughout history. Check out our previous art history article featuring ten fantastic women in art:

• 10 Influential Women of Art Throughout History

Who are some of your favorite artistic influences? Who made an indelible mark upon the world? Who did you learn about today that you weren’t aware of previously? Share with us in the comment section below!