The production of fireworks imitation MSN Browser button

Source: Internet
Author: User
Tags copy modify reference
button | The browser now, whether it's a Windows Media player player, an MSN browser, or even Tencent's QQ browser has changed the back button to this dumbbell shape, I'll teach you how to make this simple button in Fireworks MX 2004.

1. Create a new 300 pixel white canvas, select the Oval tool hold down the SHIFT key to draw a positive circle, copy the circle, and hold down the SHIFT key to narrow it down and place it next to the first larger circle. (If you're afraid of being ragged, you can press Ctrl+alt+r to open the ruler in the workspace and drag the guides from the ruler to help align the circles)


2. Note that the intersection of just size two circles is just a little bit, then select two circles, select the menu--modify--Combined path--union, so two circles form a path.

3. Select the "subselection" tool to adjust the anchor points in the middle of the upper half of the two-garden path after combination, and carefully adjust the transition as smoothly as possible. As shown in figure:


4. Select "Knife" tool, extend the middle transverse guide to cut the double circle, delete the lower part (because there is no mediation to the lower half of the anchor point, so deleted)


5. Select the remaining upper half of the outline, copy, flip vertically, and then align to the middle of the auxiliary line position, in the selection of the upper half path union.

6. Use linear gradient color fill, the direction is from top to bottom, color reference #cbdced---#FFFFFF, of course, here also can be casually filled with the need.


7. Selection effect--medial shadow, distance 4-transparency 65%-soften 3-angle 315-color #4775a3


8. Still draw a positive circle, the interior with a radioactive fill, fill color can refer to just the #cbdced---#FFFFFF, the border can choose a slightly darker blue, and then select the projection in effect, set to distance 2-transparency 100%-soften 1-angle 135-color #ffffff;

Once again, the projection effect is set to distance 2-transparency 100%-soften 1-angle 315-color #000000, and increase the bulge sensation of the circular button.

Select the arrow shape in the custom shape, draw an arrow on the round button, and if the orientation is not selected horizontally flip, add the inner shadow of the effect, set to distance 3-transparency 65%-Soften 2-angle 315-color #000000, and then add effect projection, set to distance 2-transparency 100%- Softening 1-Angle 135-color #ffffff;

Copy just the round button and arrow, do horizontal flip, and zoom out, if some effect will flip, depending on the situation to modify the angle of the projection.


9. Select a good Dumbbell button background, add effect projection, set to distance 2-transparency 100%-Soften 2-angle 315-color #ffffff, and then add a projection effect, set to distance 2-transparency 65%-soften 2-angle 135-color #73a2d0 So you can call it a perfect blend of buttons and backgrounds.


Color matching can be based on their own needs to change, the above is just a production process reference.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.