fireworks制作苹果按钮

您现在的位置：圆点视线 >> 教程 >> 图形图像 >> Fireworks >> 文章正文

[图文]fireworks制作苹果按钮

★★★

fireworks制作苹果按钮

作者：hairan 　文章来源：设计80 　点击数：　更新时间：2008-8-16 12:41:08　

　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

【字体：小大】

在这篇教程里，我们要制作一个按钮，像苹果站点那样。下面的每一个步骤，有些可以合并和忽略，当然得看您的理解能力了。

教程PNG文件

　　首先建立新文件，大小为420*220，背景设置为透明然后画出按钮的轮廓，我们可以使用画笔，建立一个圆角矩形。打开标尺，选择菜单View>Rulers，然后拖曳出两根水平导线定好按钮的上边和下边。建立一个圆，将鼠标指针放在上面的导线上，按住Shift拖曳出圆形，终止于下面的导线上，选择白色填充。

　　为了建立另外一个圆，拷贝第一个圆，然后粘贴在工作区里，使用鼠标移动第二个圆到右边位置，移动时按住Shift键，这样可以平行移动，接着画出一个矩形放在两个圆中间，如图。选择圆和矩形，Modify>Combine>Union合并，我们就做好了按钮的轮廓

　　现在使用复制层选项建立一个新层，命名为Reflex。

　　选择第一层使用相近于apple按钮的颜色填充，设置RGB色为#283c78，然后使用油漆桶工具填充轮廓，接着，我们要建立按钮上方的光影，选择Reflex层，选择变形工具Ctrl+T，如图所示变形，或者你可以使用info面板，设置宽为289，高为43。

　　仍然在Reflex层，建立一个白色矩形覆盖在原来的变形区域上，我们要给它建立遮照。点击D键，删除掉边框，然后选择Fill为Linear线性填充，选择Paint Bucket工具移动填充控制柄，改变渐变填充的方向，如图所示，然后同时选择渐变矩形和倒影区，使用Select Behind工具，或者按V键，最后旋转菜单Modify>Mask Group>Mask to Image，结果如图。

　　建立一个新层，命名为inf，在导线之间建立一个圆，选择Fill面板，选择radial选项。选择Edit Gradient修改渐变选项，在弹出的面板里，分别设置RGB色为#b4e6fa和#283c78。

　　保持圆为选择状态，使用小刀工具将其分成两半，然后使用移动工具将两半分别移到按钮的两头，选择其中半个圆，使用菜单Modify>Merge Images，然后使用Marquee工具选择2pixels宽的的矩形。

　　单击v键，按住Alt键用右键头水平移动矩形，直到到达另一个半园。

　　全选inf层，选择菜单Modify>group，然后将其往下移动，按Ctrl＋T变形，移动到原来的轮廓高度的三分之一的位置处，使用Info面板设置它的宽为310，高为87。

　　使用滤镜Xtras>Blur>Gaussian Blur高斯模糊，设置为18，现在怎么样，看上去有点像Apple按钮了吧，我们再加上文字。

　　现在我们要让它有透明感。先建立边框发亮的效果。建立新层放在最上面，命名为amschera，选择Marqree工具，选择Options面板，设置边界Feather羽化，设置羽化度为66。拖曳出矩形覆盖在按钮上，选择Paint Bucket工具，设置颜色为白色，再选择Options面板设置边界反锯齿，tolerance为90，填充选择区。按Ctrl＋Shift＋I反选，按Del键删除多余的白色，然后Edit>Deselect取消选择。使用Magic工具，设置Options面板为边界反锯齿，tolerance容差为110，选择你刚刚建立的中心部分，按Del再取消选择。最后，给该层应用高斯模糊，设置为7。

　　接着我们加上墙纸，因为它可以使透明度增强。建立新层，命名为Background，建立矩形区，填充为：solid,颜色为:#999999，Amount:100%。

　　接着建立阴影，复制inf层，命名为shade，位置放在第一层下面。选择Object面板设置Blending Mode混和模式为multiply，透明度为75%，为了效果更加真实，将inf层的明亮度提高15%，选择菜单Xtras>Adjust Color>Brightness/Contrast。隐藏background、shade和文字层，然后选择Modify>Merge Layers。

　　最后，选择Xtras>Adjust Color>Brightness/Contrast对比度增加15%，然后设置透明度为80%。OK，Apple按钮完成！

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：hairan 责任编辑：hairan 　【字体：小大】

上一篇文章： Fireworks制作透明立体网格效果

下一篇文章：没有了