Skip to content

背景、图案与渐变

在没有选中任何对象时,Background 面板用于设置当前部件的背景。同一区域还能构建装饰性覆盖层,以及一个多色标渐变,你可以把它应用到背景,或应用到任意对象的填充上。

快速概览

  1. 取消所有选中,然后打开 Background 标签页(Alt+3),或属性面板的 Background 区块。
  2. 为页面背景选择 solidgradientimage
  3. 打开 PatternsAlt+7),在画布上铺一层几何、文本、图标或图片图案。
  4. 打开 Gradient 卡片,或某个填充色板的渐变标签页,为背景或对象构建一个多色标渐变。
  5. 调整每项功能各自的颜色、不透明度和间距控件,直到效果满意。

详细参考

页面背景

模式说明
Solid单一的纯色
Gradient与对象填充所用相同的多色标渐变编辑器,见下文
Image上传或从媒体库选择,带适配模式,裁剪类适配还带一个位置锚点

图片背景的适配模式:

模式行为
Fill缩放图片以铺满画布,裁掉溢出的部分
Fit缩放图片使其完整放进画布,不裁剪
Crop从选定锚点填满画布:左上、上中、右上、居中、左下、下中或右下
Tile按图片的原始尺寸重复平铺

图片背景还带有亮度、对比度和饱和度滑块、一个模糊量、一个灰度/棕褐/反相预设,以及一个带独立不透明度的颜色叠加。

几何图案

十二种平铺图案会作为装饰图层覆盖在画布上:

图案
斜线、网格、圆点、菱形、波浪、星形、交叉排线、棋盘格、三角形、六边形、圆形、半渐隐
控件范围默认值
颜色任意颜色白色
不透明度5-100%30%
间距0.5x-5x1x
模糊0-20 px0

几何图案会作为单个锁定的覆盖层添加,铺满内容后方的整个页面。点击另一张图案卡片会替换当前的覆盖层,而不是叠加第二个,而颜色、不透明度和间距控件会在你拖动时实时重铺覆盖层。

平铺覆盖层

除了 12 种几何图案,Patterns 区块还能把文本、图标或图片平铺成一个重复的覆盖层:

类型平铺内容额外控件
文本图案一个重复的词或短语,任意字体行、列、间隙、角度、字间距
图标图案图标库中最多 8 个图标,单一、双色或混合模式每个图标的旋转、模糊和缩放
图片图案最多 8 张上传或库中的图片随机旋转、模糊、缩放和位置抖动,营造散布效果

这三种都共用颜色(在相关时)、不透明度、行数和列数、间隙以及旋转角度,且每一种都作为一个组合对象插入,可以移除后重新应用。每种类型还有自己的 Remove 按钮,重新应用会依据当前设置重建组合。

网格布局

另有一张独立的 Grid 卡片,用于构建一个占位的单元格网格,适合当作拼贴布局的起点,而不是一种纹理:

控件范围默认值
1-123
1-122
间隙0-40 px4 px
圆角半径0-50 px0
单元格不透明度0-100%100%

六个快捷预设覆盖了从 2x1 到 4x4 的常见布局。

渐变

页面背景和任意对象填充共用同一个多色标渐变编辑器:

控件选项
类型线性、径向、角度、菱形
色标2 个或更多,每个都有自己的位置、颜色和不透明度;沿轨道拖动,或增删色标
翻转反转色标顺序
旋转每次将渐变旋转 90 度
预设一组精选的现成配色对与三色组
取色器从屏幕上任意位置取色,在浏览器支持时可用

选中对象时,从填充色板的渐变标签页打开渐变编辑器;没有选中任何对象时,从 Background 面板的 Gradient 卡片打开。Background 面板的 Gradient 卡片是一个轻量控件:它显示实时预览外加 ApplyRemove 按钮,并镜像右侧面板取色器中当前载入的渐变。

分步操作

