https://img.zcool.cn/community/015e3d620b745511013e8cd0babb6e.jpg

在平面设计中，背景有点像墙漆或壁纸……

把它弄对，你就有了一个很好的背景，融入并衬托出一个有吸引力的空间；如果做错了，你就会看到一个刺眼的东西，它会分散你对房间里精心挑选的家具和艺术品的注意力。
虽然你的网站、宣传单或社交媒体图像的背景可能看起来是一个相对次要的细节，但你不希望它等同于油漆工作出错或选择了杂乱狂野的壁纸，让受众无法专注于其他任何事物。
因此，让我们来看看一些灵感，并了解一些可以用来在设计项目中充分利用背景的技巧。虽然基本白色或纯色没有任何问题，但在这篇文章中，我们将专门研究如何为背景添加一些透明度，透明度是一种有用的多功能工具。

01.简化繁杂图形背景

一个有插图或图案的背景可以为设计增加很多个性。但它也有可能使它太繁杂或使文本难以看到。解决方案是什么？在图片上面叠加第二个半透明背景。
在下面这张图里，活动海报以美丽的复古风格插图为背景。但是如果没有透明的白色版面，背景可能会淹没设计的其他部分，并且文本（尤其是较小尺寸的部分）将难以阅读——如果不是不可能的话。请注意，白色部分的不透明程度足以缓和插图的一些细节，但又足够透明，可以让一些纹理显示出来。大多数设计软件允许你使用不透明度设置来调整透明度级别，通常范围在 0%（完全透明）和 100%（完全不透明）之间。

https://img.zcool.cn/community/01fd2c620b745511013f01cd6bc6ec.jpg

再举一个例子，这些明信片上的圆形背景隐藏了下面细节的风景摄影的一部分，为字体排版提供了一个简单、多彩的背景。这将我们带到了下一个技巧......

https://img.zcool.cn/community/01ecba620b745611013f01cdc9f128.jpg

02.使文本更清晰可见

该报告的特点是一系列相互叠在一起的透明形状，以创建文本的背景（否则，在后面的细节黑白照片上就不会看到文本的背景）。红色背景形状的透明度从浅到深也产生了有趣的视觉效果。

https://img.zcool.cn/community/0163fd620b745611013e8cd0ae4f8c.jpg

另一个例子，以下网页上的透明白色背景保证了在相当暗的照片上放置让人易读的黑色文本。

https://img.zcool.cn/community/01111f620b745611013e8cd09927f3.jpg

但这种技巧也适用于反向配色方案：彩色照片、深色透明背景和白色文本。

https://img.zcool.cn/community/010194620b745611013f01cda8e08d.jpg

03.创建干净、通透些的外观

当你能看到设计的各个部分，它可以给布局一种简单和宽阔的感觉。例如，下面的网站设计有一系列若隐若现的背景形状，当与干净的字体和整洁的布局搭配时，有助于实现极简风格。

https://img.zcool.cn/community/017725620b745711013e8cd0234b66.jpg

https://img.zcool.cn/community/01b687620b745711013e8cd0da11fe.jpg

这个系列的目录封面以一种不同的方式实现基本的简单，透明的背景，纯原色作为缩减布局的一大部分，只有一张照片和几段文字。

https://img.zcool.cn/community/0177f3620b745711013f01cdfb7bff.jpg

04.创建受众视觉焦点

透明背景不需要覆盖整个设计，甚至不需要形成一个实体形状。在透明度方面很容易产生创意——你可以创造出镂空或窗口让受众透过来观看，或者调整透明度不同程度来吸引人们关注(或模糊)设计的某些部分。

在这里，剧院海报结合了彩色透明背景和裁剪的字母形状，创造了有效的焦点，帮助受众集中在每个海报的主要人物。

https://img.zcool.cn/community/01527f620b745711013f01cd367bd3.jpg

在这个设计中，背景中透明的三角形的方向和位置，引导受众眼睛注视作为视觉焦点的女人的脸。

https://img.zcool.cn/community/01ab1c620b745811013e8cd039b5c7.jpg

05.展示背后的物品

对于任何涉及包装、容器、封面或任何其他形式的外壳的设计项目，透明可以是一个揭示里面或下面的东西很好的方式，让产品自己销售。

下面的杂志设计将其标题排版置于完全透明的背景上。这为封面提供了一些额外的光泽和良好的触觉感，增强了下面的照片的视觉效果。

https://img.zcool.cn/community/016fb7620b745811013e8cd0d0473e.jpg

正如接下来的两个示例所示，透明背景对于食品包装尤其有效。首先，这些简单的“豆袋”展示了里面的产品的颜色和形状：

https://img.zcool.cn/community/01d379620b745811013f01cd9ad2bf.jpg

这个简单的袋子是为café设计的，名为Voyageur du Temps（法语中“时间旅行者”的意思），它并没有把里面美味的烘焙食品隐藏起来，而是利用半透明包装材料，不仅可以让其食品可见，而且通过添加一些品牌信息以及与时间旅行主题相关的复古天文地图图案，以增加一些额外的视觉兴趣。

https://img.zcool.cn/community/011a00620b745811013f01cd52cf2f.jpg

06.创建层次感

使用透明背景的好处之一是，你可以将多个背景或透明背景与其他设计元素堆叠在一起，通过分层不同的颜色、照片或形状，来赋予布局深度和/或创建有趣的视觉效果。

这一系列的活动海报在远处的背景中通过透明的方式，将肖像和象征意象并置在一起，但在一些文字后面也增加了透明的背景形状。这种颜色和设计元素的分层产生了一个动态的、高对比度的整体效果，并为布局增加了一些很好的深度。

https://img.zcool.cn/community/012ec4620b745811013e8cd08c8492.jpg

