复古漫画艺术:在网页设计中使用 Ben Day 点
已发表: 2019-07-12作为网页设计师,我们一直在寻找新的创意想法来添加到我们的网站。 值得庆幸的是,灵感并不难找到。 例如,复古漫画艺术总是卷土重来。 有时是排版,有时是照片过滤器。 最近,带有 Ben Day 圆点的纹理和插图出现在很多地方。 想亲自尝试一下吗?
在本文中,我们将解释 Ben Day 圆点的起源以及如何自己制作它们。 此外,我们还有一些关于如何在网页设计中使用这种视觉技术的例子。
Ben Day 圆点和半色调圆点
术语“Ben Day dots”和“复古漫画书艺术”往往可以互换使用。 实际上,Ben Day dots 是最先出现的。 本杰明·亨利·戴 (Benjamin Henry Day Jr.) 于 1879 年创建了它们,以降低彩色印刷的成本。 它们是一种在网格上放置等距点的技术。 印在白色上的红点变成粉红色,蓝色和黄色点变成绿色。
Ben Day 网点的灵感来自用于黑白平版印刷和照相印刷的半色调网点。 两种网点样式都排列在一个方格上,但半色调网点的大小不同,而 Ben Day 网点都相同。
Ben Day Dots、漫画书和 Roy Lichtenstein
在 1930 年代,漫画书大量出现,Ben Day dots 是首选的印刷技术。 Ben Day 圆点并不完全是一门艺术,直到 Roy Lichtenstein 在 1960 年代受到其通用独特性的启发。 正是罗伊·利希滕斯坦 (Roy Lichtenstein) 的漫画书艺术作品使本·戴 (Ben Day) 的点点成为众人瞩目的焦点。 利希滕斯坦所做的是复制低俗漫画书页的小部分,并将它们变成大规模的杰作。
尽管 Roy Lichtenstein 使用了类似于 Ben Day 点的点,但它们还是有些不同。 艺术史学家会告诉你,它们被称为“列支敦士登点”更合适。 主要区别在于 Ben Day 点很小且位于方形网格上,而 Lichtenstein 点位于偏移对角线网格上且相当大。

