Homemade Tutorials

Christmas is coming soon, so I thought I’d make a quick tutorial on how to create a Christmas decoration (globe) icon in Illustrator. You should be able to use this both in large size and small size (e.g. 32×32 pixel icons).

Step 1

Open Illustrator CS2 (or the version you currently have). Give it the size of 800×600px.

Grab the Rectangle Tool (M) and draw a rectangle of 800×600 (fill up the whole canvas). Color the Rectangle with #0E0F05. Press Ctrl + C, then Ctrl + F to duplicate this path.

Duplicate it again. Color the first copy with #565404. For the second copy (the one on top), give it a gradient fill of black and white, then make the gradient type Radial. Grab the Gradient Tool (G) and draw a gradient so that it looks somewhat like below:

Step 2

Select the top two layers by holding Shift and clicking on the little circle located to the right of their names within the Layers window. Go to the Transparency Tab (if you don’t have it showing, go to Window > Transparency). Then click on the little arrow icon at the top right of the Transparency window. Then click Make Opacity Mask. You should now have a radial gradient of green. Also note that the two layers have now “merged” into one layer, its name now having a dashed underline.

The steps are illustrated below:

Step 3

Create a big white circle shape by selecting Ellipse Tool (L), holding down Shift to draw a perfect circle. It should be about twice or three times in diameter as the document height. Go to Effect > 3D > Rotate… and change the settings to match the ones below:

Step 4

Now move the resulting ellipse up and make sure it is centered horizontally and aligned to the bottom of the document. Move it up until its top edge takes up about a quarter of the total document area. Now, holding Alt, drag one of the transform points at either the left or right edge of the ellipse until the top edge looks almost flat.

Go to Effect > Blur > Gaussian Blur… and give it a blur with a 48px radius. Then go to the Transparency window and with the blurred ellipse layout selected, give it an Overlay blending mode.

Confused? See the steps below:

Step 5

Now that we’re done with the background part, let’s move on to the actual decoration.

Draw a circle so that its bottom part goes over the bottom background highlight just slightly. Give this circle a radial gradient fill like below:

Step 6

Duplicate that circle and fill it with white. Duplicate the white circle and while holding down Shift, drag the bottom right corner of its bounding box towards the top left, scaling it down, until the smaller circle ’s outside top left bound touches the bigger circle’s top left edge.

Select both circles (big and small) and go to Window > Pathfinder to show the Pathfinder tab. Click the Trim button. This will now group the two circles together and the bigger circle will have a “hole” inside it the size of the smaller circle. Right click the group and select Ungroup. Click on the smaller circle and delete it. You should now have a shape such as in the slide #4 below.

Step 7

Apply a Gaussian Blur 9px on the half moon shaped path. Select the circle shape under it and duplicate it, fill it up with white, then select the half moon shape and click Ctrl + [ to send it back one step, putting it behind the white circle shape. Now select both the half moon and the new circle shape, right click on them and select Make Clipping Mask. You should now have something like the slide #1 below.

Select the blurred half moon shape and while holding Shift, rotate it until the base of the “moon” (i.e. the thicker part) is at the top right of the orange circle. You should have a result like slide #2 below.

Step 8

Notice how the intensity of the highlight is a bit too high? We need to adjust this.

Go into the Layers window and double click on the layer named Group to rename it, then give it the name “Main Highlight”. Within this group you have two layers/shapes. Select the last one (click on the little circle next to its name) then give it an Overlay blending mode. (See slide #1 below)

With the same shape selected and holding Shift, scale the highlight up until it the edge of the orange circle is sort of going through the half of the highlight, like in slide #2.

And voila! Our first highlight! Isn’t this exciting! Don’t answer that

Step 9

Select the Main Highlight group and Shift-rotate it so that the base of the highlight is at the bottom of the circle. Then, within the group, select the last layer/shape and give it a black fill. After that, give it a Soft Light blending mode. Double click on the group’s title and name it “Bottom Shadow”. You should have a result not unlike the image below.

Step 10

It’s time for our secondary highlights. Go ahead and duplicate the first Main Highlight and name it Secondary 1. We’re gonna have 3 of these secondary highlights.

Give the group a Soft Light blending, then move it and rotate it so that it’s in a similar position to slide #1 below. Then go to Effect > 3D > Rotate… and give it the options from slide #2. You should now have something that looks like slide #3 below.

Step 11

Duplicate Secondary 1 and name it Secondary 2. Scale it down to about half and place it in the position shown in slide #1 (so that it looks like it’s continuing the first highlight and forming a spiral).

Go to Effect > 3D > Rotate… and give it the options from slide #2. You should now have something that looks like slide #3 below.

Step 12

Pretty much the same thing for the third highlight. Duplicate Secondary 2 and name it Secondary 3. Scale it down and place it in the position shown in slide #1.

Go to Effect > 3D > Rotate… and give it the options from slide #2. You should now have something that looks like slide #3 below. Adjust until you are happy with the outcome.

Step 13

Select the orange shape, duplicate it, then fill it with white. Duplicate this shape as well. Nudge this shape using the arrow keys pressing right and bottom once each. Very slightly scale it towards the bottom right so that the bottom right of the edge slightly goes over the bottom right edge of the circle under it (see slide #1 and #2).

Then select both white circle shapes and in the Pathfinder window, click Trim. Then right-click the shapes, select Ungroup. Click the middle of the shapes and press Delete. You might have to lock the other layers for this one, otherwise you might select another layer that is on top of them. You should now have something like slide #3. Give this layer a Soft Light blending mode and we end up with a very subtle highlight, which is what we want. Name this shape “Slight Highlight”.

Step 14

Duplicate the Slight Highlight shape, Shift-rotate it to the position across, fitting the bottom right of the orange circle. Zoom in and make sure you place it exactly over the orange circle, otherwise you will have some rather nasty and distracting colors coming out. Finally, turn its opacity down to 50%. Outcome should look somewhat like below.

Step 15

Now, let’s make some sparkles. Select the Ellipse Tool (L) and create a very small white circle (slide #1). Duplicate it and slightly scale the new circle (slide #2). Apply a Gaussian Blur of 4px to the larger circle (slide #3). Apply a Gaussian Blur of 1px to the smaller circle. (slide #4). Select both shapes and press Ctrl + G to group them. Name the group “Sparkle”.

Step 16

Populate the globe with sparkles by holding down Alt and dragging and dropping them and re-scaling them for diversity. You could set a different Blending Mode for the ones located over the orange globe, such as Overlay for different colors. You should have an outcome similar to the image below.

Step 17

Using the Pen Tool create a shape similar to the one in slide #1 below (little crown). Give it a Linear Gradient like in slide #2. Create a little handle (slide #3) and select the Eyedropper Tool (I) and use it on the little crown to copy its gradient (slide #4).

Final Step

Grab the Ellipse Tool (L) and create a black circle like in slide #1 below. Give this circle a Gaussian Blur of 9px (slide #2). Go to Object > Expand Appearance to sort of raster the blur effect, this way it won’t adapt to the shape. Holding down Alt, scale down the shape vertically so that it looks more like a shadow, then press Ctrl + [ to send it back, until it is under the crown shape (slide #3). Give it a Multiply blending mode and set the opacity to 50%. (slide #4)

And there you have it, a nice Christmas globe icon. If you enjoyed this tutorial, I would appreciate it if you would leave a comment to let me know.

It’s way, way, way too late over here right now so, until next time! Merry (early) Christmas!

Download Vector Christmas Decoration Icon Illustrator File

Post comment