Advertisement

Create an iOS 7 Inspired Tab Bar Icon Set in Adobe Illustrator

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

With the release of Apple's latest mobile operating system iOS 7 I thought it would be great to create some custom tab bar icons styled for this new OS. In this tutorial we'll be making some icons in the flat, thin-line style used throughout iOS 7. We'll be creating both normal and selected states for these icons in Adobe Illustrator, so feel free to follow along!


1. Set Up Your Document

Step 1

Let's begin by creating our base tab bar. We will need to create a new document that is 640 x 98pt. Please notice we are using "Points" for this tutorial. We will also enable Snap to Grid as well as adjust the document grid to be every 1pt.

chris-tabbar-1-1

Step 2

With the document set up select the Rectangle Tool (M) and draw a rectangle that is the same size as the Artboard then adjust the color as seen below.

chris-tabbar-1-2

Step 3

To finish off the tab bar background we'll add a separation bar along the top that is the same width as the Artboard but only 2pt high then align it with the very top of the Artboard and fill it with the following color

This will complete the tab bar so once you're done feel free to lock the layer so as not to accidentally select it later on.

chris-tabbar-1-3

2. Create a Camera Icon

Step 1

Select the Rounded Rectangle Tool and create a new rectangle as seen below. Now remove the fill and adjust the Stroke to what you see below.

chris-tabbar-2-1

Step 2

Enable the Ellipse Tool (L) and create a circle with the same stroke as before and and center it inside the rounded rectangle as seen below.

chris-tabbar-2-2

Step 3

With the Ellipse Tool (L) still selected create two more circles with the following sizes and align them as seen below. Fill these with the same color as the stroke and remove the stroke.

chris-tabbar-2-3

Step 4

For this next part you'll want to zoom in a bit so you can see what you're doing. Enable the Pen Tool (P) and click to create four new anchor points at the top of the rounded rectangle. Group (Command + G) them together in twos and the two closest points should be 3pt apart with a large gap between both groups.

chris-tabbar-2-4

Step 5

Switch to the Direct Selection Tool (A) and select the two inter points we just made and with the arrow button on the keyboard nudge these up 5pt.

chris-tabbar-2-5

Step 6

Enable the Rectangle Tool (M) and create a new rectangle and fill it and align it as seen below.

With that the icon itself is pretty much complete. Feel free to select all the element and Group (Command + G) them together.

chris-tabbar-2-6

Step 7

Enable the Type Tool (T) and we'll add a label. The default font for iOS 7 is "Helvetica Neue" which should be a preinstalled font. We'll make the color the same as the icon and adjust the settings as seen below.

chris-tabbar-2-7

Step 8

With that our camera icon is pretty much complete but let's take it a step further and also design a selected/enable state.

To do so duplicate the camera icon and hide the original in the Layers panel. Now select the rounded rectangle that makes up the body of the camera as well as the small rectangle that indicated the shutter button and remove the stroke and add a fill color of your choice. I'll be using a nice blue color

chris-tabbar-2-8

Step 9

Select the larger circle that has a stroke and visit Object > Expand Appearance to convert the stroke to a shape.

chris-tabbar-2-9

Step 10

With this new shape selected also select the smaller circles and visit Object > Compound Path > Make to join these shapes into one. Now select both the circles and the camera body and under the Pathfinder panel (Window > Pathfinder) select Minus Front to remove the circles from the camera body.

chris-tabbar-2-10

Step 11

You can now copy the text label and adjust the color to match the new icon color

chris-tabbar-2-11

3. Make a Location Pin

Step 1

With the Ellipse Tool (L) enabled create two circles and center them with one another as seen below.

chris-tabbar-3-1

Step 2

Switch to the Convert Anchor Point Tool and click the bottom most anchor point for the largest circle to create a point. With that point still selected hold Shift on the keyboard and press the Down Arrow on your keyboard twice to move that point down 20pt.

chris-tabbar-3-2

Step 3

