'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 glossy button icon (revisited) In order to cast a shadow, if you’re with Adobe Illustrator CS3, you can draw a path in black and then make the path bit by bit go transparent by using Mask Opacity Mask. However, on Adobe Illustrator CS4, which has already supported the transparent gradient, you only need to pick an available gradient and use it immediately. Fig 3 Step 3 Click on the black rectangle in the Transparency palette. Fig 4 At this step, we’re working with a black circle that will act like a shadow. The goal is to make the black shape blur and transparent with the background. The circle you’ve chosen to act as the opacity mask will disappear, but not to worry because it’s still there and just being hidden. Step 4 Draw one more circle at the position of the hidden one. Fill a Radial gray gradient to that new circle. Fig 5 Step 5 Adjust that gradient to full black. Oh yeah, there it is. The black color now appears to gradually grow faint from the center point and dissolve into the color of the background. Fig 6 Step 6 Go to the Transparency palette and click on the black circle. Next, select the shadow and press the E key to scale the shadow down so that it becomes a small ellipse. Fig 7 Still in the Transparency palette, change the opacity of the shadow until you got the result as shown in Fig 7. In this case, we need to cast the shadow in the shape of an ellipse because the button, in reality, is of the ellipse as viewed from the top. Voila. Here is the outcome! Fig 8. The finished glossy buttons To arrange those icons in Fig 8 in a straight line, first put each button into one group, then select the groups on one row or column and use the Align palette (Shift + F7) to align them. Please always keep in mind that all the icons must share the same smoothness of surface, the same intensity of light and the same perspective, in order to have an iconset in the same style. How to Create a Simple Button Icon in Adobe Illustrator Adobe Illustrator’s Tools and Palettes Used Most for Icon Creation How to Create a Simple Stroke Dashboard Icon in Adobe Illustrator How to create a realistic globe icon How to create a glossy Network icon Lighting in Icon Design (revisited) Material, Coloration and Gradient in Icon Design (revisited) Pixel Perfection in Icon Design How to create a glossy button icon (revisited) 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 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