请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 平面设计区 › Fireworks 专栏 › [原创]花错教你做精美做精美导航效果。。。

发新帖

查看: 29871|回复: 63

[效果制作] [原创]花错教你做精美做精美导航效果。。。 [复制链接]

hcxajh　楼主

帖子: 58
体力: 55
威望: 3

发表于 2006-11-6 13:35:54 |显示全部楼层

这个阶段偶要教大家画一些常用的按钮，以及一些网页常用的边框。

边框：(图2.1)下边我将教大家如何制作以上这个按钮。

图1.1教程：

先新建一个500*400大小的画布，画一个400*40的长方形，调成渐变，如图2.1.1
（图2.1.1）

于是乎出来了一个我们做出来了个这个样子的图形如图2.1.2
（图2.1.2）

然后我们用部分固定选定工具选取长方形的上边两点如图2.1.3（图2.1.3）

按住shift键，按两下向右键。如图2.1.4（图2.1.4）

画一个绿色的长方形，我们通过部分选定工具得到一个如图2.1.5（图2.1.5）

通过复制粘贴我们得到如图2.1.6（图2.1.6）

通过我们得到如图2.1.7（图2.1.7）

图形发光，白色属性如图2.1.8然后再发光颜色为 #7B869A 得到如图2.1.9（图2.1.9）

复制粘贴图形，去掉描边，向右移动两个像素，如图2.1.10（图2.1.10）

画一个长方形黄色渐变。放置图形下层，如图2.1.11（图2.1.11）

画一个长方形如图2.1.12(图2.1.12)

设置如图2.1.13（图2.1.13）

把宽度设为“1”旋转“20度” 复制粘贴。然后向右移动一个像素。渐变变成白色.然后复制粘贴。

如图2.1.14（图2.1.14）

画一个白色的1*1像素的点向右移动1个像素变成黑色。重复过程。如图2.1.15（图2.1.15）

OK，到这里我们这个图形基本上就完毕咯。

图2.1.6楼主没帖好哦。帮你帖了并发所有图片传至经典服务器。——凌志留

