念汐。老师第三课（图片的各种特效）——视频步骤(上)

乄浪漫经典ツ 发表于 2013-1-2 21:34:35

本帖最后由乄浪漫经典ツ于 2013-1-3 21:54 编辑 <br /><br />http://v.youku.com/v_show/id_XNDk2NjIzNDI0.html
<P>大家好，我是浪漫经典，这次视频的主要知识来源于我们亲爱的“念汐。”老师所讲的图片的各种特效。下面有高清视频下载地址，请大家前去下载高清版观看。</P>
<P>1.0简介</P>
<P><FONT size=4 seze="4">filter是滤镜属性（也就是说我所写的滤镜就是用filter表示）filtername是滤镜名称，包括alpha、blur、wave等滤镜。而parametes是表示各个滤镜属性的参数，既由这些属性参数来决定滤镜产生的效果。</FONT> </P>
<P><FONT color=red size=4>在使用滤镜时要注意，若使用多个滤镜，则每个滤镜之间用空格分隔开；一个滤镜中的若干个参数用逗号分隔，filter属性和其他样式属性并用时以分号隔开。</FONT></P>
<P align=left>常见滤镜属性以及含义</P>
<table border=1 cellSpacing=0 cellPadding=0 width=700 bordercolor=#666666>
<tr bgColor=#cccccc>
   <td>常见滤镜</td>
   <td>元素作用</td>
   <td>常见滤镜</td>
   <td>元素作用</td>
</tr>
<tr>
   <td>alpha</td>
   <td>设置透明</td>
   <td>x-ray</td>
   <td>设置对象只显示轮廓</td>
</tr>
<tr>
   <td>blur</td>
   <td>设置模糊效果</td>
   <td>gray</td>
   <td>设置灰度</td>
</tr>
<tr>
   <td>chroma</td>
   <td>设置指定颜色透明</td>
   <td>invert</td>
   <td>设置底片效果</td>
</tr>
<tr>
   <td>shadow</td>
   <td>设置阴影效果</td>
   <td>mask</td>
   <td>为对象设置遮罩</td>
</tr>
<tr>
   <td>glow</td>
   <td>为对象的外边界增加光效</td>
   <td>flipH</td>
   <td>水平翻转</td>
</tr>
<tr>
   <td>wave</td>
   <td>设置对象波纹效果</td>
   <td>flipV</td>
   <td>垂直翻转</td>
</tr>
</table>
<P><FONT color=#0066cc size=6>1.1通道（alpha）</FONT></P>
<P>和通道有关的参数的含义</P>
<table border=1 cellSpacing=0 cellPadding=0 width=700 bordercolor=#666666>
<tr bgColor=#cccccc>
   <td width=96><FONT color=#000000>参数</FONT></td>
   <td width=598><FONT color=#000000>作用</FONT></td>
</tr>
<tr>
   <td>enabled</td>
   <td>可选项，用来设置镜是否激活。其值是布尔型，默认值为ture，表示滤镜激活；false，表示滤镜被禁止</td>
</tr>
<tr>
   <td>opacity</td>
   <td>可选项，用来设置透明渐变的开始透明度。其值是整数型，取值范围为0~100，默认为0，表示完全透明；100表示完全不透明。</td>
</tr>
<tr>
   <td>finishOpacity</td>
   <td>可选项，用来设置渐变的结束透明度。其值是整数型，取值范围为0~100，默认为0，表示完全透明；100表示完全不透明</td>
</tr>
<tr>
   <td>startX</td>
   <td>可选项，用来设置透明渐变开始点的垂直坐标。其值为整数型，作为对象宽度的百分比进行处理，默认值为0</td>
</tr>
<tr>
   <td>startY</td>
   <td>可选项，用来设置透明渐变开始点的垂直坐标。其值为整数型，作为对象宽度的百分比进行处理，默认值为0</td>
