How to Create a Set of Mini Pirate Icons in Adobe Illustrator

Today’s
tutorial will show you how to create a set of pirate-themed icons with the help
of Adobe Illustrator. The process will be mainly based on the use of basic
shapes, with a touch of the Pen Tool here
and there.

Arr me mateys! Today we shall smartly build a fierceful
scallywag icon set using our old bucko, Illustrator. Aye! So maybe I had a
little bit too much fun with the whole “talk-like-a-pirate-gibberish” but who
can blame me for loving it.

1. Setting Up Our Document

Listen up landlubber, open up Illustrator and set
up a New Document (File > New or Control-N) using the following settings:

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

And from the Advanced tab:

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

2. Layering Our
Artboard

Assuming you’ve created a fresh document, bring
up the Layers panel and create six layers, naming them as follows:

1. coin
2. bottle
3. compass
4. bomb
5. treasure
6. map

Quick tip: as you move through the different layers, lock the ones you’re not currently working on so that you won’t get
elements of the icons on different layers than the ones dedicated to them.

3. Setting Up a
Custom Grid

If you are
familiar with the way Illustrator works, you should know that it gives you the
option to snap your design to its Pixel
Grid. That means that each anchor point will be positioned at the middle
intersection of four pixels.

Because there
are different situations that require different grid settings, sometimes you
might find yourself in the position to adjust the ones running on your version
of Adobe Illustrator.

I personally
have gone for the lowest and at the same time the most accurate settings,
because I feel I have more control over my designs.

To change these settings, you must go to Edit > Preferences > Guides &
Grid. From there, a little popup will appear, where we need to adjust the
following:

• Gridline every:
  1 px
• Subdivisions:
  1

Once you’ve
adjusted these settings, all you need to do in order to make everything pixel
crisp is enable the Snap to Grid option
located under the View menu.

Quick tip:
you should know that the Snap to Grid option
will transform into Snap to Pixel
every time you enter Pixel Preview Mode,
but don’t worry, that’s totally fine, as most of the time you will be going
back and forward with this display mode.

If you’re used to moving things around with the
help of the keyboard’s directional arrow keys, you might want to change the Keyboard Increment to 1 px to get it as precise as possible.
You can do this by going to Edit >
Preferences > General > Keyboard Increment.

If your version of Illustrator has the value set to pt,
just go to Units and change the General and Stroke units to Pixels
and you’re good to go.

4. Creating the
Gold Coin Icon

Step 1

Make sure you’re on the coin layer, and using
the Ellipse Tool (L) create an 82 x 82px shape, which we will then
color using #FFC05A. Position the coin’s base shape with the help of the Transform panel:

• X:
  193 px
• Y: 264 px

Step 2

