有图小站

关注电脑网络,记录健康生活。有图小站,价值分享。

当前位置: 首页 > 电脑 > Flash渐变色在网页配色中的使用

Flash渐变色在网页配色中的使用

过渡色并非Flash的专长,很多朋友说过渡色使用photoshop更好实现。photo归photo,我们使用 Flash实现渐变色自然在Flash当中有需求,比方说我们整站使用Flash框架的时候,Flash设计的渐变色的线性扩展自然比photo更棒一些。

近几年的网站大多都注意美工了,如果没有说错的话,前几年各大门户的首页都一改简单配色,启用了豪华的配色体系。在写本文的时候我看了一下各个门户,新浪、网易还是比较漂亮的配色体系,而搜狐、QQ则采用了速度优先的html配色体系。这其中我所谓的“漂亮”就是我们常说的采用了“渐变色”或者“过渡色”,而后者的颜色主要是采用Html定义的颜色。

下图所示的就是所谓的渐变色效果,上图是新浪的、下图是网易的,这些渐变色估计应该是photo的作品,我们在Flash中也可以试试,看看能否简单的实现。这其中主要用到了“混色器”和“填充渐变工具”。

颜色渐变

颜色渐变

如果我们想做到上图的效果,也要注意边角。那么启用“矩形工具”,“圆角半径”一项设定为3或者4,画一矩形出来。使用调色板,将颜色设定为线性,左右色块取值分别如图所示。

颜色渐变

默认情况下,颜色是左右方向,如果我们想让他上下方向,需要启用“工具”箱中的“填充变形工具”。下图左侧为调整过程,右图是调整成上下渐变的效果。

颜色渐变    颜色渐变

在前面的“Flash变形应用”一文中已经使用了三种颜色渐变,那么在这里如果想使用多个颜色也是可以的,并且使用情况大家可以根据情况设定,比方说下图。第一幅图是上中下三种色,上下一色;图二是在前一副图的基础上使用“填充变形工具”,将颜色的渐变方向调斜;第三幅图本来还想做橙色,不过比照“新浪”那幅图中“娱乐”二字下的颜色做个演示,这个需要注意的是一个颜色堆叠:即背景为白色,然后将背景的色块复制出来,宽高比原色块都小4个像素,然后调整位置的时候比原色块向下向右平移分别2个像素,就能看到下图中的边沿有白色的线条,这个像素数值,大家可以试试,我自己感觉2个像素最合适。

颜色渐变   颜色渐变  颜色渐变 

下图是新浪图片中“音乐”“国家大剧院”文字下的配色模仿,我模仿的肯定不一样,但是大家可以自己去体验。这是在原过渡色的基础上调整一个上下对调的效果,左侧上白下灰,右侧上灰下白,当然,此处所说白并非真的白,而是相对而言,另外在这个颜色搭配中变线颜色的使用,如果想协调最好能和本渐变色色快最重的颜色一样,而不要采用过浅或者过深的颜色,那样就会很不一致。 

颜色渐变

前文所述的新浪配色体系和搜狐配色体系,并没有绝对的谁更漂亮的区别。两者的优劣在于,前者更好看,后者速度更快。对于我们的小站来说,这两个特色在我们抉择的时候也是比较矛盾的,因为“漂亮”的配色更能吸引人留下脚步,而速度快是用户膨胀到一定数目之后必须要考虑的问题,对于我们小站来说,页面的速度更致命。所以二者的选择看我们不同时期的把握。

不过所有这些都不是那么绝对,如果绝对的一厢情愿,不考虑用户的体验的一番乱改注定是失败的。比方说,你的速度再快,你的配色再漂亮,没有内容的页面依旧没人愿意看第二次。

本文是 有图小站 原创,原地址 http://www.utosee.com/post/071222.html 转载请保留。





上一篇:Flash变形的应用
下一篇:不在家笔记本如何上网



关于 Flash渐变色在网页配色中的使用 你可能还会阅读:

版权所有 有图小站 关注 电脑 网络 软件 健康 豫ICP备12023314号