一个渐变海报背景

  1. 点击画布的空白处取消所有选中,然后打开 Background 标签页(Alt+3)。
  2. 打开 Gradient 卡片。它会显示一个实时预览,旁边是一个 Apply 按钮和一个 Remove 按钮。
  3. 在右侧面板取色器的渐变标签页里构建渐变:设置类型(线性、径向、角度或菱形),沿轨道拖动色标,并给每个色标各自的颜色和不透明度。用 Rotate 旋转线性渐变,或用 Flip 反转色标顺序。
  4. 回到 Gradient 卡片,点击 Apply。渐变会填充页面背景,卡片预览也随之更新。
  5. 想还原就点击 Remove(Apply 旁边的那个 X)。背景会回退到上一个纯色。

文本后方的淡淡图案

  1. 在没有选中任何对象时,打开 PatternsAlt+7)。
  2. 点击一张图案卡片,例如 DotsGrid。它会平铺到整个页面,作为一个锁定的覆盖层位于内容后方。
  3. Color 设得接近背景色,让纹理保持低调。
  4. Opacity 降到大约 10-20%,让文本和照片依然清晰可读。
  5. Spacing(0.5x 到 5x)收紧或放松平铺。点击另一张图案卡片会替换当前覆盖层,而不是叠加第二个。

一个重复的文本水印

  1. 打开 Background 标签页(Alt+3),找到 Text pattern 控件。
  2. 输入词或短语(默认是 BRAND),然后选一个字体字号字重
  3. 设置网格的、一个间隙,以及一个角度(默认倾斜为 -45 度,形成对角水印)。
  4. 设置颜色,并把不透明度调低(默认是 20%)。
  5. 点击 Apply。水印会作为一个可选中的组合插入,你可以移动或删除它,Remove 则会清除它。

一个散布的图片平铺

  1. Background 标签页里,打开 Image pattern 控件。
  2. Gallery 标签页添加最多 8 张图片,或把文件拖到 Upload 标签页。
  3. 设置平铺的尺寸间隙
  4. 开启 Randomize 让平铺散开:它会加入一个随机旋转(在选定范围内正负浮动)、一个随机模糊、一个最低到 0.5x 的随机缩放,以及位置抖动,让图片不再排在一个死板的网格上。
  5. 点击 Apply 把图案作为一个组合放入。Remove 会清除它。

常见任务

目标做法
纯色页面取消选中,打开 Background,选一个纯色
单个对象上的渐变填充选中对象,打开它填充色板的渐变标签页,在那里构建渐变
把某个渐变复用为页面背景在取色器里构建它,然后 Background > Gradient 卡片 > Apply
淡淡的品牌纹理Patterns,低不透明度,颜色接近背景,更宽的间距
对角水印文本图案,带倾斜角度和低不透明度
照片拼贴的起始网格Grid 卡片,设置列和行,然后把图片放进单元格

疑难解答

渐变出现色带

一个跨大面积的两色标宽渐变,可能会在颜色之间显出可见的台阶。加一个中间色标,或把两端颜色的色相拉近一些,让过渡更平滑。

图案让小尺寸设计显得杂乱

一个在原始尺寸下效果不错的平铺,一旦设计被缩小就可能变成一片噪点。调高 Spacing 让图案更大更疏,降低不透明度,或换一个更简单的图案(用圆点或斜线,而不是星形或六边形)。

我调高模糊后图案变淡了

几何图案的模糊控件是通过随着数值升高逐渐降低覆盖层的不透明度来柔化它,而不是加入真正的模糊。如果图案在消失,就把模糊调低,改为直接使用 Opacity 滑块。

编辑完渐变后再应用

Gradient 卡片反映的是右侧面板取色器中当前载入的渐变。如果某个改动没有显示在页面上,再点一次 Apply,把最新的色标推送到背景。

键盘快捷键

快捷键操作
Alt+3打开 Background 面板
Alt+7打开 Patterns 面板

提示

让图案的不透明度保持低

图案位于背景之上、内容之下。低不透明度和接近背景的颜色,能让它们不与文本和照片抢眼。

从预设开始做渐变

先选一个预设,再把它的色标颜色换成你自己的。这比一个色标一个色标地构建渐变要快,而且方向和色标数量已经很合理了。

相关

  • 形状,用于单个对象上的纯色和渐变填充
  • 图标,图标图案所用的图标集
  • 属性面板,用于对象填充和页面 Background 区块
  • 页面,因为每个页面都保留自己的背景