整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

色域是什么意思?—摄影早自习第380日

色域是什么意思?—摄影早自习第380日

NIGHT_HAN_XU同学提问:

你好老师,我是个创业者,现在有个小工作室,拍一些写真和婚纱摄影,我的一个单子拍出来的照片在电脑上显示很好,但是印刷出来的相册就有些偏色,是我显示器的问题吗?他们都建议我换苹果的显示器,老师您给指点一下。

我正使用Datacolor Spyder 5为ThinkPad X1 Yoga校色

叶梓老师回答:

首先,我们说设计师、摄影师喜欢用苹果电脑是有一些综合方面的原因,但是并不是因为它的屏幕真的是最好的。苹果显示器只是品控不错,就是说它各个批次出厂的显示器的品质不会忽高忽低,而且他们比较容易被较色仪校准,但这不代表着它本身的色彩就是准确的。

事实上任何屏幕,包括那些数万块、数十万块买回来的屏幕都需要经过专业的较色仪校准才能显示出相对准确的色彩。上图就是我正在用spyder5这种较色仪,用它背面的那个大面积的感光元件来读取屏幕所发出的不同颜色的光来判断屏幕发出的这个颜色的光是不是准确的,发出指令让屏幕进行反向的校准。也就是说屏幕如果偏蓝,它就会告诉你偏黄一点显示,这就是较色仪的一个基本的原理。

很多同学可能想问厂商为什么不在出品这个显示器的时候就把它调的比较正确呢?事实上它们各自有各自的小算盘。苹果和索尼的显示器都普遍偏蓝一些,因为这样看上去会更显得明亮,会更显得高科技,更干净一些。但是有的厂商喜欢把屏幕做得特别艳,尤其是国产的厂商做得非常鲜艳。因为那这样的话,不懂的人一看到这个屏幕,这个颜色比那个艳,我就买这个吧,这个显示器肯定比那个好。所以它都是有市场的考量的。

那么我们摄影人要是要买一块显示器的话,到底要买什么样的呢?事实上可能跟这个显示器的分辨率关系不是特别大,跟它的面积大小关系也不是特别的大,虽然它们都有影响。

sRGB不能完全覆盖CMYK色域,但AdobeRGB则几乎完全覆盖

我们今天来谈一个非常非常重要的值叫做色域,色彩空间。我们都知道人眼对光线的辨别能力是非常强的,对色彩的辨别能力也是非常强的。我们现在没有任何一种设备,没有任何一种显示器,没有任何一种打印机是能够还原人眼所有的可识别色彩的。所以我们只是尽量的把这个色域做得更大一些,这个设备就更接近人眼一些。我们现在有两种常见的色域,一种sRGB,一种是Adobe RGB。这两个词好像在相机里面就见过,我们在拍照的时候相机就会让我们选择拍的照片是用Adobe RGB还是sRGB。有很多同学搞不清楚它是什么意思,在上面第2张图片中左边的那个白色的就是sRGB的范围,右边白色区域是Adobe RGB的范围,图例可以很清楚地看到sRGB是明显小于Adobe RGB的。它的整个小白块的体积会更小一些,也就是说它能显示的色彩的多少程度会更少一些。不只是我们相机在拍照的时候会分sRGB和Adobe RGB,甚至我们在显示器显示它的时候也会分。有的显示器就是只能显示到左边那么多色彩是sRGB的,有的显示器显示的色彩多是Adobe RGB的。

