How to Create a Set of Space Icons Using Adobe Illustrator

Hello there, fellow
cadets! Today we have a special mission in store for you: we’re going to send
you where no one has gone before (well actually a few have gone but that doesn’t
make it less captivating), by helping you create your very own space icon set.

So assuming you’re
brave enough for the job, grab yourself a hot cup of space juice since in the
following moments we’re going to get technical and engineer ourselves some
nice little icons worthy of every living creature’s attention, be it human or
otherwise.

Since this is your “basic starter kit”, you can always add new items
to it by taking inspiration from these awesome space icons.

P.S. NASA, if
you’re reading this, know that I’m still waiting on my space cookies!

1. Set Up the New
Document

Presuming you
already have Illustrator up and running in the background, let’s bring it up,
and create a New Document (File > New
or Control-N) using
the following settings:

• Number of Artboards: 1
• Width: 800
  px
• Height: 600
  px
• Units: Pixels

And from the Advanced tab:

• Color Mode: RGB
• Raster Effects: Screen
  (72 ppi)
• Align New Objects to
  Pixel Grid: checked

Quick tip: most
of the indicated settings can be triggered by setting the document’s Profile to Web. The only one that won’t be automatically set is the Size, which you will have to manually
select.

2. Set Up the
Layers

Once we have our document,
we can engage in layering our project, which will help us maintain a steady
workflow by focusing on one icon at a time.

So, using the Layers panel,
create a total of five layers, which we will rename as follows:

1. reference grids
2. shuttle
3. satellite
4. landing pod
5. moon

The way that we’re
going to be using these layers is fairly simple. First, we’ll make sure that
all the layers except the one that we are currently working on are locked, by
clicking on the little empty box (the Toggles
Lock) found next to the eye icon.

As soon as we’ve finished creating the icon, we’ll lock its layer, and
then move on to the next one, repeating the same process until we’ve managed to
create all of them.

3. Set Up a Custom
Grid

Since Illustrator
lets us take advantage of its powerful Grid,
we will want to set it up using the lowest possible values, so that we can have
full control over our shapes by making sure they are perfectly snapped to the
underlying Pixel Grid.

The settings that
we’re interested in can be found under the Edit
> Preferences > Guides & Grid submenu, and should be adjusted as
follows:

• Gridline every: 1
  px
• Subdivisions: 1

Quick tip: you can learn more about grids by reading this
in-depth piece on how Illustrator’s Grid System works.

Once we’ve set up our
custom grid, all we need to do in order to make sure our shapes look crisp is
enable the Snap to Grid option found
under the View menu, which will
transform into Snap to Pixel each
time you enter the Pixel Preview mode.

Now, since we’re aiming to create the icons using a pixel-perfect
workflow, I highly recommend you go through myhow to create pixel perfect
artwork tutorial, which will help you widen your technical skills and get you up
to warp speed in no time.

4. Set Up the
Reference Grids

The Reference Grids (or Base Grids) are a set of precisely
delimited reference surfaces, which allow us to build our icons by focusing on
size and consistency.

Usually, the size
of the grids determines the size of your icons, and they should always be the
first decision that you make once you start working on a project, since you’ll
always want to start from the smallest size possible and build on that.

Now, in our case
we’re actually going to be creating the icons using just one size, more exactly
96 x 96 px, which is a fairly large
one.

