推荐阅读
电商设计师总结的8条产品设计趋势分析
这5年时间，我呆过已经倒闭了的小电商平台，做过腾讯电商的外包，也真正近距离参与过京东大大小小的各种活动设计，亲眼目睹了天猫双11成交额从2011年的52亿一直增长到2015年的912亿，直到现在，我把我的部分关于电商的思考和观察总结写成文章近百篇分享给大家。写在前面2011年那会儿，我还是杭州某互联网公司的一名ui设计师，那年双11我亲眼目睹了我们整层办公楼500多人都在买买买的壮观场面，不过那时候的我对电商没有任何概念，甚至对网购都不熟悉;2012年年初，我阴差阳错地接触到了电商设计，爱上电商设计并一直坚持到现在，已近5年时间。这5年时间，我呆过已经倒闭了的小电商平台，做过腾讯电商的外包，也真正近距离参与过京东大大小小的各种活动设计，亲眼目睹了天猫双11成交额从2011年的52亿一直增长到2015年的912亿，直到现在我把我的部分关于电商的思考和观察总结写成文章近百篇分享给大家。这几年，电商的发展速度是惊人的，我觉得有必要对自己的观察和体会做一个小结，于是就有了这次的话题：“入行电商设计近5年，写文近百篇后，我给大家总结了这8条趋势分析和建议”。这篇文章也许对正在电商设计这条路上或即将迈入这条路的人有所启发，接下来我们直接进入正题：少数人会驱动多数人的行为和想法这个少数人是指什么人呢?指某一个行业领域里走在最前面的人，再或者是某一个圈子里最活跃的那一批人，毫不夸张地说，这些人的一举一动都会牵涉到其他人的发展方向，这种现象在炒股行业也许最为明显，知名企业或知名投资人的稍微一点动作就会对相关公司或行业的股价产生不小的影响。那么在设计圈里其实也是一样的道理，比如现在在设计圈很火的C4D，三维建模和渲染，虽然这个在工业设计领域是非常常见的一项技能，但是不知是被谁引入到了电商设计行业，然后大家开始纷纷效仿三维的效果。还有合成效果早几年前比较常见于创意互动广告界，一开始一些简单的合成效果也只是常见于一些比较追求炫技和非主流效果的店铺(因为那时候的效果都做的比较粗糙所以看起来有些俗气)，其实对于天猫或者京东这样的平台页面设计里是很少会用到这些效果的，因为这种效果对于动辄就是好几十个不同会场的平台活动来说，很难进行品牌视觉延伸，再一个就是合成玩的好需要很强的绘画功底和想象力，处理不好容易变得非常俗气。
photoshop利用图层叠加打造立体蓝色抽丝文字
效果图1、创建650*450px图层，拖拉出暗蓝色渐变图层。如下图3、把文字图层复制一次，选择底层，双击图层样式，对斜面和浮雕、等高线和描边进行调整。参数设置如下图
Photoshop将图片处理为作剪纸艺术
1. 启动Photoshop CS，打开一幅图片准备制作剪纸效果，如图1所示。 注意：并不是任何一张图片都适合做剪纸效果，因为剪纸是中国的传统艺术，以接近中国文化的花鸟、人物、建筑类图片为主，这样做出来的效果才更生动。 2. 使用“套索”工具沿图片中的花朵和叶子创建选区，并进行复制粘贴，然后执行“图像→调整→去色”命令使图像变成黑白的，接下来再执行“图像→调整→反相”命令对图像进行反相，效果如图2所示。 3. 确认新粘贴的图层处于激活状态，设置前景色为白色，背景色为红色。执行“滤镜→素描→影印”命令，打开“影印”对话框，在其中设置“细节”为9，“暗度”为50，应用该滤镜后剪纸效果已经出来了，此时选择“画笔”工具用红色对一些“断点”进行修补，完成剪纸创作，效果如图3所示。 图1 准备制作剪纸效果的图片 图2 对图像进行去色、反相处理 图3 剪纸最后效果
最新发布
(2-3):矢量格式图像
假设我们写了一首新的乐曲，要把它交给唱片公司，可以通过两种方式：这两种方式的最大区别在于记录的形式。前者是记述性的。包含乐曲的音频信息。其中的所有信息都是固定的，如演奏速度、乐器音色等。如果你想把笛子换成排箫，那就要重新录制一遍。后者是描述性的，不包含音频信息，只包含对乐曲音律的描述。如果要改变演奏速度或乐器音色，只要在乐谱中修改一下就好。点阵图像就属于记述性，以点为记录的对象。而矢量图像属于描述性，以线段和计算公式作为记录的对象。比如下图中的直线，如果以点阵方式来记录，就是从左上角第一个点开始，到右下角最后一个点结束，记录所有像素的颜色。 记录这幅图像(200×50像素)就需要1万个信息。即使这条直线本身并没有那么多像素，但点阵方式也是完整的把整幅图的像素记录下来。 因此不管是一条直线还是两条三条，对于点阵图像来说都是一样的。都是去逐个记录图像中的所有像素。如果用矢量来记录这条直线，只需要三个信息：直线起点坐标、直线终点坐标、直线的颜色。 在还原的时候就利用这三个信息去生成图像，就如同乐队把乐谱演奏出来一样。由于矢量的这种特点，使得它非常便于修改。 比如要把下图的直线旋转一下，点阵方式就需要重新记录所有改动过的像素信息。而矢量图只需要改动起点和终点的坐标就好了。 当放大图像的时候，点阵图像会产生模糊和锯齿。就如同录音带播放时候加速产生的变调。对图像质量是有损失的。 而矢量图像是根据放大后的坐标重新生成图像，不会产生模糊和锯齿。就如同乐队根据新乐谱重新演奏。对图像质量是没有损失的。下面大家亲自动手来感受一下矢量图像和点阵图像在缩小放大之后的区别。点此下载002 s01.psd范例文件在Photoshop中打开会看到同样的两个人物剪影图像，左边的是矢量格式，右边的是点阵格式。此时看起来没有区别。如下左图。原图片大小是400×300，现在使用【图像 图像大小】将宽度改为100像素，高度自动计算为75像素。得到如同下中图这样的效果。 这时两者看起来还是差不多的。再使用【图像 图像大小】改为和原先一样的400×300像素。会看到如同下右图的效果。 现在区别就明显了。右边的点阵格式在经过上面两步的操作后变得模糊。而左边的矢量格式却仍然保持着和原先相同的清晰度。没有一点损失。大家也可以先把图像缩得更小些，这样放大以后效果对比将更明显。下图是先缩小到20×15后再放大的效果，右边的图已经是“一塌糊图”了。为什么在第一次缩小之后没有看出区别呢？这是因为缩小点阵图像是不会产生模糊的，在丢弃原先的一些像素后，剩下的像素是足够描述图像的，并没有产生像素空缺。而放大后才产生了像素空缺。为什么矢量图像“饱经风霜”却依旧“面不改色”呢？这就是因为前面说过的矢量图像的特点：通过记忆线段的坐标来记录图像。 图像放大缩小的同时坐标也放大缩小，而各个坐标之间的相对位置并没有改变。然后根据改动后的坐标重新生成图像。因此无论放大多少都不会失真。
(2-2):点阵格式图像
我们所看到的图像，究竟是如何构成的呢？这就需要涉及到图像类型的概念。 电脑中的图像类型分为两大类，一类称为点阵图，一类称为矢量图。点阵图顾名思义就是由点构成的，如同用马赛克去拼贴图案一样，每个马赛克就是一个点，若干个点以矩阵排列成图案。 数码相机拍摄的照片、扫描仪扫描的稿件以及绝大多数的图片都属于点阵图，如下左图就是一个典型的点阵图。把这幅图片调入Photoshop，使用菜单【图像 图像大小】就可以看到如下 右图的信息。注意窗口上部像素大小的宽度和高度，分别是400像素和225像素。 像素是什么？像素就是组成点阵图像中的那些点，是点阵图最小的单位。如同拼成图案的那许多马赛克一样。 在图像窗口底端状态栏的缩放倍数右方区域，按住ALT键单击就会出现像素数量信息，如下 左图。PhotoshopCS及更早版本的图像状态栏位于Photoshop窗口的底部，如下右图。如果状态栏未出现可通过菜单【窗口 状态栏】打开。PhotoshopCS2版本则没有此项菜单。如果我们放大图像〖CTRL +〗，就会看到点也同时被放大了，这时就会出现所谓的马赛克现象(也称锯齿现象)。如下左图。我们可以看到有许多不同颜色的小正方形，那就是被放大的像素。每个像素只能有一个颜色。 宽400像素，高225像素，意味这幅图像由横方向400个点、竖方向225个点组成，400x225=90000，图像的总像素数量就是9万。 数码相机有一个很重要的指标就是1300万像素、3000万像素这样的称呼，就是指拍摄出来图像中的像素总量。像素是不是越多越好呢？从大部分情况来说是的，图像的像素越多，记录的信息也越详细，图像的局部就越细致，如下右图。 上图是一幅像素总量144万(1600x900)的图像，在放大到和前一张图差不多的大小时的效果，可以很明显感觉出图像局部要显得细腻得多。放大缩小图像的快捷键是〖CTRL +〗〖CTRL -〗，这种放大会沿着图像的中心点放大。还有一种定点放大方式是按住空格和CTRL键，用鼠标单击图像的一个部分，这样会以单击的地方作为中心放大。缩小是按住空格和ALT键单击。 如果缩放程度不够可重复以上操作。图像窗口的标题栏以及状态栏都会显示缩放倍数。 严格来说应该是先按CTRL再按空格。但是在中文Windows下这正好是默认的中文输入法切换方式。因此建议先按空格再按CTRL。如果图像超过了图像窗口的大小，将在右方和下方出现滚动条，此时拉动滚动条即可移动观看区域(不是移动图像)。 也可按住空格键在图像中按下鼠标拖动。当鼠标开始拖动以后，空格键可以松开。以上的几个快捷键是最常用的。要把它们记住，这将让你的操作变得迅速。0201我们的显示器也是点阵式的，前一课中看过的电视机屏幕，就是由许多的点构成的。包括液晶屏和等离子屏也是如此。 传统的显像管显示器又称为CRT(学名阴极射线管)，是显示设备中最早也最普及的种类。 显示器的点阵数是可变的，我们可以从Windows控制调板中的显示项目来查看或改动目前显示器的屏幕分辨率，如下图所示，目前为1024x768像素，也就是说现在显示器横方向能够显示1024个 像素点，竖方向768个像素点。如同一张6寸的照片不能完整放入一个5寸的像框一样，如果一幅图像超过了显示器横或竖方向的像素数，那么这幅图像就不能在屏幕上完整显示(以100%原尺寸显示前提下)。 因此屏幕分辨率越高，能够完整显示的内容就越多。比如一个300x300像素的方块，在不同的屏幕分辨率下，所显示的大小也不一样，如下3图。如同马路上的一个井盖，站在5层楼看得很清楚，站在30层楼就小了许多，站在70层楼就更小了。井盖的实际大小没有变化，是视野放大导致井盖看起来缩小。因此这不能说方块的大小改变了，300像素还是300像素没有变，是因为屏幕像素总量的增加使得它看起来变小。 计算一下就会知道，屏幕横分辨率800的时候，300像素占据着约一半的宽度，在1024时候占据约三分之一，在1600时候只占据约五分之一了。
(2-1):图像尺寸
在课程#01中我们知道了显示器上的图像是由许多点构成的，这些点称为像素，意思就是“构成图像的元素”。但是要明白一点：像素作为图像的一种尺寸，只存在于电脑中，如同RGB色彩模式一样只存在于电脑中。像素是一种虚拟的单位，现实生活中是没有像素这个单位的。在现实中我们看到一个人，你能说他有多少像素高吗？不能，通常我们会说他有1.82米高，或者182厘米等。所用的都是传统长度单位。所谓传统长度单位就是指毫米、厘米、分米、米、公里、光年这样的单位。这时就有一个问题出现，比如那个1.82米高度的人，在电脑中是多少像素呢？ 这个问题先放下，我们针对这个问题来一个逆向思维，即电脑中的图像，那些多少多少像素的图像，用打印机打印出来是多大呢？如下左图。这幅图片的尺寸是500×300像素，它在打印出来以后，在打印纸上的大小是多少厘米？或者是毫米或者是分米，总之那“传统长度”是多少呢？ 使用菜单【图像 图像大小】，可看到如下右图的信息。位于上面的像素大小我们都已经熟悉了，指的就是图像在电脑中的大小。其下的文档大小，实际上就是打印大小，指的就是这幅图像打印出来的尺寸。 可以看到打印大小为17.64×10.58厘米。它可以被打印在一张A4(有关A4的解释在后面)大小的纸上。那是否就是说500像素等同于17.64厘米呢？那么1000像素打印大小是否就是17.64×2＝35.28厘米呢？ 这种观点是错误的，电脑中的像素和传统长度不能直接换算，因为一个是虚拟的一个是现实的，他们需要一个桥梁才能够互相转换，这个桥梁就是位于文档大小宽度和高度下方的分辨率。注意这里的分辨率是打印分辨率，和我们在课程#01里面所讲的“显示器分辨率”是不同的。我们来举一个例子：有一段200米长的街道，现在要在上面等距离地种树，如果每隔40米种一棵，总共可以种6棵，如下左图。如果每隔50米种一棵，那么总共只能够种5棵了，如下 右图。从上面的例子可以看出，同样长度的街道，由于树木间距的不同，导致了树木总数的不同。 如果树木总数就相当于像素总量，街道长度就相当于打印尺寸。那么树木间距就相当于打印分辨率了。现在看它的取值为72，后面的单位是像素/英寸，表示“像素每英寸”。英寸是传统长度，那么这个“像素每英寸”换句话就是“每英寸多少像素”。指在1英寸的长度中打印多少个像素。现在取值是72，那么在纸张上1英寸的距离就分布72个像素，2英寸就是144像素，由此类推。为什么不是“像素每厘米”呢？这主要是英制单位使用范围较为广泛，我们平时所说的电视机或者显示器的寸数也就是英寸。在出版印刷行业也是如此，所以为了方便计算和转换，通常使用“像素每英寸”作为打印分辨率的标准。简称为dpi，Dot(点)Per(每)Inch(英寸)。在Photoshop中，也可以把分辨率单位换成符合我们习惯的“像素每厘米”，如下左图。想一想，如果我们把打印大小和打印分辨率调整为下右图所示那样，像素大小是多少？
(1-7)HSB色彩模式
前面我们已经学习过了两大色彩模式RGB和CMYK。色彩模式有很多种，但这两种是最重要和最基础的。其余的色彩模式，实际上在显示的时候都需要转换为RGB，在打印或印刷(又称为输出)的时候都需要转为CMYK。虽然如此，但这两种色彩模式都比较抽象，不符合我们对色彩的习惯性描述。比如下面这幅图像，如果问：图中人物衣服颜色的RGB或CMYK值是多少？你一定会觉得不得其所。如果现在要你在RGB模式下组合出一个浅绿色，也很难准确地做到。其实Photoshop和Illustrator以及GoLive的取色滑块都提供了色彩预见功能，即动态颜色滑块(可在【编辑 首选项】的常规选项中打开或关闭)。如下中图 ，可以预见：将R滑块往右拉就会得到粉红色；把B滑块向左拉会得到草绿色；把G滑块向右拉就可以得到浅绿色。但这种方式还是不够直观，最重要的是不方便修改，比如目前的蓝色，想要得到更浅更亮的蓝色，需要拉动三个滑杆才能得到，如下右图。习惯上我们都会说图片上的衣服是黄色的。或者说是亮黄色的。比如晴空，我们首先想到蓝色，然后是浅蓝色。比如湖水，首先想到绿色，进一步想到碧绿色。我们大脑对色彩的直觉感知，首先是色相，即红色橙黄色绿色青色蓝色紫中的一个，然后是它的深浅度。HSB色彩就是籍由这种模式而来的，它把颜色分为色相、饱和度、明度三个因素。注意它将我们人脑的“深浅”概念扩展为饱和度(S)和明度(B)。所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽。饱和度低色彩就接近灰色。明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。如果我们需要一个浅绿色，那么先将H拉到绿色，再调整S和B到合适的位置。一般浅色的饱和度较低，亮度较高。如果需要一个深蓝色，就将H拉到蓝色，再调整S和B到合适的位置。一般深色的饱和度高而亮度低。如下左图和中图。这种方式选取的颜色修改方便，比如要将深蓝色加亮，只需要移动B就可以了，既方便又直观。如果要选择灰度，只需要将S放在0%，然后拉动B滑杆就可以如同灰度模式那样选择了。如下右图。注意，HSB方式得到的灰度，与灰度滑块K的数值是不同的。我们在Photoshop中选择灰度时候，应以灰度滑块为准。在HSB模式中，S和B的取值都是百分比，唯有H的取值单位是度，这个度是什么意思？是角度，表示色相位于色相环上的位置，将我们前面学过的色相环加上角度标志就明白了。如下左图。从0度的红色开始，逆时针方向增加角度，60度是黄色，180度是青色等等。360度又回到红色。可以自己调节H滑块对照一下。我们再看一下Photoshop的拾色器，拾色器的H方式其实就是HSB取色方式。色谱就是色相，而大框就包含了饱和度和明度(横方向是饱和度，竖方向是明度)。如下右图。可以看出，在选取颜色的时候，HSB模式较为直观和方便。在Illustrator和GoLive中也是如此。
(1-6):颜色的选取
Photoshop中提供了三种选择任意色彩的方式：第一是使用颜色调板〖F6〗，拉动滑块确定颜色。Photoshop中颜色分为前景色和背景色，如下图。位于左上的色块代表前景色，位于其右下方的色块代表背景色。通过点击可以在两者间切换选取颜色。注意有时候会出现一个标志，这是在警告该颜色不在CMYK色域，单击右边的色块就会切换到离目前颜色最接近的CMYK可打印色。滑块分为灰度、RGB、HSB、CMYK、Lab、Web颜色，可点击调板右上角的从弹出菜单中切换，其中一些模式我们将在以后介绍。如下各图所示。-----第二是使用滑块下方的色谱图，用鼠标直接在色谱图中点击即可选中颜色。也可以按住鼠标在色谱中拖动，松手确定颜色。选中颜色的同时，上方的滑块会跟着变换读数。色谱最右方是一个纯白和纯黑。色谱分为RGB、CMYK、灰度，顺序如下3图。可以明显感觉到RGB色谱比CMYK明亮。--色谱中还有一种“当前颜色”，是指从已选颜色到纯白的过渡，效果类似灰度。一般用于制作印刷图像时选取淡印色。第三种方法是使用Photoshop的拾色器，方法是点击工具栏上的前景色或背景色色块(点击颜色调板上的也可)，如下左图。就会出现拾色器。其中标志的作用和小色块的用法与前面颜色调板中相同。在!标志下方还有一个小立方体标志，以及拾色器最底部的“只有Web颜色”和#后面的一组数字和字母，这将在以后介绍。如下右图。-这个拾色器功能强大，使用方法也很多，图示的是最通常的用法。左边那个大方框是鼠标色彩选取区，使用鼠标像在前面色谱中那样选色即可。也可以由右边直接填入数字。在大框右边那一竖条的是色谱，注意右边HSB方式的H目前被选择，那么现在这个色谱就是色相色谱。即：红色橙色黄色绿色青色蓝色紫色。除了H，S、B、R、G、B、L、a、b都可以作为色谱的标准，但那些方式较为难懂，目前不必去深究。只要知道H色相方式就够了。比如现在要选择一个深绿色，就先把色相移动到绿色那一段，然后在大框中移动鼠标到较深的区域即可完成。纯白在大框最左上角，注意那个选色的小圈的心才是选中的颜色，因此要选择最左上角的那个点，小圈要移出大框四分之三才可以，如下左图。注意RGB的数值，均为255了说明就已经是纯白了。色谱右上方有一个从中间一分为二的方框，里面是这次选择前后颜色的对比。比如下半部显示着刚才选中的青色。点击这个颜色就可以回到刚才的选择。同样，要在这里选取灰度必须在大框最左边的那一条竖线中，小圈只能看到一半，同时RGB值应相等。如下右图。-
(1-5):色彩模式的选择
那么，我们到底该如何选择适当的色彩模式呢？我们先来明确一下RGB与CMYK这两大色彩模式的区别：1：RGB色彩模式是发光的，存在于屏幕等显示设备中。不存在于印刷品中。CMYK色彩模式是反光的，需要外界辅助光源才能被感知，它是印刷品唯一的色彩模式。2：色彩数量上RGB色域的颜色数比CMYK多出许多。但两者各有部分色彩是互相独立(即不可转换)的。3：RGB通道灰度图中偏白表示发光程度高；CMYK通道灰度图中偏白表示油墨含量低。反而反之。特别注意第2条：两者各有部分色彩是互相独立(即不可转换)的。如下图中绿色大圆表示RGB色域，蓝色小圆表示CMYK色域。这一大一小表示RGB的色域范围(即色彩数量)要大于CMYK。而在转换色彩模式后，只有位于混合区的颜色彩可以被保留，位于RGB特有区及CMYK特有区的颜色将丢失。这意味着如果你用RGB模式去制作印刷用的图像，那么你所用的某些色彩也许是无法被打印出来的。一般来说，RGB中一些较为明亮的色彩无法被打印，如艳蓝色、亮绿色等。如果不作修改地直接印刷，印出来的颜色可能和原先有很大差异。同样以下是一幅在RGB模式下制作的图像，在转换为CMYK模式后的比较，如下2图：可以看出，原先较为鲜亮的一些颜色都变得黯淡了，这就是因为CMYK的色域要小于RGB，因此在转换后有些颜色丢失了。注意，此时再把CMYK模式转为RGB模式，丢失掉的颜色也找不回来了。这好比原先是一个装满水的2升杯子，后来倒入了一个1.5升的杯子，流失了0.5升。即使以后再倒回2升的杯子，这杯子中装的实际只有1.5升。因此，不要频繁地转换色彩模式。转换一次就相当于倒了一次杯子，可能有些水就流失了。虽然理论上RGB与CMYK的互转都会损失一些颜色，不过从CMYK转RGB时损失的颜色较少，在视觉上有时很难看出区别。而从RGB转CMYK颜色将损失较多，视觉大部分都可以明显分辨出来。因此习惯上也有CMYK转RGB时颜色无损的说法，其实这种说法的真正所指是：宁可CMYK转RGB，不可RGB转CMYK。明白了以上道理，我们对如何选择图像的色彩模式就有了一个概念了：如果图像只在电脑上显示，就用RGB模式，这样可以得到较广的色域。如果图像需要打印或者印刷，就必须使用CMYK模式，才可确保印刷品颜色与设计时一致。
(1-4):CMYK色彩模式
前面我们都在学习有关RGB的内容，RGB色彩模式是最基础的色彩模式，所以RGB色彩模式是一个重要的模式。只要在电脑屏幕上显示的图像，就一定是以RGB模式。因为显示器的物理结构就是遵循RGB的。我们还接触了灰度色彩模式，它有自身的一些特性，使得它也被应用在了对通道的描述上。以后还会学到有关它其他的应用。除此之外还有一种CMYK色彩模式也很重要。CMYK也称作印刷色彩模式，顾名思义就是用来印刷的。它和RGB相比有一个很大的不同：RGB模式是一种发光的色彩模式，你在一间黑暗的房间内仍然可以看见屏幕上的内容；CMYK是一种依靠反光的色彩模式，我们是怎样阅读报纸的内容呢？是由阳光或灯光照射到报纸上，再反射到我们的眼中，才看到内容。它需要由外界光源，如果你在黑暗房间内是无法阅读报纸的。 前面说过，只要在屏幕上显示的图像，就是RGB模式表现的。现在加上一句：只要是在印刷品上看到的图像，就是CMYK模式表现的。比如期刊、杂志、报纸、宣传画等，都是印刷出来的，那么就是CMYK模式的了。和RGB类似，CMY是3种印刷油墨名称的首字母：青色Cyan、洋红色Magenta、黄色Yellow。而K取的是black最后一个字母，之所以不取首字母，是为了避免与蓝色(Blue)混淆。从理论上来说，只需要CMY三种油墨就足够了，它们三个加在一起就应该得到黑色。但是由于目前制造工艺还不能造出高纯度的油墨，CMY相加的结果实际是一种暗红色。因此还需要加入一种专门的黑墨来调和。点击颜色调板的按钮，在菜单中选择“CMYK滑块”，会看到CMYK是以百分比来选择的，相当于油墨的浓度。如下图：和RGB模式一样，CMYK模式也有通道，而且是4个，C、M、Y、K各一个。在Photoshop中调入如下左图。注意上面的图像输入Photoshop后是RGB模式的。图像的色彩模式和其它一些信息可以从图像窗口的标题区看到。标题区显示着图像名称、缩放比例、色彩模式和颜色通道数。图中显示着RGB/8，就表示这是一个RGB模式的图像，颜色通道为8位。如下右图。在RGB模式下只能看到RGB通道。我们需要手动转换色彩模式到CMYK后才可以看到CMYK通道。转换图像色彩模式可以从菜单【图像 模式 CMYK颜色】，注意图像色彩可能会发生一些变化，变化的原理在本课后面部分将提到。此时察看通道，就会看到CMYK各通道的灰度图像，如下4图。CMYK通道的灰度图和RGB类似，是一种含量多少的表示。RGB灰度表示色光亮度，CMYK灰度表示油墨浓度。但两者对灰度图中的明暗有着不同的定义：RGB通道灰度图中较白表示亮度较高，较黑表示亮度较低。纯白表示亮度最高，纯黑表示亮度为零。
(1-3):图像通道
在Photoshop中有一个很重要概念叫图像通道，在RGB色彩模式下就是指那单独的红色、绿色、蓝色部分。也就是说，一幅完整的图像，是由红色绿色蓝色三个通道组成的。回顾一下前面的三张通道图(顺序为RGB)。他们共同作用产生了完整的图像，如下最右图。 大家也许会问：如果图像中根本没使用蓝色，只用了红色和绿色，是不是就意味着没了蓝色通道？我们已经知道黄色和蓝色是互补色，那么一幅全部是纯黄色的图像中，是不是就不包含蓝色通道？这是错误的概念，一幅完整的图像，红色绿色蓝色三个通道缺一不可。即使图像中看起来没有蓝色，只能说蓝色光的亮度均为0，但不能说没有蓝色通道存在。“存在、亮度为零”和“不存在”是两个不同的概念。现在大家在Photoshop中调入上面那幅完整的图片。再调出通道调板。一般来说通道调板和图层调板是拼接在一起的，可以通过调出图层调板〖F7〗后切换到通道。也可以使用菜单【窗口 通道】。如果调板中没有显示出缩览图，可以右键点击调板中蓝色通道下方的空白处，在弹出的菜单中选择“小”或“中”或“大”。我们看到的通道调板类似下图。此时注意红色绿色蓝色三个通道的缩览图都是以灰度显示的。如果我们点击通道名字，就会发现图像也同时变为了灰度图像。快捷键分别是：〖CTRL ~〗〖CTRL 1〗〖CTRL 2〗〖CTRL 3〗。点击通道图片左边的眼睛图标，可以显示或关闭那个通道。可以动手试试看不同通道组合的效果。注意不要混淆：最顶部的RGB不是一个通道，而是代表三个通道的总合效果。如果关闭了红色绿色蓝色中任何一个，最顶部的RGB也会被关闭。点击了RGB后，所有通道都将处在显示状态。我们可以看到：如果关闭了红色通道，那么图像就偏青色。如下左图。如果关闭了绿色通道，那么图像就偏洋红色。如下中图。如果关闭了蓝色通道，那么图像就偏黄色。如下右图。这个现象再次印证了反转色模型：红色对青色、绿色对洋红色、蓝色对黄色。现在点击察看单个通道，发现每个通道都显示为一幅灰度图像(不能说是黑白图像)。如下3图，从左至右分别是灰度的红色、绿色、蓝色通道图像。
(1-2):灰度色彩模式
在前面讲述RGB色彩，以及在颜色调板选取颜色的时候，有没有想到过RGB值相等的情况下是什么颜色？那是一个灰度色。如下左图。现在我们将颜色调板切换到灰度方式(切换方式可参考操作速查0101)，可看到灰度色谱，如下右图。所谓灰度色，就是指纯白、纯黑以及两者中的一系列从黑到白的过渡色。我们平常说所的黑白照片、黑白电视，实际上都应该称为灰度照片、灰度电视才确切。灰度色中不包含任何色相，即不存在红色、黄色这样的颜色。灰度隶属于RGB色域(色域指色彩范围)。我们已经知道，在RGB模式中三原色光各有256个级别。由于灰度的形成是RGB数值相等。而RGB数值相等的排列组合是256个，那么灰度的数量就是256级。其中除了纯白和纯黑以外，还有254种中间过渡色。纯黑和纯白也属于反转色。灰度的通常表示方法是百分比，范围从0％到100％。Photoshop中只能输入整数，在Illustrator和GoLive允许输入小数百分比。注意这个百分比是以纯黑为基准的百分比。与RGB正好相反，百分比越高颜色越偏黑，百分比越低颜色越偏白。灰度最高相当于最高的黑，就是纯黑。灰度最低相当于最低的黑，也就是“没有黑”，那就是纯白。如下2图。既然灰度和RGB一样，是有数值的，那么这个数值和百分比是怎么换算的？比如18％的灰度，是256级灰度中的哪一级呢？是否是256x18％呢？没错，灰度的数值和百分比的换算就是相乘后的近似值，由于灰度与RGB是“黑白颠倒”的，所以18%的灰度等于82%的RGB亮度。256×82%＝209.92，近似算作210，我们可以先在灰度滑块选择18%，再切换到RGB滑块看数值。如下2图：注意如果没有关闭色彩管理功能，在颜色设置中的灰度标准就有可能不是GrayGamma2.2，那么上面的等式就不成立了。比如灰度的标准如果是GrayGamma1.8，18%的灰度换算成RGB就是218,218,218。印刷品与网页的区别在于色彩模式不同，印刷品必须是CMYK色彩模式，而网页主要使用RGB色彩模式。Photoshop的色彩管理功能主要是针对印刷品的，而我们目前针对网页，因此可以关闭这个功能。不用担心，即使不了解色彩管理的具体内容和灰度Gamma的标准，也不影响后面的学习和操作。在教程以后的内容中，默认都是在关闭色彩管理的前提下进行的。如果需要开启的话，会特别提到。虽然灰度共有256级，但是由于Photoshop的灰度滑块只能输入整数百分比，因此实际上从灰度滑块中只能选择出101种(0%也算一种)灰度。大家可以在灰度滑块中输入递增的数值然后切换到RGB滑块察看，可以看到：0%的灰度RGB数值是255,255,255；1%灰度的RGB数值是253,253,253；2%灰度RGB值为250,250,250。也就是说，252,252,252这样的灰度是无法用Photoshop的灰度滑块选中的。相比之下Illustrator的灰度允许输入两位小数，使得选色的精确性大大提高了 。
(1-1):RGB色彩模式
我们用放大镜就近观电脑显示器或电视机的屏幕，会看到数量极多的分为红色绿色蓝色三种颜色的小点。如下左图，下右图是左图的局部放大。屏幕上的所有颜色，也就是我们看到的所有图像内容，都是由它们调和而成的。现在我们在Photoshop中打开如下左图，打开的方法是通过菜单【文件 打开】或使用快捷键〖CTRL O〗(有关快捷键的说明将在以后的课程中出现，现在不明白也没有关系)。也可以直接从Windows目录中拖动图像到Photoshop。如果Photoshop窗口被遮盖或最小化，也可拖动到其位于任务栏的按钮上，待Photoshop窗口弹出后再拖动到窗口中。按〖F8〗或从菜单【窗口 信息】调出信息调板。如下右图。然后试着在图像中移动鼠标，会看到其中的数值在不断的变化。注意移动到蓝色区域的时候，会看到B的数值高一些；移动到红色区域的时候则R的数值高一些。电脑屏幕上的所有颜色，都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。那么，在下面所看到的最左端的图片实际上是由右方的三个部分组成的。因此这红色绿色蓝色又称为三原色光，用英文表示就是R(red)、G(green)、B(blue)。可以把RGB想象为中国菜里面的糖、盐、味精，任何一道菜都是用这三种调料混合的 。在制作不同的菜时，三者的比例也不相同，甚至可能是迥异的。因此不同的图像中，RGB各个的成分也不尽相同，可能有的图中R(红色)成分多一些，有的B(蓝色)成分多一些。做菜的时候，菜谱上会提示类似“糖3克、盐1克”等，来表示调料的多少，在电脑中，RGB的所谓“多少”就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2...直到255。注意虽然数字最高是255，但0也是数值之一，因此共256级。如同2000年到2010年共是11年一样。按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256＝16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。这24位色还有一种较为怪异的称呼是8位通道色，为什么这样称呼呢？这里的所谓通道，实际上就是指三种色光各自的亮度范围，我们知道其范围是256，256是2的8次方，就称为8位通道色。为什么老是用2的次方来表示呢？因为计算机是2进制的，因此在表达色彩数量以及其他一些数量的时候，都使用2的次方。这里的色彩通道，在概念上不是一件具体的事物。我们可以把三原色光比作三盏不同颜色的可调光台灯，那么通道就相当于调光的按钮。对于观看者而言，感受到的只是图像本身，而不会去联想究竟三种色光是如何混合的。正如同你只关心电影中演员的演出，而不会去想拍摄时候导演指挥的过程。因此，通道的作用是“控制”，而不是“展现”。以上所说的是色彩通道，和后面教程中的图像通道概念上不完全相同。从PhotoshopCS版本开始增强了对16位通道色的支持，这就意味着可以显示更多的色彩数(即48位色，约281万亿)。RGB单独的亮度值为2的16次方，等于65536，65536的三次方为281474976710656。但是由于人眼所能分辨的色彩数量还达不到24位的1678万色。所以更高的色彩数量在人眼看来说并没有区别。