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 82 px 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 Pathfinderpanel 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 sometimeswhen 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 7 px, 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 a 45°angle by pressing R and dragging them to the right. Set the Blending Mode to Overlay and lower the Opacity level to 20%.

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

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 by 50% (right click > Transform > Scale> -50%). Position the copies so that their anchor points that are pointing towards one another would intersect if you drew lines through 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 8 px.

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 an Offset 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 a1 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 thenposition 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 then right 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 pxoverlap 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 > Rotate and enter 45 in 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 Multiplyfor 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 to20% 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 Tool to move them towards the top by -53 px (right click > Transform > Move > and enter the specified value into the Verticalvalue 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 2 px 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 them 2 px towards the inside. 

Finish the lock by creating a copy of its outline, which we will position underneath, setting its Blending Mode toMultiply 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 toOverlay and 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) to draw 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 an 8 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 Strokepanel, and with the trace still selected, change the Cap to Round Cap. Then check Dashed 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 of2 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.