By Andrei Stefan

Final product image

What You’ll Be Creating

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

setting up a new document

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:

  • reference grids
  • shuttle
  • satellite
  • landing pod
  • moon
  • setting up the layers

    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

    setting up a custom grid

    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 my how 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.

    setting up the reference grids

    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.

    creating the base shape for the shuttles top section

    Quick tip: at
    this point, I recommend you turn on Pixel
    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.

    example of using the pixel preview mode to position an object

    If you’re wondering why we left that 2 px empty gap, the reason is fairly simple: since we’re creating the outlines using 4 px thick Strokes (which will be aligned to the center), we will need to make sure that we always leave a 2 px gap (so half of the stroke’s Weight) 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.

    adjusting the top section of the shuttles body

    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.

    using the move tool to adjust the shuttles top anchor points

    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.

    adjusting the handles from the shuttles tip

    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.

    adding the outline to the shuttles main body

    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.

    adding a highlight to the shuttles main body

    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
    .

    correctly positioning the highlight underneath the shuttles outline

    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)
    positioned 3 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.

    adding details to the shuttles nose section

    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 then right click >
    Make Clipping Mask
    .

    using a clipping mask to hide the out facing sections of the shuttles nose

    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 Corner to Round.

    adding the window line to the shuttles tip

    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.

    using pixel preview mode to create the shuttles window line

    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.

    adding the little side sections to the shuttles body

    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.

    main shuttle body finished

    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.

    creating the main shapes for the left shuttle wing

    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.

    adding the elevons to the shuttles left wing

    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.

    left shuttle wing finished

    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.

    adding the right wing to the shuttle

    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 px and its bottom ones to a smaller 4 px value.

    creating the main shape for the left engine

    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.

    adding details to the left shuttle engine

    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.

    creating the shuttles left nozzle cone

    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
    ).

    adding the right engine block to the shuttle

    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.

    shuttle icon finished

    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.

    creating the main shape for the satellite icon

    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.

    adding the bottom delimiter line to the satellites main body

    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).

    example of using a rectangle to add the bottom delimiter line to the satellites body

    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.

    adding the bottom shadow to the satellites main body

    Step 4

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

    adding the two bottom section pieces to the satellites main body

    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.

    adding the highlight to the satellites main body

    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.

    adding the L like line to the satellites main body

    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.

    adding the smaller bottom section to the satellites body

    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.

    adding details to the satellites lower section

    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.

    creating the main shapes for the satellites nozzle piece

    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.

    adding details to the satellites nozzle piece

    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.

    creating the main shapes for the satellites left wing

    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.

    adding the support bars to the satellites left wing

    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)
    positioned 2 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.

    adding details to the satellites left wing

    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
    ).

    adding the right wing to the satellites main body

    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.

    adding the neck section to the satellites upper 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.

    adding a subtle shadow to the satellites neck section

    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.

    adding the antennas main shapes to the satellite icon

    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.

    satellite icon with antenna added

    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.

    satellite icon finished

    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.

    creating the main shapes for the landing pod icon

    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.

    adding the bottom horizontal delimiter to the landing pods main body

    Step 3

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

    adding the decorative pieces to the lower section of the pods main body

    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.

    adding a subtle highlight to the upper section of the landing pods body

    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.

    adding the bended metal line to the landing pods body

    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.

    adding the two vertical highlights to the landing pods main body

    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.

    creating the main shapes for the landing pods window

    Step 8

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

    adding the two little side hinges to the pods window

    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.

    adding details to the landing pods window

    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.

    adding the small decals to the landing pods main body

    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.

    adding the main lower section piece to the landing pod

    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.

    adding details to the lower section of the landing pod

    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.

    finishing off the lower section of the landing pod

    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.

    creating the main shapes for the landing pods top section

    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.

    adding the delimiter line to the landing pods upper section

    Step 16

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

    adding details to the upper section of the landing pod

    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.

    adding the gold plated section to the landing pod icon

    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.

    landing pod icon finished

    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.

    creating the main shapes for the moon icon

    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.

    adding a highlight to the moon icon

    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.

    adding the bottom shadow to the moon icon

    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.

    adding the craters to the moon icon

    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.

    creating the earth planet for the moon

    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.

    moon icon finished

    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.

    Final four icons

    Read more here:: How to Create a Set of Space Icons Using Adobe Illustrator