立体感的水晶按钮

立体感的水晶按钮

ID:22861132

大小:124.50 KB

页数:9页

时间:2018-11-01

立体感的水晶按钮_第1页
立体感的水晶按钮_第2页
立体感的水晶按钮_第3页
立体感的水晶按钮_第4页
立体感的水晶按钮_第5页
资源描述:

《立体感的水晶按钮》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、水晶按钮:  下面我们放大来看这个水晶按钮由哪些结构组成。  按钮构成图:  按钮横截面光线图:  1、任何光滑的东西都会产生镜面反射,水晶按钮当然不会例外。  2、要让按钮浮出画布,阴影是少不了的。有了正确的阴影,人们感觉才会更逼真。  3、这个水晶按钮是紫色的,但不是平板、呆板的平紫色,而是一个从紫红到粉红的渐变色,为什么会这样?因为它是透明的,光线从上到下投射下来的时候,由于下部的角度问题,产生的反射越来越多(这部分可参考物理学知识),所以下面的颜色会较浅。(注:我们假设光源在正上方)  4、按钮是扁圆的,到了边缘,这个曲度发生较大的变化(大家可以想象

2、一下这里的横截面),因此边缘会变暗,于是会有这一点点的阴影。  5、原理如4,但这里的阴影更大,为什么?大家想想一个玻璃杯在单光源照射下的情景:如果不是有反射的话,整个杯子就会在背景中消失,对不对?因为它是透明的,光线在上面不留痕迹(除了反光),因此这里为什么暗,是因为它是透明的,把后面的阴影也透射出来了。这里要说明一点,如果要把现实中的水晶按钮的光线反射等等完全搬过来是行不通的,不是不能做到,而是对于这样的一个小按钮成本太大了。我们只需要稍稍模拟得更接近就行了,因此又有一个题外的原则,对效果,要适当取舍。思考:如何把这些部分画出来,并且组合起来?  部分1

3、:高光让我们产生这个物体很光滑的感觉。但要实现很容易,我们画一个这种形状的白色块,然后以一定的透明度叠加在下方的按钮实体上面就行,这个问题解决了,我们需要的是一个新图层,一个以白色填充的圆角长矩形。——具体步骤先不急,我们先要知道我们要些什么。  部分5:对于下面的大圆角矩形,上部以及边缘会发暗。如何才能让这个大圆角矩形的上部以及边缘有点暗呢?这里列举两种做法。一种是用羽化的选区把按钮矩形的边缘变暗。变暗有什么好办法?色相/饱和度工具,此法用在这里有点小题大作,此外这种方法是一次性的,不能再调整的,也就是说当你确认修改后,下次要改回来可就不那么容易了。那么我

4、们选择第二种做法,图层样式。记得图层样式里面有一个“内阴影”吗?对,内阴影~内阴影除了能干内阴影这件事之外,也能让边缘变暗——我们只要让阴影在边缘停留就好了嘛。看图:  看看第三个就是,参数怎么调整?这里先不说,大家可以根据上面的那个图自己调整一下方向、距离与大小,试试看。  这里还有一个值得注意的是,为什么用内阴影更好,是因为大家发现没有,虽然说第三个内阴影效果是边缘变暗,但这个暗又是上下不同的,上面的阴影宽些,下面的阴影窄些,这正是第5部分需要的效果。内阴影是有方向与距离控制的,因此我们可以把那个阴影调节得上宽下窄。这就是我们选择内阴影样式的理由。有了这

5、种特殊的阴影,按钮会产生一定的立体感了。  部分4:这里还有一个较窄的、细细的边缘变暗。因为我们刚刚已经采用了内阴影来制作按钮的立体感,难道再增加一个内阴影效果吗?PS里面不允许说一个图层加几个同样类型的样式。那我们要换一下口味了。这个较黑较细的边缘,应该对整个按钮都是均匀的。整个按钮具有变暗的模糊边缘——用色相/饱和度工具当然可行,但不能事后调整——还是用样式吧,什么样式呢,内发光。内发光不仅能发“亮”光,也能发“暗”光。看图:  第三个色快产生了边缘变暗的效果,如何做到的呢?看看具体的参数设置:  对,混合模式发生了变化,原本系统默认的是“滤色”,现在我

6、们把它改成“正常”,当然用“正片叠底”也是可以,但用正常我们可调整的就更多。我们选取一种比原来的桔色暗些的颜色作为“暗”光,因此最后出来了这种效果。  部分2,3:部分2就是简单的阴影样式了,没什么好说的;部分3就是一个渐变,样式里也有渐变覆盖,轻松做到。这里都略过。好,至此,是我们应该组合这些效果的时候了。看图:  大家注意到我原本的色块是绿色的没有?——因为有了渐变叠加,原来用什么颜色都无所谓。我这里一开始就是乱选了一种颜色填充圆角矩形,反正到后面都能调整,方便得很~  反思一下刚刚得步骤与结构,究竟是那些步骤让我们产生了按钮得立体感?  -投影样式能让

7、物体浮出画布;  -内阴影样式能让物体产生玻璃般的透明立体感;  -内发光能让玻璃的边缘更加真实(我们感觉到这个按钮的横界面下边缘必定是圆滑的);  -渐变叠加样式能让按钮的反光更为真实,也让整个按钮的色彩层次感更丰富,不死板;  思考了这些以后,如果要做别的按钮可以吗?我要怎么产生立体感呢?金属的和玻璃又有什么相同和不同之处呢?还有其他的样式,比如斜面与浮雕、光泽能做些什么吗?这些在我接下来的后面说金属立体感的时候就会说到,但在此之前,大家都可以先自己思考一下。  好了,我们先把这个按钮完善一下吧。基本的图层样式已经做好,我们以后再要做这种按钮可就方便了。

8、看图:  看,各种形状都行,只要我们复制、粘贴图层样

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。