我们需要用哪个模式来拍,哪种显示器来显示呢?也不一定是越多越好。我举个例子,比如说咱们现在已经有了显示器就是sRGB的,只能显示这么多色彩,而且我们很多时候都只在手机上观看照片,我们并不想把这个照片印下来的话,或许你拍的时候就选sRGB,显示的时候也用sRGB的显示器来显示,这样色彩几乎是一一对应的,这是一个最好的结果。但是如果你这张照片是要用来印刷,要用来打印的话,那就另当别论了。你可以看到图2中的那个两个彩色的部分,左右是一样的,它们是什么呢?它们是CMYK的色域。CMYK就是我们使用的打印机机里面的黄品青黑四种墨水的颜色。打印的机器能印出来的色彩是图2中彩色显示的部分这么多,它比起sRGB来说,虽然没有sRGB面积那么大,但是请注意,有一部分打印机能打印的蓝色和绿色,在sRGB里面没有,这部分蓝色和绿色没法描述、没法记录、也没法显示,这就是一个很大的问题。但是相比而言,右边Adobe RGB几乎笼罩了整个CMYK的色域。也就是说打印机能印下的所有颜色在Adobe RGB里面都能找到相对应的颜色来显示。这样的话你可以想象我们在屏幕上就可以直接模拟出最后所印刷出来的色彩,也可以根据这个色彩来进行比较仔细的校调。所以如果你的作品是经常要用来输出,用于印刷和打印,要去冲印的话,我还是推荐你在拍照时就使用了Adobe RGB的色域,而且要有一个Adobe RGB的显示屏,我们叫宽色域显示屏。

2015版Macbook Pro只能显示74%的Adobe色域。

ThinkPad X1 Yoga能显示98%的Adobe RGB色域。

上面的2张范例照片,是我对两台电脑做了一个测试。一台是我正在使用的2015版macbook pro苹果笔记本,后面一台是thinkpad X1 yoga,这是新出的1台Thinkpad的笔记本。两个图片的左边的红色三角形都是代表着这个笔记本本身的色彩显示能力,是用spyder5测出来的。紫色的三角形都代表着Adobe RGB的色域范围,你可以看到2015版的macbook pro显示器只能显示74%的Adobe RGB的色域,它根本就不是一个宽色域屏幕,这是非常糟糕的一个结果。thinkpad X1 yoga能显示98%的Adobe RGB色域,这是一个非常好的结果。你用后者的显示屏来调整图片,显然是能够覆盖你所有的打印所需的色彩的。在屏幕的硬件已经达到要求,能显示那么多色彩,那么大的色域空间的基础上,我们对它使用色彩管理的仪器,比如说spyder进行色彩的校调就可以达到一个相对完美的结果。

所以我们要分两方面说,一方面硬件上要支持,此外还要对它进行色彩校准才可以。我们甚至要每隔一段时间就去校一次屏幕,因为屏幕每隔一段时间会变色、会衰减。大家可能都还记得那种老的显示器、老投影仪的颜色严重发黄发绿的样子吧。所以每隔一个月,我们都会重新校正一次屏幕。

实际上,偏色的问题还不止是跟显示器有关,还跟打印机的色彩是不是国际标准的有关,也跟相机的偏色程度有关。所以我们需要整套的色彩管理的系统来对相机进行校准,对显示器进行校准,再对打印机进行校准,三者的颜色才可能统一起来,才可能跟肉眼更接近一些。关于色彩管理的知识实际上是非常系统而复杂的,我在自由职业摄影师这门课程里面是花了一些时间来详细的介绍,希望了解更详细内容的可以在网易云课堂搜索《自由职业摄影师》课程进行学习。

更多摄影问题欢迎在下方向我留言,我是叶梓,微信公众号“摄影早自习”,每天早上6:30,不见不散。

注:以上文字由小编整理自叶梓老师录制的语音。

加入“摄影早自习”微信群:

1、添加叶梓老师微信:leonyee3

2、说明申请加入早自习群(暗号:头条)

《自由职业摄影师》、《新媒体视频导演》课程咨询请加微信:hello-kato

原文链接:

http://www.katoclass.com/zaozixi20161124.html

、作品介绍

HTML+CSS+JS网页设计与制作,我的学校网页设计与制作实例, 本实例适合于初学HTML+CSS+JS的同学。该案例里面有div+css的样式布局设置,这个实例比较全面,有一级页、二级页、详情页、输入表单等,共6个页面。本文将介绍如何通过从零开始设计我的学校网站,并将其转换为代码的过程来实现设计与制作。(网页设计与制作分享。源码分享。)

1.网页作品简介方面 :青绿色简约风格,div+css布局。主要有:首页、关于暨大、学校新闻、新闻详情页、校园风光、 联系我们等总共6个页面html下载。

