Drawing in Art Nouveau Style Tutorial
This tutorial was originally published in January 2011 as a Tuts+ Premium tutorial. It is now available free to view. Although this tutorial does not use the latest version of Adobe Illustrator and some of the source files are no longer available, its techniques and process are still relevant.
Alphonse Mucha is one of the most influential artists from the Art Nouveau era. I'm going to gain inspiration from his work and show you how to create your own Art Nouveau poster using Adobe Illustrator.
Love this style? Browse the incredible selection of Art Nouveau Graphics on GraphicRiver for more incredible designs. Or enlist the help of a talented professional from Envato Studio for custom digital portraits.
Introduction
Art Nouveau, French for "new art"; is a term used to describe art which peaked at the turn of the 20th century. Its style is very distinctive, taking influences from nature, curves, floral decorations, and organic shapes. One of the most influential Art Nouveau artists is Alphonse Mucha, who was responsible for many iconic pieces during this time.
Art Nouveau influences can be found in many forms, ranging from visual art to architecture to typography. Today, many artists seek inspiration from this style, and it's been one I've wanted to tackle for a while!
I'm going to use Mucha's work as my major influence in this piece and try mimicking some of the elements in his style, but add some of my own as well.
Research
I've used one main site resource to gather visual information on Mucha's style and that is The Official Alphonse Mucha Website. This site has a variety of pieces which he created in an Art Nouveau style and has proved valuable as a resource with insight.
Whenever you're going to take influence from another artist, it's good practice to do some research on a selection of pieces that are in the direction you want to go. As I want this piece to be more of a poster-style piece, looking at the framing and advertising pieces he's created will be my main inspiration.
When looking at his poster designs, the focus is mainly a female in an elegant pose. Looking further into his style, you can see strong geometric frames with the organic influence typical of the Art Nouveau era. Notice the mix of details in shading and then a simplistic line art style around the models. It's these key elements I want to bring into my piece.
One piece I'm especially drawn to is Reverie, with its circular repeating background frame, its detail face shading, and the minimal shading on the cloth. Your initial focus is on the whole piece with the bold frame. The circle refocuses your eyes towards the model, and then the details in the face bring you closer in to her beauty.
Another piece in a similar composition is Zodiac, and what I especially like about this piece is the way the hair has been illustrated. With those Art Nouveau swirls that go beyond the circle frame, it's simply beautiful and adds to its elegance. The line art doesn't go around each strand, but around all of the strands together.
Mucha has a huge gallery of elegant pieces which you could spend hours analyzing and gaining major inspiration from. Before I attempted to put Pen Tool to canvas, I had an absolute pleasure staring at the work and automatically thinking how it could be achieved in vector. So it's time to crack on!
Stock Image
As with the majority of my work, I'm going to be using a stock image. If you're a regular Tuts+ reader, you'll recognize this stock image by Natalie Paquette.
1. How to Adjust the Stock Image
Step 1
Open up the stock image in Photoshop and use the Crop Tool (C) to trim the edges. Drag and drop the "Background" layer onto the Create a New Layer icon to duplicate it.
Go to Image > Adjustments > Curves (Command-M) and select Strong Contrast from the dropdown menu and click OK. This is so it exaggerates the light and shadow to make it easier to pick out the shading when it comes to vectoring it.
Step 2
I want to keep to the vintage palette style of the portrait. Ignoring the eyes and hair color, what I can do to help myself get a better idea is to "Eyedropper" colors directly from the reference. A good way to experiment with both how you could shade the skin and the tone is to Create a New Layer and then fill it with the color you wish your skin to be tinted in. Scroll through the Blending Modes until you get the effect you desire. Then try different Opacities to experiment with different intensities of the tint.
I've opted for the fill color of C=15, M=50, Y=75 and K=35, with a Blending Mode of Hard Light and Opacity of 50%. What this blending mode has done has removed the harsh light and left me with a flat skin shading area and the darker shaded areas. This to me seems a very Mucha way of skin shading.
Once you're happy with your reference, then File > Save for Web & Devices at about 800px width.
2. How to Set Up Your Initial Shapes
Step 1
Open up Adobe Illustrator and create a New Document in Portrait format. File > Place the reference image and resize it using the Free Transform Tool (E) so it's in the lower portion of the artboard as shown below. Double-click on "Layer 1" and rename it "Reference," then Lock it.
Then Create a New Layer and rename it "BG." Now use the Rectangle Tool (M) to draw a white fill rectangle over the canvas and reduce the Opacity to 30 %. Lock it.
Create a New Layer and rename it "Bases." This is where I'm going to be drawing the bases of the model.
Step 2
Within the "Bases" layer folder, draw two shapes, one for the skin shading (C=5, M=20, Y=35, K=0) and then one for the top overlapping it (C=30, M=100, Y=70, K=35).
Step 3
Create a New Layer and rename the layer "Face Shading".
When I usually do shading, I do a gradual change in hue and color to create shadow and highlights on the skin. Looking at Mucha's work, the shading is created using less saturated and darker coloring, which automatically says to me... Blending Mode Multiply.
I've increased the black in the skin shading fill color (C=5, M=20, Y=35, K=20) and created the following shapes for shading on the skin (set to Blending Mode Multiply and Opacity 10%). Once done, Group (Command-G) all the shapes.
3. How to Shade the Skin
Step 1
I'm going to create a Clipping Mask using a duplicate of the skin base layer. So Copy (Command-C) and Paste in Front (Command-F) the skin shading base from the "Bases" layer folder. Drag and drop it in front of the group you created previously. Select the group and the duplicated skin base and create a Clipping Mask (Command-7).
Create a New Layer above the "Face Shading" layer folder and rename it "Top." Drag and drop the deep magenta top base into this new layer folder.
Step 2
As before, increase the black for the next set of objects for the skin shading (C=5, M=20, Y=35, K=50), and keep the Blending Mode at Multiply and Opacity at 10%.
Step 3
Select all of the shapes you've created and Group them (Command-G). Drag and drop them into the Clipping Mask group to trim the edges.
Step 4
I'm going to create a transparent radial gradient with the darker skin shading color (C=5, M=20, Y=35, K=50). Setting the Blending Mode to Multiply and the Opacity at 100%, place the gradients in places that have the darkest shadow.
Once done, Group them (Command-G) and add them to the Clipping Mask group.
Step 5
Using the same gradient, add more subtle shading to other areas of the portrait, but setting the Blending Mode to Multiply and Opacity to 15%. Once done, Group them (Command-G) and add them to the Clipping Mask group.
Step 6
Although the Mucha style appears to have no highlights in the skin shading, I'm going to add some subtle highlights to help emphasize the shape of the face and back.
Using the same gradient, with the Blending Mode set to Screen and Opacity set to 30%, I'm going to add highlights to the skin. Once done, Group them (Command-G) and add them to the Clipping Mask group.
4. How to Shade the Lips
I've created a new transparent radial gradient using the deep magenta used for the fill on the top base layer (C=30, M=100, Y=70, K=35). The lips on Mucha posters don't appear to be highly detailed and have an orange/red tone to them. So I'm going to add just three shapes to the lips and set the Blending Mode to Color Burn and Opacity to 30%.
Then Group the shapes (Command-G) and drag and drop them into the Clipping Mask group.
5. How to Shade the Eyes
Step 1
Create a New Layer above the "Face Shading" layer folder and rename it "Eyes."
Use the skin base color (C=5, M=20, Y=35, K=0) to create three shapes for each area of the eyes: one for the overall area of the eyeball (including the inside of the eyelids), one for the eyeball, and one to show a highlight on the eyeball. Set these shapes to Blending Mode Screen and Opacity 50%.
Step 2
Draw a circle for the first iris using the Ellipse Tool (L) with a dark brown fill color (C=50, M=70, Y=80, K=70). Then Copy (Command-C) and Paste in Front (Command-F). With the Free Transform Tool (E), reduce the size ever so slightly.
Then select both circles and Copy (Command-C) and Paste (Command-V) and position for the other iris. You'll need to resize one set slightly for her right eye due to perspective. Reduce the Opacity for all four circles to 50%.
Using the Pen Tool (P), trace the actual shape of the iris and use these to create two Clipping Masks (Command-7) with the previously created circles.
Step 3
With the same fill color as before, repeat these beginning steps for the pupils. However set the Blending Mode to Multiply and the Opacity to 35%. Drag and drop these circles into their respective Clipping Mask groups.
Step 4
Go into the Clipping Mask group for each of the eyes and duplicate the largest circle in the group. Change the fill color to a light green (C=50, M=0, Y=100, K=0). Go to Effects > Distort & Transform > Zig Zag and apply the settings below.
Once done, change the Blending Mode to Normal and the Opacity to 35%. Then reposition the shape so it's behind the two iris circles.
Step 5
Duplicate the largest circle again, null the fill color, and change the stroke color to C=50, M=70, Y=80, K=70. Change the Stroke Weight to 3 pt, the Blending Mode to Color Burn, and Opacity to 20%. This will give the iris an outline to give it the Mucha look.
Step 6
Begin building up on the lash lines by adding two layers of shapes for the top line and one layer for the bottom. Use the same dark brown color as before (C=50, M=70, Y=80, K=70) set to Blending Mode Multiply and Opacity 80%.
Step 7
If you're wanting to create a more true to the style Mucha girl, I'd suggest skipping this one step. The girls appear to have no makeup on, but I always like to add some eye shadow by way of adding gradients to the eye lids. I'm going to add shapes above and below the eye lines and add a transparent radial gradient with the dark brown (C=50, M=70, Y=80, K=70). Then set the Blending Mode to Color Burn and Opacity to 100%.
Step 8
Often when I'm building up areas of a portrait, some elements may not balance as well as initially planned. Case in point will be the pupils. They don't seem as bold. So I'm going to change the Opacity of the two circles in each of the Clipping Mask groups to 80%.
Step 9
If you're a regular reader of my tutorials, you'll have a set of Width Profile brushes to use for the eyelashes. You can create them from this tutorial if you don't have them. Specifically, I'm going to be using the Width Profile 1 brush.
With the dark brown as the stroke color and null for the fill, begin adding eyelashes to the top lash using the Paintbrush Tool (B). Set the Blending Mode to Multiply with the Opacity 75%. I've changed the lashes to blue to show you how I've drawn the eyelashes below.
Then changing the Opacity to 30%, add a smaller number of lower lashes. Group (Command-G) each set of the lashes once complete.
Step 10
Add the below shapes to the eyes to create a highlight over the eyeball using the skin base fill color (C=5, M=20, Y=35, K=0). Place these shapes in the corner of the eye and along the lower lash line. Set the Blending Mode to Color Dodge and Opacity to 35%.
6. How to Create Her Clothing
Step 1
I'm going to begin working on the top. The first thing I need to do is divide the top into the sections of material it's made up of. This would be the trim along the top and the sections for the arms and back. I'm going to use Pathfinder and the base layer for the top to create these accurately.
Go into the layer folder "Top" and duplicate the base layer. Draw a shape using the Pen Tool (P), which goes along the trim at the top. Then use Pathfinder > Intersect to get the shape for the trim.
Step 2
Duplicate the trim shape and the top base layer again. Use Pathfinder > Minus Front to remove the trim from the top. Then use the Pen Tool (P) to draw a shape for the center section of the top.
Use Pathfinder > Divide to split the shapes apart. You'll need to remove the shapes that aren't required.
You should now be left with the top base layer and the following four shapes.
Step 3
For now, hide the four shapes as we're going to work on shading first. The only shape visible should be the top base layer.
If you look at the clothing of the Mucha style girls, the shading is more defined with line art, which we're going to work on later. For now, I'm going to add some subtle shading using the transparent radial gradient I used for the lips (C=30, M=100, Y=70, K=35). I've set these shapes to Blending Mode Multiply and Opacity 65%.
Step 4
Group the gradient shapes (Command-G). Duplicate the base layer for the top. With both the group and the duplicated shape selected, create a Clipping Mask (Command-7) to trim the edges.
Step 5
Duplicate the top base layer and use Pathfinder > Minus Front to remove a duplicate of the trim. Apply the same transparent gradient to it set to Blending Mode Multiply, and then add it to the Clipping Mask group.
Step 6
Lock the top base layer and Clipping Mask group and then Unhide the four shapes that make up the top.
I'm going to add a slight vector inner glow on these objects to make them stand out more. You can do that by Copying the settings in the Appearance panel, shown in the image below, while the four shapes are selected.
7. How to Create the Frame
Step 1
I want the hair to complement the frame, so I'm going to create the frame before I do the hair. Create a New Layer above the "BG" layer folder and rename it "Frame."
Hide the layer folders containing work with the model in it for now. Using the Ellipse Tool (L), draw a circle with a null fill and the stroke color of dark brown (C=50, M=70, Y=80, K=70). Copy (Command-C) and Paste in Front (Command-F) and use the Free Transform Tool (E) to increase the size of it.
Using the Align panel, select Horizontal Align Center and Vertical Align Bottom.
Duplicate the largest circle and resize it so it's slightly bigger than the original. Then Group the three circles (Command-G).
Step 2
This is going to be a group I'm going to duplicate many times, so Copy (Command-C) and Paste in Front (Command-F). Unhide the model, and then resize and position one of the groups of circles to be the background frame.
The idea is that we are going to create a motif within the smaller group of circles to be duplicated around the edges of the larger frame.
Step 3
Using the Pen Tool (P) with the same stroke settings, draw the following "pen tool" icon. I've used the Ellipse Tool (L) and the Rectangle Tool (M) to create the shape elements.
Step 4
Group the lines used for the "pen tool" icon (Command-G) and then "Horizontal Align Center" in the Align panel both the circle group and the pen tool group.
Step 5
Hide our new pen tool group for now. Going back to the main larger circle of the piece, I'm going to draw a rounded rectangle over the circles using the same appearance as the circles themselves.
Then, using Pathfinder > Minus Front, remove the largest circle from the rounded rectangle.
8. How to Create Her Hair
Step 1
Now that I have the basic elements of the frame, I will know where the limits are for my hair design to be within the composition. Create a New Layer above the "Top" layer folder and rename it "Hair Sketch."
Using the Paintbrush Tool (B), sketch out the hairline and the shape of the head based on the reference image. This is so you'll know where hair needs to be present.
Step 2
I've made the rest of the vector visible, and I can see along the hair line I haven't compensated for enough skin for the forehead. So I know I'm going to have to make the hair cover this area.
I've reduce the Opacity of the lines for the frame to 20% so it doesn't obscure my hair sketch while I'm working on it.
Then I've drawn where I imagine her hair parting is going to be.
Step 3
Group the first part of your hair sketch together (Command-G) and then reduce the Opacity to 20%. Use this as a base for your hair sketch.
I've drawn the hair style I want. I'm hoping to just cover some of the edges of the frame design and have some of the hair going into the design.
Step 4
Create a New Layer below the "Eyes" layer folder and rename it "Hair."
Now I need to create a "base layer" object for the hair. I'm going to do this using the Pen Tool (P). Now apply a fill color of an auburn brown shade (C=30, M=75, Y=100, K=20) to help complement the vintage palette I'm aiming for and to contrast with the greens I'm going to use later on.
The first shape is to cover the initial core of the hair.
Go into the "Top" and "Bases" layer folders and Copy (Command-C) and Paste in Front (Command-F) the two base layers. Using Pathfinder > Minus Front, subtract these shapes from the hair base layer shape.
Step 5
Using the Width Profile 4 brush from this tutorial, draw strokes where the hair is flying away from the core using the Pen Tool (P). This is so you have more control over your strokes.
You'll need to play with the Stroke Weights to match the most appropriate weights to the strands. Mine varied between 40 pt and 60 pt.
Step 6
Select all of your strokes and then Object > Expand them. Then use Pathfinder > Unite to make them one shape.
Step 7
You will need to go through the task now of cleaning up the shapes so the edges don't look as messy. I do this by adding and subtracting shapes using the Pathfinder panel. Unfortunately this is a time-consuming element, but required to make sure you have your hair base layer perfect.
Step 8
Using the Width Profile 3 brush from this tutorial, add further strands from the hair. I've set the Stroke Weight to 5 pt. If you remember on the original Mucha pieces, the hair has curly tips that cross over each other. Keep this in mind when creating the strands.
Step 9
Now select all of the strands you've just created and Object > Expand them, and then Pathfinder > Unite them to create one Compound Path.
Once you've done this, go into the Appearance panel and add a 1pt Stroke Weight around the shape with the dark brown stroke color. Drill down in the menu for Stroke and change the Blending Mode to Multiply and Opacity to 70%.
Step 10
Using dark brown (C=50, M=70, Y=80, K=70), create a transparent radial gradient. Using the Pen Tool (P), add shading to areas of the hair to give a subtle depth. Mucha didn't appear to add as much detail into the shading of the hair, but added slight areas of shadow and highlight to give it life. Set these shapes to Blending Mode Multiply and Opacity 80%.
Step 11
Create a New Layer above the "Hair" layer folder and rename it "Line Art." Using the Pen Tool (P), begin adding strokes around the face and features and her top. Use the dark brown color set to Blending Mode Multiply and Opacity 70% with a Stroke Weight of 1pt.
Step 12
If you look at the majority of Mucha's pieces, the eyebrows are illustrated with thick dark lines. So I'm going to add two shapes with the same dark brown, with a Blending Mode of Multiply and Opacity set to 70%, to her brows.
9. How to Create the Pen Tool Details
Step 1
Go into the "Frame" layer folder and change the fill colors to the pen tool icon group to the following.
Step 2
Duplicate the circle for the middle circle and apply a deep magenta inverted transparent radial gradient. Set its Blending Mode to Multiply and Opacity to 100%. Duplicate the nib shape of the pen tool and apply an inverted transparent radial gradient with the color as below. Set it to Blending Mode Multiply and Opacity 50%. Then add objects to either side of the nib in the same color and settings to add extra depth.
Step 3
Select the icon and hold down on Alt, then drag alongside it to Duplicate it. Continue to duplicate until you have about 12 icons.
Select all of the icons and select Vertical Align Top in the Align panel.
Step 4
While you have the icons selected, line up the first icon at the top center of the circle frame.
Using the Selection Tool (V), select all of the icons apart from the one which is placed in the center of the circle frame. Rotate the icons, Resize slightly and move into place.
Select all the icons apart from the two which are in place. Repeat the process of resizing and rotating and moving into place.
Continue this process until all the icons are in place. It should look like the image below:
Step 5
Select all of the icons apart from the top center one and then Group them (Command-G). Copy (Command-C) and then Paste in Front (Command-F). Go to Object > Transform > Reflect and reflect it vertically. Position the group on the other side of the circle frame.
Step 6
Select the smallest inner circle of the circle frame and Duplicate it. Then select the next circle up and use Pathfinder > Minus Front to remove the small circle from it.
Fill the frame at the top and the hoop and frame at the bottom with the dark lime green color (C=50, M=40, Y=100, K=0).
Step 7
The next step is a little delicate. This all depends on how you've placed the hair. The look I want to go for is the majority of the model being within the circle; however, I want most of the hair to flow beyond the frame.
We're going to be creating a Clipping Mask to do this. So the key to remember is to create a shape which you want the elements to be visible. Use the duplicated circle for the first part of the shape, as you want everything within this region to be visible. Then add further shapes to this using Pathfinder > Unite combined them with the circle.
Some of it isn't that easy. For instance, if you look on the lower right side, I want the hair to be visible but not the top. What I have done is Pathfinder > Intersect parts of a duplicated hair base to achieve this.
Step 8
Unlock all the layer folders that contain the model, and then lock everything else. Select All (Command-A) and then Group them (Command-G).
Drag and drop the shape created for the Clipping Mask above the group with the model. Then select both and create a Clipping Mask (Command-7). Remove any unnecessary groups and rename the group containing the model to "Model."
10. How to Create the Bottom Text
Step 1
Going back into the "Frame" layer folder, using the Rectangle Tool (M); create a rectangle that covers a section of the lower frame. Use Pathfinder > Minus Front to subtract the rectangle from the frame.
Step 2
Using the Type Tool (T), I'm using the dark lime green fill and dark brown stroke with the typeface Medusa to create the words "VECTOR ART."
Along the top of Illustrator, click into Character to "Set the font size" and to "Set the tracking" so the words stretch along the bottom of the frame. Don't use the Free Transform for this, as it will distort the font and won't look as good.
Step 3
Select the text and Object > Expand it. Use the Selection Tool (V) to align the frame so it surrounds the text at the top and the bottom. Select the text and two frame shapes and Pathfinder > Unite them.
Step 4
Using the Pen Tool (P), create shapes over the bottoms of some of the letters to cover the gaps. Then using Pathfinder > Unite, combine the shapes.
Step 5
Lock all the layer folders and use the Artboard Tool (Shift-O) to reshape the artboard so it is just beyond the composition. Then Create a New Layer above all of the layer folders and rename it "Texture." Within this folder, use the Rectangle Tool (M) to draw a null fill, null stroke rectangle to cover the canvas.
11. How to Add a Watercolor Brush Texture
Step 1
In the Brush Palette, click on the drilldown menu and go to Open Brush Library > Artistic > Watercolor > Artistic_Watercolor and select the brush "Light Wash – Thick" at the top of the brush selection palette.
Using the Paintbrush Tool (B), draw vertical strokes with a Stroke Weight of 20pt and auburn used for the hair (C=30, M=75, Y=100, K=20). Set these strokes to Blending Mode Multiply and Opacity 40%.
Step 2
Using the same settings but changing the Blending Mode Color Burn and Opacity 20%, draw horizontal strokes across the canvas.
Step 3
Draw a rectangle covering the canvas using the Rectangle Tool (M). Fill with an inverted transparent radial gradient using the dark brown color (C=50, M=70, Y=80, K=70). Set it to Blending Mode Color Burn and Opacity 75%.
Step 4
Select all the strokes and the gradient used for the textures and Group them (Command-G). Then using the null fill, null stroke rectangle created previously, create a Clipping Mask (Command-7). Then reduce the Opacity of the Clipping Mask group to 70%.
Step 5
Go into the "BG" layer folder and select the white rectangle preset. Using the Free Transform Tool (E), resize and reshape to cover the canvas. Change the fill color to yellow (C=0, M=0, Y=100, K=0) and the Opacity to 20%.
12. How to Finish With a Quick Mole
Finally, going into the "Model" layer folder, add a mole or two using the Ellipse Tool (L) with the dark brown fill color set to Blending Mode Multiply and Opacity 70%.
Conclusion
Why not try mixing and matching elements of this composition with an Art Nouveau project of your own? Paying attention to the subtle shading and line art, as well as the vintage palette, you can create some great pieces of vector Art Nouveau posters!
Art Nouveau Graphics From GraphicRiver
Do you love the look of classic art? Recreate these incredible classic styles and incorporate them into your own modern illustrations. Browse the remarkable selection of Art Nouveau Graphics from GraphicRiver for more amazing designs.
Art Nouveau - Decorative Frames and Borders
Decorate your illustrations with this amazing set of Art Nouveau-inspired frames and borders. Included in this package are 12 vector frames with fully scalable elements for gorgeous border designs.
Drawing in Art Nouveau Style Tutorial
Source: https://design.tutsplus.com/tutorials/create-an-art-nouveau-poster-in-illustrator--vector-4256
0 Response to "Drawing in Art Nouveau Style Tutorial"
Post a Comment