> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-shi-pei-xiang-guan.md).

# 制作技巧-适配相关

\#自由编辑器

## <mark style="color:blue;">一、适配方向</mark>

在新建空白制作项目时，需要选择适配方向（模板默认为\[横屏&竖屏]）

* 若选择单方向【横屏】或【竖屏】，只需制作当前屏幕方向的排版和适配即可，另一屏幕模式下多余的区域默认填充黑色
* 若选择【横屏&竖屏】，则在制作时需要分别对竖屏和横屏进行排版和适配调整

👉不同适配方向对应的效果可查看: [作品制作-新建指南](/ke-wan-gong-ju-zi-you-bian-ji-qi/zuo-pin-zhi-zuo-xin-jian-zhi-nan.md#step3-xuan-ze-shi-pei-fang-xiang)

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FMZ0ksEEbfHNrcVGYs1av%2Fimage.png?alt=media&amp;token=4e51d649-ab02-42ec-b9d5-b175b208dc45" alt="" width="351"><figcaption></figcaption></figure></div>

💡 <mark style="color:red;">**Tips：若选择【横屏&竖屏】，排版技巧分享：**</mark>

* 完成竖屏制作后，切换到横屏模式
* 选中**所有最高层级的图层**
* 点击使用【**复用竖屏位置尺寸配置**】功能一键排版
* 若有部分元素超出画布外，可**选中其所在的组**，**调整【位置】和【缩放比例】**&#x5373;可
* 按照以上步骤，依次完成所有场景（包括全局场景）的横屏排版和适配

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSYIzzi4JSzjd6LM5BW7L%2Fimage.png?alt=media&amp;token=5c4f3318-bece-4f3d-b3ed-d42d20915f9b" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">二、适配技巧</mark>

**推荐阅读 - 基础功能介绍:** [屏幕适配方式](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/ping-mu-shi-pei-fang-shi.md)

💡屏幕排版与适配的底层逻辑说明：<mark style="color:red;">画布的分辨率为 750\*1334，在制作时应保证所有元素最终都能完整呈现在画布内；针对不同设备不同屏幕大小，画布中的内容会自动 等比放大/缩小去适配各设备</mark>。

背景图片需额外注意一下：

### 1.背景图片的设置

无论您是否要在"场景"中添加背景图片，我们都建议您**先在【全局设置】添加背景图片兜底**。因为：

* 在【全局设置】添加的背景图片会自动适配所有机型，无论在多大尺寸屏幕下预览，背景图片都会被拉伸至铺满全屏，不会出现白边
* 如果仅在"场景"下添加图片，当图片尺寸不够大时，在部分机型预览下就会有白边露出
* 在【全局设置】添加的背景图片层级默认位于所有图层最底部，且不可移动，因此不会影响其他图层的排版

所以通常，我们添加背景图片 分两种情况：

🌟A. 背景图片样式简单/与核心玩法相关性小/可以接受适度拉伸变形。此种情况建议：

直接在【全局设置】添加背景图片，无需在"场景"中二次添加

<div><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fq2wXkzy9FnkjpSguzzpT%2Fpb_bg.jpg?alt=media&amp;token=4abed5ef-ae4c-445a-b8ba-e43c9c09d82e" alt="" width="188"><figcaption><p>原背景图片</p></figcaption></figure> <figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fzf2xxH5ELoAFow514tjG%2Fimage.png?alt=media&amp;token=f63a4158-a296-40f3-9f3d-292f3c51591b" alt="" width="563"><figcaption><p>背景图片加在【全局设置】</p></figcaption></figure> <figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJ2uGtVU3l3HpR538BKcd%2F04.png?alt=media&amp;token=e38d667c-0450-4fab-a98d-a320b38600d9" alt=""><figcaption><p>整体布局</p></figcaption></figure></div>

🌟B. 背景图片与核心布局有关联/不可以接受拉伸变形。此种情况建议：

先在【全局设置】中添加一张干净/纯色背景图片 或 背景颜色 来兜底，然后再进入"场景"添加该背景图片

<div><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4KjNh3gHGBMYgXVOpnl8%2F02.png?alt=media&amp;token=d04fcbef-8d9a-4acc-9231-9d765141d4a1" alt="" width="188"><figcaption><p>原背景图片</p></figcaption></figure> <figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FZx5A9EZi1OnQK1LjuJ1S%2Fimage.png?alt=media&amp;token=109138cf-25cd-46d8-9198-454d0fd3cb08" alt="" width="375"><figcaption><p>背景图片加在【场景】</p></figcaption></figure> <figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FIA38g100VEj062rWkurZ%2F03.png?alt=media&amp;token=825dab41-f910-423e-96a0-85d156ba6d4a" alt="" width="131"><figcaption><p>整体布局</p></figcaption></figure></div>

⚠️需注意：若您未在【全局设置】中添加背景图片/颜色兜底，那么需保证添加在"场景"中的背景图片的尺寸至少应为1800\*1800(拉出画布外)，这样才能保证背景图覆盖所有设备；否则在大尺寸屏幕中，四周会有白边露出，可能会影响玩家的试玩体验。

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGiXgpzX31YsqAaHvYYDX%2Fimage.png?alt=media&amp;token=a738a17b-c2cf-4d94-adb5-df880a09637e" alt=""><figcaption><p>背景图片相对于画布的位置示意</p></figcaption></figure>

👉相关阅读： [/pages/9HWDkONQxdnOrBwBPouM#id-1.-qie-huan-yu-lan-she-bei-yu-lan](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/pages/9HWDkONQxdnOrBwBPouM#id-1.-qie-huan-yu-lan-she-bei-yu-lan "mention")

### 2.屏幕适配方式建议

各类资产在被添加到画布中时，其屏幕适配方式都默认“水平居中&垂直居中”，即无论在哪种机型下预览素材，该资产都会位于屏幕中心位置

**大部分资产无需调整屏幕适配方式，可自动适配各类机型。**&#x4F1A;有少部分资产，在制作时建议调整屏幕适配方式，以保证在不同机型预览下的最佳视觉效果

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F9tbKQl0XDXBvlNagK3JD%2Fimage.png?alt=media&amp;token=8448a051-0166-4c67-9bb8-c182b745829f" alt=""><figcaption></figcaption></figure>

常见需要调整屏幕适配方式的图层有：常驻产品信息、免责声明

#### 1）常驻信息（包含产品信息&下载按钮）

<table><thead><tr><th width="283">建议适配方向</th><th>图示</th><th>屏幕适配方式</th></tr></thead><tbody><tr><td>竖屏：顶部</td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fni5X7eFHoCeruV9DHbeX%2Fimage.png?alt=media&amp;token=ce9f1cc6-c3cb-47b0-8c53-298856ed51d7" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FbWOOc4FgQFp16FyBaG8P%2Fimage.png?alt=media&amp;token=059df4fb-c780-4c3c-98c9-dd619e80d169" alt="" data-size="original"></td></tr><tr><td>竖屏：底部</td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4YoH1hffSfojWc21mRsY%2Fimage.png?alt=media&amp;token=31d6156d-aa77-4c86-89eb-f0bcb70d0e44" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FsVPerQ9Ty7cNtrAvWLJd%2Fimage.png?alt=media&amp;token=69b4b7bc-11bc-4adc-99c6-33e4f469af8d" alt="" data-size="original"></td></tr><tr><td>横屏：左上角</td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FMZBA1dDsT7i28j9y2XLm%2Fimage.png?alt=media&amp;token=07131253-58c0-4773-bcba-9874c278fb93" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FHvQxEQzS9mvgJcbB9EKA%2Fimage.png?alt=media&amp;token=5ff36350-a3a3-4eb6-95ad-2ae0d0a587ea" alt="" data-size="original"></td></tr></tbody></table>

#### 2）免责声明

免责声明建议居中贴底适配

<table><thead><tr><th width="190">建议适配方向</th><th>图示</th><th>屏幕适配方式</th></tr></thead><tbody><tr><td>横屏/竖屏：底部</td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSrEmGBTNaMZhD1a6kz6i%2Fimage.png?alt=media&amp;token=06c0bf87-5f72-40f7-a8e2-e5a59c8958ab" alt="" data-size="original"></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlbcPuC9h2O6YSUv48RTd%2Fimage.png?alt=media&amp;token=4b872c4f-6128-4dfe-8c2d-038b464194d0" alt="" data-size="original"></td></tr></tbody></table>

💡**注：**&#x9ED8;认"\[屏幕适配方式]参数横竖屏拆分"。若图层在横竖屏下的位置不一致，则需分开设置屏幕适配方式；若一致，可取消勾选拆分

### 3.横竖屏排版不同 如何拆分设置

制作素材时，若对横竖屏有不同的排版需求，可结合使用 **【\[显示隐藏参数]横竖屏拆分】**&**【屏幕适配方式】** 功能进行拆分设置。

<mark style="color:red;">⚠️</mark>温馨提示：横竖屏排版拆分设置建议仅用于 **非核心玩法** 相关内容，如产品信息/背景图等。若将核心玩法拆分横竖屏单独设置，不仅制作量会翻倍，在实际试玩时 横竖屏下的试玩进度将不统一，影响试玩体验。

以产品信息为例，展开说明如何拆分设置：

#### 1）竖屏：展示产品信息组，并设置贴底适配

* 对需要分开设置的图层勾选 【\[显示隐藏参数]横竖屏拆分】
* 隐藏掉 仅横屏使用的资产图层
* 选中产品信息组，将其"屏幕适配方式"调整为贴底适配

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FR2hDyJTbg1UZUEnSHgpp%2Fimage.png?alt=media&amp;token=da4b22b1-b239-4d5c-a43d-babf3c4681d0" alt=""><figcaption></figcaption></figure>

#### 2）横屏：展示其他布局元素，隐藏产品信息组

* 隐藏掉 仅竖屏使用的资产图层，如产品信息组
* 搭建横屏排版所需的资产，并设为"显示"（在此仅用背景图片作为示例，实际可根据自身需求添加所需布局元素）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0S3cfZV4l9AJFq8q0mUt%2Fimage.png?alt=media&amp;token=1e6bb02c-34e2-48e0-aab1-f1db9747ded6" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">三、特别说明:视频适配</mark>

因视频的尺寸是固定的，无法像图片一样通过拉伸去适配所有机型。因此在您使用视频制作时，可能会出现"视频在画面中占比过小影响试玩""视觉效果不美观"等问题，所以我们需要通过其他的方法来优化整体的排版与适配，以保证不同机型/横竖屏下的最佳视觉效果。

接下来，将为您详细介绍"竖版"/"方版"/"横版"这些不同尺寸视频的适配技巧，建议搭配[DEMO](https://tinyurl.com/45ddw6rv)食用效果更佳哦！

### <mark style="color:red;">1.竖版视频</mark>

#### 1）效果预览

| 竖屏iPhone                                                                                                                                                                                                                                                  | 竖屏Android                                                                                                                                                                                                                                                 | 竖屏iPad                                                                                                                                                                                                                                                    | 横屏iPhone                                                                                                                                                                                                                                                  | 横屏Android                                                                                                                                                                                                                                                 | 横屏iPad                                                                                                                                                                                                                                                    |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FZnA9u8HHutxEOyLxziVE%2Fimage.png?alt=media&amp;token=4f571537-7b0c-43e3-80cb-036b469d6b93" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FAG0ESwDWfLWK8PjsvSLQ%2Fimage.png?alt=media&amp;token=70e04d11-7a11-4276-8c73-7459793bd1e5" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FKzEEedrwjT6UXiUld3XP%2Fimage.png?alt=media&amp;token=2fc4844e-bac1-442b-905f-a13099b36c3f" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTCSlqyCi0cMMeKcwDkFR%2Fimage.png?alt=media&amp;token=219fbd37-384b-42f4-8c28-28e0b1351caa" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FKPstKcytB7IXhQoGBTxt%2Fimage.png?alt=media&amp;token=79e06848-9899-4ea8-8bb9-11e944bedcb3" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fb6hNIA08SX8BMXkGSffq%2Fimage.png?alt=media&amp;token=190fb5a0-8ad0-48a6-a011-a6d543f66d86" alt="" data-size="original"> |

#### 2）制作技巧 (参照DEMO场景1)

<mark style="background-color:yellow;">2-1）竖屏</mark>

* 导入竖版视频后，先将视频调整到合适的位置大小
* 建议宽度至少为750，铺满画布；高度调整到合适

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4lINk3c8LtYVproPZgQj%2Fimage.png?alt=media&amp;token=d5716df7-ace0-4536-81f2-eff2b5562400" alt=""><figcaption></figcaption></figure>

* 在视频高度小于1800不足以覆盖到所有机型时，我们可在视频的上下两端添加图片进行填充，这样在大尺寸机型下预览时，可以利用这些填充图片来弥补画面的留白
* 建议尽量使用与视频画面一致的图片，来保证衔接处的自然

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FwbjiEjqmkaZOpDKeBj5J%2Fimage.png?alt=media&amp;token=18b83d19-2f4b-4e21-b75e-31010f1cbebd" alt=""><figcaption></figcaption></figure>

* 添加常驻内容，如产品信息、下载按钮等，并调整位置，进行编组
* 将产品信息组放在画面内留白较多的位置进行填补，如放在画面最下方，然后调整其屏幕适配方式
* 可视情况再添加指引文本

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FboHXd2Nrc7Vi5E9UcdEu%2Fimage.png?alt=media&amp;token=48bb5bcd-8a48-4302-8978-dfaebeec894b" alt=""><figcaption></figcaption></figure>

<mark style="background-color:yellow;">2-2）横屏</mark>

完成竖屏的调整，我们还需切换至横屏模式进行微调（建议多使用"复制竖屏位置尺寸配置"功能）

* 在横屏状态下，可以看到视频的位置比较靠下，可以不需要下方的填充图片，所以我们选择将其"隐藏"
* 选中该填充图片，勾选右侧的"\[显示隐藏参数]横竖屏拆分"，然后隐藏即可

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFESIepZFvtIGHeLyp5mc%2Fimage.png?alt=media&amp;token=e1c35d8c-1c8a-4fbf-98c2-e8287b636c00" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxXsKbIt5kyrxamFa8SNx%2Fimage.png?alt=media&amp;token=416b9251-3c99-48df-88f9-c6aad8c5afd1" alt=""><figcaption></figcaption></figure>

* 位于上方的填充图片，我们可以重新调整其位置大小，让图片的宽度和视频的宽度一致，然后将图片拖出画布外，贴紧画布上方
* 可以多多使用[参考线](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/zuo-pin-yu-lan-qu/can-kao-xian.md)，便于图层快速对齐

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F5CaIv2Ve8dfZS6dFmuRp%2Fimage.png?alt=media&amp;token=b31c5081-6852-4f0c-b0f4-d37a293d2747" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;">2.方形视频</mark>

#### 1）效果预览

| 竖屏iPhone                                                                                                                                                                                                                                                  | 竖屏Android                                                                                                                                                                                                                                                 | 竖屏iPad                                                                                                                                                                                                                                                    | 横屏iPhone                                                                                                                                                                                                                                                  | 横屏Android                                                                                                                                                                                                                                                 | 横屏iPad                                                                                                                                                                                                                                                    |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FXc1qDs8vXy0UhhJMGqnj%2Fimage.png?alt=media&amp;token=d38c51b2-cb8e-41a3-9a92-578d32d48f8b" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGnea06wl1BGc7G1GIhsd%2Fimage.png?alt=media&amp;token=dc17c517-18df-4a27-90f0-e5c06b9cfa18" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4H04RBjiH2iHPe7Gyuk3%2Fimage.png?alt=media&amp;token=c939c7f8-149d-49ff-8859-1a6e99577e1f" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F2MtleBmP76qxEfAT3d1J%2Fimage.png?alt=media&amp;token=3019a422-0322-4db5-b1c2-94a48a12e748" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTQr9ZfRyAQCVuqDAPfuI%2Fimage.png?alt=media&amp;token=d71f6678-ef8f-4c11-9378-c218c5ecf876" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlvPbB73t8IChHqsbASxQ%2Fimage.png?alt=media&amp;token=67af66e1-3d91-465a-bbf5-5afcc9a98862" alt="" data-size="original"> |

#### 2）制作技巧 (参照DEMO场景2)

<mark style="background-color:yellow;">2-1）竖屏</mark>

* 同样，导入方形视频后，先将视频调整到合适的位置大小
* 建议宽度至少为750，铺满画布

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDje848BJWv8BKqt9B638%2Fimage.png?alt=media&amp;token=f884b3dd-4cfd-4940-9da2-3ec2b2ad0f1f" alt=""><figcaption></figcaption></figure>

* 可以看出，此时的画布留白较多，看起来很空，所以需要我们添加一些内容来丰富画面
* 同样地，可以添加产品信息，并将其设置为贴底适配；然后在产品信息之上添加指引文本
* 还可以将视频内的部分元素分离出来，改在自由编辑器内单独制作。如本案例中的金额面板，可以单独添加在画面上方

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJuGaEjTy87ks45axUt5x%2Fimage.png?alt=media&amp;token=c52a9174-385f-43db-b0f1-88a2228ac908" alt=""><figcaption></figcaption></figure>

* 设置好"画布内"的内容，我们再导入图片对"画布外"也就是视频的左右两侧进行填充
* 调整图片的位置大小，让图片宽度和视频的宽度一致，然后将图片拖出画布外，贴紧画布的左右

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FR6SSK4d6vv8StJNCFf7Q%2Fimage.png?alt=media&amp;token=a291d6df-ca10-4e71-8df2-5d2656e0be5b" alt=""><figcaption></figcaption></figure>

<mark style="background-color:yellow;">2-2）横屏</mark>

同样，完成竖屏的调整，我们还需切换至横屏模式进行微调（建议多使用"复制竖屏位置尺寸配置"功能）

* 由于金额面板比较长，不适用于横屏排版，所以我们在横屏下单独添加一张方形的面板图片
* 然后选中方形面板图片，勾选右侧的"\[显示隐藏参数]横竖屏拆分"，将竖屏下的状态设为"隐藏"；同样的方法，将矩形面板图片在横屏状态下设为"隐藏"
* 视排版情况，也可将下载按钮在横屏状态下设为"隐藏"

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlpYZWZ998jU9N04UZVWe%2Fimage.png?alt=media&amp;token=8893756d-c8af-4db1-a434-ba73dcf708a7" alt=""><figcaption></figcaption></figure></div>

* 然后仅需将左右两侧的填充图片分别移动到画布的上下方，贴紧画布即可
* 可以多多使用[参考线](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/zuo-pin-yu-lan-qu/can-kao-xian.md)，便于图层快速对齐

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F2xYKzlZK6bJrMD79cC5G%2Fimage.png?alt=media&amp;token=3100770c-4491-4fd0-84fc-e254a6ed8c9d" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;">3.横版视频</mark>

#### 1）效果预览

| 竖屏iPhone                                                                                                                                                                                                                                                  | 竖屏Android                                                                                                                                                                                                                                                 | 竖屏iPad                                                                                                                                                                                                                                                    | 横屏iPhone                                                                                                                                                                                                                                                  | 横屏Android                                                                                                                                                                                                                                                 | 横屏iPad                                                                                                                                                                                                                                                    |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FRwBft4JC0QfizR3RNcv3%2Fimage.png?alt=media&amp;token=76fa927a-a459-48cc-a3ba-0d32d965c488" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Ft4mas7w4Mpfng5uj9O74%2Fimage.png?alt=media&amp;token=da85aa89-7fef-419c-8e0a-9c662d08f6d6" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGxQXcP3n81F4vN9ByT9F%2Fimage.png?alt=media&amp;token=72caf52f-f941-4b4a-a84b-18c287765436" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FHQGTDisbWXrvVY2Nnlz5%2Fimage.png?alt=media&amp;token=80329889-cb71-4d18-a83d-a67698d3cc5e" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FEVDg9S9YF584pSmoyPup%2Fimage.png?alt=media&amp;token=49d4f2d6-8dac-4f6b-97b3-8339f18dd54c" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F80Of9nzWOKLvndvt5Uy8%2Fimage.png?alt=media&amp;token=e8e12146-116b-4d91-bd93-1c66c4b41696" alt="" data-size="original"> |

#### 2）制作技巧 (参照DEMO场景3)

横版视频的适配方法和方形视频大体上是相同的

<mark style="background-color:yellow;">2-1）竖屏</mark>

* 导入横版视频后，先将视频调整到合适的位置大小
* 在本案例中，我们需要让核心视觉元素(老虎机)居中，所以视频的位置会比较靠左

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBuA21lV2wXGc0FTUUFqs%2Fimage.png?alt=media&amp;token=fdfae657-a1af-4500-8168-c500cce9f6a8" alt=""><figcaption></figcaption></figure>

* 和方形视频的排版与适配相同，我们依次添加产品信息、指引文本、金额面板以及左右两侧的填充图片
* 将各资产调整到合适的位置大小，并合理排序、编组
* 若画布中的部分内容也需要遮挡，可将图片移入画布内

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FI4fjzp4QJ61mW5zpqAnb%2Fimage.png?alt=media&amp;token=e8672bf8-496f-40b7-aacb-a5757bfc5d66" alt=""><figcaption></figcaption></figure>

<mark style="background-color:yellow;">2-2）横屏</mark>

同样，完成竖屏的调整，我们还需切换至横屏模式进行微调

* 由于视频本身是横版的，在横屏状态下，主要将视频调整到合适的位置大小就可以，尽量铺满画布
* 其他在竖屏状态下添加的内容可以视情况进行隐藏

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFdLgJaSOVyPJCvgMQrUp%2Fimage.png?alt=media&amp;token=ed6680bd-5740-48f3-b1ae-220e7e5a5917" alt=""><figcaption></figcaption></figure>

总之，在使用视频制作时，我们应尽量让画面的排版看起来协调、美观。当留白过多时，记得适当添加一些元素来丰富画面；当视频尺寸覆盖不到画布以外的区域时，也记得使用图片进行填充，以保证更佳的视觉效果！

### <mark style="color:orange;">4.视频适配-特殊需求</mark>

**用视频资源制作素材，有些图片的层级想在视频之上，有些在视频之下，怎么处理？**

一般资产的层级默认都在视频之上，且不可调整，仅【全局设置】中的背景图片和背景颜色的层级能够置于视频之下。因此：

* **想要视频层级在下：**&#x5728;普通场景或全局场景中，直接上传其他资产即可
* **想要视频层级在上：**&#x2460;在【全局设置】上传背景图片或背景颜色； ②若图片不是作为背景，可先在本地将该图片进行裁剪镂空处理，预留出视频的位置，再导入自由编辑器，将视频放置于镂空处