设计那些事儿

一、位图和矢量图

1、位图

位图也称为点阵图像，是由许多点组成的。其中每一个点即为一个像素，每一个像素都有自己的颜色、强度和位置。将位图尽量放大后，可以发现图像是由大量的小方块组成，不同的小方块显示不同的颜色和亮度。位图图像文件所占的空间较大，对系统硬件要求较高，且与分辨率有关。

2、矢量图

矢量图又称向量图，它是以数学的矢量方式来记录图像内容的，其中的图形组成元素被称为对象。这些对象都是独立的，具有不同的颜色和形状等属性，可自由、无限制地重新组合。无论将矢量图放大到多少倍，图像都具有同样平滑的边缘和清晰的视觉效果。

矢量图形在标志设计、插图设计及工程绘图上占有很大的优势。缺点是所绘制的图像一般色彩简单，不容易绘制出色彩丰富的图像，也不便于在各种软件之间进行转换使用。

二、像素和分辨率

Photoshop的图像是基于位图格式的，而位图图像的基本单位是像素，因此，在创建位图图像时，需要为其指定分辨率的大小。图像的像素与分辨率均能体现图像的清晰度。

1、像素

像素（Pixcl）是构成位图图像的最小单位，表示为图像中的一个小方块。一幅图可以看成是由多个小方块组成，每一个小方块就是一个像素。同样大小的一幅图像，像素越多，图像越清晰，效果越逼真。

2、分辨率

图像分辨率是指单位面积内图像所包含像素的数目，通常用像素/英寸（或者像素/厘米）表示。分辨率的高低直接影响图像的效果。分辨率越高，单位长度上像素越多，图像就越清晰；分辨率越低，单位长度上像素越少，图像就越模糊。

使用太低的分辨率会导致图像粗糙，在排版打印时图片会变得非常模糊。而使用较高的分辨率则会增加文件的大小，并降低图像的打印速度。

在电脑图像设计中，分辨率又可以分为图像分辨率、屏幕分辨率和打印分辨率。各种分辨率的含义如下：

图像分辨率：用于确定图像的像素数目，其单位有“像素/英寸”和“像素/厘米”。例如一幅图像的分辨率为300像素/英寸，表示该图像中每英寸包含300个像素。

屏幕分辨率：指显示器上每单位长度显示的像素或点的数目，单位为“点/英寸”。例如80点/英寸表示显示器上每英寸包含80个点。普通显示器的典型分辨率约为96点/英寸，苹果机显示器的典型分辨率约为72点/英寸。

打印分辨率：也称为输出分辨率，指绘图仪、激光印字机等输出设备在输出图像时每英寸所产生的油墨点数。如果使用与打印机输出分辨率成正比的图像分辨率，就能产生较好的输出效果。

三、sketch

1、安装

sketch目前只能安装在mac系统中，未来也不会出现在windows系统中。因为sketch是基于Mac上的Cocoa框架和Objective-c的, 这两个无法移植到Windows系统。

2、简介

在mac下，sketch是ps的5-8倍生产力；

sketch基本上是ps和ai的合体，ai的一些东西也能在sketch里完成；

sketch轻，ps太重；

sketch非常适合做扁平化设计，上手比较快；

sketch比较便宜，在app store上只卖99刀；

sketch快捷键少，可以安装插件来快速设计。

3、插件

推荐安装Sketch Measure插件，可以超级智能的帮你在作品上添加图形尺寸、距离、颜色和文本属性的附注，方便快捷，而且成品整洁漂亮。最重要的，该插件可以直接生成html文件给开发人员。

marketch是标注插件，https://www.zhihu.com/question/27495264

四、zeplin标注

zeplin作为一款标注与线上合作平台，把sketch及Photoshop，上传到平台。sketch，支持画板，便于同时预览，占用内存小。sketch，支持导出finto，便于制作交互动效原型。

1、安装软件+zeplin插件

MAC：安装sketch，zeplin插件

Windows：安装ps cc，zeplin插件。

2、申请账号（ios，android，前端），邀请项目人员。