</tr>
<tr>
   <td>finishX</td>
   <td>可选项，用来设置透明渐变结束点的水平坐标。其值为整数型，作为对象宽度的百分比进行处理，默认值为0</td>
</tr>
<tr>
   <td>finishY</td>
   <td>可选项，用来设置透明渐变结束点的垂直坐标。其值为整数型，作为对象宽度的百分比进行处理，默认值为0</td>
</tr>
<tr>
   <td>style</td>
   <td>可选项，用来设置渐变的类型，0是无变化,1是线行渐变,2是放射渐变,3是X型渐变</td>
</tr>
</table>
<P>老师例子： <IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" src="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg" width=361 height=543></P>
<HR align=left color=#3333cc width=740>
代码详解:<IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" src="<A href="http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg">http://img170.poco.cn/mypoco/myphoto/20120805/15/64081293201208051526389360299434942_029.jpg</A>">
<P>filter(滤镜属性选择符) alpha（透明度） opacity（渐变开始透明度，表格中有详细数值） finishOpacity（渐变结束透明度，表格中有详细数值） style（值渐变类型，表格中有详细数值）</P>
<P><FONT color=#0066cc size=6>1.2模糊(blur) 运动模糊（motionblur）</FONT></P>
<P>和模糊有关的参数的含义</P>
<table border=1 cellSpacing=0 cellPadding=0 width=700 bordercolor=#666666>
<tr>
   <td bgColor=#cccccc>参数</td>
   <td bgColor=#cccccc>作用</td>
</tr>
<tr>
   <td>makeshadow</td>
   <td>布尔值，设置是否有阴影效果</td>
</tr>
<tr>
   <td>pixelradius</td>
   <td>表示模糊作用深度</td>
</tr>
<tr>
   <td>shadowpacity</td>
   <td>表示阴影的透明度</td>
</tr>
</table>
<P>和运动模糊有关的参数的含义</P>
<table border=1 cellSpacing=0 cellPadding=0 width=700 bordercolor=#666666>
<tr>
   <td bgColor=#cccccc width=83>参数</td>
   <td bgColor=#cccccc width=611>作用</td>
</tr>
<tr>
   <td>add</td>
   <td>用来指定对象是否被设置成模糊效果。其值为布尔型，true表示设置为模糊效果；false表示不被设置成模糊效果</td>
</tr>
<tr>
   <td>direction</td>
   <td>用来设置对象的模糊方向。模糊效果是按顺时针方向进行的。其中，0度代表垂直向上，每45度一个单位，默认只是向左的270度。其中各个角度对应的方向有：0度，垂直向上；45度，垂直向右；90度，向右；135度，向下偏右；180度，垂直向下；225度，向下偏左；270度，向左；315度，向上偏左</td>
</tr>
<tr>
   <td>strength</td>
   <td>用来表示受模糊影响的宽度，其值为整数，以像素为单位，默认为5像素。</td>
</tr>
</table>
<P>老师给我们举的例子把模糊和运动模糊综合在一起了。下面我们直接来看一下吧！</P>
<P>老师例子：
<table style="FILTER: blur(add=5,direction=300,strength=50); WIDTH: 500px; HEIGHT: 376px" border=0 background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_027.jpg align=center>
<tr>
   <td></td>
</tr>
</table>
</P>
<HR align=left color=#3333cc width=740 >
<P>代码详解： <table style="FILTER: blur(add=5,direction=300,strength=50); WIDTH: 500px; HEIGHT: 376px" align=center background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_027.jpg border=0><BR>    <tr><BR>      <td></td><BR>    </tr><BR>  </table></P>
<P>FILTER: blur(翻译成汉语的意思为滤镜：模糊) add（用来指定对象是否被设置成模糊效果。一般为0或1。）direction(用来设置模糊的方向) </P>
<P><FONT color=#0066cc size=6>1.3透明色（chroma）</FONT></P>
<P>和透明色有关的参数的含义</P>
<table border=1 cellSpacing=0 cellPadding=0 width=700>
<tr>
   <td bgColor=#cccccc width=70>参数</td>
   <td bgColor=#cccccc width=624>作用</td>
</tr>
<tr>
   <td>enabled</td>
   <td>可选项，用来设置滤镜是否激活。其值是布尔型，默认为true，表示滤镜被激活；flase表示滤镜被禁止</td>
</tr>
<tr>
   <td>color</td>
   <td>可选项，用来设置此滤镜作用的颜色值。其值为字符串型，格式为#AARRGGBB，AA、RR、GG、BB为十六进制正整数。取值范围为00-FF，其中，RR指定的是红色值，BB值定的是蓝色值，GG指定的是绿色值，AA指定透明度，00表示完全透明，FF表示完全不透明。默认值为#FF0000FF</td>
</tr>
<tr>
   <td>chroma</td>
   <td>对于设置图片的透明色效果不是很好，因为有些图片是经过减色和压缩处理，所以这些图片有很少的位置可以设置其为透明</td>
</tr>
</table>
<P>老师例子：
<table style="FILTER: alpha(opacity=50)’; WIDTH: 510px; HEIGHT: 382px" border=0 background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg align=center>
<tr>
   <td></td>
</tr>
</table>
</P>
<HR align=left color=#3333cc width=740>
<P>代码详解：<table style="FILTER: alpha(opacity=50)’; WIDTH: 510px; HEIGHT: 382px" align=center background=http://img13.poco.cn/mypoco/myphoto/20120805/13/64081293201208051308513625649539284_040.jpg border=0><BR>    <tr><BR>      <td></td><BR>    </tr><BR>  </table>
<P>alpha(opacity=50)（这里老师用的是阿尔法值也就是透明度 =50可以理解为透明一半）这里没有用chroma，而是使用了alpha 。我给大家解释一下单独的alpha就是透明度的意思，chroma使用比较难需要调color的数值（表格上面我列出了，有兴趣的朋友可以找我要资料！）</P>
<P><FONT color=#0066cc size=6>1.4翻转变换（flip）</FONT></P>
<P>和翻转有关属性的参数含义</P>
<table border=1 cellSpacing=0 cellPadding=0 width=700 bordercolor=#666666>
<tr>
   <td bgColor=#cccccc>参数</td>
   <td bgColor=#cccccc>作用</td>
</tr>
<tr>
   <td>flipH</td>
   <td>水平翻转</td>
</tr>
<tr>
   <td>filpV</td>
   <td>垂直翻转</td>
</tr>
</table>
<P>老师例子：
<table style="FILTER: fliph; WIDTH: 500px; HEIGHT: 335px" border=0 background=http://img170.poco.cn/mypoco/myphoto/20120805/16/64081293201208051633413963731957328_030.jpg align=center>
<tr>
   <td></td>
</tr>
</table>
</P>
<HR align=left color=#3333cc width=740>
<P>代码详解：<table style="FILTER: fliph; WIDTH: 500px; HEIGHT: 335px" align=center background=http://img170.poco.cn/mypoco/myphoto/20120805/16/64081293201208051633413963731957328_030.jpg border=0><BR>    <tr><BR>      <td></td><BR>    </tr><BR> </table></P>
<P>FILTER: fliph(filter前面我们已经反复用过了是滤镜的意思 fliph就是水平翻转表格中有详细可以看看--这里例子比较简单) </P>
<P><FONT color=#0066cc size=6>1.5波浪（wave）</FONT></P>
<table border=1 cellSpacing=0 cellPadding=0 width=700 bordercolor=#666666>
<tr>
   <td bgColor=#cccccc>参数</td>
   <td bgColor=#cccccc>作用</td>
</tr>
<tr>
   <td>enabled</td>
   <td>可选项，用来设置滤镜是否被激活。其值是布尔型，默认为true，表示滤镜效果被激活；false表示滤镜被禁止</td>
</tr>
<tr>
   <td>add</td>
   <td>可选项，用来设置滤镜作用图像是否覆盖原始图像。其值是布尔型，true，表示滤镜作用图像覆盖原始图像；默认值为flase，表示只显示滤镜作用图像</td>
</tr>
<tr>
   <td>freq</td>
   <td>可选项，用来设置滤镜建立的波浪数目。其值为整数型，默认为3</td>
</tr>
<tr>
   <td>lightstrength</td>
   <td>可选项，用来设置或检测滤镜建立的波浪浪尖和波谷之间的距离。其值为整数型，取值范围在0~100之间，默认为100</td>
</tr>
<tr>
   <td>phase</td>
   <td>可选项，用来设置正弦波开始处的相对偏移。其值为整数型，取值范围在0~100之间，默认为0</td>
</tr>
<tr>
   <td>strength</td>
   <td>可选项，用来设置以对象为基准的在运转方向上的向外扩散距离。其值为整数型，取值范围为>=1,默认值为1，以像素为单位</td>
</tr>
</table>
<P>老师例子：<IMG style="FILTER: wave(add=true,freq=100,lightstrength=50 phase=20 strength=5)" src="http://img13.poco.cn/mypoco/myphoto/20120823/16/64081293201208231615163944576700106_025.jpg"> </P>
<HR align=left color=#3333cc width=740>
<P>代码详解：
<P><IMG style="FILTER: wave(add=true,freq=100,lightstrength=50 phase=20 strength=5)" src="<A href="http://img13.poco.cn/mypoco/myphoto/20120823/16/64081293201208231615163944576700106_025.jpg">http://img13.poco.cn/mypoco/myphoto/20120823/16/64081293201208231615163944576700106_025.jpg</A>"></P>（请看表格对照！）
<P></P>
<P>此次教程到此结束，老师讲解的5个例子具体的解析。还有7种css效果也很有实际的用途，我会在后面在录制一次教给大家。</P>
<p>高清文件下载请点击此处</p>
<P><FONT color=#00ff66 size=6>友情提示：大家最好复制代码，只修改其中的数值。</FONT></P>

冰菓发表于 2013-1-2 21:38:39

不错啊，最近正在搞这些，支持下{:eb502:}

程铄成成 发表于 2013-1-2 21:40:19

一个群的人，过去看一看好友，支持楼主

Оο.1秒ヽo 发表于 2013-1-2 21:44:38

没赶上学的同学可以到这里来学习{:2_77:}浪漫辛苦你了

┌→毒↘妃 发表于 2013-1-2 21:57:40

浪漫辛苦了{:73_600:}

漫花蝶舞 发表于 2013-1-2 22:19:02

{:eb302:}看不懂。这方面的东西好想学会，可真看不懂，元芳。你说怎么办

晓清发表于 2013-1-2 23:30:45

录制视频辛苦了

云晓月 发表于 2013-1-3 00:08:24

感谢亲爱的浪漫经典，感谢我们亲爱的念汐老师~~~

丿卡卡、 发表于 2013-1-3 08:37:28

{:2_260:}那天没有上课，太谢谢你了，等我下班回去学！

幽香一梦 发表于 2013-1-3 10:31:40

我一听上课就想睡觉

西西。 发表于 2013-1-3 12:17:15

谢谢你，那天我没上课

凝。发表于 2013-1-3 16:22:31

{:2_279:}浪漫辛苦勒哈，很热心的一位童鞋~~

风之语001 发表于 2013-1-3 16:40:25

社区又进了一步了

乄浪漫经典ツ 发表于 2013-1-3 18:52:36

念汐。发表于 2013-1-3 16:22 static/image/common/back.gif
浪漫辛苦勒哈，很热心的一位童鞋~~

还是老师教的好呀！{:eb347:}

页: [1]

三毛钱's Archiver

念汐。老师第三课（图片的各种特效）——视频步骤(上)