图片来源 Radu Bercan/shutterstock.com
复古漫画艺术的兴起
Roy Lichtenstein 的艺术已成为复古漫画艺术的代名词。 许多艺术家复制了列支敦士登的技术。 许多设计师在他们的创作中使用漫画书点来制作品牌计划和营销材料。 现在,您也可以将 Ben Day 点或 Lichtenstein 点添加到您的网站。
滚动浏览以了解如何制作自己的 Ben Day 点创作。 您将实现的最终设计实际上将涵盖各种技术; 半色调网点、Ben Day 网点和 Lichtenstein 网点。 总而言之,都是复古漫画风格的设计。
让我们开始吧。
如何使用 Photoshop 创建复古漫画书艺术
半色调点是如此常见,以至于 Photoshop 为它们提供了一个过滤器,它适用于任何图像。 这个过滤器的作用是将图像中的颜色变成点。 点的角度分布由颜色通道控制。 当您应用滤镜时,您的图像现在由青色、品红色、黄色和黑色点组成。 如果您将半色调滤镜应用于纯色,如红色 (#ff0000)、绿色 (#00ff00) 或蓝色 (#0000ff),则滤镜将不起作用,因为它没有可分离的颜色。
为了创建正确的 Ben Day 点和 Lichtenstein 点,您需要 Adobe Illustrator。 单击此处跳过。
如何使用 Photoshop 使照片看起来像半色调点的复古漫画书艺术
1. 选择你想要变成漫画书风格点的图像。
我从免费图片网站 Gratisography 中选择了这个看起来很有趣的家伙。 如果您想使用相同的图像,请单击此处。 在 Photoshop 中打开图像并将其居中放置在画布上。

2. 复制图层两次并隐藏第一个。
要复制,在选择第一层时,右键单击并选择“复制层”或在 Mac 上单击 Command+J,在 PC 上单击 Ctrl+J。 重命名它们,这样您就不会忘记每一个。 将顶层的混合选项调整为“强光”并将不透明度降低到 40% 左右。 颜色会发生巨大变化,这将有助于获得半色调点的颗粒感。

3. 将最上面的两层组合成一个智能对象。

4. 对智能对象应用半色调点过滤器。
在颜色半色调设置弹出窗口中,选择最大尺寸像素为 13,并选择不同程度的通道。 您可以使用这些来查看不同的效果。


5.复制底层并将其移动到顶部。
对其应用“查找边缘”过滤器并调整级别,以便更好地查看轮廓。 为此,请将黑色三角形向右移动,将白色三角形向左移动。



6. 使用调整将图层变成黑白。
将调整图层的不透明度设置为 30%。 最后,将“查找边缘”图层的分层选项设置为“叠加”。


完成的设计!

如何使用 Photoshop 创建复古漫画书艺术背景
1. 找一个有漂亮设计或渐变的颜色背景。
在 Photoshop 仪表板上打开图像并将其置于屏幕中央。

2. 解锁背景层,复制并隐藏最底层。
将半色调点过滤器应用于顶层。 调整半色调点过滤器弹出窗口中的参数以获得不同的效果

3. 成品设计!

如何使用 Illustrator 创建复古漫画书艺术背景
正如我之前提到的,半色调点具有不同的大小,以便在图像中重新创建对比度。 我们上面使用的 Photoshop 滤镜非常适合这种效果。 但是,如果您想创建相同大小的点,如 Ben-Day 点或 Lichtenstein 点,则需要使用 Adobe Illustrator 和集成的图案制作工具。 正如我上面提到的,Ben Day 点位于方形网格上,而 Lichtenstein 点位于偏移对角线网格上。 两者都可以通过 Illustrator 中的图案制作工具来实现。

如何使用 Illustrator 创建 Ben-Day 圆点图案
1. 在 Illustrator 上创建一个新项目。
大小真的不重要。 我们使用了 600 x 350 像素。

2. 选择圆角矩形工具。
在画板上单击一次并设置形状的大小。 使其为 15px x 15px,具有 7.5 牛角半径。 将圆圈的颜色更改为蓝色填充且没有描边。

3. 单击顶部菜单栏中的“对象”并选择“图案”,然后选择“制作”。

4. 调整首选项,使点位于方形网格上。
这些是您需要选择的首选项:
- 选择瓷砖类型到网格
- 检查大小瓷砖到艺术
- 将 H 间距和 V 间距设置为 15 px x 15 px
- 选择复印到 9 x 9
当您看到如下图所示的图案时,单击“完成”。 这将自动将图案保存到“色板”面板。

如何使用 Illustrator 创建 Lichtenstein 圆点图案
此模式遵循与上述相同的步骤,并且仅在需要调整模式生成器中的首选项时才会更改。 打开 Ben-Day 模式首选项,然后按“保存副本”。 将新图案命名为“Lichtenstein Dots”。 单击“确定”后,它将在色板面板上另存为副本。 关闭 Ben-Day 点图案。 返回“色板”面板,打开 Lichtenstein 圆点图案。 当您将鼠标悬停在它上面时,您将看到一个带有图案名称的弹出窗口。 在首选项中,仅将布局类型更改为“按行砌块”,然后单击“完成”。



如何将复古漫画书艺术图案添加到形状
现在您已经创建了自己的复古漫画书图案,您可以随时将它们应用到您想要的任何形状。 首先,您需要保存图案色板,以便您可以将它们添加到任何未来的项目中。
1. 在色板面板中,选择我们创建的两个新图案。
单击色板库图标并选择“保存色板”。 将新色板命名为“复古漫画书图案”,然后单击“确定”。

2. 当您创建一个新项目并想要使用这些图案时,请转到“色板”面板。
您不会在那里看到我们的新色板,因此您需要将它们导入。再次单击色板库图标并向下滚动到“用户定义”,然后是“复古漫画书图案”。 将打开一个新窗口,其中包含色板和包含漫画书图案的常规颜色。 现在它们可以用于您想要的任何形状。

3. 创建一个新形状并用其中一种图案填充它。
点的大小将取决于您创建的形状的大小。 形状的最大尺寸由画板的尺寸控制。
形状越小,点越大,反之亦然。 如果您使用小形状并觉得点太大,请右键单击形状内的图案并选择“变换”然后选择“缩放”。 要使点超小,请选择以下参数。
- 制服:10%
- 在选项中:检查变换模式
为 'uniform' 选项尝试不同的参数以获得不同大小的点。


4. 要创建具有复古漫画风格的星形,请创建一个 1000 像素 x 1000 像素的新项目。
在颜色面板中,单击黑色作为描边,单击 Lichtenstein 图案作为填充。 选择星形并单击画布使其出现。

在网页设计中使用复古漫画艺术的想法
漫画书艺术趋势似乎正在兴起。 当然,并非所有品牌都会从这种创意风格中受益。 对于有趣、热爱色彩的品牌,Ben Day 圆点和受 Lichtenstein 启发的图形非常适合呼吸新鲜空气。 漫画书点图案的最佳用途是作为背景,无论是在另一种颜色上还是没有其他颜色。 同样,尝试在您的内容中使用大气泡作为分隔符或漫画书风格的感叹号。 您可以使用上面的教程制作自己的教程,也可以从 Freepik 获取一些已经设计好的图像。



下面的设计是通过来自 Freepik 的漫画书设计实现的。 如您所见,设计师在设计点的大小方面采取了一些自由。 尽管如此,他们仍然以自己的方式完美地体现了复古漫画风格。


结论
如您所见,复古漫画书设计的可能性是多种多样的。 从经典款式到更现代的款式,您几乎可以做任何事情。 无论您是自己创建图案还是在线获取一些图形,您都可以使用复古漫画书艺术和 Divi 创建非常惊人的东西!
