Creating a "Web 2.0 style" Badge in Inkscape v.45.
by heathenx.




Select the "Stars and Polygons" icon. Left-click and drag  your shape to the desired size.





The number of corners along with spoke ratio can be adjusted either before or after you draw your badge. Play around with these settings. If you would like your badge to look like mine for the sake of this tutorial then adjust your shape using the figures below.





Now press your F1 key to turn your badge into a selection and click the "Fill and Stroke" button.





Select the "Stroke paint" tab at the top of the "Fill and Stroke" dialog. You can choose any color to your liking but we'll choose a gray (cccccc) for our stroke. Make sure that you move the slider in the "Alpha" bar all the way to the right as shown.





Next we'll select the "Stroke style" tab and set the width of the stroke to 12 and select a rounded "Join" and "Cap".





Now we can close the "Fill and Stroke" dialog. Right-click on your shape and select duplicate. This will make a duplicate copy of your badge on top of the previous one.





We'll slide the duplicate shape to the right and turn off the stroke.





Now we will select the upper right handle (arrow), hold down the Ctlr key to keep the aspect ratio, and drag the handle inward to reduce it's size just slightly.





Next we will change the color of our duplicated shape to white. Just make sure the shape is selected and pick on the white color cube at the lower left of the color palette.





Hold the Shift key down and select your orange badge. Make sure that both badges are selected as shown below. Now select the "Align and Distribute" icon.





Now select the "Last selected" option in the pulldown (because we last selected the orange badge when we selected both shapes) and then select the vertical and horizontal center icons. This should move your white badge to the center (and on top) of your orange badge.





Now deselect both shapes by left-clicking anywhere on the your page. Now select only the white badge. Click your "Fill and Stroke" button and then click the "Linear Gradient" button. This should transform your white badge into a gradient.





Next we'll adjust the gradient (lighting) to shine from the upper left corner. To do that we'll select the "Create and edit gradients" button.





Adjust the leader as shown below.





Next, deselect your badge and select the "Create and edit text objects buton".





Write some text off to a side and scale it by dragging a handle. Hold the Ctrl key down to keep it's proportion. Also if you left-click your newly created text twice your size handles will turn into rotation handles. Select an upper corner handle and give it a spin  to create the rotated text below.





Now we'll add a little "bling" to the badge by adding a drop shadow. Do this by carefully selecting the orange badge behind our gradient white badge. After you have selected it, right-click and duplicate the badge. This will place a copy of the orange badge right on top of everything. Just slide it over to the right to get it out of the way. Having the duplicated badge selected, we'll click the "Fill and Stroke" button and change the blur to 3.5 and the color of the fill and stroke to black to achieve the effect below. Next, close out of the "Fill and Stroke" dialog and then select the "Lower selection to bottom" button. This will place the drop shadow underneath everything.





You can adjust the shadow color if you think black is too dark. Personally, I like a gray shadow but for the sake of simplicity we'll keep it black for this tutorial. One doesn't want to go overboard but a drop shadow can be added to the text as well by duplicating the text , changing the color to black, and changing the blur setting.





There you have it! Now you can "group" the shapes and export the image out as a .png file for your web pages.