Create the coin’s thicker outline, by
duplicating the previous shape (Control-C > Control-F), selecting the copy (which we will color using #262626)
and then going to Effect > Path >
Offset Path. A little popup will appear asking you for the offset’s value. Enter 8 px, leaving the Joins and Miter limit to their default values.

Step 3

Once we have our coin’s outline, we have to make
sure to send it to the back so that it won’t interfere with the rest of our
objects. To do so, simply select the shape, and then right click > Arrange > Send to Back.

Quick tip:
try and remember this step as we will use the Send to Back action a lot as we build our little icons, so when I
tell you to send an object to the back of another you will know exactly how and
why to do that.

Step 4

Next we will create the half ring-styled
highlight and shadow. Create a copy of the gold shape (Control-C > Control-F) and then add a smaller 74 x 74 px circle on top. With both of
the objects selected, go to the Pathfinder
panel and select Minus Front.
This will create a cutout that will give us a 4 px thick ring.

Quick tip: we could have obtained the same effect by
flipping the duplicate’s fill with its stroke (Shift-X) and then expanding
the shape, but I found that sometimes when
you swap the two the object gets misaligned from the Pixel Grid.

Step 5

Select the resulting shape, change its color to
white (#FFFFFF) and then set its Blending
Mode to Overlay, lowering the Opacity to about 24%.

Step 6

With the ring selected, grab the Rectangle Tool (M) and create a shape
that covers up the bottom section of our current selection. With both of the
objects selected, use Pathfinder’s Minus Front action to remove the bottom
half of the ring.

Step 7

Create a copy of the top section, and then right click > Transform > Reflect
> Horizontal to flip the shape. Make sure to move the reflected object
towards the bottom of the coin’s golden object. Once you have the shadow in
place, change its Blending Mode to Multiply,lowering its Opacity to 10%.

Quick tip:
where you have elements that form a different section of your
icon/illustration, group them together by selecting them and then using
the Control‑G shortcut on your
keyboard. This makes working with different sections of your artwork easier, as
you don’t have to worry about losing an object when you move its counterpart.

Step 8

Using the Ellipse
Tool (L) create a 36 x 20 px shape,
color it using #EAA13F and then position it in the center of the coin with the
help of the Align panel.

Quick tip:
when aligning two or more objects to one another, you must have them both
selected, and then you have to tell Illustrator which one is the Key Object by clicking on one of the
objects that are part of that selection.

Step 9

As you might have seen, our eye has super round
corners on the sides, which is something that we don’t want. To correct this,
first select the shape and then with the help of the Anchor Point Tool (Shift-C) click on the left and right anchor
points to make them nice and pointy.

Step 10

Start adding details to the eye by creating one
larger 24 x 24 px circle (#D8903A)
which we will position towards the center of the previous shape (at about 6 px from its bottom), and one smaller 8 x 8 px circle(#EAA13F) which we will push towards the bottom-right side of the larger
one. Because the circles are going outside the area of our eye, we need to
create a clipping mask by duplicating the pointy ellipse onto the two shapes we
just created, and then with all three of them selected right click > Make Clipping Mask.

Step 11

Add the upper eyelashes by creating one 2 x 8 px rounded rectangle, with a Corner Radius of 1 px, coloring it using #EAA13F and then horizontally aligning it to
the eye at a distance of about 2 px.

Step 12

Create a
slightly shorter 2 x 6 px shape,
with the same 1 px Corner Radius,
and position it to the left of the previously created shape, at a distance of 2 px.

Using the Direct Selection Tool (A) select its
upper anchor points, and move them by 1
px to the left. You can do this by either pressing once on your left arrow
key, or you can right click >
Transform > Move and enter -1 into
the Horizontal field.

Add a 2 x
2 px circle to the left of the modified shape, making sure to move it
towards the bottom by 1 px. Once you
have the left side of the eyelash, simply select the two shapes, create a copy
(Control-C > Control-F) and
then move the duplicates to the right side of the center piece we created in the previous step.

Step 13

Once you have the top eyelash, select all its
components, group them (Control-G)
and then create a copy which we will horizontally reflect (right click > Transform > Reflect > Horizontal) and
position underneath the eye.

Step 14

Grab the Polygon
Tool and create a 4 sided shape
with a 4 px Radius. Hold on, you
might have noticed that the resulting shape is an actual square and not a rhombus (which is what we want), but that’s only because
inputting values directly into the Polygon
Tool’s popup will get you objects that aren’t rotated. If you switch to Pixel Preview (Alt-Control-Y) and
create a shape by dragging the cursor, you can rotate the square and create the
shape that we need.

Now, assuming you’ve understood what I’ve said, create a
rhombus that has 8 px between the
horizontal and vertical pairs of anchor points. Change the color to #EAA13F and
then position the shape onto the left side of the eye, at about 7px, making sure to keep the two vertically
aligned. Add another instance of the rhombus to the right of the eye, and then
with both it and the first one selected, group them together (Control-G).

Step 15

Select the group of rhombuses we just created, and then create a duplicate (Control-C > Control-F) which we will rotate at a 90°angle (right
click > Transform > Rotate > 90).

Step 16

Add four smaller 4 x 4 px circles (#F2AB44) and position them using the following
coordinates in the Transform panel:

• top left circle:
  X: 173 px / Y: 244 px
• top right circle:
  X: 213 px / Y: 244 px
• bottom left circle:
  X: 173 px / Y: 284 px
• bottom right circle: X: 213 px / Y: 284 px

Step 17

Add a couple of diagonal highlights by creating one
thinner 2 x 112 px rectangle and one
thicker 8 x 112 px one and
distancing them at 6 px from one
another. Group them (Control-G),
and then rotate them at a45°angle by
pressing R and dragging them to the
right. Set the Blending Mode to Overlay and lower the Opacity level to20%.

Step 18

Go into Pixel
Preview mode (Alt-Control-Y) and then double
click on the diagonal lines we’ve just created so that we can snap the anchor
points back to the Grid, as the
rotation usually snaps them off. Do so by selecting the anchors with the Direct Selection Tool (A) and then
clicking and dragging them to the nearest Grid
intersection.

Step 19

Position the reflections towards the right
corner, and then mask them using the coin’s main shape as a mask.

Step 20

Start working on the largest star-shaped highlight by creating a 28 x 28 px circle,
which we will color using #FFEACC. Then, using the Direct Selection Tool (A), remove the left and bottom anchor points by
first selecting them and then pressing Delete.
Adjust the resulting shape’s bottom anchor point, by moving it towards the
bottom by 2 px.

Create three copies,
and reflect them so that their curvature is pointed towards the inside.
Position all four shapes near one another so that they form a star. Then
simply select each intersecting pair of anchor points and unite them using Control-J.

Step 21

Create two smaller star-shaped highlights by
duplicating (Control-C > Control-F) and then downscaling them by50%
(right click > Transform > Scale
> -50%). Position the copies so that their anchor points that are
pointing towards one another would intersect if you drew linesthrough them(see the
green lines I added in the image below).

Step 22

Once you have all three highlights, group them (Control-G) and then position them
towards the top right corner of our coin.

Step 23

Finish off the icon by creating a 90 x 14 px shape, which will act as our shadow. Change the object’s color to #F5F5F5 and then bottom align it to the coin at about 8px.

5. Creating the
Rum Bottle Icon

Step 1

Move on to the bottle layer, and create a 72 x 92 px rectangle with a Corner Radius of 8 px. Color the shape using #5C7057 and then position it to the
right side of the coin icon, at a distance of 108
px,aligning it to the bottom side of the gold section.

Step 2

Adjust the shape
of the bottle by deleting the top-center anchor points and then adding four
new ones as you see below. The first set should be at about 24 px from the bottle’s top section,
and then the second one which will form the bottle’s neck should be added at
about 12 px from the first set.

Quick tip: you will have to take your time with the shape of the bottle as you
will have to select and adjust the new anchor points so that you get the shape
that you want.

Step 3

Add an outline to the bottle by creating a
duplicate and then applying an Offset
Path of 8 px to it. Change its
color to #262626 and then make sure to send it to the back.

Step 4

Create the inner highlight and shadow in the
same way we did for the coin icon, making sure to adjust the object
to the shape formed by the bottle’s lines.

Step 5

Using the Rectangle
Tool (M) add a small 16 x 8 px black
(#000000) rectangle to the top of the bottle’s neck, which will act as a
shadow. Change the object’s Blending
Mode to Multiply and then set
the Opacity to 40%.

Step 6

Create a copy (Control-C > Control-F) of the bottle’s highlight and shadow, uniting them (Control-J) into a
single shape. Then create a copy of the bottle’s main shape and, using Pathfinder’s Minus Front option, subtract the previously united shapes from it,
coloring the resulting object using #455441.

Step 7

Using the Pen
Tool (P) trace a wavy line which will act as our bottle’s fluid (in our
case, the elixir of the one eye, bearded rum lovers). Change the shape's color
to black (#000000) setting its Blending
Mode to Multiply and its Opacity level to 26%. Mask the liquid, by applying a clipping mask using the inner
section of the bottle that we created in the previous step.

Step 8

Using the Ellipse
Tool (L) create thirteen 4 x 4 px circles (#262626),
which will serve as decoration pieces for the bottom section of our little
bottle icon. Create a row of seven circles,
distanced at about 4 px from one
another, then a row of four and
finally another one of two circles,
keeping the same 4 px distance
between them.

Step 9

Add two diagonal highlights following the same
process we used for the coin icon.

Step 10

Let’s start working on the little front label by creating a 48 x 56 px shape (#262626)
which we will horizontally align to the bottle’s body, and position it at about
40 px from its bottom.

Step 11

Using the Polygon
Tool create two 4 x 4 px rhombuses
(#B5B5B5), and vertically align them to the label, leaving about 4 px between them and the sides of the
label. Add a second set of two slightly longer (8 x 4 px) shapes, align them horizontally, and again make sure to
leave about 4 px between them and
the top and bottom sides of the label.

Step 12

I know, I know—usually skulls are used as symbols for deadly, do not drink/eat. But it’s a
pirate kit, and let’s be honest, pirates love skulls, so going with a skull
for the main piece of the label is a no-brainer.

First we need to
create the round top section. To do so, grab the Ellipse Tool (L) and draw a 24
x 26 px shape, which will go on top of a 16 x 6 px rectangle. Color both of the shapes using #F0F0F0.

Next, switch to the Direct Selection Tool (A) and modify the lower section of the ellipse, by selecting its bottom anchor
point and moving it towards the top by 5
px. Then select the top left and right anchors of the rectangle and move
them towards the inside of the shape by 2
px. Position the round section of the skull towards the bottom side of the
rectangle, leaving about 2 px between
the ellipse and the rectangle’s bottom.

Switch back to
the Ellipse Tool (L) and create two 4 x 4 px circles, which we will color
in the same dark tint as the label (#262626) and distance one from another at
about 8 px. With both of the circles
selected, group them (Control-G)
and then align them to the top section of the rectangle, forming the jaw.

Using the Pen Tool (P),create a rounded tip
triangle which will act as the nose hole, and position it between the eye
sockets, making sure that the tip goes towards the bottom by 2 px.

Finish up the skull by adding two 2 x 4 px rounded rectangles (#262626)with a Corner Radius of 1 px which we will position on each side of the nose, making sure
that the top half goes over the jaw while the bottom one goes outside it, into
the label's surface.

Step 13

Once you have finished the label, grab the
star-shaped highlights from the coin icon, change their color to #AABAA6 and
position them towards the top right side of the bottle.

Step 14

Using the Rounded
Rectangle Tool create a 24 x 16 px brown (#876A5B) shape with a Corner
Radius of 2 px. Next, create an
outline by first duplicating and then applying anOffset Path effect of 8 px.

Change the outline’s color to #262626 and then make sure to send it under the
main shape of the bottle’s cap. Position both shapes onto the bottle’s neck so
that the bottom section of the outline overlaps the top one of the bottle.

Step 15

Add some details to the cap by creating two vertical rectangles (one with a
1 px width and another with a 2 px one) distanced at about 1 px from one another, which we will
color white (#FFFFFF). Group (Control-G) and then position them
towards the right side of the cap’s main shape, leaving about 4 px of empty space between them and
the side section. Change their Blending
Mode to Overlay and make sure to
lower their Opacity to 40%.

Next create two 40 x 4 px rectangles
and position them onto the top and bottom sides of our cap. Set the top one’s Blending Mode using the same settings
we used for the previous objects, setting the bottom one to Multiply. Mask the two by using a copy
of the cap’s brown shape (create a copy above, select all three shapes, and thenright click > Make Clipping Mask).

Once you’ve done that, simply add two 24 x 2 px rectangles on top of the cap,
making sure to distance them at 4 px from
one another, and then group and both horizontally and vertically align them to the
cap’s main shape.

Step 16

To finish the rum bottle icon, simply copy the
shadow from the coin one, and paste it underneath it.

6. Creating the
Compass Icon

Step 1

As the compass icon is based on the coin icon,
we can copy and paste that onto our appropriate layer, and then remove the eye,
the rhombuses and the smaller circles, leaving all the other elements as they are.
Align the modified icon to the right of the bottle, at a distance of 100 px. Then change the fill color
from yellow to a dark brown (#947464) and the star-shaped highlights to #D3BFB8.

Step 2

Select the star-shaped highlights and move them
towards the bottom by 6 px. You can
do this either by using your keyboard (if you have its increment set to 1 px as I showed you at the beginning)
or by selecting and then right click
> Transform > Move > and then entering 6 px in the Vertical value
field.

Then double click on the diagonal highlights to enter Isolation Mode and, with both of the
shapes selected, move them a couple of pixels towards the top-left corner so that the
elements that we are going to layer underneath won’t interfere with them too
much. Also, try to lower the diagonal highlight’s Opacity to 12% as the
original value (20%) seems to be too
hard for the brown base color of the compass.

Step 3

Start working on
the base for the magnetic needle by creating a 34 x 34 px circle, which we will color using #6D564A and then position
right in the middle of our icon.

Quick tip: as you can see, our base is now covering some sections of our
highlights, but don’t worry—we will fix that once we have all our details added.

Step 4

Add a slightly smaller 26 x 26 px circle on top of the one we just created, giving it a
lighter shade (#876A5B).

Step 5

Now it’s time to start adding the directional
pointers. Turn on Pixel Preview mode
(Alt-Control-Y), and then grab
the Pen Tool (P) and draw a triangle
with a 10 px width and 14 px height. Horizontally align it to
the larger circle that we created in step 3, making sure that its base overlaps
by 2 px.

Step 6

Create a copy of the indicator, and then flip it
horizontally (right click > Transform
> Reflect > Horizontal) making sure to position it towards the bottom
side of the circle and keeping the same 2 px
overlap as before.

Step 7

Select both the top and bottom indicators, group
them (Control-G) and then create a
copy which we will rotate so that the indicators are now horizontal. We will do
so by pressing R and then clicking
on one of the elements and dragging to the right while holding down the Shift key.

Step 8

Now that we have our N-E-S-W indicators, it’s
time to add the NE-SE-SW-NW ones. Using the Pen Tool create another set of indicators (one pointing upwards and
one downwards) with an 8 px Width
and 10 px Height. Position each one at
the base of the previously created indicators and group them (Control-G).

Step 9

With the two indicators selected,right click > Transform > Rotateand enter 45in the Angle value field. As you can see, our
shapes are now diagonal, but if you take a closer look at their anchor points
you might notice that they no longer snap to the Grid. Grab the Direct
Selection Tool (A) and select each of the anchors and snap them to the
closest Gridline intersection.

Step 10

Create a copy of the grouped indicators, and
flip it Vertical or Horizontal (right click > Transform > Reflect) as in this case it will
have the same effect.

Step 11

Once you have all the indicators set up, add a
couple of circles (#6D564A) to each one’s tip. Create 4 x 4 px ones for the N-E-S-W indicators and 2 x 2 px ones for the smaller NE-SE-SW-NW indicators.

Step 12

Using the Ellipse
Tool (L),create a 12 x 52 px shape
(our magnetic needle), color it using #473830 and then align it both vertically and horizontally to the base of the compass.

Grab the Anchor Point Tool (Shift-C) and click on its top and bottom
anchor points to change their tips from round to pointy. Then rotate the
needle at a -45°angle (right click > Transform > Rotate), making sure to snap its anchors to the nearest Gridline intersection.

Step 13

Add a small bearing to the needle, by creating a
14 x 14 px circle (#6D564A) and
positioning it right above it. Add the ring styled highlight and shadow that we
used for the main body of the compass by creating a duplicate of the bearing
and adding a smaller 10 x 10 px circle
above it, which we will cut out using Pathfinder’s
Minus Front option.

Then simply cut
the ring in half, create a reflected duplicate of it, and then change the Blending Mode to Overlay for the highlight and Multiply
for the shadow, keeping both Opacity levels
at 10%.

Step 14

Since we’re done with the needle and indicators,
it’s time to bring the highlights to the front so that they overlap any details that
are positioned underneath them. To do this, simply select the diagonal and star-shaped highlights and right click >
Arrange > Bring to Front.

Step 15

Using the Rectangle
Tool (M) create a 26 x 10 px shape, color it using #6D564A and then give it an outline of 4 px using the Offset Path effect
(Effect > Path >
Offset Path), making sure to send it to the back.

Group (Control-G) and then position the
object and its outline towards the top section of the compass by entering these
coordinates into the Transform panel:

• X:
  579 px
• Y:
  216 px

Step 16

Using the Rectangle
Tool (M) create a 26 x 2 px shape
and position it towards the top of the brown shape we created in the previous step. Color
it white (#FFFFFF) and then change its Blending
Mode to Overlay,lowering its Opacity to 24%.

Step 17

With the help of the Rounded Rectangle Tool create a 16 x 20 px shape with a Corner
Radius of 8 px. Change its color
to #6B6664 and then get rid of the bottom half using the trick I showed you
when we created the ring highlight for the coin icon.

Give the object an offset
of 8 px and then position the two so
that the bottom section of the outline overlaps the top one of the compass’s
neck.

Step 18

Add a highlight and a shadow to the light grey
section, and then a set of two vertical lines, making sure to group and mask
them using the shape underneath as a mask.

Step 19

Complete the bottle icon by adding a 30 x 30 px circle (#262626), and then flip
its fill with its stroke (Shift-X)
and give it a weight of 8 px.
Expand the shape (Object > Expand
> Fill and Stroke) and then
position it under the round section we created in step 17, at about 1 px from its base.

7. Creating the
Bomb Icon

Step 1

Since this shape is also based on the coin icon,
copy that onto the correct layer, and then get rid of all the unneeded
elements. Change the base shape’s color to #514F4D, and the star-shaped
highlights to #BCB8B5, and then position it below the coin at about 75 px from its shadow.

Step 2

Create a duplicate of the neck we made for the
compass icon, and position it underneath the bomb icon, changing the brown
shape’s color to #444240.

Step 3

Select the Rectangle
Tool (M) and create a 54 x 14 px shape
(#262626) which we will position above the bomb’s neck, so that it overlaps the
top section of its outline (8 px from
the top).

Step 4

Build the little fuse by adding a 24 x 40 px shape with a Corner Radius of 12 px. Change its color to #BCB8B5 and then flip its fill with its
stroke (Shift-X). Give the latter
a 4 px Weight and then expand it (Object > Expand > Fill and Stroke).

With the object selected, grab
the Rectangle Tool (M) and draw a
square starting from the shape’s center towards the top left corner. Use Pathfinder’s Intersect option to subtract the shape formed by the intersection
of the two objects.Add a 4 x 4 px circle
to the top right side, uniting the two.

With
the new shape selected, duplicate it (Control-C > Control-F) and apply an Offset
Path of 4 px, making sure to send
the resulting outline to the back (right
click > Arrange > Send to Back). Add a smaller 4 x 3 px black (#000000) rectangle to the bottom of the grey shape
and set its Blending Mode to Multiply,lowering its Opacity to 40%.

Step 5

Select all the elements that form the fuse,
group them and then position them towards the top section of the bomb’s neck, so that
the right side has 9 px of free
space between it and the neck’s larger shape.

Step 6

Add a little round highlight by creating a 14 x 12 px shape (#FFFFFF), which we
will rotate at a 45°angle (right click > Rotate > 45). Then
change its Blending Mode to Overlay, setting the Opacity level to 24%. Position the shape towards the top left side of the bomb’s
round body.

Step 7

Add a crescent shadow by overlapping two
ellipses and subtracting the top one from the one underneath using Pathfinder’s Minus Front option. Color it black (#000000), set its Blending Mode to Multiply, lower its Opacity to
20% and then position it towards the
bottom right corner of the bomb’s main shape. Don’t forget to bring the
star-shaped highlights to the front by using the Arrange > Bring to Front option.

8. Creating the
Treasure Chest Icon

Step 1

Create a 128
x 98 px rounded rectangle with a Corner
Radius of 5 px which we will
color using #6D564A. Position the new shape so that its bottom side is aligned
to that of the bomb’s light grey round shape, making sure to horizontally align
it to the Artboard.

Step 2

Duplicate the shape we just created (Control-C > Control-F) and apply
an Offset Path effect of 8 px to it. Change the resulting
outline’s color to #262626 and then send it to the back (right click > Arrange > Send to Back).

Step 3

Create another copy of the brown object, change
its color to #947464 and using the Direct
Selection Tool (A) select and then remove (Delete) its bottom-centered anchor points, uniting the remaining
ones (Control-J).

Now select the
bottom anchors and use the Move Toolto move them towards the top by -53 px (right click > Transform > Move > and
enter the specified value into the Vertical
value field).

Step 4

Add a 144
x 4 px rectangle (#262626) just underneath the top section of the chest
that we created in the previous step.

Step 5

Start adding the highlights and shadows using
the same workflow used for all the other icons.

Quick tip: the small round shadow that sits underneath
the icon can be easily created by creating a duplicate of the bomb icon’s
one, and then aligning it horizontally to the chest icon.

Step 6

Create a 128
x 2 px rectangle, color it using #262626 and then position it near the
top of the chest's lighter brown section, 3
px shy from touching it. I recommend you turn on Pixel Preview Mode as it’s easier to position the elements this
way.

Step 7

With the previous shape still selected, press
and hold Alt and then, while dragging
towards the bottom, hold Shift,creating
a duplicate of the object at a distance of 2px from it.

To create the rest of the lines, simply press Control-D (duplicate) seven times and
it will automatically create the copies, keeping the same 2 px between them. Make sure to group all the lines together so
that they won’t end up being misplaced.

Step 8

Add a bunch of little 4 x 4 px circles (#262626) towards the bottom section of the chest, five on
each side, keeping a 4 px distance
between them (both vertical and horizontal).

Step 9

Since every chest should have a lock to prevent
treasure seekers from opening it, we will add a nice golden one to our little
icon. Grab the Rounded Rectangle Tool and
create a 26 x 24 px shape (#FFC05A) with
a Corner Radius of 1 px. Horizontally align the object to
the chest, and position it about 46
px from the outline’s bottom side.

Step 10

Add some details to the lock by creating the outline
using an Offset of 4 px, and then create the ring-styled
highlight and shadow. Start working on the little bolts by creating four 4 x 4 px circles (#262626) and assigning one to
each corner of the lock, making sure to leave a 2 px gap between them and the sides of the gold colored shape.

Draw
a larger 8 x 8 px circle and add a 6 x 10 px rectangle which will overlap
half of the circle. Using the Direct
Selection Tool (A) select the top anchor points of the rectangle and move
them2 px towards the inside.

Finish the lock by creating a copy of its outline, which we will position
underneath, setting its Blending Mode to
Multiply and lowering the Opacity to about 20%. Group all the objects forming the lock using Control-G and you’re good to move on
to the next step.

Step 11

Create the chest’s side corner gold plates by selecting
the Rectangle Tool (M) and creating
a 10 x 10 px square(#FFC05A)which we will position at the intersection of the chest’s outline with the
thinner horizontal line delimiter.

Step 12

Select the golden rectangle’s bottom right
anchor point using the Direct Selection
Tool (A) and remove it by pressing Delete.
Unite the remaining anchors using Control-J and then create a copy of the object, to which we will apply an Offset Path of 4 px.

Once you’ve created the outline, position it under the golden
square by first cutting (Control-X)
and then double clicking on the square to enter Isolation Mode where we will paste (Control-F) and send it to the back (right click > Arrange > Send to Back). Apply a 20 x 8 px rectangle on top of the other
two objects, set its Blending Mode to
Overlayand its Opacity to 24%,and then
mask it using a square duplicate.

Step 13

Create a copy of the left golden plate, and then
reflect it vertically (right click >
Transform > Reflect > Vertical), making sure to position the duplicate
on the right side of our chest.

Step 14

Add another gold insertion towards the bottom of
the chest by creating a 54 x 4 px rounded
rectangle (#FFC05A) with a Corner Radius of 4 px which we will horizontally align
to our icon’s main shape, positioning it about 22 px from the chest’s bottom outline section.

Step 15

Add a 4
px outline and then cover the top section of the insertion using a 62 x 6 px shape,which we will mask and use as
a highlight.

Step 16

Finish the treasure chest by copying and pasting
the star-shaped highlights from the bomb icon, change their color to #D3BFB8
and then position them towards the upper right corner.

9. Creating the
Map Icon

Step 1

Create a 94
x 98 px rectangle, color it using #947464 and then bottom align it to the
chest’s brown shape, positioning it about 95 px towards its right side.

Step 2

Use the Pen
Tool (P) todraw a zigzag line which will cover a section of the right
side of our map. Then select both the map and the line and create a cutout
using Pathfinder’s Minus Front option.

Enter Pixel Preview mode and snap the anchor
points back to Grid, and after you’ve
made sure everything is nice and tidy, create a duplicate and apply an Offset Path of 8 px which will act as our outline. Again, watch for any anchor
misalignment and correct it.

Step 3

Add a 14
x 98 px rounded rectangle with a 2
px Corner Radius, color it using #6D564A, and then apply an8 px Offset to it. These objects will
act as our rolled left section of the map. Add highlights and shadows to both
it and the map’s body that we created in the previous step.

Step 4

With the help of the Pen Tool (P) trace two rough shapes that will act as our map’s
islands. Color them using #6D564A and then group them using Control-G.

Step 5

Still using the Pen Tool (P) trace a path which will act as our map’s
directions. Make sure to have the weight of the trace set to 4 px, and its color to #262626.

Step 6

Open up the Stroke
panel, and with the trace still selected, change the Cap to Round Cap. Then
checkDashed Line,giving the Dash field a value of 8 px. Make sure that Preserve exact gap and dash lengths is
checked.

Step 7

Add a little treasure indicator or “x marks the
spot” symbol, by creating two 2 x 8 px gold
(#FFC05A) rectangles, which we will rotate at a 45°angle, so that they end up forming an X shape. Use the Direct Selection Tool (A) and snap the
anchors back into place so that they end up looking as crisp as possible, and
then position the shapes towards the top of our little trace.

Step 8

Grab a copy of the star-shaped highlights from
the compass icon, and then position them towards the upper right corner.

Step 9

Using the Rounded
Rectangle Tool create a 36 x 36 shape
that has a 2 px Corner Radius. Color
it using the same gold tint (#FFC05A) and then vertically align it to the map,
making sure that only 12 px of its
surface goes outside of the map.

Step 10

Once you have the base shape of the buckle
positioned, add a 24 x 24 px square
on top of it, and create a cutout using the Minus Front option. Create a duplicate and apply an Offset Path effect of 4 px to it, making sure to change its
color to #262626 and to send it to the back.

Add the ring styled highlight and
shadow, and then create a 22 x 4 px
rounded rectangle with a Corner Radius of
2 px which will act as our buckle’s
prong. Give it an outline and apply the same highlight treatment as we did with
the treasure chest’s golden insertion, making sure to group and position the
elements underneath the buckle itself, so that just a short section will be
visible from the left side.

Step 11

Move over to the right side of the map and add a larger 30 x 12 px rounded rectangle
with a Corner Radius of 6 px. Give it an outline of 4 px, a highlight and a shadow, and then
group all the elements. Send it to the back of the map along with the
buckle, making sure that only a small portion of its right tip is showing.

Step 12

Add the subtle shadow that sits underneath each icon, making sure to horizontally align it to our map using the Align panel.

Thar She Blows!

I hope you had fun while we carried out our
little adventure, and most importantly learned something new along the way—and
I’m not talking about the silly pirate expressions.