'imageScale': true, 'zoomOpacity': true, 'overlayShow': true, 'enableEscapeButton': true, 'showCloseButton': true, 'hideOnOverlayClick': true, 'hideOnContentClick': false, 'callbackOnStart': null, 'callbackOnShow': null, 'callbackOnClose': null, 'centerOnScroll': true IconEden.com Home RSS Twitter Search the blog of Front Page News Releases Freebies Icon Design Made Simple How to Create a Simple Button Icon in Illustrator 8 Tutorial facts Application: Adobe Illustrator Level: Beginner What to do A simple mini set of 64 x 64px icons What we need Drawing Process Here is the diagram that shows the process of drawing a button icon: The process of drawing a button icon Don’t forget to press Ctrl/command + S to save your work at a certain interval during the process of drawing. Create a Round button Create a new document that is 64 x 64 pixels. Choose the Ellipse tool and draw a circle by clicking and dragging the Ellipse tool while holding down the Shift key, or clicking on the artboard and set 64 for width and height in the dialog box, and click OK. With the Selection tool, position the circle so that it stays fit inside the artboard, and select the circle again. Next, do one of the followings: To avoid the pixelation issue and make sure the icon to be sharp, we normally set the Offset path to an integer. Step 3 Step 4 Step 5 Step 6 Done! Here goes our finished Round button icon. Select the Rectangle tool (M) and use it to draw a square path while holding down the Shift key, and then try to position that path in the center of the button icon. Step 3 Select both of the original and duplicate paths and fill the white color for them. Step 4 Adjust the color level of the gradient until the desired result is achieved. It is highly recommended in icon-drawing that the “Paste in Front†command (Command/Ctrl+F) be used all the time instead of the normal Paste command (Command/Ctrl+V). Doing that is much easier for us to put the duplicated and original icons side by side. Ungroup the duplicate by selecting it and choosing the Ungroup command from the right-click menu. Select the green border path and use the Add Anchor Point tool (+) to add an anchor point to the middle point of the square. The purpose of this is to turn the square into an arrow shape. Fig 3.3 Step 3 To turn the square into an arrow shape, delete the two corner points at the right using the Delete Anchor Point tool (-). Fig 3.4 Delete the white square path inside. Fig 3.5 Step 4 Press the A key and click on the corner point, then hold down the Shift key and move the corner point to the position as shown in Fig 3.6. Fig 3.6 Step 5 Fig 3.7 Select the arrow shape and fill the white color for it. Fig 3.8 Fig 3.9 The final outcome in 64 x 64 pixels. Create a Polygon button Take the same steps as done with the Round button above to create a Polygon button icon. How to create a basic set of navigation icons (next, back, up, down) The approach for drawing these kinds of icon is similar to that for button icons. However, you are going to go through several steps that differ a bit in using other tools and commands like the Add/Delete Anchor Point tools and the Offset Path command to make duplications. To create the navigation icons, we start with the Rectangle tool, and we are going to create the DOWN icon first. Create a Down icon Create a new document that is 64 x 64 pixels. Draw a rectangle by dragging the Rectangle tool. With the rectangle path selected, add 5 more anchor points to it by using the Add Anchor Point tool (+). Make sure that those extra points reside in identical positions. You can use the rulers or the grids or the Align palette to re-position those extra points identically. Step 3 Choose the Select Direction tool (A) and use it to select the two points at each side while holding down the Shift/Alt key. Fig 5.3 Step 4 Choose the Delete Anchor Point tool and use it to delete the two points at the bottom. Fig 5.4 Step 5 Re-select the two points you dealt with in Step 3, and move them downward while holding down the Shift/Option key until you get the shape of the arrow exactly like the one below. Fig 5.5 Step 6 Select the two points on the tip of the two arrows at both sides and move them upwards to the position that makes a straight line with the point in the center, and we will have a shapely arrow as shown in Fig 5.6. Fig 5.6 Step 7 The Offset Path command is very useful when you want to create concentric shapes or make multiple copies of an object with an equal distance from each other. (Concentric shapes are the shapes that are drawn inside or outside of the other ones with only one same point. That is, the shapes are concentric to one another). Fig 5.7 Select all the paths and use the Delete Selection tool to delete anchor points, if any, which have not made up the shape of the arrow. Please don’t ignore this step, or you will encounter weird issues when you want to edit the icon or scale it down for exporting to smaller versions. We will go into details on the next section. Step 8 Fill a linear gradient for all the paths. Fig 5.8 Step 9 Change the stroke weight of all the paths to none. Fig 5.9 Use the Gradient tool (G) to adjust the gradient angle and direction of each path until the desired result is achieved like the one below. Select the Rectangle tool (M) and use it to draw a rectangle at the tail of the arrow. This rectangle path is aimed at creating the thickness for the icon. Finish. Here is the outcome. Create the rest navigation icons What we created above was a DOWN icon, which would be used as a page-down or download symbol. Instead of creating other new navigation symbols that have the same style, we just take on the completed DOWN icon and change the direction of the arrow by using the Group/Ungroup command and the Layer palette. Put all the paths of the completed down-arrow icon into a group. Look at the Layer palette you will see all the paths have been grouped. Step 3 Select the duplicated group and rotate it so that the arrow tip shifts westwards (NEXT) or any of the rest directions. To do that, move the pointer outside the bounding box and near a bounding box handle so that the pointer changes to , and then drag. Step 4 We are going to continue with the NEXT icon. To clean up the way for doing this NEXT arrow icon, drag the group of the DOWN icon out of the artboard, and un-group it by right-clicking on it and selecting the Ungroup command. Step 5 Adjust the gradient angle and direction of each path until the desired result is achieved like the one below. Fig 6.3 Step 6 With the Pen tool (P), draw two more new paths as shown in Fig 6.4 to create the thickness for this icon, making an identity with the DOWN icon. Okay, you’re done with the NEXT arrow icon. Fig 6.4 Following is another way to create the navigation icons. Move the two halves of the arrow so that they stick together, and then use the Pathfinder palette to merge them. Step 3 Fig 7.3  How to create a semi-transparent arrow icon Group all of its paths and select the group. In the Transparency palette, click on the small icon at the upper right corner to bring up the Options menu. With the Options menu opened, select Make Opacity Mask. See Fig 8.3. Fig 8.3 Step 3 Fig 8.4 Fig 8.5 Step 4 Draw one path in black color and big enough to cover up the icon, which will now look dull. Fig 8.6 Fig 8.7 Step 5 Now in the Transparency palette, click on the icon box to stop editing the opacity mask. Fig 8.8 And here is the result. Fig 8.9 You may also fill a gradient that goes from white to green, instead of using the opacity mask. But the result you got will only be appropriate to a white background. How to create simple-shaped icons Create a Status icon With the Rectangle tool, click and drag on the artboard while holding down the Alt/Shift key. Select the Rounded Rectangle tool and double-click on the rectangle you just created. With the Rounded Rectangle dialog box opened, type 4 pt in the Corner Radius. Click OK. Fig 9.3 Fill the white color for the rounded rectangle. Next, position it in the center of the rectangle, and you might have to scale it up/down until it is in proportion to the rectangle. Fig 9.4 Step 3 With the Pen tool (P), draw a triangle as shown in Fig 9.5. Fig 9.5 Step 4 Select the rounded rectangle and the triangle and click on the Unite icon in the Pathfinder palette to merge them all. You’re done. Fig 9.6 In case the Pathfinder palette is not there, go to the Window/Pathfinder menu or press the keys combination Command/Ctrl + Shift + F9 to call it up. Create a Pencil icon Fig 9.7 On the available rectangle, draw one rounded rectangle. Fig 9.8 Select the two paths and click on the Divide icon in the Pathfinder palette. See Fig 9.9. Fig 9.9 Step 3 Step 4 Delete any path that is not part of the shape of the eraser. Step 5 Use the Rectangle tool and the Pen tool to draw the rest of the pencil. Step 6 Group all the paths of the pencil and then rotate the group to 45 degrees while holding down the Shift/Alt key. You’re done. Now, with the same tools used above, please create new icons as shown below. How to give a style to your buttons - Simple and Glossy Simple style Drawing the following button (square) is similar to that of the circle button. Use the Offset path to make a duplicate that creates a small path inside. Step 3 Step 4 Step 5 Click on the Divide icon in the Pathfinder palette to separate these two paths, and then ungroup and delete any unnecessary path. Step 6 Adjust the gradient of the path we got at Step 5 until the desired result is achieved. Here are the final outcomes. Glossy style With the Ellipse tool (L), draw one pretty big ellipse on the button. Step 3 Adjust the gradient of these paths until the result pleases you. And finally, here they are. Final results As a perfectionist, not only have we wanted our products to be as perfect as possible, we have also wanted to improve the quality of each and every article published on this blog. Any suggestions or contributions to this article are highly appreciated. We appreciate your time. Like what you read? Tweet Title Subscribe to our RSS There are 8 comments so far. Andrea Austoni says: As an icon designer and tutorial author I commend you for the amout of work you put into this. Thank you. kenneth krabat says: Just a very resounding Thank You for taking time out to lay such a very fundamental groundwork for the rest of us! all the best, kk kl says: Pharmacy technician book says: What a great resource! Duc Ban says: Hi, I love the shaped icon part, thanks for writing this! Keep up your work! Ban. Back to IconEden.com Premium Icons Icon Club Free Icons
Clker.com is owned by Rolera LLC, 2270 Route 30, Oswego, IL 60543 support\at\clker\dot\com
Comments