So, assuming
you’ve locked all the other layers except the reference grids one, grab the Rectangle Tool (M) and draw a 96 x 96 px red (#f97373) square, which
will help define the overall size of our icons. Then add a smaller 88 x 88 px one (#f2f2f2) which will act
as our active drawing area, thus giving us an all-around 4 px padding.

Group the two Grids together
using the Control-G keyboard
shortcut, and then create three copies, which we will position towards their
right side, at a distance of 60 px,
making sure to align them to the center of the Artboard.

Once we have all the reference grids in place, we can lock the layer so
that we won’t accidentally move
them, and then move on to creating the first icon from the pack.

5. Create the
Shuttle Icon

We’ll kick off the
project by creating the iconic shuttle that NASA used between 1981 and 2011.

The process itself
will be fairly similar for all the icons, but this time we’re going to create
them using stroke lines instead of offset paths, which was what we used for
previous projects. The reason behind this move is to show you that strokes can
be as easy to use as offsets when it comes to creating line-based icons.

Step 1

Position yourself over the first reference grid, and zoom in so that you
can have a better view of what you’re going to be doing.

Then, using the Rectangle Tool (M),create a 16
x 56 px shape, which we will color using #ced0d8 and then position towards
the center of the reference grid, leaving a 2 px gap between the rectangle and the top side of the active
drawing area.

Quick tip: at
this point, I recommend you turn onPixel
Preview mode (View > Pixel
Preview or Alt-Control-Y) so
that you can more easily position your shapes in relation to the underlying
pixel grid.

If you’re wondering why we left that2 pxempty gap, the reason is fairly simple: since we’re creating the outlines using4 pxthickStrokes(which will be aligned to the center), we will need to make sure that we always leave a2 pxgap (so half of the stroke’sWeight) between the fill shapes and the sides of the drawable area, so that our outlines fit inside our active reference grid.

Step 2

Adjust the top
section of the shape that we just created in the previous step by selecting
its top two anchor points using the Direct
Selection Tool (A)and rounding
their corners, either by using the Live
Corners input field or by adjusting them directly from the Transform panel.

Whichever method you choose, use 8
px for your value, and you should now have converted the top section of
your shape to a nice round tip.

Step 3

Continue refining
the tip of the shuttle by selecting its top left and right anchor points using
the Direct Selection Tool (A), and pushing them towards the bottom by
a solid 14 px.

To do this, simply right click after you’ve made your
selection, and then go to Transform >
Move and enter 0 px into the Horizontal value field and 14 px into the Vertical one.

As soon as you click on OK,Illustrator
will push the anchors towards the bottom, getting us closer to the final shape
that we need for our shuttle’s main body.

Quick tip: you can access the Move panel faster by simply selecting the anchors that you want to
adjust and hitting the Enter
key.

Step 4

Turn on Pixel Preview mode (Alt-Control-Y), and using the Direct Selection Tool (A), select and adjust
the top left anchor point by positioning its upper handle at a distance of 14 px.

Then select the top center anchor point, and position its left handle
at a distance of 2 px.

Normally you would
need to adjust both the left and right sides of the shape, but it will be much easier
to just cut it in half using a rectangle, and then create a copy (Control-C > Control-F) and reflect (right click > Transform > Reflect
> Vertical) it in order to make sure that both sides are identical.

Step 5

Since at this
point we’ve finished adjusting the tip of our shuttle, we can now add a nice
thick outline to it.

The way we’re
going to do it is really simple: first we’ll select the shape and then create a
copy of it (Control-C > Control-V).
With the copy in place, select it and change its color to a darker blue (#373947)
so that it can stand out from the lighter one that we’ve previously used.

Finally, flip the shape’s fill color with its stroke (Shift-X) and set the latter’s thickness
to 4 px, leaving all the other Stroke settings as they are.

Quick tip: if
you’re experiencing shape distortions when flipping the fill color with the
stroke and then adjusting the thickness, you might need to turn off the Align to Pixel Grid option found within
the Transform Panel. This way, you
can create the outline, and then align it back by enabling the option again.

We’re going to be using the same process for each of the remaining
outlines, so from now on everything should be pretty easy to understand and
follow.

Step 6

Once we have the
main section of the shuttle, we can start adding some details to it, and we
will do so by adding a highlight, since all the other elements will be
positioned on top of it.

First, select the
outline, and create a copy of it (Control-C
> Control-F) which we will initially position on top of it since we’ll
need to adjust it a little.

Then, set the duplicate’s color to white (#FFFFFF) and its Blending Mode to Soft Light, making sure to lower its Opacity to 80% and to
align the Stroke to the Inside.

Quick tip: even
though the highlight has the same 4 px thickness
as the outline, it will end up looking as if it were thinner, since the outline
will end up overlapping half of it.

Step 7

As you can see, the highlight is currently overlapping our outline,
which is something that we need to correct by selecting both it and the fill
shape and then right clicking >
Arrange > Send to Back.

Step 8

With the highlight
in place, let’s start working on the shuttle’s nose by creating the darker
section that houses the forward reaction control thrusters.

First, grab the Rectangle Tool (M) and create a 20 x 10 px shape, which we will color
using #373947 and then position to the top side of our main drawable area,
making sure to horizontally align it to the shuttle’s main body.

Then, create a
smaller 4 x 1 px piece (#373947)
which we will position right under the larger one that we’ve just created, and
another 20 x 4 px one (#373947)
positioned3 px from it.

Select all three shapes, and group them together using the Control-G keyboard shortcut, since it
will be easier to access them later on.

Step 9

Since we need the
nose details to fall within the shuttle’s main fill shape, we will create a
copy of it and use it as a Clipping
Mask in order to hide any section that goes outside of its surface.

To do this, simply position a duplicate on top of the three grouped
rectangles, and thenright click >
Make Clipping Mask.

Step 10

Using the Pen Tool (P) create
the little window section from the crew compartment, by drawing a 6 x 1 px open path (#373947), with a 2 px Stroke Weight, and set both the Cap and Cornerto Round.

Position the
window line underneath the nose delimiter, leaving a gap of 2 px between the two.

Quick tip: at this point we recommend you turn on the Pixel Preview mode (Alt-Control-Y)
since it will be easier to create and position your shape once you have a clear
view of the underlying Pixel Grid.

Step 11

With the Pen Tool (P) still
selected, draw four 4 px wide lines
(#373947), with a 2 px Stroke Weight and
the Cap set to Round, and group them in two pairs, positioning one underneath the
window line at about 3 px, and the
second one towards the bottom section of our shuttle’s body leaving a gap of 4 px between it and the main outline.

Step 12

Finish off this
section of the shuttle by adding a 1 px wide
vertical highlight (color: white; Blending Mode: Soft Light; Opacity: 80%) which we will position
slightly towards the right side, and a 12
x 2 px bottom shadow (color: black;
Opacity: 20%).

Then, select all the shapes and group them together using the Control-G keyboard shortcut.

Step 13

Since at this
point we’re done working on the main body of our little shuttle, we can now
move on to the wings section and gradually build them.

This part is going
to be a little exercise in tracing, since we’re going to need to create the
main fill shape of the left wing, using our faithful Pen Tool (P).

So take a look at an actual shuttle wing and trace a
shape which we will then color using #afb6bf.

Then, as with the
previous section of the shuttle, give it a nice 4 px thick outline (#373947), only this time set the Corner to Round Join.

In my case, I ended up with a 28 x
36 px wing, which I then positioned towards the bottom left side of my
shuttle, leaving a gap of 10 px between
its bottom anchor point and the shuttle’s main outline.

Quick tip: you’ll
want to position the right side of the wing’s main fill shape towards the
center of the shuttle’s outline, so that once you give it its own outline, the
two will end up overlapping each other.

Step 14

Start adding details to the wing, by creating a 28 px wide path with a 2 px
Weight, which we will color using the same old blue tint (#373947) and then
position towards the bottom, just underneath the top left anchor point.

Then, add two more vertical dividers which will
act as elevons, and space them out evenly, making sure to add the little hinges
that would normally keep them in place.

Step 15

Continue adding
details to the wing by creating a 4 x 4
px circle (#373947), a top highlight, and a bottom shadow. Use the same
values and techniques as we did before, only this time create a mask for both
the highlight and the shadow so that they won’t overlap. The easiest way to do
this is to create two copies of the wing’s main fill shape and then cut
them, using the divider as a delimiter line.

Once you’re done, select and group all the wing’s shapes together using
the Control-G keyboard shortcut.

Step 16

Since we now have the left wing, we can easily create the right one by
creating a duplicate, which we will then reflect (right click > Transform > Reflect > Vertical) and position
towards the right side of the shuttle’s body, replacing its circle with a 4 x 2 px (#373947) rectangle.

Step 17

Start working on the engines by creating a 12 x 20 px rectangle (#d9dce2) which we will adjust by rounding its
left corner to 8 pxand its bottom ones to a smaller 4 px value.

Step 18

Give the shape a 4 px outline
(#373947), a couple of detail lines, a highlight (color: white; Blending Mode:
Soft Light; Opacity: 80%) and
finally a shadow (color: black; Opacity: 20%), and then group them all
together (Control-G) so that you can
easily select them later on.

Step 19

Create the
engine’s nozzle cone by drawing an 8 x
8 px red square (#b76262), which you will adjust by pushing its top anchor
points towards the inside by 1 px.
Give the shape an outline, a small bottom delimiter, a shadow, and a small
vertical highlight.

Then group the cone’s elements together (Control-G) and position them right under the engine block that
we’ve previously created.

Step 20

Create a copy after the engine’s block and cone and position them
towards the right side of the shuttle, making sure to reflect them (right click > Transform > Reflect
> Vertical).

Step 21

Finish off the
shuttle icon, by adding the rudder.

To do this, simply select the Ellipse
Tool (L) and create a 4 x 28 px shape,
which we will color using #373947 and then position over the engine blocks, so
that it slightly goes towards the inside of the shuttle’s main body, thus
overlapping the small shadow.

Group all the
icon’s elements together (Control-G),
and then we can lock the current layer and move on to the next one and start
working on the satellite.

6. Create the
Satellite Icon

Assuming you’ve already zoomed in on our second reference grid, we can
now start building the second icon from our pack, which will follow a similar
creative process, where we first create the fill shapes and then add
outlines to them.

Step 1

Grab the Rounded Rectangle Tool and
create a 12 x 18 px shape with a 2 px Corner Radius. Color the shape
using #ced0d8 and then position it towards the center of the reference grid, a
little bit towards the bottom, so that you’ll end up with a 30 px space gap between it and the
bottom side of the grid’s padding.

Step 2

Give the shape a 4 px outline
(#373947), and then add a 2 px thick
delimiter towards the bottom end (#373947), leaving a gap of 2 px between the two.

Quick tip: at
this point, some of you might be wondering if you should continue to use the Pen Tool (P) to add all the line
elements, or to switch over to the Rectangle
Tool (M). Well, to be honest, it all depends on your personal preferences. The only thing you need to know is that if you’re using the first method, you
should always try to start and end your path by finding and using the larger
outline’s path (not its Weight) as a
reference point (as demonstrated in the image from above).

If you’re using the second method, you should always try to fit your
shape within the space from within the outline’s Weight (as demonstrated in the image from below).

Step 3

Using the Rectangle Tool (M) create
an 8 x 2 px shape, color it black
(#000000), lower its Opacity level
to 28% and then position it underneath
the delimiter line that we created in the previous step since it will act as
a small shadow.

Step 4

Add two 2 x 1 px rectangles
(#373947) right underneath the delimiter line, and distance them at 2 px from one another.

Step 5

Add a subtle highlight to the upper section of the satellite’s body. Use
white (#FFFFFF) for the color, Soft
Light for the Blending Mode and 80% for the Opacity.

Step 6

Grab the Pen Tool (P) and
draw an “L”-like path, leaving a gap
of 2 px around its left and bottom
sides.

Group all the
elements together using the Control-G keyboard
shortcut, and then let’s start working on the icon’s bottom section.

Step 7

Using the Rectangle Tool (M), create a 10 x 6 px shape (#afb6bf) which we will
position under the satellite’s body and then adjust by pushing its bottom
anchor points towards the inside by 2 px.
To do this, simply select each anchor at a time, using the Direct Selection Tool (A) then hit Enter and enter 0 px into
the Vertical value field, and +/- 2 px into the Horizontal one.

Once you’ve made these adjustments, you can give the shape a nice thick 4 px outline.

Step 8

Add a couple of
details to the lower section of the satellite by casting a subtle 1 px tall shadow (color: black; Opacity: 20%)
and adding a 2 x 1 px rectangle (#373947)
right under it.

Once you’re done, group all the elements together using the Control-G keyboard shortcut, so that we
can easily manage the satellite’s different sections if we need to.

Step 9

Move a little more towards the bottom, and using the Ellipse Tool (L),create a 10 x 16 px shape (#515566), which we
will adjust by cutting in half. Then, give the shape an outline (color: #373947; Weight: 4 px; Corner: Round
Join, Align Stroke: Center) and
position them both underneath the satellite’s lower section.

Step 10

Add a couple of details to the satellite’s nozzle such as a 1 px thick horizontal delimiter, a
small 1 px tall bottom highlight (color: white; Blending Mode: Soft Light; Opacity:
60%) and a small 6 x 4 px rounded
rectangle (#373947) with a 1 px Corner
Radius that has a 1 px section
going outside the nozzle’s main outline.

Once you’re done,
group all the elements together using the Control-G
keyboard shortcut.

Step 11

Let’s start
working on the satellite’s solar powered wings, by creating a 30 x 16 px rounded rectangle (#b5a762)
with a 1 px Corner Radius and giving
it a 4 px thick outline (#373947).

Position the two shapes on the left side of the satellite’s body,
leaving a gap of 2 px, vertical aligning
the wing to it.

Step 12

Using the Pen Tool (P) create
two 2 px thick support bars (#373947),
and another thinner 1 px one (#373947)
that connect the wing to the satellite’s body.

Step 13

Start adding details to the wing by creating the all-around inner
highlight (color: white; Blending Mode: Soft Light; Opacity: 60%). Then add six 2 px thick vertical dividers (#373947)
positioned2 px from one another,
and a couple of 2 x 2 px squares
colored using a darker shade (#96884d) to give the solar panel a little pop.

Once you’re done,
select all the wing’s elements including the support bars and group them
together (Control-G).

Step 14

Select the left wing that we’ve just created, and then create a copy (Control-C > Control-F) and position it
on the right side of the satellite, making sure to reflect it (right click > Transform > Reflect
> Vertical).

Step 15

Start working on
the upper section of the satellite that houses the antenna and receiver, by
creating the little neck segment.

First, grab the Rectangle Tool
(M) and create a 6 x 8 px shape
(#afb6bf), to which we will add a 4 px outline
(#373947) and then position above the satellite’s main body.

Step 16

Give the neck a small shadow by creating a 2 x 2 px square (#000000) which we will adjust by lowering its Opacity level to 20% and then position towards the top side of the fill shape.

Once you’ve added
the shadow, select and group (Control-G)
all the neck elements together so that they won’t accidentally get misplaced.

Step 17

Using the Ellipse Tool (L),create
a 28 x 18 px shape (#515566) which
will act as the antenna. Since we need the top end to be flat, we will have to
cut the shape in half by removing its top section. Then, we can add the by now
standard 4 px outline (color: #373947; Corner: Round Join) and position the two on top of the satellite’s
neck segment.

Step 18

Take a couple of moments and add the finer details to the antenna such
as the 1 px thick horizontal
delimiter (#373947), the slightly offset 1
x 1 px vertical delimiter, the top subtle highlight (color: white; Blending Mode:
Soft Light; Opacity: 60%), and
the little top mounted piece.

Once you’re done, group all your antenna’s elements together using the Control-G keyboard shortcut.

Step 19

Finish off the satellite icon, by adding two more sets of 1 px thick support bars (#373947) that
connect the antenna to its main body.

Group all the
shapes together (Control-G), lock
the current layer and then we can move over to the third icon.

7. Create the
Landing Pod Icon

Make sure you’re on the correct layer, and then zoom in on the third
reference grid so that we can start working on the little landing pod.

Step 1

Using the Rectangle Tool (M),create a 42 x 42 px square (#afb6bf) which we
will adjust by pushing its top anchor points towards the inside by a hefty 12 px.

Then give the shape a 4 px outline
(color: #373947; Corner: Round Join) and position the
two towards the lower section of the reference grid, so that you’ll end up with
a 14 px gap between the icon and the
bottom side of the padding zone.

Step 2

Zoom in on the lower section of the pod, and add a 2 px thick horizontal delimiter (#373947), leaving a gap of 2 px between it and
the larger outline.

Step 3

Using the Rectangle Tool (M) create
seven 2 x 1 px shapes (#373947)
which we will need to position4 px from
one another, and then group (Control-G)
and horizontal center align them to the pod.

Step 4

Add a subtle highlight to the upper section of the landing pod, using
white for the color (#FFFFFF), Soft
Light for the Blending Mode and 80% for the Opacity.

Step 5

Using the Pen Tool (P),draw a
2px thick line parallel with the
left side of the pod’s outline to make it look as if there’s a sheet of bent metal.

Step 6

Draw two vertical highlights (color:
white; Blending Mode: Soft
Light; Opacity: 80%), one thinner 1 px one, and another thicker 2 px one, and position them towards the
center of the pod, making sure that they don’t overlap the all-around one that
we created a few steps ago.

Step 7

Start working on the little window by creating a 8 x 12 px rounded rectangle (#515566) with a 2 px Corner Radius. Give the shape a 2 px outline (#373947) and then position the two just above the
horizontal delimiter, leaving a gap of 6
px between them.

Step 8

Add two 2 x 4 px rounded
rectangles (#373947) with a 1 px Corner
Radiusand a 2 px gap between
themto the left side of the window
to make it look as if it has a pair of hinges holding it to the pod.

Step 9

Using the Pen Tool (P) create
a 4 px wide and 8 px tall reflection for the window, using white (#FFFFFF) as the
color, Soft Light for the Blending Mode and 60% for the Opacity.

Once you have all
the window’s components, select them and use the Control-G keyboard shortcut to group them together.

Quick tip: you
can always hold down the Shift key to create diagonal lines using the Pen Tool (P) instead of going through the process of creating a
rectangle and then adjusting it.

Step 10

Finish off this section of the icon by adding two small decals towards
the right side of the window. In my case, I’ve used a 4 x 2 px rectangle (#373947) and a 2 x 2 px circle (#373947), but feel free to get creative and come
up with something new.

Once you’re done,
select all the pod’s elements, and group them together (Control-G).

Step 11

Grab the Rectangle Tool (M) and create the lower
section of the pod by drawing a 42 x 10
px shape (#515566) which we will adjust by pushing its lower anchor points
towards the inside by 12 px.

Give it a 4 px outline (color: #373947; Corner: Round Join), and then position the two underneath the pod’s
main body.

Step 12

Give the lower section an all-around shadow (color: black; Opacity: 20%)
and then add a 1 px thin delimiter
towards its upper section.

Step 13

Finish off this part of the icon, by adding a 12 x 2 px rectangle (#373947) underneath its main outline, and
another 8 x 4 px ellipse (#373947)
right under it.

Then select and
group all the lower section’s elements together so that they won’t get
misplaced by accident.

Step 14

Move on towards
the upper section of the icon, and let’s start working on its tip.

First, grab the Rectangle Tool
(M) and create an 18 x 10 px shape
(#515566), give it a 4 px outline (color: #373947; Corner: Round Join) and then position
the two above the pod’s main outline, so that they overlap it.

Step 15

Add a 1 px thick delimiter
towards the upper section of the newly created shape, leaving a 2 px empty gap towards its bottom.

Step 16

Next, add some of the repeating details that
we’ve used on most of our icons.

Step 17

Using the Rectangle Tool (M), create a 12 x 8 px gold plated shape (#b5a762), and
give it a 4 px outline (color: #373947; Corner: Round Join).

Then position the two above the piece that we just created a few
steps ago, making sure that their outlines overlap. Add a couple of highlights (color: white; Blending Mode: Soft Light; Opacity:
80%) and a 1 px thick horizontal
delimiter, and finally group them all together using the Control-G keyboard shortcut.

Step 18

Finish off the
icon by creating an 8 x 10 px rounded
rectangle with a 2 px Corner Radius,
which we will color using #afb6bf.

Give it a nice thick 4 px outline
(#373947), a top and vertical highlight, and a 2 px thick horizontal delimiter.

Group all the
icon’s elements together and then move on to the last icon from this project.

8. Create the Moon
Icon

What icon pack would be complete without a nice looking moon?

You know the
drill: lock your previous layer, target the fourth and last reference grid, and
let’s finish this puppy!

Step 1

Grab the Ellipse Tool (L) and
create a 60 x 60 px circle (#ced0d8), and then give it a 4 px thick outline (#373947)
and center the two to the underlying grid.

Step 2

Add an inner highlight to the moon, by creating a copy of its outline
(Control-C > Control-F) and then
adjusting it by setting its color to white (#FFFFFF), its Blending Mode to Soft Light,
and then finally lowering its Opacity to
80% and aligning its stroke towards
the inside.

Quick tip: don’t
forget to make sure that the highlight sits behind the actual outline, by
selecting it and the fill shape and sending them to the back (right click > Arrange > Send to Back).

Step 3

Add a more round-like shadow (color:
black; Opacity: 20%) towards its
bottom to give it more depth, which we will need to mask using a 52 x 52 px circle (with both shapes
selected,right click > Make
Clipping Mask) so that it won’t end up overlapping the highlight that we’ve
just created.

Step 4

Take a couple of moments and create the little craters
that give the Moon its personality. Use 2
px thick strokes for the outlines, and #9b9faa for the fill shapes.

Once you’re done,
select all the Moon’s elements and group them using the Control-G keyboard shortcut.

Step 5

Create the small
Earth-like planet by drawing an 8 x 8 px
circle which we will color using #62afaf and then give a slightly thinner 2 px outline (#373947) and an inner
highlight (color: white; Blending Mode: Soft Light; Opacity: 80%).

Once we have our planet, group all its elements together (Control-G) and position it towards the
drawable area’s upper right corner.

Step 6

Finish off the
Moon icon by creating the bottom left corner star.

To do this, create a simple diamond shape using the Pen Tool (P), color it using #b5a762, and then give it a 2 px outline (#373947) and position it
underneath the Moon, a few pixels towards its left side.

As always, select
all of the icon’s elements and group them together using the Control-G keyboard shortcut.

We’ve Finally Made
It!

Bravo, cadets! We’ve put you to the test and you’ve aced it! I hope that
you found this tutorial helpful, and I'm eager to have a look at what you’ve
come up with.