显示器成像及位深概述

用户头像
北京/UI设计师/6年前/436浏览
显示器成像及位深概述
用户头像
205二哥

图片由像素组成,每一个像素只能表达一种颜色,不同的像素之间的颜色可以相同也可以不同

人能够感受到五彩缤纷的世界是因为:视网膜上的锥状细胞分三种,各含有不同的感光色素,分别对红、蓝、绿光刺激敏感,三种锥细胞所发生的色觉冲动,由三条不同的神经通路上传到视觉中枢的不同部位产生不同的色觉



那么对于电脑来说, 硬盘里面只能存储数字和字母。计算机遇到相应的代码,就会在屏幕上指定的像素上显示对照的颜色。我们用数码相机拍摄的照片可能包含2的24次方种颜色(即24位色,也叫做真彩色)。2的24次方=16777216。这么多个颜色中,每个颜色都在颜色代码表中有一个对应。但事实上人类不可识别的,存在于自然界中的颜色远远超过这个数值



图片由像素组成,每一个像素只能表达一种颜色,不同的像素之间的颜色可以相同也可以不同。计算机会将一个屏幕,设定为一个带有X轴和Y轴的象限,这样图片上的每一个像素就对应一个坐标值。图片的记录就是依靠记录每个点的坐标值,以及这个点的颜色值。通过这种方式可以把一幅图像完全通过字母和数字记录到硬盘中并展示在相应的屏幕上。



针对于UI设计,常见的格式有jpg、bmp、png、webp 。虽然这些格式的图片本身的编码方式不同,但都需要显示在屏幕上,那么他就逃脱不了ARGB这四个通道。但这里需要指出的是:由于编码方式的不同,每一种格式在计算机中的存储方式也不同。但在屏幕上显示的逻辑应该是相通的(以小编现有的知识储量认为)


说了这么多,以上就是带大家简单的了解一下颜色以及图像

以便于能够轻松的理解位深的概念


分割线----------------------------------------------------------------------------------------------------------------------


设计师盆友都知道,我们常用的PS中有大量的默认参数,甚至有些参数我们这一辈子可能都不会去修改他。我们今天说的就是其中之一,尤其单纯的做高端互联网产品的设计师可能都不知道他在哪?


图像 ----> 模式 ----> RGB  ----> 8位/通道

这里的8位指的就是位深,即ARGB每个通道上都255个颜色,在由这四个通道色彩叠加,最终形成一个像素上所要表现出的颜色。



我们常见的位深有:

6位、8位、16、24位、32位(多A 8)


以下各个通道的位深以最常见为例,并不绝对

6位:R 2   G 2   B 2

8位:R 3   G 2   B 3 或 A 2   R 2   G 2   B 2

16位:R 5   G 6   B 5 或 A 4   R 4   G 4   B 4

24位:R 8   G 8   B 8

32位:A 8   R 8   G 8   B 8



我们知道,计算机是以二进制来记录内容的,仅仅识别 0   1 

那么颜色在计算机中也是这样存储的

例如:某1像素颜色为6位深色(R 2   G 2   B 2)

R占2位用二进制可以表示为:00   01  10  11

G占2位用二进制可以表示为:00   01  10  11

B占2位用二进制可以表示为:00   01  10  11

根据颜色叠加的原理该像素可能出现的颜色有:64种


同理:某1像素颜色为8位深色(R 3   G 2   B 3)

R占3位用二进制可以表示为:000   001  010  011   100  110  111

G占2位用二进制可以表示为:00   01  10  11

B占3位用二进制可以表示为:000   001  010  011   100  110  111

根据颜色叠加的原理该像素可能出现的颜色有:256种


以此类推:

16位(R 5   G 6   B 5)可能出现的颜色有:65536种

24位(R 8   G 8   B 8)可能出现的颜色有:16777216种

32位(A 8   R 8   G 8   B 8)只是在24位色的基础上增加了8位的透明度,颜色种类并没有增加


注:在输出非真彩色图片时,需要带有相应的色板,才可以在设备上显示出设计稿上的样子。


------------------------------------------------------------------------------------------------------------------


以上是位深的理论基础

我们在现实的设计中用到的并不是太多,小编在一家传媒公司上班,有时候为了压缩硬件成本,减小内存,软件会采用降低位深,以加快图片编解码的速度,这个时候就用上以上的知识了,在与研发的沟通中就会顺畅很多。


补充知识点:

我们常用的格式(jpg、webp、png)这些格式是不存在位深这个概念的,他们都为真彩色

我们在用PS导出web所用PNG时:会有两个选项PNG-8和PNG-24,但需要注意这里的8和24指的并不是位深。



PNG-8:指的是该图像中最多存在2的8次方种颜色,也就是256颜色(真色彩中挑选256个)

              优点:占用内存小。    缺点:色彩越丰富的图像,效果越差,尤其边缘锯齿明显,透明度:仅有100%和0%

PNG-24:指的是在真色彩挑选需要的颜色

                优点:色彩还原度高    缺点:不支持透明度

PNG-24+透明:指的是在真色彩挑选需要的颜色,并支持颜色带有透明度

                优点:色彩还原度高  支持透明    缺点:占用内存大


以上的知识,在我们平时的设计工作中就足以应付,如果给你提供了帮助,


点个“赞”吧


5
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
柠檬黄主题UI作品集模版
智能家居中心 简约 UI设计组件库
拟物风质感写实UI卡片合集源文件
Security Camera UI kit
【新年UI图标】游戏/娱乐icon
【新年UI图标】美妆icon
科技医疗透明柜UI界面设计
UI_3D图标火箭炮<新春促销>
UI 登录界面设计模板包
矢量立体简约UI蓝白图标
新能源APP应用UIKit
【新年UI图标】影音icon
高级感金属拟物 UI设计组件库
【新年UI图标】30个图标
UI通用设计素材1
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】珠宝icon
【新年UI图标】美食icon
新拟态风格 UI设计组件库
UI界面 组件
钱包ui模板
高级表盘系列UI源文件
盲盒APP UI设计
你可能喜欢
相关收藏夹
大家都在看
登录注册