百独托管7500 紫田网络超高转化播放器收cps[推荐]速盾CDN 免实名免备防屏蔽阿里云 爆款特卖9.9元封顶提升alexa、IP流量7Q5团队
【腾讯云】中小企福利专场【腾讯云】多款产品1折起高防 随时退换 好耶数据小飞国外网赚带你月入万元炎黄网络4H4G10M 99每月
香港带宽CN2/美国站群优惠中客数据中心 服务器租用联盟系统移动广告平台 中易企业专场腾讯云服务器2.5折九九数据 工信部正规资质
腾讯云新用户大礼包代金券高价收cpa注册量高价展示【腾讯云】2核2G/9.93起租服务器找45互联 随时退换阿里云 短信服务 验证秒达

制作加强版的Apple风格按钮(Cool)!!!图文教程 [复制链接]
查看:1242404 | 回复:30

头像被屏蔽

2

主题

6118

帖子

7017

积分

落伍者(三羊开泰)

Mr.Roc

Rank: 3Rank: 3

贡献
0
鲜花
0
注册时间
2002-7-5
发表于 2003-7-3 00:57:43 | |阅读模式 来自 中国浙江金华
1.新建一透明层, 画出一个黑色胶囊状的图形.方法是:先画一正圆切换移动工具(Move tool)按住Shift向右拖动鼠标, 将复制的圆形放在合适位置,接着画一长方形将两个原形连接起来并填充黑色.合并图层,这样你就得到了胶囊按钮的图形.


2.新建一层,改变图层混合模式为Screen. 选择合适的前景色和背景色,从按钮的顶部到底部拖一垂直渐变.在这里我用了0x2654A0 和 0xAFCBEE做前景色和背景色. 注意:我所选用的颜色都不是网页安全色(web-safe colors).如果你要把此按钮放在网页上的话,可能需要寻找更好的颜色 ,否则别人看不到不是太可惜了吗. Right?
按住Ctrl+G将渐变层置入按钮图层中.



3.Ctrl+点击黑色按钮图层, 将选择区域保存为通道. 选择你所创建的通道, 保持选择区域浮动, 收缩(contract)它 (具体收缩的数量要看你图像的大小而定) 直到如图所示.
对于其它样式的图形, 例如文字一类有锐角的图形, 你可能需要应用 Select > Modify > Smooth 来平滑图形,具体的数量根据具体情况而定.
反转选择区域 并填充黑色.


4.如果你愿意, 可以发挥到图像编辑窗口在快速蒙版(QuickMask)中进行下一步或继续在通道中编辑.我更愿意选择快速蒙版模式, 因为它能立刻让我看到效果.
保持选择区域浮动按 Q进入快速蒙版.在按钮的底步画一长方形并填充黑色,最终效果如图,其中红色部分代表未选中部分.


5.用高斯模糊(Gaussian Blur) 和亮度/对比度( Brightness / Contrast )进行调整, 如图. 按 Q退出快速蒙版模式再次将选择区域存入通道中.这一步是为按钮的顶部加入高光



6.复制 先前收缩的Alpha channel, 并进行Gaussian Blur. 这一步将给按钮的底部加入高光. 因为它没有硬边,所以我们不需进入快速蒙版模式.



7.回到层面版, 新建一层读取我们为按钮顶部高光建立的Alpha通道选择区域. 选择层>新建图层蒙版>显示选择区域( Layer > Add Layer Mask > Reveal Selection).
点击层图标确保我们是在图层上工作而不是图层蒙版. 选择渐变工具, 在渐变属性面版中选择白色前景色到透明的渐变. 从按钮顶部到中部做一线性渐变填充.调整图层不透明度到80%.



8.新建一层选择混合模式为Color Dodge. Fill it with neutral black. 读取我们为按钮底部高光建立的Alpha通道的选择区域. 再次选择层>新建图层蒙版>显示选择区域(Layer > Add Layer Mask > Reveal Selection).
选择渐变工具设置为白色前景色到透明渐变, 从按钮底部到中部拖动. 调整不透明度为35%.



