1. Start a New Project
Launch Adobe Illustrator and go to File > New to open a blank document. Type a name for your file and set up the dimensions, and then select Pixels as Units and RGB as Color Mode. Next, go to Edit > Preferences > General and set the Keyboard Increment to 1 px and while there, go to Units & Display Performance to make sure that the Units are as in the following image. I usually work with these settings, and they will help you throughout the drawing process.
2. Create a Basic Menu Bar
Step 1
Grab the Rounded Rectangle Tool and draw the first shape with the dimensions shown. Select purple as the fill color.
Step 2
With the rectangle still selected, go to the Appearance panel and with the purple Fill attribute selected, press the Duplicate Selected Item icon at the bottom. As a result you will get a second Fill attribute above. Use a white to black linear gradient at a -90 degrees Angle, and set the Blending Mode to Soft Light.
Step 3
With the rectangle still selected, duplicate the purple Fill attribute again. Select the new Fill attribute from the bottom, keep the same fill color, and then go to Effect > Stylize > Drop Shadow and apply this effect four times. Let’s name this shape “bar‑base”.
Step 4
Next, Copy and Paste in Front (Control-F) the “bar-base” and then remove all existing appearances by pressing the Clear Appearance icon at the bottom of the Appearance panel. Select black as the fill color, and then go to Object > Create Gradient Mesh, select 3 Rows and 6 Columns and hit OK. As a result you will get a mesh grid like in the following image.
Step 5
Now, grab the Direct Selection Tool (A) and use it to select only the three mesh points indicated below and change their fill color from black to the corresponding one. After you are done, set this shape to Blending Mode Soft Light. Let’s name this shape “bar-mesh”.
Step 6
Take the Rectangle Tool (M) and draw a rectangle with the same height as your menu bar, and position it in the middle. Select light blue as the fill color.
Step 7
With the blue rectangle still selected, go to Object > Path > Add Anchor Points in order to add four extra points on the sides (1). Use the Direct Selection Tool (A) to select only the left and right points from the middle and move them 10 px inwards by pressing the Left and Right Arrow Keys on your keyboard (2).Next, go to the Appearance panel and duplicate the existing blue Fill attribute. For the new Fill at the top, select a white to black linear gradient at a -90 degrees Angle and set the Blending Mode to Soft Light (3).
Step 8
Take a closer look at the right side of the blue shape. Take the Pen Tool (P), draw a V-path following the anchor points of the blue shape, and give it a 1 pt white Stroke. Copy and Paste in Front (Control-F) this path, and then move the copy 1 px to the right by pressing the Right Arrow Key once. Select a 1 pt black Stroke for the second path. Now, Group (Control-G) the two paths and set the group to Blending Mode Soft Light.Don’t forget to do the same thing on the left side of the blue shape or simply reflect the existing group.
3. Create the Snow on Top of the Menu Bar
Step 1
Now that our simple menu bar is ready, we can proceed with the snow and the other decorations. To add the snow, I recommend using the Pencil Tool (N) instead of the Pen Tool (P) because it’s easier and we will also get that freehand/natural look, which in terms of snow is a good thing. Double-click on the Pencil Tool (N) to open the Preferences window and change the settings. You can see below the ones that I've used, but feel free to adjust the Fidelity and the Smoothness to your liking.Once set, zoom in on the right side of your menu bar and draw a path similar to the one below. You don’t have to be too precise: the more random the better.
Step 2
Still using the Pencil Tool (N), draw another random path under the first one and make sure that you cover only a little of the menu bar. If the end points of the two paths do not overlap, you can use the Direct Selection Tool (A) to move them on top of each other as shown in the close-up.Next, it’s time to merge the two paths into one. Drag a selection with the Direct Selection Tool (A) over the two end points from the right (just make sure to lock the menu bar first) and press Control-J to Join them. Check the Corner option and hit OK. After that, drag a selection over the two end points from the left and Join them as well. Fill the resulting shape with white.
Step 3
Still using the Pencil Tool (N), draw a new path under the white shape but very close to it. The length of this path should be about the same as the white shape (1). At this point, switch to the Pen Tool (P) and close the two end points at the top in order to get a shape (2). Copy and Paste in Front (Control-F) the white shape, and then press Shift-Control-] to bring it in front of everything. Select this new white copy along with the blue shape and press Subtract in the Pathfinder panel. You will get a compound path (3) but go to Object > Compound Path > Release and delete the smaller shapes at the top (4).
Step 4
Fill the shape that you have obtained in the previous step with the color indicated, and at this point the first “piece” of snow is ready.
Step 5
Take the Pencil Tool (N) again and draw a smaller shape on the right end of the menu bar filled with white (1). Draw another path under it and make sure that the right and left end points are overlapping (2), and then close the path at the top as you did before, using the Join function or the Pen Tool (P) (3). Copy and Paste in Front (Control-F) the small white shape and press Shift-Control-] to bring it in front of everything. Select this white copy along with the blue shape and press Subtract in the Pathfinder panel. Fill the resulting shape with the same color (4). This is the second “piece” of snow.
Step 6
Let’s add more snow on the left side of the bar using the same technique. First draw the white shape with the Pencil Tool (N) (1), and then create the shape under it by subtracting (2), and fill it with the same light blue color (3).
Step 7
Continue to add more “pieces” of snow, some bigger, some smaller, until you completely cover the top of the menu bar. You can see in the next image the final result.
Step 8
Use the Pencil Tool (N) or the Pen Tool (P) to draw a shape like the one below, and fill it with the linear gradient shown. You can also draw a few smaller shapes next to it that are filled with the same gradient, and then select all the shapes and Group (Control-G) them.
Step 9
Use the group of shapes that you have just created to add more details on the snow. Make more copies of the group and scale, rotate and arrange them on top of the snow.
4. Create the Icicles Under the Menu Bar
Step 1
Use the Pencil Tool (N) to draw a random shape in the bottom right corner of the menu bar, and select white as the fill color. Now, grab the Add Anchor Point Tool (+) and use it to add a few extra points at the bottom of this shape (1). Then switch to the Direct Selection Tool (A) and drag only three of these points downwards to create the first icicles (2). Add more points using the Add Anchor Point Tool (+) along the length of the icicles, and play with their handles to create the wavy look (3).
Step 2
Draw a new random shape next to the first one, and then add more points at the bottom with the Add Anchor Point Tool (+) (1). Use the Direct Selection Tool (A) to drag two of these points downwards in order to create two new icicles (2). Add more anchor points along the length of the icicles, and move their handles to create the wavy look (3).
Step 3
I added one more white shape next to the second one, but you can add as many as you want. In this tutorial the design is up to you.
Step 4
Now select the three white shapes from the bottom right side of the menu bar, and Copy and Paste in Back (Control-B). Move these three copies down a little by pressing the Down Arrow Key on your keyboard once or twice, and select light blue as the fill color.
Step 5
To add more depth, draw with the Pencil Tool (N) or the Pen Tool (P) a thinner shape on top of each icicle, and fill all of them with the gradient shown.
Step 6
To add more details, draw a few smaller shapes where you have free space, and fill them with the color indicated.
Step 7
The bottom right side of the bar is ready, but you can add more icicles on the left side. These are smaller so they won’t take a long time to make. Use the same technique as described above. First, draw the white shape (1), and then Copy and Paste in Back (Control-B) this shape, move it a little down and change the fill color (2). At the end, use smaller shapes filled with the same gradient to add as many details as you want (3).
Step 8
Using the same technique, add more icicles on the bottom left corner of the menu bar and at this point you are done with the snow and the icicles.
5. Create and Apply a Snowflake Scatter Brush
Step 1
Go to Snowflake and download the vector snowflakes set created by All-Silhouettes. Then open the Illustrator file from the archive and copy the snowflake highlighted with blue into your document. Select white as the fill color, and drag the snowflake into the Brushes panel to save it as a New Scatter Brush. In the Scatter Brush Options window, set the Rotation Relative to Path and leave the rest of the settings as they are. Type a name for the brush and hit OK.
Step 2
Now, take the Pencil Tool (N) again and draw some paths above the snow as in the next image. Stroke these paths with the Snowflake Scatter Brush saved earlier and open the Stroke Options window from the Appearance panel. Change the settings as shown and hit OK. Set the Stroke weight for these paths at 0.25 pt, 0.3 pt, 0.35 pt and 0.5 pt in order to get snowflakes of various sizes.
6. Add Various Winter Decorations
Step 1
Copy the snowflakes highlighted with blue and green from the snowflakes set into your document. Then fill them with white, scale them, and arrange them on the left side of the menu bar.
Step 2
Next, from the Symbols panel open the Symbol Libraries Menu and in the Nature category find “Trees 1”. Drag the symbol into your artboard and press the Break Link to Symbol icon at the bottom of the Symbols panel in order to expand it. Scale and arrange the trees on top of the snow and multiply them if you want to add more.
Step 3
Now, take a closer look at the trees. Grab the Pencil Tool (N) and draw some short paths following the branches of the bigger tree. Stroke these paths with the Charcoal-Thin Art Brush that you can find in Brush Libraries Menu > Artistic > Artistic_ChalkCharcoalPencil. Set the Stroke weight to 0.5 pt and the color to white for all of them.
Step 4
Repeat the same process for the other trees but reduce the Stroke weight even more since the trees are smaller.
Step 5
Multiply the snow-covered trees that you have created and arrange more of them on the other side of the menu bar.
Step 6
To create the small house, start by drawing a simple house shape filled with white. For the roof, draw a path with a 1 pt red Stroke and add a small red shape as the chimney. For the door and windows use the Rectangle Tool (M) and the gradient shown. To create the snow on the roof, simply draw two paths on top of the roof and Stroke them with the Charcoal-Thin Art Brush as you did earlier for the trees.
Step 7
Next, take the Ellipse Tool (L) and draw three ellipses to create the snowman. Fill them with the radial gradient shown, and then add small black circles as the eyes and the buttons. Use the Pen Tool (P) to draw a nose and the scarf, and you are done.
Step 8
At this point you can arrange the small house and the snowman where you want.
Step 9
It seems mandatory to add a lot of sparkles, right? I’ve already explained how to create one in the Glitter Text Art Effect tutorial. Multiply the sparkle and arrange as many as you want to enhance your design.
7. Create and Decorate Web Buttons
Step 1
If you've managed to get to this point, then you will be able to create and decorate a simple button instead of a bar. Start by drawing a smaller rounded rectangle (1), and then create the grid mesh as explained at the beginning of the tutorial (2). Add “pieces” of snow at the top and icicles at the bottom (3) and use the Snowflake Scatter Brush to add more snow (4). Arrange the decorations that you have created (5) and finally add a few sparkles (6). All the techniques remain the same.
Step 2
Duplicate or multiply the first button and simply rearrange the existing decorations to obtain more buttons.
8. Create More Menu Bars
Step 1
Duplicate the purple menu bar with the snow at the top, the snowflakes and the icicles, but without the other decorations. Select “bar-base” and replace purple with the shade of green indicated. Keep the rest of the settings as they are.
Step 2
Next, select the shape from the middle and replace the light blue with light green. Arrange all the decorations in a different way and you will get a new menu bar.
Step 3
To create the grayish menu bar, duplicate the purple bar again. Select “bar-base” and replace purple with the shade of gray indicated. After that, select the shape from the middle and replace the light blue with pink this time. The rest of the settings remain the same. Finally, arrange all the decorations as you want.
Your Winter Wonderland is Ready!
These menu bars and buttons are pretty basic and they help with the demonstration, but feel free to use any other website elements to create this winter wonderland look. You can start from scratch or you can use just a few items to decorate your own menus and buttons. It is absolutely mandatory to have a lot of fun while doing so, and if you want to share your winter-wonderland-creation, I would love to see it.
