Sponsored Content
This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Get your 30-day free trial now! You will be downloading a 30-day, fully functional trial version of CorelDRAW Graphics Suite X7. This trial is available in both 32-bit and 64-bit versions. The 64-bit version has been optimized for those with 64-bit versions of Microsoft Windows 8/8.1 or Windows 7.
Visual appearance is one of the main aspects of any game alongside the gameplay itself. In this tutorial we’ll take on the role of a video game designer and create our own repeating background, depicting a colorful orchard. We’ll work with some basic shapes and use Mesh Fill to enliven our objects in CorelDRAW® X7. Let’s get started!
1. Prepare the Base for the Orchard Background
Step 1
First of all, let’s create a New Document of 1280 x 768 px size.
Step 2
Find the Rectangle tool (F6) in the Tools panel and double-click it to create a rectangle centered on the page, the same size as your document.
Select the Interactive Fill tool (G) and apply a linear gradient to the created shape. If you've only just started learning how to use CorelDRAW tools or forgot something, head to the Hints panel (Window > Dockers > Hints) to find some informative tips with illustrations and descriptions on using any tool.
Step 3
Let’s enliven the picture by creating a vivid summer sky. Select the upper square node of our gradient fill and apply a sky blue (R=0, G=204, B=255) color from the default color palette that is located in the right part of our workspace. You can see the color variations if you click and hold the palette square.
Another way to apply the desired color to the nodes is to click on a square of the interactive fill and select the color directly in the pop-up Node color panel. Apply pure white color to the bottom node. You can click your right mouse button on a crossed square at the top of the Color Palette panel to switch the Outline color to none, and do the same for Fill color with the left mouse button.
Step 4
Double-click on the Rectangle tool (F6) again, press Shift-Page Up to place the created shape on top and squash it, forming a narrow stripe in the bottom part of the page. Fill the shape with bright green color, creating a grassy lawn. Convert the rectangle to Curves (Control-Q) and place several additional nodes on the upper side of the shape by double-clicking it with the Shape tool (F10). Move the points up and down, thus creating a zigzagged line.
Step 5
Copy and Paste (Control-C > Control-V) the shape and Mirror it horizontally by clicking the appropriate button in the upper control panel while the shape is selected. Fill the copy with darker green color by clicking the Fill bucket icon in the bottom of your workspace to reveal the Edit Fill options window.
2. Create the Clouds With the Freehand Tool and Mesh Fill Tool
Step 1
Let’s start filling up the blank space by adding some clouds in the sky. Take theFreehand tool (F5) and draw a curved shape, resembling a woolly tufted cloud. Fill the shape with white color and apply the Mesh Fill tool (M) by clicking the cloud shape. Let’s get rid of the central node that appeared after turning the shape into a mesh. For this purpose, just double-click it, while the Mesh Fill tool (M) is still selected.
Step 2
Let's form the mesh grid by adding new rows and columns to our cloud. We can do it in several ways. The first way to form a grid is to add some rows and columns in theGrid size panel from the Property Bar in the upper part of your workspace.
Click the arrows, adding the desired quantity of mesh grid cells.
This way rows and columns will be added to the object automatically, forming the grid. However, if we wish to edit the position of rows and columns, we'd better use another way of making our grid.
Let's try adding some rows and columns manually. Make sure you have the Mesh Fill tool (M) selected, move the cursor to the bottom left area of our cloud anddouble-click to create a crossing point, thus forming the first row and column of our grid.
Another way to add rows and columns is to single click on a place, where you'd like to create a node and use the Add intersection function in the Property Bar above.
Step 3
Now that we have enough rows and columns, let's find the Selection Mode drop-down menu in the upper control panel and switch to the Freehand selection marquee, while we are still armed with the Mesh Fill tool (M). Then select all the nodes inside the cloud, except the nodes that are going along the edge.
Open the Color Docker (Window > Dockers > Color) and fill the selected nodes with light-blue color by setting the desired color in the palette and clicking the Fillbutton to apply new fill.
Then select a group of nodes right in the center of our cloud, making them a bit darker.
Now our cloud looks more three-dimensional as it has a blue overtone from the sky and bright ambient lighting on its edges.
Step 4
Let’s create a smaller cloud and fill it with bright purple and blue colors, using the same techniques with the Mesh Fill tool (M).
Step 5
Place the clouds in the upper part of our image and move to the sky background. Let’s make it more intricately adding some details. Add a mesh fill to the sky and create several additional rows and columns. Make one of the created mesh lines slightly curved by dragging its parts up and down with the Mesh Fill tool (M),forming a wave.
Step 6
Select the node of the curved line and switch its fill color to white, making a nice feathered blur. Curve the lower mesh lines as well.
Now we have a bright, tranquil sky with gentle air strokes on it. Let’s move on to the next element of our composition!
Duplicate (Control-D) the clouds several times and place the copies as shown in the screenshot below to make the composition more interesting. You can mirror the objects by selecting the Pick tool and then holding and dragging the edge of the cloud to the opposite side. Group the clouds by clicking Control-G keys combinations or by simply using the Group objects function in the Property Bar.
Using the Object Manager (Window > Dockers > Object Manager) is quite helpful if you want to keep you work clean and your objects nicely ordered. Right-click the object or group of objects in the Object Manager and use the Rename function from the folding menu or click twice on the object to give it a proper name, so that you can find it easily among other objects and groups.
3. Form an Apple Tree With the Mesh Fill Tool and Render an Orchard
Step 1
To start with, take the Ellipse tool (F7) and make an even circle by holding theControl key. Make some circles of smaller sizes and place them around the initial circle. Fill the shapes with fresh green color and merge the circles into a single shape with the help of the Weld function in the control panel above (or in Object > Shaping > Weld), thus forming a tree crown.
Step 2
Take the Mesh Fill tool (M) and double click on the object to add an intersection of row and column, thus forming the mesh grid the same way as we did with the clouds. Select a group of nodes inside the shape with the Freehand selection marquee and fill it with lighter green color, making the tree crown more spherical and dimensional.
Step 3
Let’s add a tree trunk using the Rectangle tool (F6) and fill it with a red-brown wood color.
We need to place the trunk beneath the tree canopy. We can simply change the ordering of the objects by clicking and dragging them right in the Object Managerdocker or using the Control-Page Down keys combination to move the object back for one position. You can find the Order options in the folding menu if you right-click the object in the Object Manager.
Placing one object behind or in front of the other (Order > Behind and Order > In Front Of in the dropdown menu of Object Manager) is another handy option if you have a bunch of objects. Select the Behind function and you'll notice the cursor change into a thick black arrow. Click the object, which you want to stay on top (in our case it is the tree crown) and—voila!—the objects are reordered.
Convert the trunk to Curves (Control-Q) and make the upper part of it narrower by moving the upper nodes closer to each other. Continue by applying the mesh fill to make the middle part of the tree trunk lighter, so that the shape looks more like a cylinder.
Step 4
Let's move on and make our tree more detailed by adding a simple shadow.
Copy and Paste (Control-C > Control-V > Control-V) the crown shape twice, moving the upper copy up and to the right a bit. Select both created copies andClear mesh by clicking the crossed circle icon in the upper control panel, thus turning the shapes into flat silhouettes. Select the copies and apply the Back minus front Shaping function, thus cutting off the unneeded parts.
Finally, select the created element, take the Transparency tool and lower the opacity of our object by moving the slider.
Step 5
Let’s decorate our tree with ripe juicy apples. Form an apple base from the even red circle and apply the mesh fill, making the bottom part of the apple darker and adding a bright yellowish highlight.
Make our apple glossy and smooth by adding a tiny squashed ellipse on top for the highlight. Fill the highlight shape with white color, using the Color Docker and then just decrease its opacity by moving the Transparency slider while you have theTransparency tool selected.
Step 6
Let’s make our tree more vivid, by adding a gentle touch of sunlight to its crown. Create a copy of the crown and Clear mesh, turning it into a flat shape. Place an ellipse above and apply the Intersect Shaping function, while both shapes are selected. Fill the created shape with light-yellow color and use the Transparency tool to make the shape blend gently with the tree crown.
Step 7
Add an elliptical shadow under the tree and put a few fallen apples on the ground. Create a copy of our apple tree and make it much smaller to vary the composition. Feel free to change the position of apples, so that the trees don’t look like identical clones. Add some more copies, forming an orchard.
4. Add Minor Details to the Composition
Step 1
Let’s deepen our background by adding more details. Double-click the Rectangle tool (F6) and place the shape between the sky and the lawn using the Control-Page Up keys for rearranging the objects. Squash the shape and Convert it to Curves (Control-Q). Fill the shape with greyish-blue color, making it darker than the sky. Create a nice smooth curve with the help of the Shape tool (F10), forming a distant silhouette of the mountain ridge.
Add more curved shapes, one beneath the other, making the farthest shapes lighter, creating a sense of the distance between the mountains.
Step 2
Add a group of dark-green elliptical spots with the Ellipse tool (F7) to speckle the ground, making it more detailed.
Step 3
Let’s form some simple branches on our trees. Start by making a rectangle, and rotate it to approximately 45 degrees by clicking it twice with the Pick tool until the selection edges switch to rotation arrows. Convert the shape to Curve (Control-Q)and use the Shape tool (F10) to bend the shape, making it slightly arched. Add branches to each tree in the same way, varying their length and position and making our image more dynamic.
Step 4
Make the trees more detailed and true-to-life by forming a fresh green foliage. Start by making an ellipse and then select its side nodes with the Shape tool (F10) and turn them into sharp angles with the help of the Cusp node function. Place the leaves onto the tree crown, next to the apples.
Here how our background looks at this step. Almost completed!
Step 5
Since we are making a background for a video game, we should keep in mind that it will be moving along with the character or action running through it. Let’s make sure that the edges of the background match each other, making seamless repeats.
For this purpose, select the upper left and right nodes of the first mountain shape. Find the Align nodes feature in the control panel above and apply Align Horizontalto the selected nodes, positioning them at the same height. Repeat the same action for all other nodes that are located at the edges of our image (the mountains and both green lawns).
Step 6
Finally, deselect everything and head to the upper control panel. Find the Duplicate distance window and change the values to 1280 px for the X axis and 0 px for Y.Now select our background and Duplicate (Control-D) it several times to see how the repeats look.
Awesome! Our Vivid Video Game Background Is Finished!
Congratulations! You did a great job and created a detailed nature background, getting used to some handy CorelDRAW tools and features. Hope you’ve enjoyed working with mesh and creating fancy elements. Good luck with your art!
