![]() ![]() Select the larger circle that has a stroke and visit Object > Expand Appearance to convert the stroke to a shape. 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. To do so duplicate the camera icon and hide the original in the Layers panel. With that our camera icon is pretty much complete but let's take it a step further and also design a selected/enable state. We'll make the color the same as the icon and adjust the settings as seen below. The default font for iOS 7 is "Helvetica Neue" which should be a preinstalled font. Feel free to select all the element and Group (Command + G) them together.Įnable the Type Tool (T) and we'll add a label. With that the icon itself is pretty much complete. 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.Įnable the Rectangle Tool (M) and create a new rectangle and fill it and align it as seen below. Group (Command + G) them together in twos and the two closest points should be 3pt apart with a large gap between both groups. Enable the Pen Tool (P) and click to create four new anchor points at the top of the rounded rectangle. Fill these with the same color as the stroke and remove the stroke.įor this next part you'll want to zoom in a bit so you can see what you're doing. With the Ellipse Tool (L) still selected create two more circles with the following sizes and align them as seen below. Now remove the fill and adjust the Stroke to what you see below.Įnable 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. Select the Rounded Rectangle Tool and create a new rectangle as seen below. 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. 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 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. We will also enable Snap to Grid as well as adjust the document grid to be every 1pt. Please notice we are using " Points" for this tutorial. We will need to create a new document that is 640 x 98pt. Let's begin by creating our base tab bar. We'll be creating both normal and selected states for these icons in Adobe Illustrator, so feel free to follow along! In this tutorial we'll be making some icons in the flat, thin-line style used throughout iOS 7. In most of the sets, you may find the icons in editable vector shapes in PSD or AI formats to help you edit and resize the icons depending on your needs.Įven as all the icon sets listed below are free to use, you are always requested to check the license terms of the respective authors just to make sure that you are using them in the right way.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 collection, you'll find hundreds of free outline icons for various subjects, thanks to the respective designers of the icons. ![]() As a designer, you may always need to have a collection of various icons, especially free icons to help you accelerate your UI design work. Outline or line icons are certainly one of the key design UI elements in mobile apps and web designs especially when designing in iOS 7 style. ![]()
0 Comments
Leave a Reply. |