2.网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果等。 首页制作了搜索表单。

3.网页作品布局方面:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,图片居中布局,文本描述对齐方式设置了左对齐。

4.网页作品编辑方面:此作品为我的学校网页设计题材,代码为 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用)


二、作品效果

视频演示:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

截图演示:

首页

关于暨大

学校新闻

新闻详情页

校园风光

联系我们

三、作品代码

文件目录:

HTML代码:

首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="top-box">
        <!-- logo -->
        <img src="./images/logo2.svg" class="logo" alt="" />
        <div class="right-box">
            <a href="#">新门户</a>
            <a href="#">邮件</a>
            <a href="#">网上服务大厅</a> | 
            <a href="#">图书馆</a>
            <div class="in-row">
                <input type="text" placeholder="请输入您的关键词">
                <button class="button">搜索</button>
            </div>
        </div>
    </div>
    <div class="header">
        <!-- logo -->
        <img src="./images/hw_zxdj.png" class="logo" alt="" />
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li>
                    <a class="active" href="./index.html" target="_self">
                        <span title="首页">首页</span>
                    </a>
                </li>
                <li>
                    <a href="./about.html" target="_self">
                        <span title="关于暨大">关于暨大</span>
                    </a>
                </li>
                <li>
                    <a href="./news.html" target="_self">
                        <span title="学校新闻">学校新闻</span>
                    </a>
                </li>
                <li>
                    <a href="./scenery.html" target="_self">
                        <span title="校园风光">校园风光</span>
                    </a>
                </li>                
                <li>
                    <a href="./contact.html" target="_self">
                        <span title="联系我们">联系我们</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
        <div class="banner">
            <img src="./images/banner.jpg" alt="" />
        </div>
        <div class="project-content">
            <p class="content-title">暨南大学</p>
            <div class="detail-content">
                <div class="detail-pic">
                    <img src="./images/dasdasda.jpg" alt="" />
                </div>
                <div class="detail-desc">
                    <p>暨南大学是中国第一所由政府创办的华侨学府。</p>
                    <p>“暨南”二字出自《尚书·禹贡》:“东渐于海,西被于流沙,朔南暨,声教讫于四海。”意即面向南洋,将中华文化远播到五洲四海。
                        </p>
                    <p>学校目前是中央统战部、教育部、广东省人民政府共建的国家“双一流”建设高校,直属中央统战部管理。</p>
                    <p> 暨南大学是中国历史最悠久的大学之一。学校的前身是1906年清政府创立于南京的暨南学堂,后迁至上海,1927年更名为国立暨南大学。</p>
                </div>
            </div>
            <p class="content-title">校园风光</p>
            <div class="content-list content-list2">
                <ul>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy6.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy7.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy8.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy9.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy10.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy11.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy12.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy13.jpg" alt="" />
                        </div>
                        <p class="title">校园一角</p>
                    </li>
                </ul>
            </div>

            <p class="content-title">媒体暨大</p>
            <div class="content-list content-list2">
                <video src="https://osvc-mediaxbase.jnu.edu.cn/media/mediax/media/202312/25/51c2c04451825398f8c8b734.mp4" class="video" controls></video>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="contact-container">
            <div class="contact-title">
                <p>联系</p>
                <p>Contact</p>
            </div>
            <div class="contact-content">
                <p class="c-name">木番薯科技</p>
                <div class="c-addr">
                    <p>地 点:广州市天河区花城大道666号</p>
                    <p>邮编:510000</p>
                </div>
                <div class="c-addr">
                    <p>公众号名称:木番薯科技</p>
                    <p>公众号号码:mengchatchat91</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

也适用于:大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业、web前端期末大作业、web课程设计网页规划与设计、我的学校网页设计作业成品、HTML+CSS+JS网页设计期末课程大作业等。

css样式:

CSS部分比较容易掌握的,但是深入到CSS,并不会太容易。CSS的知识比较零碎,所用到的技巧也相对比较多。一句话“入门容易就,提升难”,今天教授带你走一趟,一起对CSS的一此冷门知识做个梳理.

关注“教授学苑”,期待带给你快乐的开发知识!