图的这一系列的图片，都来自极影Ax成员—miller姚明来。这种用超广角拍摄的极具冲击力的图片，需要将广角非常贴近前景从而营造出纵深感和夸张的畸变。

这时候就会出现一个问题，即使你将镜头的光圈调到F100000000000，也无法获得前景至远景都非常清晰锐利的图片（如上图）

这时候，必须用到一个技术——景深合成。而下文，就是全宇宙最全的景深合成攻略。

前期拍摄

首先，你需要获得一组焦平面覆盖所要拍摄的画面全景深的n张图片

（一）当你手中的相机是尼康D850这类拥有“焦距变化拍摄”功能的相机，那么，可以利用机身自带的这个功能，轻松的获得一组焦平面从最近到无穷远的图片。

请看下方极影AX成员-周游为大家带来的现场视频演示

高清视频地址：https://v.qq.com/x/page/m0754hdqtdh.html

（二）当你手中的相机不具备这种自动切换焦点包围拍摄的功能时，就需要手动拍摄这一系列图片。

(1）拍摄前的准备：

首先，你要带上一个足够稳固的三脚架，相机一些轻微的晃动都会给你的后期拼合制造麻烦。当然，还需要一根靠谱的快门线，这可以有效避免按动快门时的抖动。（不推荐用延时拍摄的方式代替快门线，在光线瞬息万变的场合，延时的那2秒很可能会让你错过唯一的机会）

（2）拍摄时的设置：

当你确定好构图，在拍摄前的一步就是对相机进行一些设置。

1.将相机设置为光圈优先的拍摄模式。

有人问为什么不用m档拍摄，这意味着曝光量锁定不变，那岂不是在后期拼合时更加容易吗？虽然m档能够让拍摄的一系列素材的曝光完全一致，但光圈优先能够根据环境光立即算出一个合理的曝光参数，在某些风云突变，光线稍纵即逝的场合更需要的是速度。

2.设置照片质量为RAW。以便保留更多的暗部高光细节，让后期有更大空间。

3.将镜头由自动对焦调为手动对焦，就是把镜头从af拨到mf。

4.如果你的广角镜头有防抖，那么务必关闭防抖。

5.设置相机测光模式为全局测光

6.设置光圈

如果拍摄时风很大并且前景的光线很暗，往往使用较大的光圈配合高iso，才能提高快门速度定格住前景。如果现场几乎没有风，前景光线也不错，可以将光圈缩的比较小。光圈越小，景深越深，可以在拍摄时减少张数，提高效率。

（3）拍摄时的操作：

首先，将相机镜头的对焦环拧到最近处。镜身上有个透明的小窗口，这个窗口可以直观的观察镜头焦距的变化

示例的是佳能16-35，对于这枚镜头，就是拧到最近对焦距离处，也就是0.28。

然后按下快门拍摄第一张照片。接着将镜头对焦环往数值较大的方向拧动一点，再按动快门拍第二张。接下来再往数值更大的方向拧动一点，再拍第三张。。。。。。直至镜头拧到无穷远处拍下最后一张。

佳能的广角镜头不要拧到底，如上图那样拧到无穷远处再回来一点，让刻度线刚好在无穷远刻度线前方的L形线条的竖线处即是无穷远。而尼康，索尼的镜头好像直接拧到底就是无穷远。

至于拍摄时拧动的幅度，全凭你自己，如果你第一次尝试这种技术，同时光圈开的比较大，或者是在拍摄一个非常重要的场景，那么可以拧的幅度小一些，多拍几张不同景深的，这样更安全。而如果拍摄时光线充足，光圈缩的比较小，可以拧的幅度大一些。一般来说，拍摄个7.8张也就基本能覆盖从最近一直到最远的全景深了。

Tip：

拍完一组景深后，保险起见，通常会再多做一组景深的拍摄，确保万无一失。

手动景深合成的视频，请看下方极影AX成员-姚明来在山区为大家带来的现场示范

高清视频地址：https://v.qq.com/x/page/n072522x6rt.html

（三）当你手中的相机是奥林巴斯EM10等机型时，可以用自带的“focus BKT”（深度合成）的功能拍摄一组全景深的图片，并且直接在机内混合为成图，这样就免去了后期的时间。。。。。。但是！机身自动合成出的图片是jpg格式，我们都知道jpg这种压缩格式的图片后期以后会惨不忍睹，所以，不要去使用这个功能。

后期操作

方法一：photoshop自动合成

1.筛选

首先将景深合成的几组照片导入到lightroom进行筛选，重复比对以及放大细节来确定保留下几组中的一组。那组筛选出的照片就是我们最后要进行景深合成的素材了。

接着放大查看留下的那组照片中的每一张图，比对焦点的位置以及各张照片清晰的区域。因为在转动变焦环拍摄时，由于拧动幅度的大小，总会有一些照片的清晰区域是比较类似和重叠的。这一步就是删去一组照片中焦平面重叠比较多的那几张图，最后只留焦平面基本可以互补的那几张。

这一步不仅可以减少拼合时计算机运行的时间，更重要的意义在与如果拍摄的时候有风，前景的花草一定会有位移，而如果很多张一起放进去拼合，就会干扰计算机拼合时的算法，产生错位和重影。

上图的作者是极影AX成员—史炎冰。拍摄的条件就是如我说的那种大风的天气，风很大，前景花草的位移很厉害。下面截取了他在作品下方的描述，大家可以体会一下拍摄以及合成时的艰难：

2.调整

在lightroom里对照片进行一个基础的调整，为后续在ps中的拼合打好基础。通常矫正一下曝光，对照片做一个基础的调色，降噪锐化等。当做完针对某张照片的调整后，需要将这个效果应用到这一组的所有图片上。

选中所有图片，点击“同步设置”，将所有选项都勾上，然后点击“同步”。那样针对某一张照片的所有调整就被同步复制到了所有图片上，这样呈现出来的效果也是一致的。

Tip：

如果拍摄的时候光线变化很快，可能每张照片的曝光会有一些差别，这就需要在同步设置以后对每张照片进行单独的调整。

3.合成

lr里完成对照片基础调整后，接着把所有图片导入到ps中。

选中所有图片，点击右键，在弹出的窗口中选择“在应用程序中编辑”，然后再点击“在photoshop中作为图层打开”。这样所有的图片就自动载入到ps中了，并且作为图层叠加在同一个画布中。

接着全选图层，点击ps上方工具栏的“编辑-自动对齐图层”，那样，所有图层就被软件自动对齐了

这个对齐的操作是为了克服镜头的呼吸效应.当我们在拧动焦距环时，镜头会移动浮动镜片来对焦，浮动镜片的移动必然带来光学结构的改变，因此焦距就会发生变化。所以虽然机位固定，但是拍摄出的画面一定有轻微的变形跟位移，这时就要依赖ps强大的对齐功能了。

自动对齐以后，画面的周围有白边，这就是程序对图像进行拉伸匹配像素时出现空白的多余像素。

对齐以后，就是要将图片融合在一起，还是全选图层，点击“编辑-自动混合图层”

在跳出的对话框中选择“堆叠图像”，同时勾选“无缝色调和颜色”，再点击确定，软件就开始自动融合。

下图是最后融合完的图像，每个图层的旁边都多了蒙版，这就是软件自动计算生成的。这个功能能够计算抓取出每个图层最清晰的部分然后进行融合。

接着我们将图层合并。如果在拍摄时没用三脚架或者现场有很大的风，就会造成图片中元素的位移和晃动，这时候不能够完全依赖ps软件的自动合成。要在这一步拼合前追加一步，就是手动调整各个图层的蒙版，用笔刷刷取清晰的部分，这个过程比较考验技术以及花费时间。

合并图层后，用裁剪工具裁去画面周围空白以及模糊的部分。所以我们在拍摄时要尽量在构图上留有余地，给后期留下裁剪的空间。

这就是最后裁剪完的照片，我们可以看到画面从最近到最远都是清晰锐利的

方法二：景深合成软件Helicon Focus 6 合成

1、LR对照片进行基础参数调节，并同步批处理后导出TIFF格式

2、将所有景深合成的素材载入到Helicon focus6中

3、渲染方法选择B:景深图 然后点击渲染按钮

一键直接生成景深合成后的图像（右侧，预览图），然后保存成果文件即可。

我们可以放大局部查看一下合成的结果，可以看到花茎的茸毛都锐利清晰，而且地上远处的小花也很锐利。

放大看远处的山峰和近处的花骨朵同样清晰。可见Helicon Focus这个软件暴力景深合成是非常棒的，但是这个软件是收费软件。

方法三：photoshop手动蒙版合成

我们经常会在有风的户外拍摄，这时候，如果拍摄的前景是茎叶细长的花朵，那么花朵必然会摇曳，无论你拍摄的速度多么的快，在一组景深合成的图片里，前景一定会产生位移。而这种位移是电脑的智能算法也无法完美拼合的，这时候就要用手动蒙版的方法对图片进行人工的融合。

这种方法非常耗时和复杂。可以点击下方的阅读原文，系列课的第5课有详细的演示

极影AdventureX

极限挑战

极致影像

极客分享

http://www.theadventurex.com

ss的长度单位分为两种，一种为绝对长度，一种为相对长度。日常设计与开发中或多或少都会接触到。前端毕竟是根据设计稿写页面，UI设计师也是按照规范去设计页面。

绝对长度

px

即像素pixel，它是最基础也是最常用的一个长度单位

cm

厘米， 1cm=37.8px

mm

毫米，1mm=3.78px

in

即英尺inch， 1in=2.54cm=96px

pt

即点point，1pt=1/72in=1.33px

pc

即派卡，1pc=12pt=16px，派卡是印刷行业的长度单位

相对长度

em

一个字符大小，字符大小在浏览器中默认为16px

EM特点

-1. em的值并不是固定的；

-2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

-1. body选择器中声明Font-size=62.5%；

-2. 将你的原来的px数值除以10，然后换上em作为单位；

-3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

避免1.2 * 1.2= 1.44的现象，比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem

rem是CSS3新增的一个相对单位（root em，根em）, 相对于根元素HTML的字体大小。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

简单点说就是根em.

百分比%

百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小

关于包含块（containing block）的概念，不能简单地理解成是父元素。

如果是静态定位和相对定位，包含块一般就是其父元素。

如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。

如果是固定定位的元素，它的包含块是视口（viewport）

vh

视口高度，默认为视口高度的1%

vw

视口宽度，默认为视口宽度的1%

<div class="left">left</div>

<div class="right">right</div>

<style>

* {

padding: 0;

margin: 0

}

.left {

float: left;

width: 50vw;

height: 20vh;

background-color: orange;

text-align: center;

line-height: 20vh;

font-size: 3rem

}

.right {

float: right;

width: 50vw;

height: 20vh;

background-color: red;

text-align: center;

line-height: 20vh;

font-size: 3rem

}

</style>

vmin

布局视口高度和宽度之中值较小的那个的 1/100

vmax

布局视口高度和宽度之中值较大的那个的 1/100

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

fr

grid布局中利用的一个长度单位。在gird布局中，我们经常会利用fr来进行计算

 <div class="grid">
 <div class="column">1</div>
 <div class="column">2</div>
 <div class="column">3</div>
 <div class="column">4</div>
 <div class="column">5</div>
 <div class="column">6</div>
 </div>
	 <style type="text/css">
 * {
 margin: 0px;
 padding: 0px;
 }
 .grid {
 height:300px;
 width: 1000px;
 background: #f1f1f1;
 margin: 20px auto;
 overflow: auto;
 display: grid;
 grid-template-columns: 100px repeat(5, 1fr);
 grid-column-gap: 10px;
 }
 .column {
 background: orange;
 }
 </style>

当然也有小程序中的rpx，相对屏幕自适应

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

于绘图和印刷而言，「单位」很相当重要的，然而在网页排版里，单位也是同样具有重要性，在CSS3 普及以来，更添加了一些方便好用的单位( px、em、rem.. .等)，这篇文章将整理这些常用的CSS 单位，希望能够帮助到你在工作上能使用的更加得心应手。

「网页」和「印刷」的单位

目前我们接触的范围来说，若要把单位做区分，最简单可以分为「网页」和「印刷」两大类，通常对于CSS来说只会应用到网页的样​​式，毕竟真正要做印刷，还是会倾向通过排版软体来进行设计。

网页( 单位 )

• px：绝对单位，代表屏幕中每个「点」( pixel )。
• em：相对单位，每个子元素通过「倍数」乘以父元素的px值。
• rem：相对单位，每个元素通过「倍数」乘以根元素的px值。
• %：相对单位，每个子元素通过「百分比」乘以父元素的px值。

网页( 属性名称 )

• medium：预设值，等于16px ( h4预设值)
• xx-small：medium的0.6倍( h6预设值)
• x-small：medium的0.75倍
• small：medium的0.8倍( h5预设值，W3C定义为0.89，实测约为0.8 )
• large：medium的1.1倍( h3预设值，W3C定义为1.2，实测约为1.1 )
• x-large：medium的1.5倍( h2预设值)
• xx-large：medium的2倍( h1预设值)
• smaller：约为父层的80%
• larger：约为父层的120%

印刷（简单了解下）

• pt：印刷机的每个「点」，定义为1 pt ＝ 1/72 in，如果在72 dpi的系统上1 px = 1 pt，但如果在96 dpi的系统上1 px = 0.75 pt ( 72 /96 = 0.75 )。
• in：英寸，在96 dpi的系统上1 in = 96 px。
• cm：厘米，在96 dpi的系统上1 cm = 37.795275593333 px。
• mm：毫米，在96 dpi的系统上1 mm = 3.7795275593333 px。

示例展示

以下将展示四种不同单位的示例，为了直观简单，四个示例都套用预设的div格式，纯粹改变font-size看看有何不同，由于子元素若没有设定font-size，会自动继承父元素的font-size，使用上就应该要预先初始化字体大小，下面这两段CSS可以将所有的元素字体大小预设为16px，接下来可以进行个别调整。

html{
 font-size:16px;
}
html * {
 font-size: 1rem;
}

1、px

px 是绝对单位，因此只要设定多少px，就会精确的呈现，对于一些讲求精准位置的排版而言十分有用，如示例展示的，指定多大 px 字体就会多大。

<div style="font-size:16px;">16px
 <div style="font-size:20px;">20px
 <div style="font-size:24px;">24px
 <div style="font-size:16px;">16px
 <div style="font-size:32px;">32px</div>
 </div>
 </div>
 </div>
</div>

2、em

em是相对单位，为每个子元素通过「倍数」乘以父元素的px值，如果我们每一层div都使用1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(浏览器预设字体大小为16px，若无特别指定则会直接继承父元素字体大小)

<div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em
 <div style="font-size:1.2em;">1.2em</div>
 </div>
 </div>
 </div>
</div>

3、rem

rem是相对单位，为每个元素通过「倍数」乘以根元素的px值，如果我们每一层div都使用1.2rem，最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size，预设为16px )。