I'm not a huge fan of what the curve of the circle is doing to the bottom half of the pin so let's adjust this a bit.

Switch to the Pen Tool (P) and where the center point of the pin shape is create a new anchor point by clicking on the the path.

chris-tabbar-3-3

Step 4

With this new anchor path created switch to the Direct Selection Tool (A) and select the bottom handle and drag it towards the anchor point itself so there is no bottom handle.

chris-tabbar-3-4

Step 5

Now adjust the top handle of this anchor point to is it down and over a bit more and then bring down the handle of the anchor point from the side of the once circle.

Make sure to duplicate this process on the opposite side before moving on.

chris-tabbar-3-5

Step 6

You can now add a label to this icon as you did before with the previous icon. Feel free to group the icon shapes together as well.

chris-tabbar-3-6

Step 7

To create the selected version duplicate the icon shape and fill it with the highlight color

chris-tabbar-3-7

Step 8

Select the small circle and adjust the size to be 12 x 12pt. Now select the circle and the pin shape together and choose Minus Front from the Pathfinder.

chris-tabbar-3-8

Step 9

Now adjust the color of the label text.

chris-tabbar-3-9

4. Create a Trash Icon

Step 1

Select the Rounded Rectangle Tool and create a rectangle with an inner stroke as seen below.

chris-tabbar-4-1

Step 2

Switch to the Rectangle Tool (M) and create a rectangle that is the same width as the rounded one below and align it to the top of the rounded rectangle.

chris-tabbar-4-2

Step 3

Select both the rounded rectangle and the smaller rectangle and choose Unite from the Pathfinder panel.

chris-tabbar-4-3

Step 4

With the Rectangle Tool (M) still selected create three more rectangles that are 2 x 40pt and center them inside the larger rectangle.

chris-tabbar-4-4

Step 5

Select these rectangles and Group (Command + G) them together. With the group selected visit Effect > Warp > Shell Upper and apply the following settings.

chris-tabbar-4-5

Step 6

With this warped shaped selected visit Object > Expand Appearance to convert it to a shape.

Now switch to the Direct Selection Tool (A) and select the paths along the top and remove them.

chris-tabbar-4-6

Step 7

Switch back to the Rectangle Tool (M) and create a rectangle that is 46 x 2pt and align it to the top of the icon.

chris-tabbar-4-7

Step 8

Enable the Rounded Rectangle Tool and create a rounded rectangle with an inner stroke and align it as seen below.

chris-tabbar-4-8

Step 9

Draw another rectangle directly below the top of the trash can lid and ensure it covers the bottom handle area.

Select both the handle and the new rectangle and select Minus Front from the Pathfinder panel.

chris-tabbar-4-9

Step 10

Group (Command + G) the trash icon elements together and you can now add a label below like you've done before.

chris-tabbar-4-10

Step 11

Duplicate the trash icon grouping and adjust the fill color to your highlight color

chris-tabbar-4-11

Step 12

Switch to the Direct Selection Tool (A) and select an anchor point from within the trash outline shape and hit delete on the keyboard twice to create a filled shape.

chris-tabbar-4-12

Step 13

