How to Create a Retro Camera Icon Pack in Adobe Illustrator

Final product image — What You'll Be Creating

Today you’re going to learn how to create a Photographer’s Essentials icon pack with a little retro flavor to it. So if you’re into icon design, buckle up since it’s about to get interesting.

You’re going to see how easy it is to create these little assets using nothing more than the basic tools and shapes that you probably already use on a daily basis.

Oh, and don’t forget, you can always expand your pack by checking out GraphicRiver, where you’ll find tons of awesome photography themed icons at the press of a button.

1. How to Set Up a New Document

Hoping that you already have Illustrator up and running, let’s kick off the project by going to File > New (or Control-N) and setting up our document as follows:

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

And from the Advanced tab:

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

2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little custom grid so that we can have full control over our shapes.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings as seen below:

Gridline every: 1 px
Subdivisions: 1

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

Step 2

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 Pixel Preview mode.

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my how to create pixel-perfect artwork tutorial, which will help you widen your technical skills in no time.

3. How to Set Up the Layers

With the New Document created, it would be a good idea to structure our project using a couple of layers, since this way we can maintain a steady workflow by focusing on one icon at a time.

That being said, bring up the Layers panel, and create a total of four layers, which we will rename as follows:

layer 1: reference grids
layer 2: camera
layer 3: flash
layer 4: bag

4. How to Create the Reference Grids

Thereference 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 the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.

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

Step 1