<div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem
 <div style="font-size:1.2rem;">1.2rem</div>
 </div>
 </div>
 </div>
</div>

4、%

%百分比是相对单位，和em大同小异，简单来说em就是百分比除以一百，如果我们每一层div都使用120%，就等同于1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。

<div style="font-size:120%;">120%
 <div style="font-size:120%;">120%
 <div style="font-size:120%;">120%
 <div style="font-size:120%;">120%
 <div style="font-size:120%;">120%</div>
 </div>
 </div>
 </div>
</div>

5、small、medium、large...等

字体大小的属性有七种，分别是xx-small、x-small、small、medium、large、x-large和xx-large，除了x-small，其余六种分别对应h6~h1的标签文字大小，根据W3C的规范，以medium预设16px为基础(若html字体预设大小改变，medium也会跟着变)，使用固定的百分比乘以medium的大小，例如xx-small预设为16px x 0.6 = 9.6px(浏览器显示为12px )。

<div style="font-size:xx-small;">xx-small
 <div style="font-size:x-small;">x-small
 <div style="font-size:small;">small
 <div style="font-size:medium;">medium
 <div style="font-size:large;">large
 <div style="font-size:x-large;">x-large
 <div style="font-size:xx-large;">xx-large</div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

6、larger、smaller

larger 和smaller 就是固定百分比为单位，larger 为父层的120%，smaller 为父层的80%。

<div style="font-size:medium;">medium
 <div style="font-size:larger;">larger
 <div style="font-size:larger;">larger
 <div style="font-size:larger;">larger
 <div style="font-size:smaller;">smaller
 <div style="font-size:smaller;">smaller
 <div style="font-size:smaller;">smaller</div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

小结

熟悉了字体大小单位之后，你就更够能有系统的进行设计整个网站的CSS字体架构，不过font-size 本身和font-family 有着一些复杂的关系，不同的font-family 有时也会影响font-size 的设定，因此使用上还是得稍微注意一下啰！