设计一个漂亮精致的网页按钮(翻译教程) 

2011-05-10 16:04 发布

原画创作交流 /[教程]
1651 2 0
本帖最后由 一瞬间的错觉 于 2011-5-10 16:05 编辑

教程简介:
使用软件:Adobe Photoshop 版本:CS5+
预计用时:15分钟
步骤1:
打开Photoshop,快捷键 Ctrl+N 打开新建窗口,按照下图内的参数设置好后,确定。
deb7f8198830171a1c7fa5ce160415af.jpg
步骤2:
选定背景层,快捷键 Shift+F5 打开填充对话个,下拉菜单中选择颜色,然后使用颜色#141d28,确定。
0fe1f3ce59544c28cd56f0f0fa15faa2.jpg
步骤3:
接下来,我们使用圆角矩形工具,设置圆角为2px,拉出一个适当大小的矩形。
81d4d1d1a3ac70d144a45969211c333c.jpg
e1bbce014cb18d6f17d944c8f8312232.jpg
然后在右侧的图层面板中,如下图位置,单击,然后设置颜色为#17202b
eef25b4ae46e85949db2bb06b69837c7.jpg
3dd986345b0e0a9a573cdc203f655b28.jpg
步骤4:
好的,接下来我们给这个图层设置图层样式。
b890d1d063e6aca7af214f1b0d2ae84d.jpg
00a7d05c285143da9a085d914eb91c49.jpg
8b261d22e03d4d76dae1e1301a3366c6.jpg
4adc2a62cd6c1ce68cf88343f5e62860.jpg
最后设置渐变描边,颜色分别为#090e13(深)#0d1b2a(浅),即由下至上,由深到浅。
这里我们发现,刚才设置的渐变叠加也是上浅下深的,为什么能,因为我们这里假设了光源是从上方射下来的,要塑造逼真的立体感,我们必须注意光源对物体表面所造成的影响。
我想学过素描的朋友一定都清楚三大面,五大调子吧,很简单的道理,这里我就不细说了。
2c22c54556bbbd0ae269ac612e1dd847.jpg
步骤6:
好了,图层样式的设置告一段落,但是,不管在任何时候,我们花一些时间来尝试各种样式的组合已达到满意的效果,都是很值得的。
现在我们再来看看这个按钮,会发现按钮表面与下面的投影之间,似乎少了些对比。接下来我们尝试给按钮加一个很酷的渐变边框来解决这个问题。
首先我们需要获得这个按钮的选区,然后新建一个图层。
9813efd5aac615f44e5ce4fe72a773d1.jpg
好的,接下来使用渐变工具,快捷键G,从中心向外拉出一个渐变。
d1cbe0d9c1ba98eaeffcbbb3200ba091.jpg
颜色为#050607到#ffffff,模式为对称渐变。
7e63708b83aae432c56152ec6c6b3f77.jpg
5a2b0f0cf8dcf151be8ba50d51f30e3d.jpg
然后使用选区工具(M),将选区向上移动1px(是用方向键↑),然后点击delete删除选区中的内容,再用 Ctrl+D 取消选区,这样就只保留了最下方的1px的一条细线。
a7222e75fd668f4ff7c0960eaed85435.jpg
接着,我们用快捷键 Ctrl+I 进行反相,然后将图层属性设置为叠加。
2da3961f0d7a8cae3a82fd49bebead66.jpg
0fb1ef7f1821f8ac4739c18af1be92f8.jpg
我们复制一个这个图层,这样可以提高亮度
b863d4f79268b06bc63ea2b49ccc6c80.jpg
541ae0e855fb6311ccba7c6c422bf780.jpg
这样,一个不错的效果就出来了。
步骤6:
接下来我们用同样的方法获取选区,并新建一个图层。
然后使用渐变工具,白到黑,模式为径向渐变,绘制如下效果。
a77faf39b29372badc8a3ffbd8592f43.jpg
然后我们用 Ctrl+D 取消选区,并设置图层模式为叠加,然后设置透明度为50%,获得如下效果。
c1f06ec5a2a97b1f4d420b1278570485.jpg
0c77fb49db67ca32e53d80c6ce3e99df.jpg
步骤7:
添加文字,完成。
262d48d22f1f5217a2ccc86dee78205a.jpg

好的,终于完成了,这个教程是根据国外一个教程改的,不算翻译,也不算原创吧。
还是希望能帮助到一些初学者,谢谢大家支持。
(提供源文件下载,供有需要的朋友)


本文由 站酷网 - 吾生小树 翻译
B Color Smilies

全部评论2

你可能喜欢

设计一个漂亮精致的网页按钮(翻译教程) 
联系
我们
快速回复 返回顶部 返回列表