9.你知道我非常喜欢闪烁的光线.这是苹果按钮所没有的,我想它的效果非常不错. 如果你没有看过我先前的chrome tutorial, 这里将告诉你如何做这些闪光:
新建一层选择一个巨大的soft brush. 点击停留少许时间, 接着, 不要移动画笔的中心点, 按下 [ 键选择一个稍小的soft brush再点击并停留一些时间. 接着再按一次 [键 选择一个较小的soft brush继续绘制.




10.现在为原始的黑色胶囊层添加阴影(dropshadow) 特效. 不要选择太暗的颜色; 因为我们是在做苹果按钮, 不是吗? 它是透明的, 所以光线会穿过按钮. 因此最好选择一个接近按钮的颜色做阴影.
现在给按钮加入一些黑色文字. 苹果在Mac OS X用的是 Lucida Sans 字体. Roman字体 应该也不错.
为文字层加入 阴影(dropshadow)特效. 让阴影稍稍远离文字一些距离,调整阴影的不透明度为80%.




11.Hey,那就是最终的效果. 如果你还想更进一步并在按钮后加入一些灰线,往下看. 适合的背景图案将使你的按钮显得更加透明.
新建一任务,白色背景.新建一层模式为 Multiply.画一水平的黑线 扩展置画部两边.用 移动工具,按下 Alt 和 Shift 将复制线条向下移动一些. 这样将新建一线条复制层,执行Ctrl-E将它与原先的线条层合并.重复此步, 复制,合并, 复制,合并, 直到你有了足够的线条如图.



12.调整不透明度至7%. 干的不错!




13.如果你真想给人们留下深刻印象, 你可以使按钮后的线条看起来有一些折射. 一个小技巧, 例如创建一个用于置换(displacement )的地图,如下图.
我制作这幅图的方法是选择先前收缩的 Alpha 通道, 读取选择区域, 应用 Circular Shapeburst(在KPT3的Gradient Designer工具中), 并进行高斯模糊(Gaussian Blur).
如果你没有KPT3, 那么你或许可以的到相似的结果,方法是:在全黑的通道中用读取先前收缩 Alpha 通道的选择区域,进行收缩调整,用白色填充选择区域, 读取先前收缩的 Alpha 通道选择区域, 应用大数值的 Gaussian Blur.




14.选择从弹出式菜单选择复制通道( Duplicate Channel), 在折叠菜单中选择 New. 单击 OK 保存新文件为PSD. 这个文件将用做置换的地图.
选中黑线层.Alt+点击图层左部的眼睛图标 这将隐藏除了黑线层之外的所有层.调整图层不透明度为100% 这将更易于我们观察. 现在拖动此层到右下角的新建层图标上 ,复制此层. 点击左部的眼睛图标隐藏按钮图层. 现在, 没有选中任何物体, 执行屡镜>变形>玻璃( Filter > Distort > Glass )从下部的菜单中选择读取材质( Load Texture). 在弹出的菜单中选择我们存储的PSD文件点击 OK. 选择较低的变形(Distortion 和平滑 (Smoothness)设置, OK.
最终的结果可能有一些锯齿.你可以用轻微的 高斯模糊(Gaussian Blur)和 亮度/对比度(Brightness / Contrast)进行调整.
现在读取你第一次建立的 Alpha 通道 反转选择区域. 按 Delete 选择混合模式为 Normal.
恢复下部黑线层可视, Ctrl-E对这两层进行合并 返回不透明度为7% . 恢复所有图层可视.



15.完成.
Oh, 顺便说一句, 如果你不喜欢蓝色,可以用色相/饱和度(Hue / Saturation)调整图层轻易的改变按钮的颜色.





这篇教程非常不错,希望能给大家一些启发!
签名被屏蔽

50

主题

1万

帖子

2万

积分

名誉斑竹

嘻悟QQ:5866971

Rank: 8Rank: 8

贡献
1134
鲜花
37
注册时间
2001-7-21
发表于 2003-7-3 01:00:55 | 来自 中国安徽宿州
是ps教程还是fw的?
头像被屏蔽

2

主题

6118

帖子

7017

积分

落伍者(三羊开泰)

Mr.Roc

Rank: 3Rank: 3

贡献
0
鲜花
0
注册时间
2002-7-5
 楼主| 发表于 2003-7-3 01:01:47 | 来自 中国浙江金华


Adobe Photoshop 的啦
签名被屏蔽

50

主题

1万

帖子

2万

积分

名誉斑竹

嘻悟QQ:5866971

Rank: 8Rank: 8

贡献
1134
鲜花
37
注册时间
2001-7-21
发表于 2003-7-3 01:03:27 | 来自 中国安徽宿州
Originally posted by xboycn at 2003-7-3 01:01:

Adobe Photoshop 的啦

精——晶
收藏了先
头像被屏蔽

2

主题

6118

帖子

7017

积分

落伍者(三羊开泰)

Mr.Roc

Rank: 3Rank: 3

贡献
0
鲜花
0
注册时间
2002-7-5
 楼主| 发表于 2003-7-3 01:04:50 | 来自 中国浙江金华
我很喜欢APPLE风格
签名被屏蔽
头像被屏蔽

0

主题

2336

帖子

2781

积分

保护或锁定(状态异常,请联系客服)

我事个狠NB得人

贡献
0
鲜花
0
注册时间
2002-5-15
发表于 2003-7-3 01:05:00 | 来自 中国浙江杭州
上精华?类似的文章看过N次了
签名被屏蔽

50

主题

1万

帖子

2万

积分

名誉斑竹

嘻悟QQ:5866971

Rank: 8Rank: 8

贡献
1134
鲜花
37
注册时间
2001-7-21
发表于 2003-7-3 01:08:45 | 来自 中国安徽宿州
Originally posted by 没钱的男孩 at 2003-7-3 01:05:
上精华?类似的文章看过N次了

这些文章不上精华。难道让那些水上精华吗?
现在这里不缺少欢乐和轻松的氛围。
缺少一种虚心好学的态度
大家现在都浮躁的想赚钱,赚钱没错,可是这里是学习与交流的地方

1

主题

7207

帖子

7565

积分

落伍者(三羊开泰)

翊派独门

Rank: 3Rank: 3

贡献
224
鲜花
0
注册时间
2002-4-29
发表于 2003-7-3 01:18:50 | 来自 美国
Originally posted by hotworm at 2003-7-2 13:08:

这些文章不上精华。难道让那些水上精华吗?
现在这里不缺少欢乐和轻松的氛围。
缺少一种虚心好学的态度
大家现在都浮躁的想赚钱,赚钱没错,可是这里是学习与交流的地方

严重同意你这个苍蝇

  净化 收藏ing
头像被屏蔽

0

主题

8662

帖子

9445

积分

落伍者(三羊开泰)

Rank: 3Rank: 3

贡献
125
鲜花
0
注册时间
2002-2-11
发表于 2003-7-3 01:21:25 | 来自 中国湖南岳阳
Originally posted by xboycn at 2003-7-3 12:57 AM:
1.新建一透明层, 画出一个黑色胶囊状的图形.方法是:先画一正圆切换移动工具(Move tool)按住Shift向右拖动鼠标, 将复制的圆形放在合适位置,接着画一长方形将两个原形连接起来并填充黑色.合并图层,这样你就得到了胶 ...



教程很早就看过了

不过以前的教程里没这个。。
http://218.28.49.10/supercow/website/Library/pmsj/ps/aqua15.jpg


这个不知道怎么做的。。。。还有用FW制作冰雪字。。。。
签名被屏蔽

19

主题

2万

帖子

2万

积分

落伍者(四季发财)

武眉博

Rank: 4

贡献
390
鲜花
5
注册时间
2001-12-16
发表于 2003-7-3 01:41:24 | 来自 中国
最后一副图片怎么做??????
论坛客服/商务合作/投诉举报:2171544 (QQ)
落伍者创建于2001/03/14,本站内容均为会员发表,并不代表落伍立场!
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论!
落伍官方微信:2030286 邮箱:(djfsys@gmail.com|tech@im286.com)
© 2001-2014

浙公网安备 33060302000191号

浙ICP备11034705号 BBS专项电子公告通信管[2010]226号

  落伍法律顾问: ITlaw-庄毅雄

手机版|找回帐号|不能发帖?|Archiver|落伍者

GMT+8, 2024-5-29 10:18 , Processed in 0.148663 second(s), 38 queries , Gzip On.

返回顶部