Festivity is in the air these days; every place is being decorated with Christmas trees, ornaments and colorful lights. In the meantime, web designers are also focusing on creating their own festive artworks, whether it’s a greeting card, a holiday advertisement, or just some seasonal wallpaper. It’s the demand of the season. That’s the reason I thought of creating some colorful Christmas ornaments, which I am going to share with you.
In this tutorial, I’ll show you how to create a 3D Christmas ball ornament in Illustrator from scratch. You will also learn how to create different types of snowflakes and how to incorporate them onto the surface of the Christmas ornament. Hopefully, you will learn some handy Illustrator tips along the way, so let’s get started!
Final result: (Download the completed Illustrator file here.)
Create a new document in Illustrator with a 600px width and an 800px height.
First of all, we’ll draw the basic ball shape. Select the ellipse tool to draw an ellipse of the size you want your Christmas ball to be. Hold the Shift key while making your ellipse to get a perfect circle. Choose any fill color and set stroke to “none.” I am going to use dark red fill color to fit our holiday theme.
To make the Christmas ornament’s neck, select the rectangle tool to draw a small rectangle at center of the top of the ball.
Now select the “Convert Anchor Point Tool” and click and drag the bottom-left anchor point of the rectangle to achieve the shape shown below. Click and drag the bottom-right anchor point in the same way for symmetry.
Now, select both the ball and neck layers and go to “Window” > “Pathfinder.” Hit “unite” in the pathfinder window to combine these layers. Label this new shape layer as “Color”.
Duplicate the “Color” layer, and label the new duplicate as “mesh1”. We’ll use it for the shading. Select the “mesh1” layer and change its fill to a gray color.
Keep the “mesh1” layer selected and pick the mesh tool. Click a point over the ball where you want to create the highlight and then select pure white from the color swatches.
Click another point over the ball using the mesh tool and then pick a lighter gray shade. Experiment with the shading using the same technique to get the desired result.
Change the blending mode of the “mesh1” layer to “Overlay” to get the effect shown below.
Duplicate the “mesh1” layer and label the new duplicate as “mesh2”. Select this layer and change its blending mode to “Multiply” with 30% opacity.
Now, I’ll show you how to make various snowflakes in Illustrator. There are many techniques to do so; I’ll show you few of them. Select any fill color to begin with and select the star tool. Apply the star brush on a new layer while holding the Shift key and pressing the up arrow key two or three times to get more sides of the star. I’ve made a star with seven sides. After that, select this star and go to “Effect” > “Distort & Transform” > “Pucker& Bloat.” Use the following settings here.
Now, select this new shape layer and go to “Effect” > “Distort &Transform” > “Zig Zag.” Apply the following settings for Zig Zag.
To make another snowflake, select the polygon tool and apply it on a new layer while holding the Shift key. You can make even more sides to the snowflake by pressing the up arrow key. Now, use the following “Pucker& Bloat” settings to make a flower.
Now, apply the following settings for Zig Zag on the flower shape to make a new, slightly different snowflake.
Next, select this new snowflake layer and apply following gradient to it. After that, drag this gradient to the swatches.
Apply the same gradient on the other snowflakes. Now, duplicate the two types of snowflakes few times, resize them, and arrange them any way you like. Once you are satisfied with their positioning, select all the snowflakes and collect them in new layer. Label this new layer as “Snowflakes”.
Now, duplicate the “Color” layer and place this copy just above the “Snowflakes” layer. After that, select the duplicated color and snowflakes layers and press Ctrl + “7” to create clipping mask. I’ve made another snowflake sequence by experimenting with varied “Pucker& Bloat” and “Zig Zag” settings.
Next, we’ll make the Christmas ornament’s cap. Select the rounded rectangle tool to draw a rounded square. Right-click the document and select “Transform” > “Rotate.” Enter a 45⁰ angle. Duplicate the angled rectangle and arrange it just below the original rectangle. Make a smaller rectangle inside this duplicated one.
Now, select the bottom two rectangles and hit “Minus Front” within the pathfinder panel. After that, draw a rectangle and position it over the upper half of the top rounded rectangle. Now, select both the top rounded rectangle and this new rectangle and hit “Minus Front” once again in the pathfinder panel. Collect these shapes into new layer and reduce its size a bit horizontally using selection tool (“V”). Label the layer as “Cap pattern”.
Duplicate the “Cap pattern” layer twice and arrange the duplicates as shown below over the ball’s neck. After that, select the three layers and hit “unite” in the pathfinder panel. Now, apply the same gradient on the cap that you applied to the snowflakes.
Duplicate the cap layer, change the color of the original layer to black and reduce its opacity to 45% to make a subtle shadow.
To make the cap’s hook. Draw two ellipses over each other as shown below. Select them and hit “Minus Front” in the pathfinder panel. Draw a rectangle over its lower half, select these shapes and again hit “Minus Front” in the pathfinder panel to get the curvy shape shown below. Resize and position it at top of the cap.
Lastly, make two thin rectangles as shown below.
Our gorgeous Christmas ball ornament is ready. You can create different styles of Christmas balls from this simply by changing the color of the background circle. You can try different patterns instead of snowflakes.
I hope you enjoyed the tutorial. I’ll be waiting for your feedback. Happy holidays!
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Forms
Jump Start Sketch
The Ultimate Guide to Prototyping
- 1 Type Nugget: Good Typography is About Finding the Right Playground
- 2 8 Distinctive Headline Fonts to Make Your Content Sizzle
- 3 ‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)
- 4 Testing PHP Code with Atoum - an Alternative to PHPUnit
- 5 Is Sketch App with Atomic.io the Perfect UI Design Duo?