[) to one position, placing the circle right
beneath the ring of our planet.
Select both the circle and the ring and
take the Shape Builder Tool (Shift-M).
Hold Alt and click the part of the
ring that is overlapping the circle in order to delete it. As you can see, now we have
a gap and two pieces of the circle that we don’t need anymore.
Delete the unneeded pieces and here we have
it! Out Saturn-like planet is ready!
2. Render the Clouds
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
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%.
3. Make a Background and Arrange the
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
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
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
(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
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
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.
4. Draw Main Characters or Moving Elements
on Your Background
Now that we have our background ready,
let’s create several objects that will be going all the way through the
background when we’re scrolling it. These are going be the key elements that we’ll be moving from top to bottom of the
background, one by one.
We’ll start by making a flying saucer. Use
the Ellipse Tool (L) to make a 200 x 200 px turquoise circle. Make a
horizontal magenta oval and Send it Backward by pressing Control-[.
Use the Line Segment Tool () and hold Shift
to make a horizontal stripe across the circle. Select both the circle and the
line and use the Divide function of Pathfinder to split the circle apart.
Select the bottom half and Send to Back
(Shift-Control-[), beneath the saucer.
Use the Curvature Tool (Shift-‘) to bend the bottom edge of the upper
circle, making it slightly curved.
Now let’s add some dimension to our UFO and
decorate it with additional details. Copy
the magenta oval and Paste in Back
(Control-C > Control-B). Make the lower copy a bit darker and drag its
bottom side down, using the Selection
Tool (V), making the shape a bit larger.
(Control-C > Control-B) the bottom half of the turquoise circle and shrink the upper copy a bit, dragging its bottom edge up. Fill the
lower copy with yellow color, making a gentle overtone.
Use the Ellipse Tool (L) to make a group of yellow light bulbs along the
edge of the saucer.
Let’s finish up with our UFO by adding a
shiny reflection to its glass surface. Copy
the top half of the turquoise circle and Paste
in Front twice (Control-C > Control-F > Control-F). Move the upper
copy to the right a bit, using the Right
Arrow key on your keyboard.
Select the top copy and the one beneath it
and click Minus Front in the Pathfinder panel to cut the shapes,
leaving only a narrow crescent-shaped stripe at the left edge of the UFO. Fill
the created shape with light-turquoise color, forming a highlight. You
can add a smaller circle of the same color on top, making the UFO look
Now let’s make a fancy character that is
hidden inside the UFO – an alien. First of all we’ll make him look as if he is
going down from his ship through the atmosphere.
Take the Ellipse Tool (L) and make a 50 x 50
px light-blue circle. Make a dark-blue oval for the eye. Keeping the eye
selected, double-click the Reflect Tool (O) and flip the shape
over the Vertical Axis. Click Copy to add a second eye.
Make a larger magenta circle of 75 x 75 px size and place it right
beneath the alien’s head.
Use the Rectangle Tool (M) to make a turquoise shape of 100 x 330 px size, placing it beneath the
alien’s head. Select the bottom anchor points of the shape with the Direct Selection Tool (A) and use the Live Corners feature to make the bottom
of the shape fully rounded.
Add two vertical narrow stripes above the
turquoise shape and use the Minus Front
function of Pathfinder to cut
the shapes out.
Use the Direct Selection Tool (A) to select the top anchor points of the
stripes and drag them up or down, varying the height of the shapes. Use the Live Corners feature to make the
corners rounded. Now the shapes look like a comet or falling meteorite.
Keeping the shapes selected, go to Object > Path > Offset Path and
set the Offset value to 5 px, thus creating a larger shape.
Make the inner shape a bit lighter, adding
Use the Direct Selection Tool (A) to vary the height of the dark and light
Now let’s depict our alien in full length
after he lands on the ground. We’ll use the head and will be adding elements to
it. Use the Rectangle Tool (M) to
make a 6.5 x 85 px light-blue shape across
the head. Add a small 15 x 15 px
circle on top.
Now we’ll shape the body from a 70 x 140 px light-blue rectangle. Add two
thin vertical stripes above the rectangle and use the Minus Front function of Pathfinder
to cut them out, forming two long, thin arms.
Use the Direct Selection Tool (A) to move the bottom anchor points of the
arms up, making them shorter than the body.
Add another rectangle on top of the body
and cut it out using Minus Front to
shape the legs of our creature.
Use the Direct Selection Tool (A) and the Live Corners feature to make all the square corners fully or
Let’s finish up our alien by selecting
its body and using Object > Path >
Offset Path with 5 px Offset
value to make a larger shape around the body. Fill it with the same
magenta-pink color as the circle around the head.
Finish up with the background by placing
the main elements right in the center of the background, starting from the UFO
on top and finishing with the alien on the ground. And that’s all!
Fantastic! Our Long Scrolling Flat
Background Is Finished!
Great job! We’ve reached the very
end of our tutorial and finished the exciting process of creating elements and
combining them with each other, building a balanced composition! We’ve learned
how to transform basic geometric shapes and use various functions of Adobe
Illustrator to make our workflow fast and convenient!
We can use these techniques for our future
projects, creating flat seamless backgrounds, detailed compositions and
flat-style scenery, landscapes, cityscapes and much, much more.
Now that we have a static version of our
background ready, we can learn how to make it work and move! Stay tuned and don’t
Read more here:: How to Create a Long Scrolling Background for a Website