Okay, it’s been a while since I released a tutorial and it’s about time for a new lesson, so I thought Christmas would be most inspiring idea. We will be creating this high-resolution glossy Xmas icon:


First step is make a new canvas n your desired size. Select the Custom Shape Tool “diamond card” (should come default with Photoshop CS2).

Draw a diamond while holding the Ctrl button, to avoid it loosing symmetrical proportion. The color you use does not matter since we will overwrite these settings with styles.

Hold the Ctrl button and click on the layer thumbnail to get the shape selected. Go to Select >> Modify >> Contract, and contract the selection in 15 pixels. this would determine the frame’s thickness, so its up to you what size to select. Once you are done, you will have sharp edges, so go to Select >> Modify >> Smooth, and apply it, using 10px smoothing effect as you can see below.

For your convenience, make a new layer and fill the selection in lighter colour, so you would be able to see more easily which layer is where.

Now, make sure in layers thumbnail panel thefirst (bigger) diamond card is selected, ad go to Layer >> Layer styles >> Options. Apply the following settings.




The variations of gray and black do not particularly matter, as overall we want a greyish gradient and whatever shared you choose — it will look great. Here is the result so far.

Time for the second, lighter and smaller box, so select it in the layers panel and go to Layer >> Layer styles >> Options, apply the following settings:

Use the #670000 colour for inner shadow.

For inner shadow use #e00a55


Overlay the color with #e51010

For Gradient settings use #a0a0a0 to #FFFFFF.
So, this is the result so far:

Now time for icon’s leitmotif. We are going to use a pine tree, however, you may choose any other shape you want, a snowflake, santa’s hat… whatever! It’s totally up to you as we only show general idea and want to give you a direction.

Draw a tree holding the Ctrl button to avoid it getting distorted.

Select the tree layer, and apply the follow settings for the style.


For color overlay, use #108501 and for Satin, use #02950c

This is what you should get…

To make the icon look glossy and arrange it as one piece, load a selection for gloss. There are plenty of techniques, what we did was just holding Ctrl on the biggest later, and loading a full selection, then using the Elliptical Marquee Tool and “Intersect with selection” option, cut the selection where you want it to stay on top. There are really quite a few options, if you have difficulties with this step, please ask.

Make a new layer. Using #FFFFFF as your foreground color and transparent (none) as the background, draw a line from about 20px above the square and up until 10 px after the edge of the selection.
You should get a gloss that looks like this. If it looks too white or not visible enough, just undo and try again, making sure you work on a NEW layer.


For the final touch, we are going to add some snow. Make a new layer, and using a brush tool with soft edge, 2px, 5px, and 7px, chaotically apply few dots, preferably spread more at the top and less at the bottom to create the effect of falling snow.

To add even more charm to your snow, while the dots layer is selected, go to Layer >> Layer styles >> Outer Glow and using the white colour, 4px size glow, add a little glowing effect to your snow. And the result? This!

Want the PSD? Download here free, no registration required.