How to Create a Long Scrolling Background for a Website_part1

What You'll Be Creating

In this tutorial you’ll learn how to create a flat-style super-long scrolling background for a website! What's more, in a follow-up tutorial, you’ll have an opportunity to see it in action and to discover how to make it work! For this part of the tutorial, we’ll be using Adobe Illustrator, its basic shapes and functions to create a fantastic composition with various elements, connected with one and the same topic.

By the end of this lesson, you’ll be able to use your new techniques not only to create a website background, but also any other kind of flat-style compositions or illustrations, such as seamless backgrounds for games, flat-style cityscapes, and many others. Browse the Envato Market for unflagging inspiration, and get ready to follow the exciting process!

1. Create Space Objects & Planets

Step 1
Let’s start making our first planet! Take the Ellipse Tool (L) and hold Shift to make a dark-magenta circle of 365 x 365 px size.

Switch to the Rectangle Tool (M) and make a pink stripe of 450 x 30 px size

Step 2
Keeping the stripe selected, press Enter to open the Move options window. Set the Horizontal value to 0 px and Vertical value to 30 px.

Press Control-D multiple times to repeat our last action and cover the whole circle with stripes.

Now select alternate stripes (I’ve marked them with dark color in the screenshot below to make it clear) and make the selected stripes much shorter.

Step 3
Now select all the stripes and Unite them in the Pathfinder to merge them into a single shape. Before doing that, you can vary the length of some of the stripes, making them shorter or longer. However, you can also do that after Uniting the stripes, but in this case you will need to use the Direct Selection Tool (A), select the pairs of anchor points, and move them left or right.

When you’re happy with the position of the stripes, select everything with the Direct Selection Tool (A) and use the Live Corners feature to make the corners fully rounded by dragging the tiny circle markers that are located next to each corner.

This feature is available only in Adobe Illustrator CC, but if you’re using earlier versions of the program, try playing with Effect > Stylize > Round Corners to achieve a similar effect.

Step 4
Copy our shape and Paste in Back (Control-C > Control-B). Move the new shape to the left a bit by pressing Shift and the Left Arrow key a few times. Change the length of some of the stripes with the help of the Direct Selection Tool (A) to make the copy look a bit different. Make the new shape a bit darker than the upper copy.

Now let’s see how we can make the shapes fit each other. Copy (Control-C > Control-F) the bottom circle and Bring it to Front (Shift-Control-]). Select everything, click the right mouse button and Make Clipping Mask.

Great! Now we have everything hidden inside of the top circle! And we can still edit the contents of the Clipping Mask by double clicking the object to enter Isolation Mode. For example, you can add another shape inside the planet, making it a bit darker.

Step 5
Let’s create another planet of a smaller size. Make a 130 x 130 px turquoise circle. Take the Line Segment Tool (\) and hold Shift to make a short horizontal stripe. You can edit the Stroke settings either from the control panel on top or from the Stroke panel (Window > Stroke). Make the Stroke color a bit lighter than the color of the planet. Set the Weight to 2 pt and the Profile to Width Profile 1, making the tips of the stroke pointed.

Step 6
Add more stripes, varying their length. Duplicate the circle and Bring it to front (Shift-Control-]). Select everything and Make Clipping Mask to hide the strokes inside the circle.

Step 7
Create a simple moon by making an 80 x 80 px circle, and continue using the Ellipse Tool (L) to cover the moon with dark-pink ovals, depicting craters.

Step 8
Let’s create our last planet, making it a bit more detailed. Start by making a 220 x 220 px orange circle.

Use the Rectangle Tool (M) to make a light-orange stripe across the circle. Hold Alt-Shift and drag it down, making a copy and attaching it right to the first stripe. Make the new stripe a bit lighter.

Continue adding stripes in the same way and vary the colors. You can leave a few gaps to make the color of the planet visible as well. What you can also try is to arm yourself with the Eyedropper Tool (I), holding Shift and picking the colors directly from my screenshot. Adobe Illustrator allows you to pick colors from any part of your screen, even outside the program window.

Use the Clipping Mask to hide the stripes inside the circle.

Step 9
Now let’s add a ring to our striped planet, similar to Saturn’s rings. Use the Ellipse Tool (L) to make two squashed ellipses above the planet. I make the top oval black to make it visible.

Select the ovals together with the planet and click the planet once again to make it a Key Object (you will notice a thicker selection around the object). Head to the Align panel and click Horizontal Align Center to make the objects perfectly centered.

Select both shapes and use the Minus Front function of Pathfinder to cut the top oval out, making a hole.

Step 10
Now duplicate the circle planet base and Bring it to Front (Shift-Control-]), and then Send Backward (Control-[) 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!

Written by Yulia Sokolova
If you found this post interesting, follow and support us.
Suggest for you:

The Complete Web Developer Course - Build 14 Websites

Advanced HTML5 Tutorial for Web Developers

Create Complete Web Apps without Coding

The Complete PHP 7 Guide for Web Developers

Learn Responsive Web Development from Scratch

Bootstrap Responsive Design Tutorial Fundamentals