How to Create a Space Shuttle Scene in Sketch
With this tutorial, Sketch is taking us to space. We are going to create a space shuttle launching illustration employing only vector shapes. You will also learn how to combine colors in order to create an eye-catching vector illustration.
Fire up Sketch, and let's launch this space shuttle into space!
1. Set Up Your Document
Let's start by creating our artboard. To do this, press A on the keyboard and draw an artboard sized at 850 px by 638 px.
2. Create the Night Sky
Step 1
Select the Rectangle tool by pressing R on the keyboard (or from the Insert > Shape menu in the top toolbar) and create a rectangle that is the same size as our artboard.
Step 2
Uncheck the borders, and then click on the Fill button and switch to Linear Gradient, using the Inspector Panel on the right.
Step 3
Select the color stop on the top and set the color to very dark blue #03121D
. Move it downwards. Use the image below as a reference.
Step 4
Next, select the color stop at the bottom and set the color to #17569F
.
3. Add Stars
Step 1
Pick up the Oval tool by pressing O on the keyboard, and draw a #9FB1BD
circle 3 px by 3 px. Don't forget to turn off borders using the Inspector Panel.
Step 2
Continue to add more stars, as we did in the previous step. Use different sizes and colors to create a field of stars. For the really dark stars, use #122744
color, and for the brighter ones use #ffffff
. Use the image below as a reference.
It's good practice and I like to keep my layers organized, so select all the stars you've created and place them into a group using Command-G. Name this group "stars".
4. Add a Twinkling Star
Step 1
Invoke the Rectangle (R) tool and draw a rectangle. For the color, use #6EAAEE
. Turn off borders.
Step 2
Give this rectangle Gaussian Blur with Amount of 1 px using the Inspector Panel.
Step 3
Duplicate (Command-D) this rectangle, and then choose the Rotate tool from the top toolbar and rotate the rectangle 90° clockwise. And voila, here's our twinkling star.
Select both rectangles and place them inside the "twinkle star" group, by pressing Command-G on the keyboard.
Step 4
Duplicate the "twinkle star" group, scale the duplicate down, and move it into the upper right corner of the artboard. Finally, change the color of the rectangles to #EE991A
.
5. Create Mountain Peaks
Step 1
Pick up the Triangle tool from the Insert > Shape menu in the top toolbar and make a triangle. Turn off the border and change the color to #083F6A
.
Step 2
Place it as shown in the image below.
Step 3
Grab the Vector (V) tool and draw a shape that will represent snow on the mountain peak. Use #CCE4FF
color and turn off borders.
Step 4
Select this layer and the triangle by holding Command on the keyboard and clicking on these two layers in the Layers List on the left, and then click on Mask in the top toolbar, to place the snow layer inside the triangle.
The result of this masking operation is automatically placed into a new group in the Layers List on the left. Name this group "mountain peak".
Step 5
Next, draw a rectangle over the right half of our mountain peak to create a shadow. Use #000000
for the color and turn off borders.
Step 6
Change the Blending to Overlay and Opacity to 20%.
Step 7
Simply drag this rectangle into the "mountain peak" group using the Layers List, to put this rectangle on top inside our mountain. Sketch will automatically apply a mask to our shadow.
Step 8
Add more mountain peaks to the scene. Duplicate (Command-D) the "mountain peak" group. Sketch will name this group "mountain peak copy". In the Layers List, drag this "mountain peak copy" group below our original group. Move it to the left and down a bit. Use the image below as a reference.
Step 9
Now, Duplicate (Command-D) the "mountain peak copy" group. The duplicated group will get the name "mountain peak copy 2". Place it below "mountain peak copy" in the Layers List.
Then, scale it down, and move it even more to the left and down. Lower the Opacity to 50%. You should have something like this:
Select the following groups: "mountain peak", "mountain peak copy", and "mountain peak copy2". Group them into a "mountains on the left" group using Command-G.
Step 10
Next, duplicate (Command-D) the "mountains on the left" group. Name this group "mountains on the right". Flip Horizontal from Layer > Transform. Move it a bit upwards and all the way to the right side of the artboard.
6. Add Some Clouds
Step 1
Grab the Vector (V) tool and draw three shapes for clouds. Use white (#FFFFFF
) color.
Step 2
Apply the following styles to the clouds:
- cloud 1: Blending: Soft Light, Opacity: 10%
- cloud 2: Blending: Soft Light, Opacity: 10%
- cloud 3: Blending: Soft Light, Opacity: 15%
Select all the clouds and group them into the "clouds" group.
7. Create the Rocket Boosters
We'll start working on the space shuttle. First we will create rocket boosters.
Step 1
Grab the Rectangle (R) tool and draw a rectangle like the one in the image below. Turn off borders and use #F8D7A2
for the color.
Step 2
Enter shape editing mode by pressing Enter on the keyboard, or simply Double-click on the shape. You will see a round point in each of the corners. Click between the top points to insert a point between them. Hold Command to add a point right in the middle.
Step 3
Double-click on the point that we just added to turn it to a Mirrored point and move it a bit upwards.
Step 4
Let's add some details. Invoke the Rectangle (R) tool and draw a rectangle. Turn off borders, and for the color use #5B290E
. Then Duplicate (Command-D) this rectangle three more times.
Step 5
Near the bottom, draw one more rectangle, a bit bigger than the previous ones, and for this one use #73320C
color. Make sure that there is a 1 px gap between this rectangle and the one above.
Step 6
Next, create one more rectangle. This one is colored with #000000
. We will use this rectangle to add a shadow to the rocket.
Step 7
Change Blending to Soft Light and Opacity to 30%.
Step 8
Select all the rectangles that we've just created along with the rocket booster shape, and choose Mask from the top toolbar.
Sketch will place all those layers into one group. Just rename this group "rocket shape".
Step 9
Using the Vector (V) tool, draw an orange (#F58100
) trapezoid. Move it below "rocket shape" in the Layers List.
Step 10
Below this trapezoid, draw another one, a bit bigger, and for this one use #F8BF00
color.
The left rocket booster is now finished. Select those two trapezoids and the "rocket shape" group and group them into a "rocket booster" group using Command-G.
Step 11
Add a rocket booster on the right, simply by duplicating (Command-D) the "rocket booster" group and moving it to the right. Use the image below as a reference.
8. Create the External Tank
Step 1
Using the Rectangle (R) tool, draw a rectangle between "rocket boosters". For the color, use #D43D00
. Don't forget to turn off borders.
Step 2
Double-click to start editing the shape. Add a point in the middle between the two top points, and then Double-click to turn this point to Mirrored and move it upwards.
Step 3
Use two little handles on either side of the point to adjust the shape. Think of these little control points as if they are pulling the line towards themselves. Grab one handle and move it a bit away from the point.
Step 4
Let's add some details. Draw one rectangle on top to cover the top of the external tank shape. The color is #592A0C
.
Step 5
Next, draw a thin rectangle and use #ECA265
for the color.
Step 6
Then draw one big black (#000000
) rectangle over the tank, which we'll use as the shadow.
Step 7
Change Blending to Soft Light and Opacity to 30%.
Step 8
Select all the rectangles that we've just created along with the rocket's external tank shape, and choose Mask from the top toolbar. Sketch will automatically place all those layers into one group. Name this group "external tank".
9. Create Delta Wings
Step 1
Now let's create the delta wings. Using the Vector (V) tool, draw a shape like the one in the image below. For the color, use #FC8B03
.
Step 2
Then, using the Vector (V) tool, draw another shape that is similar to the shape that we just created, but a bit smaller. The color for this one is #FB6003
.
Group these two layers into the "delta wing" group. You can do this by selecting these two layers in the Layers List and pressing Command-G on the keyboard.
Step 3
Duplicate (Command-D) the "delta wing" group, and then Flip Horizontal using Layer > Transform. Use the image below as a reference for the position.
Step 4
Finally change the color of the smaller shape to #FC6C04
.
The delta wings are in place. Here's what we have right now.
10. Create the Space Shuttle Body
Step 1
Using the Rectangle (R) tool, draw a #FED79E
colored rectangle.
Step 2
Double-click on the shape to enter shape editing mode. Click between the two top points to insert a point between them. Hold Command to add a point right in the middle.
Step 3
Double-click on that point to turn it to a Mirrored point and move it a bit upwards.
Step 4
Grab one handle and move it a bit away from the point, to adjust the shape of the space shuttle nose.
Step 5
Let's add some details. As we did for the rocket booster, draw two tiny rectangles using the Rectangle (R) tool. The color should be #E6BE81
.
Step 6
Then draw a bigger Rectangle (R) over the bottom part of the space shuttle body. For this rectangle, use #F5A101
color.
Step 7
At the end, draw a black (#000000
) rectangle over the right half of the shuttle body, to create a shadow.
Step 8
Set Blending to Overlay and Opacity to 30%.
Step 9
Now select the shuttle shape, rectangles and shadow shape, and choose Mask from the top toolbar.
11. Add the Cabin Windows
Use the Vector (V) tool to create the side and main windows on the space shuttle cabin. The color is #401801
.
Select these three shapes and group them into "cabin windows" using Command-G.
12. Create a Vertical Tail
Step 1
For the vertical tail, first draw a Rectangle (R). For the color, use #F8D593
.
Step 2
Double-click on the shape to enter shape editing mode. Add a point in the middle between the top two points and drag it up a bit.
Step 3
Then add a point in the middle between the bottom two points, using the method explained above, and move it down a bit.
Step 4
Let's add a shadow. Draw a Rectangle (R) over the right half of the tail. Use #000000
for the color.
Step 5
Set Opacity to 30% and Blending to Soft Light.
Step 6
Select the vertical tail shape and the shadow shape and click on Mask in the top toolbar.
This is what we have right now.
13. Draw the Main Engines
We will use two shapes to create the main engine: a rectangle and a trapezoid.
Step 1
First let's create the top part of the main engine. Grab the Rectangle (R) tool and draw a rectangle as shown in the image below. The color is #F5A101
.
Step 2
Then create the bottom part of the main engine. With the use of the Vector (V) tool, draw a trapezoid. Set the color to #F8BF00
. Use the image below as a reference.
Group these layers into the "main engine" group.
Step 3
Duplicate (Command-D) the "main engine" group and move it to the right.
14. Create a Wall of Exhaust Gases
This is the last step of the tutorial, so let's finish this up.
Step 1
Draw a circle using the Oval (O) tool. Hold Alt-Shift while drawing to create a perfect circle. For the color, use #F7E4AA
. Borders should be turned off.
Step 2
Duplicate (Command-D) the circle and move it down.
Step 3
Duplicate (Command-D) the circle twice, and move one to the left and the other one to the right to set the boundaries of the exhaust gases.
Step 4
Fill in the space between the most distant circles on the left and on the right with circles. Play with the circles' sizes and positions to create a wall of exhaust gases, as in the image below.
Step 5
Next, we'll connect our exhaust gases to the space shuttle. Select the Vector (V) tool and draw a shape that's a little narrower than the bottom of the left space shuttle engine and that connects the shuttle to the exhaust gases below.
Color this shape with #F7E4AA
.
Step 6
Do the same for the right engine.
Step 7
Now let's add inner gases. Grab the Oval (O) tool, set the color to #F2CD74
, and build a wall inside our wall, just as we did in the previous steps.
Step 8
Continue adding circles until you have something like this.
Awesome Work! You're Done!
Your space shuttle illustration is now complete!
I hope you had fun while making this illustration. Now, try making your own version of a space shuttle and show us the results in the comments below.
Happy designing!