晋城网站的制作:如何用Divi创建不规则截面过渡

2019.05.25 晋城网站的制作

58

一个最好的方法,以提高您的网站的设计是通过使用不同的部分转换。在以前岗,我们已经向您展示了如何使用Divi内置选项来做到这一点。但是,如果您想要创建一些更高级或更个性化的内容,您也可以创建不规则形状的节转换。由于它们的复杂性,最好的方法是使用带有透明边框的图像。

在晋城网站的制作这篇文章中,我们将向你展示你如何做到这一点。我们不仅将向您展示在Divi Builder中应该做什么,而且还将向您展示如何使用Photoshop通过几个步骤在图像上创建这些透明的边框。

实例结果

让我们来看一个布局示例,它具有惊人的不规则形状的部分转换:

 

您可以注意到,您可以在整个站点和不同部分中使用这些透明边框。重要的是要记住,取决于您的透明边框有多大,您应该在各部分中有足够的位置来满足您想要共享的不同内容。它还将在各个部分之间创建一个很好的平衡。

如何用Divi创建不规则截面过渡

订阅我们的YOUTUBE频道

用Photoshop创建透明边界

你可以用Photoshop实现你想要的原始形状。你也可以选择一种叫做Gimpshop。在本教程中,我们将使用Photoshop。

开放Photoshop

从在您的计算机上打开Photoshop开始。

开放图像

一旦你这样做了,打开你想要处理的图像。

 

双击图像创建层

一旦你的图像上传到Photoshop中,双击图像层并为其创建一个新层(0层)。

 

添加另一层

要添加透明边框,您还需要另一层,所以继续单击我们在下面的打印屏幕中标记的图标来添加它。一旦创建了该层(第1层),确保它位于包含图像的层之上。

 

选择刷子和大小

在激活第一层时,继续单击画笔图标。

 

一旦你这样做了,你可以调整大小和模式,正在使用的刷子,以您自己的喜好。互联网上有很多免费的Photoshop刷子,所以根据你创建的网站类型,选择一个合适的。另外,确保透明度设置为100%。

 

开始在边界上使用刷子

一旦你把你的刷子就位,就开始在你想要透明的一侧使用它。确保你用你的刷子覆盖整个边界,这样它就会变得透明。

 

Ctrl(Windows)或Command(Mac)+选择新层

晋城网站的制作完成后,您可以在键盘上按CTRL(用于Windows)或命令(用于Mac),同时单击第一层。您将看到Photoshop将选择添加到该层的所有内容,在这种情况下,就是形状的边框。

 

使新层不可见

接下来,通过移除眼睛使第一层不可见,如下面的打印屏幕中所标记的那样。

 

选择图像&删除新层

然后,单击包含图像的图层,然后按下键盘上的删除按钮。一旦你这样做,你会看到边界将变得透明。

 

选择矩形选择工具&点击图像

单击矩形框工具,然后在图像上随机按下某个位置。

 

将图像保存为PNG

最后,您需要将图像保存为PNG,以便在您的网站上使用它。

 

向Divi添加背景

一旦你创建了你想要在你的Divi网站中使用的不同的图像(通过使用上面的Photoshop技术),其余的都是简单明了的。您创建的图像作为特定部分的背景。我们将只向您展示如何构建示例的英雄部分,因为同样的方法也适用于不同的部分。

增加新的标准部分

添加一个新页面,切换到VisualBuilder,并向该页面添加一个新的标准部分。

上传背景图像

一旦你把你想要出现在英雄部分的所有模块,你可以继续添加你已经创建的图像在这篇文章的前一部分。

 

添加背景色

一旦你这样做了,你可以决定什么颜色会出现在你的图像的透明部分。在本例中,我们使用了‘#DDDDDD’作为背景色。您可以立即看到,颜色将出现在图像的透明部分。

 

确保有足够的填充物

根据模块的数量和在英雄部分中使用的透明边框的大小,您可能需要添加一些自定义填充。玩不同的部分填充值,看看哪个给你最好的结果。

 

向下一节添加相同的背景色

为了确保不同的部分很好地融合在一起,使用相同的背景颜色,您已经在您的英雄部分在您的下一节以及。这不一定意味着您必须使用一个颜色背景颜色为您的下一个部分,您可以使用梯度背景,以及只要两个部分的颜色混合美丽。

正如前面提到的,您可以创建任意多的图像边框,并在整个网站中以创造性的方式使用它们。为了让您体验一下,我们创建了以下示例预览:

 

最后思想

在晋城网站的制作这篇文章中,我们向您展示了如何轻松地利用不规则形状的节转换。通过使用这种方法,您基本上可以创建您想要的任何类型的节转换。除了向您展示如何在Photoshop中使用几个步骤创建这些不规则形状之外,我们还向您展示了如何在DiviBuilder中使其工作。如果您有任何问题或建议,请确保在下面的评论部分留下评论!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP