分类 图形 下的文章

[译]illustrator混合模式详细介绍(Photoshop适用)

illustrator界面右面的透明度面板设置图形的透明度,同时能为图形设置混合模式,混合模式是用来决定图像及其下面的图形的重叠在一起的颜色如何混合,下面将分别介绍几种混合模式。

当新建一个illustrator文档的时候,默认的不透明度是是100%,滑动滑块或者直接输入数字即可改变不透明度。

illustrator不透明度

左边面板包含了混合模式,选中一个物体之后,这里的选择将会应用于选中的物体。这将决定当前图形和下面图形的颜色混合的方式。

不透明度面板

正常/Normal

这是默认值,图形之间颜色如同是固体颜色,100%的不透明度,图形所有的颜色都是按照原先的颜色显示。

请输入图片描述

蓝色的方块被花纹方块挡住,正常模式下,看不到被挡住的蓝色方块,但是下面的几种模式就不一样了。如果你用过Photoshop的图层模式就会知道,不过illustrator的混合模式是有差别的:它对图形起作用;而Photoshop是对图层起作用。

因此你可以把3个图形设置不同的混合模式,然后看它们互相之间的混合效果。

- 阅读剩余部分 -

GIF动画在浏览器中播放卡的问题

GIF动画原理简单说明

GIF图片可以内含多张图片,称之为帧,然后以一定的间隔播放,看起来就动画了。当间隔越小,看起来动画越流畅。

关于GIF动画常见疑问:

  • 为什么在Photoshop里面做GIF的时候播放流畅,导出GIF到浏览器看就慢了?甚至很卡?
  • 为什么我电脑看起来是正常的,别的人还是说GIF慢/卡了?

答案很简单

不同的浏览器GIF的最低的帧间隔时间支持的不同;并且一旦低于这个最低数值,将会被转换为某个特定的时间间隔。

测试页面:

点击查看:GIF不同帧间隔的表现

页面测试说明:从上到下的11个进度条一样的东西依次为间隔0、1毫秒、2毫秒、3毫秒……的GIF图片,共11张GIF图片。

比如最后那个进度条,就是一张理论上每帧间隔为10毫秒的GIF动画图片,换成FPS来说,就等于1秒/10毫秒=100FPS/s啦。

建议使用不同的浏览器查看,就能知道是什么意思。

比如我的是Windows7,Chrome35正式版,看到的效果是前面两个进度条速度异常:比第三个还慢,大约等于7毫秒的那个进度条。意思就是,我当前的系统下,当GIF帧间隔小于2毫秒,为0或者1的时候,浏览器会将其转换为7毫秒左右,所以设置帧间隔为1的反而比帧间隔为2的看起来FPS更低了。

下面是不同系统和浏览器的区别(2007年时候的数据)。

- 阅读剩余部分 -

使用Canvas生成照片直方图

最近刚接触HTML5的Canvas,然后想做点小东西。

什么是照片直方图

直方图是用来直观地表示图片的RGB三种颜色通道在不同亮度值上面,所占的量的多少。

大家都知道,电脑上的数码照片的每个像素由红绿蓝三种颜色合成,所以一个像素具有R-红色,G-绿色,B-蓝色三种颜色的信息;每种颜色取值是0-255————当为0的时候,表示当前像素没有这种颜色,当为最大值255的时候,表示这种颜色含量已经最高。

比如,纯红色的RGB就是(255,0,0),即红色最多,不含绿色和蓝色。黄色由红色和绿色合成,所以纯黄色RGB就是(255,255,0)。

Photoshop的直方图

然后,直方图的横坐标从左到右依次是0到255,纵坐标没有上限,当x为定值的时候,不同颜色的y值表示的是:亮度(姑且这么称呼)为x的这种颜色的量有y这么多。

直方图在摄影中经常用到,通过查看照片的直方图,可以知道曝光是否准确。如果需要的是正常的曝光,那么就应该使照片的各种颜色集中在x的中间值,大约100-150区间内,直方图呈现中间凸起的形状。

更多的信息,大家可以搜索查看照片直方图

说了这么多,终于进入正题了。

DEMO演示

点击查看:Canvas生成照片直方图

思路说明:

先载入一张图,然后获取图片的每个像素的值,然后对每个像素的RGB值分别统计,然后得到一个数组包含了3种颜色的量。这里设的是一个叫做tj的二维数组,红色是tj[0],绿色是tj[1],蓝色是tj[2];用tj0的值来表示亮度为210的红色像素的数量。

得到tj数组之后转换为直方图:例如tj1=3872转换为在x为145,y为3872的像素的地方用绿色画一个点,当然,y太大的话,直方图太高,所以下面会将y除以10来“压扁”直方图。

代码部分的说明直接写到注释中了。

- 阅读剩余部分 -

Canvas 和 SVG 的初步印象

起因:

它们都是比较新的、现代的东西,有些混淆了。

浏览器支持为IE9及以上,Chrome和FF这些高级的浏览器自动支持。

Canvas 和 SVG 的比较
CanvasSVG
基于像素的,就像是真的画布 基于元素的,矢量图形,类似HTML元素,可以通过浏览器的开发者工具查看到各个元素
对于浏览器就是单个元素,类似于图片元素 多个元素组成的DOM
通过纯Javascript脚本呈现 通过XML文件来描述,并且可以通过CSS来控制样式
事件控制只能通过Canvas这个唯一的元素来监听,如果想要控制具体某个画面元素部分,则只能手动通过JS来读取鼠标的坐标,进而加上进行互动操作 事件可以直接绑定到画面的元素上面,因为那些线、多边形、路径都是可以直接选中的元素

DEMO演示

首先是Canvas的演示,效果是读取一张照片,然后读取照片的像素,将其转换为灰度并输出:

- 阅读剩余部分 -