We are currently in the cold season, for that we are about to create a nice winter-themed icon for an Android based Game App. In this tutorial I will demonstrate the process of visually developing a completely vector-based illustration in CorelDRAW, which we then can use as an icon for a game app. For the sake of simplicity of this tutorial I will focus only on one size, which will be 512px to 512px (The App Store icons on the Google Play Market are requested in this size), so we could derive the smaller required icons later on, with the same approaches.
1. Put Together Ideas
Step 1
I like working the traditional way, when nailing down some quick ideas and preferably I work in a sketchbook with brownish tinted paper. This way I can use dark pens or pencils as well as white ones, which saves to put extra work on midtones, since they are already provided by the paper. This is called Midtone Sketching.
Once I got down some loose ideas, I usually discuss them with the client, until we have a final idea. The result in this case was a combination of several elements from the thumbnail sketches.
Step 2
Once the idea is clear, I start to draw a quick pencil sketch, which will be then scanned, retouched and as soon as possible I manage to get it into the vector drawing application of my choice, CorelDRAW.
2. Import and Render the Sketch in CorelDRAW
Step 1
Open up CorelDRAW and create a New Document with the following settings, according to our desired icon size:
- Document Size to 512px by 512px
- Primary Color Mode to RGB
- Rendering Resolution at 96dpi
Create a square with the Rectangle Tool, with the same dimensions as the document size (1). In the Properties Bar, enable the Rounded Corners (2), and make sure that all corners are set to 50px (3), but the little lock icon in the middle needs to be locked first. This way you can make sure all corners are adjusted at once.
Step 2
After drag and dropping the sketch into the document, apply a Uniform Transparency of 80% with the Transparency Tool (1). Switch to the Object Manager Docker (Go to Menu > Windows > Dockers > Object Manager if it is not yet open), select the bitmap, click the right-click and drag it onto the rectangle (2). The Context Menu opens, here select Powerclip Inside. Now you can enter the Powerclip Container, and adjust the size of the bitmap according to the rectangle borders.
Step 3
You can create a nice border to the inner of the icon background with the Contour Tool, which you adjust, until it fits the inner contour of the sketch (1). Once that is done, break the Contour Group apart with Control-K and leave it on this layer, but for the upcoming line work create a new layer, by clicking the icon at the bottom left of the Object Manager. Grab the Freehand Tool (F5 key) or the Bezier Tool, and start tracing the image (2). You don’t have to be fuzzy about overlapping lines, get rid of them with the magic Virtual Segment Delete Tool, after the tracing is done.
3. Block Out a Basic Coloring
Step 1
Start blocking out the illustration with the Smart Fill Tool on a new layer. In the Property Bar choose a cold grey-blue color to lay out the flat colors for the snowman and the background. Don’t worry about the exact color, it is meant to be changed anyway in the next step. It is just to get the illustration blocked out. To simulate some atmospheric haze in the cold air, fill the near trees darker than the further ones.
Step 2
To bring more volume into the shapes, use some fountain fills instead of the flat colors. The radial fountain fill type fits best for the rounded shapes. To speed things up a bit, you can create a square aside first, where you can test colors and fountains. I decided for a light blue fill with a white center, which can be dragged to the upper right corner, to simulate some light from up right.
Simply click-drag with the Right Mouse Button onto the destination shape. With the release of the mouse button, the Context Menu opens, and you can select Copy Fill Here. This process allows to quickly apply the same fill to different shapes.
Step 3
To color the ground, simply apply a linear fountain fill, starting from a light green blue over a white center to green blue again. The fountain goes from the left to the right of the visible area of the ground shape, a slight angle is used to get the center of the composition a bit brighter.
Later on this provides a good value contrast to the snowman and the trees, to draw the attention more into the center of the whole image. Keep the initial cold green blue color, since it provides a good base behind the snowman, to let him pop out a bit more – it makes the icon more readable on smaller sizes.
Step 4
Add some bumps on the floor, simulating some hidden things under the snow blanket. A few shapes drawn with the Freehand Tool should be sufficient. To blend them into the ground, apply a fountain fill with the Fill Tool from white at the top to the same green blue color, which we can pick with the Color Picker of this dialog from the sides of the ground. Well done!
Step 5
For the shadows you can use a technique where to create invisible shapes with drop shadows; all that’s left to see is the shadow itself, which gives a smooth shading, perfect for shadows. Draw the shadow shape first with the Freehand Tool again, roughly to match a kind of drop shadow under the trees.
We can let the shape overlap the trees, you can powerclip the result later anyway. The color is not necessary at that moment, apply a Uniform Transparency of 100% instead.
Step 6
With the shape still selected, also apply a Drop Shadow Effect, and in the Properties Bar choose the Large Glow preset. Apply the following settings:
- Feather Amount set to 88%
- Feather Direction to Average (1)
- Select a dark green blue color with the color picker from the drop down menu in the Color fly-out (2)
Step 7
The same process is repeated for the drop shadow under the snowman, and additionally, put another shape on top of it, to bring out the shadow a bit more and to make the texture on the ground more believable. Finally, apply a radial transparency to it, to blend it more into the ground.
4. Shade the Snowman
Step 1
With a satisfying result for the ground, we also have an approach for the volume shading of the snowman. Maybe he needs a bit more shading to come to live. But here a different method can be used to achieve smooth shades, one which allows more control over the shape and feathering of the shade itself.
Step 2
Start with a roughly drawn shape, created with the B-Spline Tool, for the area, which should be covered by the shade – the color is a warm sky blue. Of course do one shape at a time, the further arm for example. The reason why to use the b-spline tool for that is, because the shape needs to be duplicated, adjusted in shape and finally that it needs to have exact the same amount of nodes as the shape you started with.
Step 3
Now, push the nodes of the duplicate shape towards its center, to have a way smaller shape at the end. This will be the shape and the color of the darkest core shadow. For the color select the same two colors as the linear fountain fill, the the base shape has: blue and white, but the direction needs to be opposite to that one.
Step 4
After that, pick the Blend Tool, and drag over both the core as well as the shading shape, to get both snapped and interactively converted to a Blend Group. Actually you don’t have to change any of the settings in the Properties Bar, but if the Steps are too few, you can increase them.
Step 5
Now we switch to the Object Manager and open our Blend Group, and select the bottom shape. You only need to set the Transparency to Uniform, and the Blend Mode to If Darker which blends the entire Blend Group nicely into the base shape color.
To finish the nice shading effect, put some white highlights with the Bezier Tool on the top right edges of the base shapes, with a linear fountain transparency towards the darker shades. All what is left is powerclipping the shades and highlights into the base shapes and – done.
5. Add Shading to the Trees
The trees in the background are still looking naked somehow, and don’t fit into the snowy scene yet, so time to let it snow!
Grab the Freehand Tool again, and draw some horizontal shapes on the trees, with strong jaggy edges at the top and rounded bumps at the bottom. Combine all these shapes by selecting them and pressing Control-L and apply a linear fountain fill from the top to the bottom, with the same green as the tree as start color and a white as stop color. After that, break all shapes apart again with Control-K, group them with Control-G and powerclip them into the basic tree shapes.
6. Outlines and Adjustments
Step 1
Duplicate the base shape of the snow ball and apply a Drop Shadow Effect with the preset Large Glow and White Color. Play around a bit with the settings, to get the effect of letting the snowball popping out more against the background and the snowman. For better visualization you can set the layer with the outline shapes temporary to invisible.
Step 2
You still should have all the drawn lines of the initial trace on a separate layer, so just duplicate them onto a new layer, and select the foremost outlines closest to the viewer (that is the snowball with the splashes), except the lines that lay inside the snowball. The Status Bar shows two little icons in the bottom right corner, one for the fill and one for the outline. With a double-click onto the outline icon you can open the Outline Properties, and here you can set
- the Outline Width to 5px
- the Corners and Line caps to round
- and check Scale with Object.
Step 3
For the front trees and the snowman, repeat that with an Outline Width of 4px, the rest of the background’s outlines will be done in 3px. After that, select all Outlines and hit Control-Shift-Q, which converts all outlines to shapes. Now you can apply a linear fountain fill to the outlines, according to the color of the related base shape. For the snowball for example it would start with a dark blue at the bottom and end with the actual dark color of the base shape, in this case a light blue.
Step 4
With the inner lines like in the Snowball and the upper tree twigs, you can use a Custom Media Stroke Preset, to achieve the spiky ends. Break it apart and fill it the same way.
Step 5
Pick the powerclip shape with the sketch in it, and in the Object Manager you can Extract Contents with a Right Mouse Click to delete the Sketch. Now apply a Contour Effect, set to Inner, and a Distance of 6px. With the shape still selected, break the Contour Group with Control-K and combine both elements again with Control-L, so that only the small Contour remains, without a background. It receives a linear fountain fill from light blue at top left to dark green blue at the bottom right.
7. Export Your Icon
Almost finished. Check the whole illustration for visible outlines and set them to invisible, and after that export the icon as JPEG, with Control-E. The Export Settings:
- set the Quality to 100%
- the Sub format to 4:4:4
- and check Progressive.
The rest stays untouched.
Awesome Work, You’re Now Done!
The final result should look similar to the below. I hope you’ve had fun creating your snowman themed icon. CorelDRAW has plenty to offer, so keep your eye open for more tutorials in the future!