Start by locking all but the reference grids layer, and then grab the Rectangle Tool (M) and create a 128 x 128 px orange (#F15A24) square, which will help define the overall size of our icons.

creating the main shape for the reference grid

Step 2

Add another smaller 120 x 120 px one (#FFFFFF) which will act as our active drawing area, thus giving us an all-around 4 px padding.

creating the main shape for the active drawing area

Step 3

Group the two squares composing the reference grid using the Control-G keyboard shortcut, and then create two copies at a distance of 40 pxfrom one another, making sure to align them to the center of the Artboard.

Once you’re done, lock the current layer and move on to the next one where we’ll start working on our first icon.

creating and positioning all three reference grids

5. How to Create the Camera

Since photos are usually taken using what was once thought of as a “magical box”, we’re going to kick off the project by creating it. So make sure you’re on the right layer (that would be the second one) and then zoom in on the first reference grid and let’s get started.

Step 1

Create the main shape for the device’s front section of the body, using a 76 x 66 px rounded rectangle with a 4 px Corner Radius, which we will color using #7C7575 and then position onto the upper section of the underlying grid, at a distance of 14 px from the active drawing area’s top edge.

creating and positioning the main shape for the front section of the cameras body

Step 2

Add a 36 x 10 px rectangle (#7C7575) on top of the shape that we’ve just created, and then adjust it by individually selecting and pushing its top anchor pointsto the inside by 10 px (right click > Transform > Move > Horizontal > + 10 px / - 10 px depending on the position of the anchor).

creating and positioning the main shape for the upper front section of the cameras body

Step 3

Select both shapes, and use Pathfinder’s Unite Shape Mode to turn them into a single larger shape.

using pathfinder to unite the front shapes of the cameras body

Step 4

Smoothen out the top section of the camera by selecting its anchor pointswith the Direct Selection Tool (A),and then using the Convert selected anchor points to smooth option, adjusting their handles as needed.

adjusting the smoothness of the cameras upper front section

Step 5

Give the resulting shape an outline using the Offset Path method, by first selecting it and then going to Object > Path > Offset Path and entering 4 px into the Offset value field.

adding the outline to the cameras front section using the offset path method

Step 6

Change the fill color of the outline that we’ve just created to #443E3E so that it will stand out from the fill shape, and then select and group the two using the Control-G keyboard shortcut.

adjusting the color of the cameras front section outline

Step 7

Create the camera’s side section by making a copy (Control-C > Control-B) of its front which we will then align to the right edge of the active drawing area,changing the color of the fill shape to #595353.

creating and positioning the main shapes for the cameras side section

Step 8

Select the Rectangle Tool (M) and create the camera’s front leather section using a 76 x 34 px shape which we will color using #A5736A, and then center align to the underlying shape, positioning it 8 px from its bottom edge.

creating and positioning the main shape for the cameras front leather section

Step 9

Separate the leather section from the camera’s body, by adding a 76 x 4 px horizontal divider (#443E3E) to both its top and bottom edge.

adding the top and bottom horizontal dividers to the cameras front leather section

Step 10

Create the small insertion by center aligning a 24 x 4 px rectangle (#443E3E) to the bottom edge of the leather section, and then adjusting it by individually selecting and pushing its top anchor pointsto the inside by 4 px (right click > Transform > Move > +4 / -4 px depending on the position of the anchor).

creating and positioning the bottom insertion onto the cameras front leather section

Step 11

Grab the Ellipse Tool (L) and start working on the left-sided grip, by creating four rows of 2 x 2 px circles (#443E3E) positioned 2 px from one another both vertically and horizontally, and then gradually removing some of the elements to give it that diagonal look.

Once you’re done, select and group (Control-G) all the circles, positioning them on the bottom-left corner of the leather section.

creating and positioning the left-sided grip onto the cameras front section

Step 12

Create a copy (Control-C > Control-F) of the left-sided grip that we’ve just added, and position it onto the opposite side of the camera, making sure to flip it vertically (right click > Transform > Reflect> Vertical).

creating and positioning the right-sided grip onto the cameras front section

Step 13

Finish off this part of the camera by adding a 76 x 2 px horizontal divider (#443E3E) on top of the brown fill shape, positioning it 2 px from its top edge.

Once you’re done, select all the leather section’s composing shapes and group them using the Control-G keyboard shortcut.

creating and positioning the thinner horizontal divider onto the cameras front leather section

Step 14

Grab the Ellipse Tool (L) and create the focus assist beam using a 4 x 4 px circle (#595353) with a 4 px outline (#443E3E), which we will group (Control-G) and then position onto the upper-right section of the camera, leaving a 4 px gap around them.

creating and positioning the main shapes for the cameras front facing focus assist beam

Step 15

Add a 4 x 4 px circle (#443E3E) onto the left side of the focus beam, bottom aligning the two at a distance of 2 px from one another.

creating and positioning the decorative circle onto the front section of the camera

Step 16

Add the brand dummy text using a 10 x 4 px rectangle (#443E3E) followed by another smaller 6 x 4 px one (#443E3E) which we will position 2 px from one another and then adjust by selecting and pushing their inner bottom anchor pointsto the left by 2 px. Group them afterwards (Control-G).

Once you’re done, position the two 4 px from the top edge of the underlying grey shape, and then select and group (Control-G) all of the camera’s front section elements together.

Image may be NSFW.
Clik here to view. adding the brand dummy text line onto the front section of the camera

Step 17

Start working on the side section of the camera, by adding the little leather section which we will create using a 14 x 34 px rectangle (#725651) that we are going to bottom align to the one that we created for the front of the body.

creating and positioning the main shape for the cameras side leather section

Step 18

Add the bottom and top horizontal dividers using two 14 x 4 px rectangles, which we will color using #443E3E.

adding the top and bottom horizontal dividers to the cameras side leather section

Step 19

Using the Rectangle Tool (M), add a small 6 x 2 px insertion above the bottom horizontal divider that we’ve just created, coloring it using #443E3E and making sure to center align it to the underlying shape.

creating and positioning the small insertion onto the cameras side leather section

Step 20

Add two 4 x 4 px circles (#443E3E) 2 px from one another,which we will group (Control-G) and then position above the insertion that we’ve just created, exactly 2 px from it.

adding the little circular insertions onto the cameras side leather section

Step 21

Using the Rectangle Tool (M), create a 14 x 2 px rectangle (#443E3E) and center align it to the underlying brown shape, at a distance of 2 px from its top edge.

Then, select all of the leather section’s composing elements, and group them together using the Control-G keyboard shortcut.

creating and positioning the thinner horizontal divider line onto the cameras side leather section

Step 22

Finish off the side section of the camera by creating the little strap hinge using a 10 x 4 px rounded rectangle (#443E3E) with a 2 px Corner Radius on top of which we will add a 4 x4 px circle (#443E3E). Group the two shapes together (Control-G) and then position them at a distance of 8 px from the top horizontal divider.

Once you’re done, select all the composing shapes of the camera’s side section and group (Control-G) those as well.

creating and positioning the main shapes for the cameras side strap hinge

Step 23

Create the little shutter button using an 8 x 2 px rectangle (#BFB6B6) with a 4 px outline (#443E3E) which we will group (Control-G) and position on the upper left side of the camera, at a distance of 10 px from its main outline.

creating and positioning the main shapes for the cameras shutter button

Step 24

Create the mode dial, using a copy (Control-C > Control-F) of the shutter button which we will position onto the other side of the camera, aligning it to the right edge of the larger outline. Double click on the button to enter Isolation Mode, and then add two 2 x 2 px squares (#443E3E) to its center, positioned 2 px from one another. Use the Escape key to exit Isolation Mode afterwards.

creating and positioning the main shapes for the cameras mode dial

Step 25

Using the Ellipse Tool (L), start working on the lens release button by creating an 8 x 8 px circle (#7C7575) with a 4 px outline (#443E3E), adding another smaller 4 x 4 px circle (#443E3E) to its right side, grouping (Control-G) and positioning all three shapes onto the front leather section, at a distance of 12 px from its right edge.

creating and positioning the main shapes for the cameras lens release button

Step 26

Start working on the actual lens by creating its main shape using a 48 x 36 px rectangle (#595353), which we will adjust by setting the Radius of its right anchor pointsto 18 px. Give the resulting shape a 4 px outline (#443E3E) using the Offset Path method, and then group (Control-G) and position both shapes on the left side of the camera’s body.

creating and positioning the main shapes for the cameras lens body

Step 27

Using the Ellipse Tool (L), create a 44 x 44 px circle (#443E3E) from which we will cut out a smaller 36 x 36 px one (#443E3E) using Pathfinder’s Minus Front Shape Mode, positioning the resulting shape over the lens’ body, at a distance of 6 px from its right edge.

adding the center connector ring to the body of the cameras lens

Step 28

Create the focus ring using a 36 x 36 px circle (#544E4E) with a 4 px outline (#443E3E), which we will position onto the lens’ body, at a distance of 16 px from its right edge.

creating and positioning the main shapes for the cameras focus ring

Step 29

Using the Rectangle Tool (M) add nine 44 x 2 px rectangles (#443E3E) stacked vertically 2 px from one another, grouping (Control-G) and then masking them using a copy of the underlying grey circle (highlighted with orange) as a Clipping Mask (both shapes selected >right click > Make Clipping Mask).

adding the horizontal detail lines to the cameras focus ring

Step 30

Create the front section of the lens using a 36 x 36 px circle which we will color using #7C7575, give a 4 px outline (#443E3E) and then group (Control-G) and align to the left edge of the active drawing area,making sure to center align them to the rest of the lens’s body.

creating and positioning the main shapes for the front section of the cameras lens

Step 31

Add another smaller 20 x 20 px circle (#544E4E) with a 4 px outline (#443E3E) on top of the shapes that we’ve just created, grouping them using the Control-Gkeyboard shortcut.

creating and positioning the main shapes for the darker section of the cameras lens

Step 32

Create the lens reflection using a 20 x 20 px circle (#FFFFFF), which we will position over the shapes that we created in the previous step, and then adjust its Transparencyby setting its Blending Mode to Soft Light and lowering its Opacity to 40%.

creating and positioning the main shape for the cameras lens reflection

Step 33

Add the outer reflection by creating a duplicate of the main shape (Control-C > Control-F) and cutting out a smaller 16 x 16 px circle from it, using Pathfinder’s Minus Front Shape Mode.

adding the outer reflection to the cameras lens

Step 34

Switch over to the Ellipse Tool (L) and add the final reflection using a 6 x 6 px circle (#FFFFFF) on the right side of the lens, applying the same Transparency values (Blending Mode: Soft Light; Opacity: 40%) used for the rest of the reflections. Select and group all the composing shapes of the lens afterwards.

adding the small circular reflection to the cameras lens

Step 35

With the lens finished, start working on the camera’s bottom addon grip, by creating its front section using a 76 x 14 px rounded rectangle with a 4 px Corner Radius, which we will color using #7C7575, give a 4 px outline (#443E3E) and then group (Control-G) and position underneath the camera’s body, making sure their outlines overlap.

creating and positioning the main shapes for the front section of the cameras add-on grip

Step 36

Create the grip’s side section using a copy (Control-C > Control-B) of its front, which we will then align to the right edge of the underlying active drawing area, making sure to change the color of the fill shape to #595353 afterwards.

creating and positioning the main shapes for the side section of the cameras add-on grip

Step 37

Grab the Rectangle Tool (M) and use it to create a 44 x 6 px shape (#595353) which we will adjust by setting the Radius of its top corners to 4 px from within the Transform panel’s Rectangle Properties. Give the resulting shape a 4 px outline (#443E3E) and then position the two at the bottom of the grip, making sure to center align them to it.

creating and positioning the main shapes for the rubbery section of the cameras add-on grip

Step 38

Give the section that we’ve just created that rubbery feeling by adding ten 2 x 2 px circles (#443E3E) positioned 2 px from another, grouping (Control-G) and then placing them in the center of the underlying grey shape.

Once you’re done, select and group (Control-G) both the dimples that we’ve just created and the underlying section.

adding the rubber dimples to the lower section of the cameras add-on grip

Step 39

Create the grip’s shutter button using an 8 x 8 px circle (#595353) with a 4 px outline (#443E3E), on top of which we’ll add a smaller 2 x 2 px circle (#443E3E), grouping (Control-G) and positioning the shapes over on the grip’s left side.

Hide the left half of the button that falls outside of the grip’s surface, using a copy of the underlying grey shape, and then select all of the front section's composing elements and group (Control-G) them together.

adding the shutter button to the front section of the cameras add-on grip

Step 40

Create the grip’s IO connector using a 10 x 6 px rounded rectangle (#443E3E) with a 2 px Corner Radius, adding a 4 x 2 px rectangle (#595353) to its bottom edge, and then group (Control-G) and position the two in the center of the grip’s side section.

Once you’re done, group (Control-G) all of the side section’s composing elements together, and then do the same for the entire icon.

adding the io connector to the cameras add-on grip

Step 41

Finish off the icon by adding a subtle shadow underneath the camera, using a 100 x 8 px ellipse (#443E3E), which we will adjust by lowering its Opacityto 20%, and then align to the bottom edge of the active drawing area,grouping (Control-G) it to the device itself.

Image may be NSFW.
Clik here to view. adding the subtle shadow to the camera icon

6. How to Create the Flash

So we’ve just finished our first icon, which means that we can now lock its layer and move on up to the next one, where we’re going to zoom in on the second reference grid and start working on our camera flash.

Step 1

Create the side section of the flash’s upper body, using a 66 x 24 px rectangle (#595353) which we will adjust by setting the Radius of its left corners to 12 px. Give the resulting shape the usual 4 px outline (#443E3E), and then group (Control-G) and align the two shapes to the top edge of the active drawing area, at a distance of 36 px from its left side.

creating and positioning the main shapes for the flashs upper side section

Step 2

Add the front section of the flash’s upper body using a 48 x 24 px rounded rectangle with a 4 px Corner Radius,which we will color using #7C7575, give a 4 px outline (#443E3E) and then group (Control-G) and position at a distance of 10 px from the active drawing area’s left edge.

creating and positioning the main shapes for the front section of the flashs upper body

Step 3

Create a 44 x 20 px rounded rectangle (#443E3E) with a 2 px Corner Radius followed by a 36 x 12 px rectangle (#C19468), which we will group (Control-G) and then position in the center of the shapes that we created in the previous step.

adding details to the front section of the flash

Step 4

Add a subtle reflection to the yellow panel, by creating a copy of it (Control-C > Control-F) and then cutting out a smaller 32 x 8 px rectangle from it using the Minus Front Shape Mode. Adjust the resulting shape by setting its color to white (#FFFFFF), its Blending Mode to Overlay, and its Opacity to 40%.

adding the subtle reflection to the yellow section of the flash

Step 5

Using the Rectangle Tool (M), add three 28 x 2 px horizontal dividers (#443E3E) stacked vertically 1 px from one another, grouping (Control-G) and positioning them in the center of the underlying yellow shape.

Once you’re done, select and group all of the flash’s front section elements together using the Control-G keyboard shortcut.

adding the horizontal dividers to the yellow section of the flash

Step 6

Create the vertical divider line from the side section of the flash’s body, using a 64 x 48 px rounded rectangle (#443E3E) with a 16 px Corner Radius from which we will cut out a smaller 56 x 40 px one with a 12 px Corner Radius, positioning the resulting shape 46 px from the active drawing area’s left edge.

adding the vertical divider line to the side section of the flash

Step 7

Mask the vertical divider that we’ve just created using a copy (Control-C> Control-F) of the underlying grey shape (both shapes selected > right click > Make Clipping Mask).

masking the vertical divider from the upper side section of the flash

Step 8

Add a 4 x 8 px rectangle (#443E3E) to the right side of the shape that we’ve just masked, making sure to vertical center align the two.

adding the small rectangle to the upper side section of the flash

Step 9

Using the Rectangle Tool (M), create a 28 x 4 px horizontal divider (#443E3E) and position it next to the shape that we just created in the previous step.

adding the horizontal divider line to the side section of the flashs upper body

Step 10

Finish off the side section of the flash’s upper body by adding the circular insertion using a 4 x 4 px circle (#524E4E) with a 4 px outline (#443E3E) which we will group (Control-G) and then position onto the horizontal divider from the previous step, at a distance of 6 px from its left edge.

Then, once you’re done, select and group (Control-G) all of the side section's composing shapes together.

adding the circular insertion to the side section of the flashs upper body

Step 11

Create the lower front half of the flash’s body, using a 48 x 60 px rectangle (#7C7575) which we will adjust by setting the Radius of its top corners to 4 px. Give the resulting shape a 4 px outline (#443E3E) and then group (Control-G) and position the two underneath the top half of the device, at a distance of 32 px from the active drawing area’s left edge.

creating and positioning the main shapes for the front section of the flashs lower body

Step 12

Create the lower body’s side section, using a copy (Control-C > Control-B) of the front which we will position 14 px from the active drawing area’s right edge, making sure to change the color of the fill shape to #595353 afterwards.

creating and positioning the main shapes for the flashs lower side section

Step 13

Start adding details to the front section of the flash’s lower half by creating a 32 x 12 px rectangle (#B55550) which we will adjust by setting the Radiusof its top corners to 4 px.

Give the resulting shape a 4 px outline (#443E3E), add a 32 x 4 px horizontal divider (#443E3E) towards the bottom, and then group (Control-G) and position all three shapes to the bottom edge of the underlying grey shape.

adding the red section to the front bottom half of the flashs body

Step 14

Create two 2 x 16 px rectangles which we will color using #443E3E, and then position one on each side of the flash’s front lower section.

adding the side detail elements to the flashs front section

Step 15

Add two rows of six 2 x 2 px circles (#443E3E) positioned 2 px from one another both horizontally and vertically, and then remove the side ones from the top row, grouping (Control-G) and positioning the remaining ones above the red shape, at a distance of 2 px.

adding the small circular dimples to the front section of the flashs lower body

Step 16

Finish off the front section of the flash’s lower body by adding the dummy brand line using a copy (Control-C > Control-F) of the one we made for the first icon, and a 6 x 6 px circle (#443E3E) towards its upper-right corner.

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

adding the finishing touches to the front section of the flashs lower body

Step 17

Move over to the side section of the flash’s lower body, and create the vertical divider line (#443E3E) using some offsets of the front’s outline, which you will have to mask with a copy of the shape from underneath (both shapes selected > right click > Make Clipping Mask).

adding the vertical divider line to the side section of the flashs lower body

Step 18

As we did with the front of the flash, add a 2 x 16 px rectangle (#443E3E), which we will center align to its right edge, selecting and grouping (Control-G) all of the side section’s composing shapes together afterwards.

adding the vertical detail line to the side section of the flashs lower body

Step 19

Start working on the device’s connector by creating a 16 x 2 px rectangle, which we will color using #BFB6B6 and give a 4 px outline (#443E3E). Add a small 4 x 1 px insertion to the bottom (#443E3E), grouping (Control-G) and positioning all three shapes underneath its lower body.

creating and positioning the main shapes for the front section of the flashs connector

Step 20

Create the connector’s side section using an 8 x 2 pxrectangle (#968F8F) with a 4 px outline (#443E3E) which we will group (Control-G) and position on the right side of the outline that we created in the previous step.

creating and positioning the main shapes for the side section of the flashs connector

Step 21

Finish off the connector, by adding a 44 x 4 px rectangle (#443E3E) to its bottom, grouping all its composing shapes together using the Control-Gkeyboard shortcut, and doing the same for the entire icon afterwards.

adding the horizontal detail line to the bottom of the flashs connector

Step 22

With the device finished, create a copy (Control-C > Control-F) of the subtle shadow that we’ve added to the first icon, and position it underneath, grouping (Control-G) both it and the icon together.

Image may be NSFW.
Clik here to view. flash icon finished

7. How to Create the Bag

We are now down to our third and last icon, which is a must have for any photographer, since this little thing will shield your equipment from any unwanted damage. That being said, make sure you’re on the right layer (that would be the fourth one) and zoom in on its reference grid so that we can get started.

Step 1

Start by creating the front section of the bag using a 94 x 80 px rounded rectangle with a 4 px Corner Radius, which we will color using #A5736A, give a 4 px outline (#443E3E), group (Control-G),and then align to the left edge of the active drawing area, at a distance of 14 px from its top.

creating and positioning the main shapes for the bags front section

Step 2

Create the bag’s side section using a copy (Control-C > Control-B) of its front, which we will align to the right edge of the underlying active drawing area, making sure to change the color of the fill shape to #725651 afterwards.

creating and positioning the main shapes for the bags side section

Step 3

Using the Rectangle Tool (M), add a 94 x 4 px horizontal divider line (#443E3E) to the bottom of the bag’s front section, leaving a 4 px gap between it and the larger outline.

adding the horizontal divider line to the bottom of the bags front section

Step 4

Create the bag’s front pocket using a 66 x 40 px rectangle (#725651), which we will adjust by setting the Radius of its bottom corners to 4 px. Give the resulting shape a 4 px outline (#443E3E), and then group (Control-G) and position the two above the horizontal divider line, at a distance of 4 px.

creating and positioning the main shapes for the bags front pocket

Step 5

Create the pocket’s side section, using a copy (Control-C > Control-B) of its front, which we will move to the right side and position exactly 4 px from the bag’s larger outline, changing the color of its fill shape to #664D48.

creating and positioning the main shapes for the side section of the bags pocket

Step 6

Create the pocket’s folded section using a 66 x 20 px rectangle (#A5736A) which we will adjust by setting the Radius of its bottom corners to 4 px. Give the resulting shape a 4 px outline (#443E3E) and then group (Control-G) and position the two on top of the pocket’s front, making sure to center align them to its top edge.

creating and positioning the main shapes for the bags pocket fold

Step 7

Add the little locking clip, using a 14 x 10 px rectangle (#C19468) with a 4 px outline (#443E3E), on top of which we will add a 14 x 2 px horizontal divider (#443E3E) and two 4 x 4 px circles (#443E3E) positioned 4 px from one another. Once you have all five shapes, group (Control-G) and then position them onto the pocket, at a distance of 14 px from its top edge.

creating and positioning the main shapes for the bags locking clip

Step 8

Add some little stitch lines, using two groups of 4 x 2 px rectangles (#443E3E) positioned 2 px from one another, placing one on each side of the bag’s locking clip.

adding the little stitch lines to the bags pocket

Step 9

Add the little brand dummy text line from one of the previous icons, positioning it onto the bottom-right corner of the pocket, and then select all of its front section’s composing shapes and group them together using the Control-G keyboard shortcut.

Image may be NSFW.
Clik here to view. adding the little brand text line to the bags pocket

Step 10

Move over to the pocket’s side section, and add a 2 x 4 px rectangle (#443E3E) which we will position 4 px from its top edge, grouping (Control-G) all its composing shapes together afterwards.

adding the little detail line to the side section of the bags pocket

Step 11

Start working on the front zipper by creating a 94 x 2 px rectangle (#7C7575) with a 4 px outline (#443E3E), which we will group (Control-G) and position above the bag’s pocket, at a distance of 4 px.

creating and positioning the main shapes for the bags front facing zipper

Step 12

Using a couple of 2 x 1 px rectangles (#443E3E), create the zipper’s metal teeth by stacking them next to one another in a diagonal position. Once you have all the elements, don’t forget to group (Control-G) them together and to the zipper itself.

adding the metal teeth to the bags front facing zipper

Step 13

Create the base of the left slider, using a 6 x 2 px rounded rectangle (#C19468) with a 4 px outline (#443E3E) (1) and a 2 x 2 px vertical divider (#443E3E) (2), grouping all three shapes together afterwards.

Add the little leather section using a 4 x 8 px rectangle (#725651) (3) which we will adjust by individually selecting and pushing its top anchor pointsto the inside by 1 px, giving the resulting shape a 4 px thick outline (#443E3E) (4). Finish off the leather piece by adding a 2 x 2 px square (#443E3E) to its bottom (5), grouping (Control-G) all its composing shapes and the slider’s afterwards.

creating the slider for the bags front facing zipper

Step 14

Create the right slider using a copy of the left one, which we will flip vertically (right click > Transform > Reflect> Vertical), and then position on its right side, grouping (Control-G) and then aligning the two to the center of the zipper.

Also, since we’re pretty much done working on the front section of the bag, you can select all its composing shapes and group (Control-G) those as well.

creating and positioning the two sliders onto the bags front facing zipper

Step 15

Move over to the bag’s side section, and add the little horizontal divider line using a 14 x 4 px rectangle (#443E3E), aligning it to the one from the front.

adding the horizontal divider line to the bags side section

Step 16

Create two 4 x 4 px circles (#443E3E) positioned 2 px from one another, which we will group (Control-G) and then position above the horizontal line from the previous step, at a distance of 2 px.

adding the two decorative circles to the bottom of the bags side section

Step 17

Add the rest of the zipper, using a 14 x 2 px rectangle (#595353) with the same 4 px thick outline (#443E3E), on top of which you will add the little 2 x 1 px rectangles (#443E3E) to separate the teeth. Once you’re done, select and group (Control-G) all the composing shapes together, aligning them to the front zipper.

adding the zippers side section to the bag

Step 18

Next, add the little patch holding the bag’s strap by creating a 10 x 12 px rectangle (#443E3E) followed by a smaller 6 x 4 px one (#443E3E) underneath it, grouping (Control-G) and then positioning the two below the zipper, exactly 4 px from it.

Once you’re done, select all of the side section’s composing elements and group (Control-G) those as well.

adding the little patch holding the bags strap

Step 19

Add the strap by creating a 104 x 36 px rounded rectangle (#443E3E) with a 14 px Corner Radius, from which we will cut out a smaller 92 x 24 px one (#443E3E) with a Corner Radius of just 8 px. Cut the resulting shape in half, and then position it above the bag, centering it to the underlying active drawing area.

creating and positioning the main shape for the bags strap

Step 20

Slightly adjust the strap, by selecting its bottom-right anchor pointsusing the Direct Selection Tool (A) and pushing them towards the bottom by 20 px using the Move Tool (right click > Transform > Move > Vertical > 20 px).

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

Step 21

Finish off the icon by adding a subtle shadow, which we will then select along with the bag and group (Control-G) together.

Image may be NSFW.
Clik here to view. bag icon finished

It’s a Wrap!

Wow, this actually took a lot longer than I expected, but in the end I think the result pays off.

As always, I hope you’ve managed to follow me through each and every step, and most importantly learned a new trick along the way.

Image may be NSFW.
Clik here to view.