设为首页
收藏本站
3D模型素材下载
开启辅助访问
素材下载
展览专用单个3D模型下载
展位展览
在线看展
论坛
展示行业交流平台
关于
本版
文章
帖子
日志
相册
用户
QQ登录
微信登录
忘记密码?
注册
登录
展示网
»
论坛
›
中国展示培训学习/Demonstrate professional
›
展示设计教程,学习/Display design tutorial
›
Fireworks制作苹果按钮
返回列表
发布主题
Fireworks制作苹果按钮
[复制链接]
查看:
261
|
回复:
0
gggds
当前离线
积分
22692
IP卡
狗仔卡
gggds
发表于 2009-12-27 12:54:24
|
显示全部楼层
|
阅读模式
在这篇教程里,我们要制作一个按钮,像苹果站点那样。曾经在5D多媒体站有用Photoshop制作这种按钮的方法,这次我们使用Fireworks,下面的每一个步骤,有些可以合并和忽略,当然得看您的理解能力了。
K r" e; N' R& k/ r' t8 q& A
6 Q2 d* E1 F7 g6 d5 J+ t
教程PNG文件 首先建立新文件,大小为420*220,背景设置为透明然后画出按钮的轮廓,我们可以使用画笔,建立一个圆角矩形。打开标尺,选择菜单View>Rulers,然后拖曳出两根水平导线定好按钮的上边和下边。建立一个圆,将鼠标指针放在上面的导线上,按住Shift拖曳出圆形,终止于下面的导线上,选择白色填充。
. j; k+ l/ A( W5 t0 F" v7 _. Y
% e% j: J7 i3 K" R6 S- z G. S
为了建立另外一个圆,拷贝第一个圆,然后粘贴在工作区里,使用鼠标移动第二个圆到右边位置,移动时按住Shift键,这样可以平行移动,接着画出一个矩形放在两个圆中间,如图。选择圆和矩形,Modify>Combine>Union合并,我们就做好了按钮的轮廓
2 h: H3 v6 f6 `# _/ g$ u" m
9 j5 w! K# |+ F9 h; ^
现在使用复制层选项建立一个新层,命名为Reflex。
3 ~$ _4 r) T# E) _/ [. Z
0 d5 o4 C6 Z4 @; B" Z) p5 t" n
选择第一层使用相近于apple按钮的颜色填充,设置RGB色为#283c78,然后使用油漆桶工具填充轮廓,接着,我们要建立按钮上方的光影,选择Reflex层,选择变形工具Ctrl+T,如图所示变形,或者你可以使用info面板,设置宽为289,高为43。
$ F1 O0 }4 `4 h
( R# q1 \ c6 o6 d# o
仍然在Reflex层,建立一个白色矩形覆盖在原来的变形区域上,我们要给它建立遮照。点击D键,删除掉边框,然后选择Fill为Linear线性填充,选择Paint Bucket工具移动填充控制柄,改变渐变填充的方向,如图所示,然后同时选择渐变矩形和倒影区,使用Select Behind工具,或者按V键,最后旋转菜单Modify>Mask Group>Mask to Image,结果如图。
3 k5 F' m- Y) H9 N2 D
" `$ |4 ?% @* h) u% {
7 G8 u# d6 Z2 F. B. S( l! a" x
2 i4 D9 ~$ t; Q2 o- \5 [' Z+ c
建立一个新层,命名为inf,在导线之间建立一个圆,选择Fill面板,选择radial选项。选择Edit Gradient修改渐变选项,在弹出的面板里,分别设置RGB色为#b4e6fa和#283c78。
1 c Q9 [. |0 a" u2 R, n
( |" t" y+ ~: V2 o6 A7 N
保持圆为选择状态,使用小刀工具将其分成两半,然后使用移动工具将两半分别移到按钮的两头,选择其中半个圆,使用菜单Modify>Merge Images,然后使用Marquee工具选择2pixels宽的的矩形。
; o, j* `- U4 g, Z$ [
5 C$ ~1 B4 U& i; c
单击v键,按住Alt键用右键头水平移动矩形,直到到达另一个半园。
- d' t8 Z. [* e* N) v7 A) r
9 d$ P# c+ x1 x2 z
全选inf层,选择菜单Modify>group,然后将其往下移动,按Ctrl+T变形,移动到原来的轮廓高度的三分之一的位置处,使用Info面板设置它的宽为310,高为87。
8 z2 R- q" h5 ?* G
4 B! g# `. d7 w9 Y9 K9 z1 R
使用滤镜Xtras>Blur>Gaussian Blur高斯模糊,设置为18,现在怎么样,看上去有点像Apple按钮了吧,我们再加上文字。
$ B" g2 B! O" M
7 _- x# p2 o4 N& M: ~6 c
% K% Z7 r" ~0 Q% w- a1 m% G
9 T3 ]4 [! d5 ]& S& Z( d
现在我们要让它有透明感。先建立边框发亮的效果。建立新层放在最上面,命名为amschera,选择Marqree工具,选择Options面板,设置边界Feather羽化,设置羽化度为66。拖曳出矩形覆盖在按钮上,选择Paint Bucket工具,设置颜色为白色,再选择Options面板设置边界反锯齿,tolerance为90,填充选择区。按Ctrl+Shift+I反选,按Del键删除多余的白色,然后Edit>Deselect取消选择。使用Magic工具,设置Options面板为边界反锯齿,tolerance容差为110,选择你刚刚建立的中心部分,按Del再取消选择。最后,给该层应用高斯模糊,设置为7。
( n8 P- i9 N& X
9 z" g) b( s; J H2 f- t
接着我们加上墙纸,因为它可以使透明度增强。建立新层,命名为Background,建立矩形区,填充为:solid,颜色为:#999999,Amount:100%。
4 Z( Q- G) g3 f) C
9 J, l2 X0 O) }( Q7 N9 O1 z4 y
接着建立阴影,复制inf层,命名为shade,位置放在第一层下面。选择Object面板设置Blending Mode混和模式为multiply,透明度为75%,为了效果更加真实,将inf层的明亮度提高15%,选择菜单Xtras>Adjust Color>Brightness/Contrast。隐藏background、shade和文字层,然后选择Modify>Merge Layers。
! U. J2 ]) M! ?0 S1 @
) d: ]! n$ Z; q& d
& Y3 w9 _: L; W! {
0 a6 J. d% A, a4 J
最后,选择Xtras>Adjust Color>Brightness/Contrast对比度增加15%,然后设置透明度为80%。OK,Apple按钮完成!
8 v6 C! ~4 Q L5 K4 l
回复
使用道具
举报
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册中国展示论坛
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
精彩图文
快速回复
返回顶部
返回列表