Step 1
Let’s make a few different types of clouds for different layers of atmosphere.
Use the Ellipse Tool (L) to make a 100 x 100 px light-blue circle. Add a second circle of 55 x 55 px on the right. Finally, attach a couple more circles on the left, varying the sizes and making the cloud puffy.
![]() |
Select all the circles and take the Eraser Tool (Shift-E). Hold Alt and drag the selection over the bottom of the cloud to erase it.
Finally, Unite all the circles in the Pathfinder and set the Opacity of the shape to 50% in the Transparency panel.
![]() |
Now we’ll create a simple environmental element that will depict a stylized mountain or peak. Use the Rectangle Tool (M) to make a 95 x 410 px vertical stripe.
Let’s fill it with linear gradient from dark blue to blue and to light blue. Set the Opacity of the light-blue slider to 0% in the Gradient panel, making it transparent. Use the Gradient Tool (G) to place the gradient vertically.
Select the top of the rectangle with the Direct Selection Tool (A) and use the Live Corners feature to make it fully rounded.
![]() |
Now we’ll make another kind of cloud.
Make a 220 x 25 px turquoise rectangle. Add a smaller rectangle on top, attaching it right to the first one. Then add a third rectangle on top of the second one, making it wide. Unite all stripes in the Pathfinder.
Make all the corners fully rounded, using the Live Corners feature.
![]() |
Add a few more clouds, varying their shapes. Head to the Transparency panel and set the Opacity of your clouds to 50%.
![]() |
Step 1
First of all, let’s set the size of our Artboard to 800 x 4400 px, using the Artboard Tool (Shift-O). You can select this instrument and set the size in the control panel on top.
Use the Rectangle Tool (M) to make a shape of the same size (800 x 4400 px) and Align it to the Artboard.
Let’s fill it with a vertical linear gradient, arranging the colors as shown in the screenshot below: moving from dark violet to blue and to lilac at the bottom.
![]() |
Let’s start adding our objects from the top. Place the planets over the dark part of the canvas, combining the elements with each other. Then start adding the clouds, varying their sizes and positions.
![]() |
Move down and use the stylized peak that we’ve created to form a group of peaks. Make multiple copies and place them next to each other and in front of each other, making some of them higher and the others lower. The bottom parts of the peaks blend nicely with the background as we’ve made them semi-transparent.
![]() |
Let’s add a few more shapes for the atmosphere. Create two large ovals, using the Ellipse Tool (L), and make them overlap each other, as shown in the screenshot below. Select both shapes and use the Minus Front function of Pathfinder to cut the shapes, so that we have only the crescent shape left.
Set the Opacity of the shape to 50% and make the color a bit lighter, if needed, to make the shape semi-transparent and airy. Add a second crescent on top, changing its color slightly.
![]() |
The bottom part of our background remains blank, so let’s fill it with new elements, creating a thick forest and the ground.
Use the Ellipse Tool (L) to make a group of circles, varying their sizes and making them overlap. Unite all the circles in the Pathfinder and fill the merged shape with a vertical linear gradient from lilac at the bottom to blue at the top.
![]() |
Now we’ll shape the tree trunk. Use the Rectangle Tool (M) to make a 75 x 1180 px narrow vertical shape for the trunk. Fill the shape with dark-violet color to create a contrast above the light background. Take the Direct Selection Tool (A) and select the top left anchor point. Press Enter to open the Move options window and set the Horizontal value to 20 px, Vertical value to 0 px. Click OK, thus moving the point 20 px to the right. Repeat the same for the right anchor point, moving it in the opposite direction.
Let’s also add some simple branches to our tree. Arm yourself with the Arc Tool (you can find it in the same drop-down menu as the Line Segment Tool (\)). Make a curved line and set the Stroke color to the same dark-violet tint as we have for the trunk (use the Eyedropper Tool (I) and hold Shift to pick the color). Head to the Stroke panel and set the Weight value to 20 pt and Cap and Corner to middle positions, making the tips of the branches rounded.
![]() |
Duplicate our tree trunk and change the position of the branches to make the composition versatile. Place the trunks below the bushy tree crown by pressing Control-[.
Let’s add some dimension to our trees. Create another group of circles, filling them with violet color (a bit lighter than the trunks). Unite the circles in the Pathfinder panel and press Control-[ a few times to Send the shape Backward, beneath the trunks.
![]() |
Create more copies of the tree trunks and make them lighter. Place the copies beneath the darkest trunks, creating an aerial effect and adding depth to our forest.
Add purple bushes at the bottom of the trunks, forming them from the circles in the same way as we did with the tree crowns.
![]() |
Now let’s add a ground to form the bottom part of our composition. Use the Rectangle Tool (M) to make a shape of 800 px width (the same width as we have for our Artboard). Otherwise, you can just duplicate the background rectangle, move it on top and shrink it, reducing its height. Fill it with the same lilac color as the back tree trunks, to make the shapes visually merge with each other.
Now take the Curvature Tool (Shift-‘) and let’s bend the upper edge of the ground a bit by dragging its left half down. Make a smooth wave by pulling the opposite half of the upper edge up.
![]() |
Add another layer of the ground, filling it with the same tint of violet as we have for the middle tree trunks, making the shapes merge. Bend the shape, using the Curvature Tool (Shift-‘).
Finish up with the ground by adding the darkest layer on top, bending it, and using the Ellipse Tool (L) to speckle tiny ovals over the ground, making it a bit more textured.
![]() |
Now that we have all the objects placed and arranged, let’s see how we can hide the pieces that are crossing the edges of the Artboard.
Duplicate (Control-C > Control-F) the long background rectangle and Bring it to Front (Shift-Control-]). Now select everything, click the right mouse button, and Make Clipping Mask. Voila! Now all objects are hidden inside a big Clipping Mask.
What you can also do to make your further workflow faster, easier and more convenient is to gather our objects into several groups (a group of planets, a group of clouds, peaks, trees, etc.) and use separate Clipping Masks for each group.
![]() |
You can continue adding the elements inside the mask in order to make the background more detailed and intricate. For example, I’ve added some stars, adding depth to the top of the background.
![]() |
If you found this post interesting, follow and support us.
Suggest for you:
Learn to Build Websites using Twitter Bootstrap
Ultimate HTML5,CSS3 & JAVASCRIPT To Create Your Own Interractive Websites
Build Real World Websites from Scratch using HTML5 and CSS3
Build Professional Websites with HTML5 and CSS3 from Scratch
Build Responsive Real World Websites with HTML5 and CSS3
No comments:
Post a Comment