像素和矢量

最近我想系统的学习一下Photoshop(PS), 作为一个写代码的人, PS就是属于处理像素的应用软件, 可以实时渲染, 整合了一些图形算法, 可以说是一个大的工具集合. 虽然只是学习如何使用这个工具集合, 但是对于没有接触过计算机图形知识的同学, 我想首先弄清楚像素和矢量的概念对于从根本上理解一些PS的特性有比较大的帮助.

像素

作为一个图片来说, 计算机处理的最小单位就是像素(pixel). 显卡和屏幕之间会通过读取像素数据来输出最终的颜色信息, 内存里的图片信息也是以像素形式来存储的, 通常会以RGB格式来表示. 这里先要介绍另外一个概念: 位(bit)

静态图片基本上又叫做位图. 对于一张8位的图, 一个像素能显示的颜色种类就是2的8次方256色. 为什么是次方呢? 因为计算机内存存储的是0和1的序列, 每一个数字叫做一位(bit). 因为每一个bit有2种情况, 8个位置就会8次方种情况. 几位(bit)就是指这张图上每一个像素可以显示的颜色深度. 在内存里面, 存储的就是这些像素的RGB数值 (比如(255, 0, 0)表示红色), 这些颜色RGB信息会按照顺序排列在内存中. 举个例子, RGB值每一位最大是255, 那理论上会有256*256*256种颜色, 那差不多是2的24次方个颜色. 如果有alpha通道的话(不透明度),即RGBA, 会增加一个不渲染即alpha为0时的完全透明, 其余255个级别来控制不透明度, 总体颜色数目没有改变(比如alpha值是64, 每一个颜色通道的值要乘以64/255). 这里注意不是除以256, 总共只有255个级别的不透明度, 要去掉0的完全透明.

我们会常常遇到定义一个图片的分辨率, 比如1024*768, 就是指这张图的长方形:一行包含1024个像素, 一列包含768个像素. 还有显示器的指标DPI(Dots per inch)或者PPI(pixel per inch), 就是指这台显示器每英寸能够绘制的像素点数目. 高DPI或者PPI的显示器可以满足高分辨率图片的渲染需求, 支持的最大分辨率在屏幕尺寸一定的时候当然会更大. 当然像素点只是一个逻辑点, 物理点是这个屏幕的硬件属性. 一个物理点当然可以显示多个像素点.

矢量和对比

矢量就是向量, 是一个数学概念, 即有大小又有方向. 那矢量图就是除了颜色意外， 带有点、线等几何特性的图形。和渲染好的像素图对比来说，矢量图是带有量化值的，比如方向， 弧度， 大小，在变形的时候更能按照几何规律来变形。

失真和锯齿马赛克

这是一个经常会遇到的问题. 如果你对于一个已经渲染好的图片进行缩小和放大, 那么就会导致图片失真或者锯齿马赛克. 这是为什么呢?

回到刚才的图片的基本概念. 一张渲染好呈现于屏幕上的图片, 它的基本单位都是像素. 现在如果你要进行缩放操作, 那么势必会存在一个目标图片像素值(RGB值)怎么确定的问题. 这里会有很多算法来确定, 比如几种插值算法. 你可以想象, 在一个新的像素尺寸下, 比如从800*600到1024*768或者到640*480, 这些新位置只能从原来的像素值通过计算获取新的值. 这个过程势必会影响原图的保真度.

而如果你对一个矢量图进行缩放操作， 那么软件会根据它带有的几何特性来进行变形， 会更加符合需要的变形需求， 删格化以后的像素图也就比较符合真实情况。.

总结

总的来说，渲染后的图片都是以像素为基本单位的，矢量图是由几何特性绘制的图片，带有量化数据. PS主要是的操作对像是像素, 也支持绘制矢量图，而Illustrator主要操作对像是矢量. 它们在各自的领域都有很大的应用, 比如你要修个图, 主要是改变现有的像素, 必然选择PS方便; 而你要做一个logo或者icon, 基于规则的几何图形, 尺寸要经常变化, 你就需要一个矢量绘图软件(illustrator, coreldraw).

后记

以后我还会逐步整理一些跟颜色相关的概念, 以及他们实际应用中的效果.