Select the three rectangle inside the trash icon (I've recolored them so you can see them in the screenshots) and visit Object > Compound Path > Make. Now select the trash icon shape and the three rectangles and select Minus Front from the Pathfinder panel.

Be sure to also adjust the label highlight color as well.

chris-tabbar-4-13

5. Create a Gear Icon

Step 1

Select the Ellipse Tool (L) and create a circle that is 52 x 52pt and has an inter stroke like the other icons.

chris-tabbar-5-1

Step 2

With the Ellipse Tool (L) still enabled create a new circle that is 8 x 8pt fill it with our grey color and place it at the top center of our larger circle. Now switch to the Direct Selection Tool (A) and select the bottom most anchor point and nudge it up 3pt by pressing Up on the keyboard three times. Duplicate this dented shaped and rotate it then place it at the bottom of the larger circle.

chris-tabbar-5-2

Step 3

Select both dented shapes and Group (Command + G) them together. With that group selected right-click and visit Transform > Transform Each and enter the following settings then click Copy. Once that has been copied press Command + D on the keyboard to duplicate this copy/rotate feature four more times so you create all of the gear teeth.

chris-tabbar-5-3

Step 4

Select the Ellipse Tool (L) and create a circle that is 12 x 12pt with our inner stroke like before and center it in the larger circle.

chris-tabbar-5-4

Step 5

Switch to the Rectangle Tool (M) and draw a rectangle that is 2pt wide and spans the radius of the inner circle to the outer circle and fill it with our grey color

chris-tabbar-5-5

Step 6

With this rectangle selected switch to the Rotate Tool (R). While holding the Option key click in the center of the circles where you want the rotation axis to occur then input 120 in the Angle box and press Copy. Do this again with the copy selected to create your third and last rectangle.

You can also add your label in the same style as the others.

chris-tabbar-5-6

Step 7

Group (Command + G) the elements together and duplicate them and adjust the color so we can create our highlighted version.

chris-tabbar-5-7

Step 8

Select both the circles that make up the body of the gear and visit Object > Expand Appearance to convert them to shapes.

chris-tabbar-5-8

Step 9

Select the smaller circle and the three rectangles and Unite them from the Pathfinder panel.

chris-tabbar-5-9

Step 10

Switch to the Direct Selection Tool (A) and select an anchor point from the inner part of the larger circle then press Delete on the keyboard a couple of times to remove it so you're left with a large filled circle.

chris-tabbar-5-10

Step 11

Select the larger circle as well as the gear teeth and Unite them from the Pathfinder panel.

chris-tabbar-5-11

Step 12

Select both the gear shape and the inner bars and small circle shape and select Minus Front them from the Pathfinder panel.

Be sure to also adjust the label color

chris-tabbar-5-12

6. Create a Microphone Icon

Step 1

With the Rounded Rectangle Tool create a pill shape of the follow size and our inner stroke.

chris-tabbar-6-1

Step 2

Draw another Rounded Rectangle with the following information and position as seen below. With this new pill shape selected visit Object > Expand Appearance to convert the stroke to a shape.

chris-tabbar-6-2

Step 3

Switch to the Rectangle Tool (M) and draw a rectangle so it covers the top half of the pill shape we made in the previous step.

chris-tabbar-6-3

Step 4

Select both the rectangle and the pill shape and select Minus Front from the Pathfinder panel.

chris-tabbar-6-4

Step 5

Switch to the Rectangle Tool (M) and create a rectangle with the following dimensions and position it as seen below.

chris-tabbar-6-5

Step 6

Create another rectangle with the following information and positioning.

chris-tabbar-6-6

Step 7

Make one final rectangle with the following information and positioning.

chris-tabbar-6-7

Step 8

Switch to the Ellipse Tool (L) and create a 3 x 3pt circle and center it inside the pill shape two points away from the inside of the top.

chris-tabbar-6-8

Step 9

Duplicate the circle nine more times and space them two points apart. You can now add your label below.

chris-tabbar-6-9

Step 10

Group (Command + G) the microphone elements together and duplicate them and change it to our highlight color

chris-tabbar-6-10

Step 11

Select the dots and inner rectangle together and visit Object > Compound Path > Make

chris-tabbar-6-11

Step 12

Select the pill shape and switch the stroke to the fill of our highlight color Now select the pill shape and the circles/rectangle and choose Minus Front from the Pathfinder panel.

Be sure to also adjust the label color as well.

chris-tabbar-6-12

We've Reached the End… Where the Tab Bar Resides

Your tab bar is finished and ready to be added to your next iOS 7 design project. I hope I was able to show you a few techniques for creating thin iOS 7 inspired icons that you can easily duplicate for other shapes that will suit your app icon needs.

chris-tabbar-full
Advertisement