[ 本帖最后由 hcxajh 于 2006-11-6 15:02 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

已有 1 人评分	威望	收起理由
凌志	+ 1	简单易用切常用图2.1.6楼主没帖好， ...

总评分: 威望 + 1 查看全部评分

西部数码顶级域名注册商39元抢注！

使用道具举报

帖子: 343
体力: 1240
威望: 0
居住地: 广东省深圳市

发表于 2006-11-6 13:58:18 |显示全部楼层

多谢~
学到小技巧了（图2.1.10）

每次自以为进步了，看看别人，发现我他妈竟然是在退步！

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

小小菜鸟

帖子: 3095
体力: 10742
威望: 0

发表于 2006-11-6 14:13:16 |显示全部楼层

原来事情是这样成的..

经典论坛泡出来的...^^.

使用道具举报

杯莫停

超级版主 

帖子: 7399
体力: 12392
威望: 74
居住地: 辽宁省鞍山市

发表于 2006-11-6 14:14:56 |显示全部楼层

感觉标题叫“做精美图标”不太合适吧？是否应该改成“做精美导航效果”更好一些呢？

找素材到这里：Zhaosucai.com

使用道具举报

帖子: 15
体力: 25
威望: 0

发表于 2006-11-6 14:33:11 |显示全部楼层

蛮好的,就应该从简单学起.. 收下先

使用道具举报

hcxajh　楼主

帖子: 58
体力: 55
威望: 3

发表于 2006-11-6 14:53:42 |显示全部楼层

原帖由凌志于 2006-11-6 14:14 发表
感觉标题叫“做精美图标”不太合适吧？是否应该改成“做精美导航效果”更好一些呢？

呵呵改了。

使用道具举报

yjjx　

帖子: 330
体力: 759
威望: 0
居住地: 重庆市江北区

发表于 2006-11-7 11:33:43 |显示全部楼层

收下了!

使用道具举报

小小菜鸟

帖子: 3095
体力: 10742
威望: 0

发表于 2006-11-7 12:21:20 |显示全部楼层

多发发你做图的过程，我看好你哟~

经典论坛泡出来的...^^.

使用道具举报

帖子: 35
体力: 92
威望: 0

发表于 2006-11-8 01:28:22 |显示全部楼层

能不能详细点

做不料了能不能详细点

使用道具举报

hcxajh　楼主

帖子: 58
体力: 55
威望: 3

发表于 2006-11-8 10:46:32 |显示全部楼层

原帖由 uqkun 于 2006-11-8 01:28 发表

做不料了能不能详细点

选中两个图形。然后修改。打空。试试

使用道具举报

帖子: 158
体力: 647
威望: 0

发表于 2006-11-8 22:27:58 |显示全部楼层

我也做了一个，不错几乎一样，还有那背景那两个图怎么做

使用道具举报

hcxajh　楼主

帖子: 58
体力: 55
威望: 3

发表于 2006-11-9 10:10:28 |显示全部楼层

渐变就OK了。

使用道具举报

fage　

帖子: 70
体力: 168
威望: 0

发表于 2006-11-9 11:28:27 |显示全部楼层

02图没白边，怎么做的呢？？就是在外框线和里面渐变之间的白

[ 本帖最后由 fage 于 2006-11-10 09:08 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

使用道具举报

hcxajh　楼主

帖子: 58
体力: 55
威望: 3

发表于 2006-11-9 11:34:11 |显示全部楼层

什么白边？？？

还是不明白。。

使用道具举报

mailangel123　

面条爱兔子

帖子: 1014
体力: 2451
威望: 3
居住地: 湖南省长沙市

发表于 2006-12-6 16:42:27 |显示全部楼层

我的怎么打孔不成功啊.
我是不懂fw

网页制作教程

使用道具举报

zhaoliancheng　

我爱红茶

银牌会员 

帖子: 665
体力: 2025
威望: 0
居住地: 重庆市九龙坡区

发表于 2006-12-6 17:33:26 |显示全部楼层

谢谢哈！不过我做出来的始终不能完全和你做的一样，主要是那个渐变色的问题．

使用道具举报

zhaoliancheng　

我爱红茶

银牌会员 

帖子: 665
体力: 2025
威望: 0
居住地: 重庆市九龙坡区

发表于 2006-12-6 17:35:48 |显示全部楼层

还有那个边缘效果，就是图２.１.９和２.１.１０，做不来

使用道具举报

帖子: 12
体力: 32
威望: 0

发表于 2006-12-6 17:42:30 |显示全部楼层

今晚再看看，呵呵~~

使用道具举报

随风飞翔

帖子: 109
体力: 261
威望: 2

发表于 2006-12-6 17:54:08 |显示全部楼层

原帖由 uqkun 于 2006-11-8 01:28 发表

做不料了能不能详细点

简单制作了一下，撇开效果不谈，只是这个过程，希望对你有帮助

[ 本帖最后由 szedw 于 2006-12-6 17:57 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

不断学习才是快乐的

使用道具举报

小小菜鸟

帖子: 3095
体力: 10742
威望: 0

发表于 2006-12-6 17:57:42 |显示全部楼层

楼上的好有耐心啊,支持.`

经典论坛泡出来的...^^.

使用道具举报

帖子: 29
体力: 114
威望: 0
居住地: 广东省广州市

发表于 2006-12-6 18:54:14 |显示全部楼层

作业~~~~~~~~`

使用道具举报

帖子: 29
体力: 114
威望: 0
居住地: 广东省广州市

发表于 2006-12-6 18:55:51 |显示全部楼层

使用道具举报

帖子: 71
体力: 151
威望: 0

发表于 2006-12-6 21:46:26 |显示全部楼层

学习中........

使用道具举报

帖子: 47
体力: 119
威望: 0
居住地: 吉林省长春市

发表于 2006-12-7 12:39:48 |显示全部楼层

原帖由 fage 于 2006-11-9 11:28 发表
02图没白边，怎么做的呢？？就是在外框线和里面渐变之间的白

两次发光
设置透明度为100和扩散为o

使用道具举报

帖子: 403
体力: 1083
威望: 0

发表于 2006-12-7 13:12:56 |显示全部楼层

发光的宽度最小只能为2啊.你说的白边效果做不成.

使用道具举报

帖子: 403
体力: 1083
威望: 0

发表于 2006-12-7 13:15:21 |显示全部楼层

呵呵,我用错了,我用了内侧发光了.

使用道具举报

帖子: 388
体力: 1429
威望: 0

发表于 2006-12-7 13:24:54 |显示全部楼层

非常的不错
学习了!

www.fenmei.com 爬在DIV+CSS的边缘

使用道具举报

zwws　

帖子: 103
体力: 409
威望: 0
居住地: 福建省福州市

发表于 2006-12-7 22:18:05 |显示全部楼层

作业,其他效果不会...= =!

使用道具举报

Shellway

帖子: 103
体力: 317
威望: 0
居住地: 福建省厦门市

发表于 2006-12-10 12:28:36 |显示全部楼层

原帖由 mailangel123 于 2006-12-6 16:42 发表
我的怎么打孔不成功啊.
我是不懂fw

用节点选择工具啊，呵呵

乘风破浪

使用道具举报

帖子: 54
体力: 33
威望: 0

发表于 2006-12-10 12:33:26 |显示全部楼层

多谢楼主.又学到东西了

一把刀，给你只能切西瓜，但给一个武林高手手中，这是一把可以将江湖闹得沸沸扬扬的神器...

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 11:11 , Processed in 0.148748 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部