作为另一个分层的例子，这些设计结合了摄影、透明色块和图形图案。

https://img.zcool.cn/community/010480620b745911013f01cd7401d3.jpg

07.透视出纹理

作为我们第一项技巧的另一面，透明背景可以掩盖分散注意力的细节，或者使用稍微不同的方式，让有趣的纹理为设计增加一些视觉兴趣。

下面是一个服装零售商的横幅广告，其特点是在透明的背景中通过裁剪来显示格子织物图案，从而形成主要字体。但是纹理也通过背景隐约可见，给整个设计一个有凝聚力的外观。

https://img.zcool.cn/community/018bfd620b745911013f01cd945b2d.jpg

下一个示例涉及到我们之前提到的一些技巧，包括使文本更可见和分层。但是背景中透明的绿色圆圈也使后面照片的一些有趣的纹理细节在两图重叠时显现出来。

https://img.zcool.cn/community/01e594620b745911013e8cd0c90c54.jpg

08.渐变添加柔和色彩

透明度在为设计添加颜色方面也提供了很多可能性。与纯色背景相比，当你追求不那么醒目亮眼的色彩时，透明背景看起来更柔和、更微妙。

这个设计以柔和、透明的粉彩色为特色，在照片顶部创建一个文字空间。背景不是实心形状，而是渐变色，随着页面向下的不透明度逐渐降低，最终逐渐变淡至消失，使底部图像完全清晰。透明度和渐变搭配得特别好。

https://img.zcool.cn/community/01d708620b745911013f01cdc6b8dd.jpg

这是移动应用程序设计中应用透明渐变的另一个示例。这一次，渐变涉及颜色强度、浓淡深浅和透明度的变化，以使文本的彩色背景更有活力，但仍然带些柔和感。

https://img.zcool.cn/community/01e1a4620b745911013f01cd41fcc2.jpg

09.创意混合效果

许多设计程序提供混合图案或工具，允许你创造性地混合和图层颜色，照片，或其他元素，以使用透明度和其他设置创建各种视觉效果。这种方法通常结合了一些其他技术，如分层、纹理处理和使用摄影。

这个设计的特点是一个分层的背景组成的数字拼贴老照片，上面有手写体的纸张纹理，墨渍和微妙的色块组成，营造出活泼、复古风格的构图。这么多设计元素的组合很是有趣而不是压倒性的，这在很大程度上归因于不同程度的透明度，帮助所有的碎片融合成一个和谐的整体。

下面设计中的背景主要关注颜色如何相互融合和相互作用。这种类型的颜色混合是这种效果的一种流行用法。

https://img.zcool.cn/community/01bf8b620b745a11013f01cd7ac2a1.jpg

10.强化品牌宣传

在你的设计项目中，背景并不一定是事后才想到的。事实上，你可以将它们用作另一种方式，通过品牌颜色或其他可识别的视觉效果来彰显公司的形象或风格。
例如，这个为谷歌年度报告设想新设计的概念项目，使用透明背景形状整合了该品牌标志性的鲜艳色彩。

https://img.zcool.cn/community/0166f7620b745a11013f01cd155726.jpg

下面的网站设计采用了类似的方法，从公司的标识中提取颜色和几何形状来创建透明的背景和图形。

https://img.zcool.cn/community/010116620b745b11013e8cd0ae1c79.jpg

11.指出重点区域

透明背景，尤其是具有醒目色彩的透明背景，也可以形成以突出重要的文字或其他设计元素的背景。

该广告图形使用了透明的红色矩形块，与其他设计的黑白配色方案相比真正脱颖而出，并突出了正在促销的特价商品。

https://img.zcool.cn/community/016bf1620b745b11013e8cd0f50ca4.jpg

这个设计还使用了透明的红色长条形状（吸引眼球的常用颜色），有选择性地将人们的注意力吸引到网站的某些区域。

https://img.zcool.cn/community/015a17620b745c11013f01cd7543cd.jpg

12.巧妙创建构图

最后，一个更普遍的建议：要有创意！透明度和不透明度设置是非常通用的工具，可以在你的项目中创建各种有趣的效果，因此请尝试一下它们的功能；你可能会想出了一个独特的设计解决方案。

为了总结我们的展示，让我们来看几个使用透明背景作为创造性的、视觉上引人入胜的设计构图部分的例子。

首先，一个书的封面概念，用很少的东西传达很多事情。请注意，一个简单的透明蓝色矩形是如何代表海洋，并与标题排版相互作用，以暗示一个给人带来威胁感的鱼翅在水面上升起。

https://img.zcool.cn/community/01e22f620b745d11013e8cd034b339.jpg

接下来，这张经典电影音乐剧海报中的透明背景同时具有多种创作目的：它突出了电影中的标志性时刻；为白色标题排版提供背景；并象征着下雨，这暗指标题——所有这些与其他设计元素相结合，创造出一个巧妙、紧凑的构图。

https://img.zcool.cn/community/010142620b745d11013f01cd025112.jpg

继续电影主题，一些电影节海报设计。这些设计具有透明圆圈，可为背景增添一抹亮色。然而，它们也用对比色突出了两个对立图像之间的差异，同时将他们统一为一个共同的形状。

https://img.zcool.cn/community/01da7e620b745e11013e8cd0730ef7.jpg

https://img.zcool.cn/community/01fc22620b745e11013f01cd454b6f.jpg

https://img.zcool.cn/community/016d1d620b745e11013f01cd7104f3.jpg

受到启发了吗？我们希望这个设计展示能帮助你看到透明背景为你的设计项目提供的潜力。从颜色到构图，它们可以被证明是你设计工具箱中触手可得的有用解决方案。