《原创图案:设计及插图运用》

这次的主题是“设计原创图案”。

那么,什么是图案(Pattern)?图案就是具有重复性的排列图案。

在艺术界中,我相信你也一定听说过至少一位以图案闻名的艺术家,例如古斯塔夫·克林姆(Gustav Klimt)、安迪·沃霍尔(Andy Warhol)和草间弥生(Kusama Yayoi)等。但其实,我们也能在日常生活中,从瓷砖、墙纸、衣服、床单等物品上常常看到图案的存在——图案设计并没有离我们很远!

这篇文章分为三个部分。首先,我将会简单介绍一些构成图案的美术元素;然后说明以Clip Studio Paint 来绘制原创图案的步骤;最后会讲解如何将图案运用到插图里面。欢迎善用目录功能来阅览这三个部分。

让我们开始吧!

1️⃣【第一部分:图案的美术密码】

I. 构成图案的图形

🟠偏向简约形状:

例如线条、几何形状(三角形、正方形、圆形等),甚至是抽象图案。

在绘制时可以组合不同的形状,不一定只使用一种。

🏀偏向实物形状:

能辨认出实体的形状,例如花叶植物、动物、食物、心形、星形等。

⚖️介乎于上述两者中间:

当然,也有一些非常简约的卡通图案让人不知道要如何分类。

但我想指出的是,上述两者都只是一个“偏向”而非割裂的分组。使用极简风格来绘画实物,在强调形状的同时又能看出是某种物件,也是一种方案。

II. 艺术风格

在艺术风格方面,⚠️写实类风格(接近照片等级的图像)会比较少见;

常见的通常是✅经过艺术风格化处理的图像。

所谓的艺术风格化,简单来说就是经过描绘的图像。常见的艺术风格例子包括:赛璐珞风格(动画卡通风格)、水彩风格、色铅笔或蜡笔风格等。

绘画时,⚠️注意不要使用过于强烈的光影效果。只加上能暗示物件结构的光影就足够了。

此外,您亦可以从不同的传统风格取经:除现代简约摩登风格和现代北欧风格外,还有东方风格、和风、中世纪风格、民俗风(例如印第安风格、阿拉伯风格、古埃及风格)等。

每种风格都有各自的艺术表现,例如摩登风格多数使用简约的图形;东方风格喜好使用红和金色;和风有许多悠久且冠名的花纹;民俗风多使用菱形及三角形的图形等。

由于篇幅有限,这里先不详细说明每种风格的设计特征。有兴趣的读者不妨花时间探索,找出自己喜欢的风格!

III. 图形重复及排列方式

这里指的分为图形的位置、大小、以及放置的角度共三方面。

而在这三方面中,又能分成规则性及不规则性两个面向。详情请看下图作参考:

另外,您亦可以决定图案之间是否要留有空间:

IV. 颜色

图案的颜色选择有很高的自由度,淡雅、鲜艳、浅色、深色等都很常见。

我会建议初学者刻意限制颜色数量。

如果您在绘制时未能决定的话,可以先使用单色调的黑白灰作开始,最后才一次性调整。除了【渐层对应】功能外,亦可利用Ver3.0后新增的【色彩参考】功能去改变颜色喔!

V. 设计图案(小结)

在了解了以上组成图案的可能方案后,现在就可以试着想象自己想创作什么风格的图案了!

首先,请询问自己以下问题:

图形形状:(有什么主题吗?例如甜品、花朵、树木之类。又或者只是简约形状?)

图形艺术风格:(希望使用手绘还是利落的色块绘画?有特定的地域风格吗?

图形排列方式:(规则或不规则的排列?若是规则的话,要怎样画才能得到平铺纹理?)

颜色:(彩色还是黑白?背景是否透明?)

得到大概答案后,就可以幻想图案的样子,再动手创建了。

例如:

图形形状:大小心形、菱形线条

图形艺术风格:像素风格,偏向平面

图形排列方式:规则排列

颜色:粉色系、柔和感觉

那么,对图案设计有初步概念后,我们来实际试试利用Clip Studio Paint来创作图案吧!

2️⃣【第二部分:使用Clip Studio Paint 来绘制原创图案】

🔧基本做法

1. 新建一个文件。

文件的大小可根据绘画内容及应用目的而决定。

唯一要求是宽度及长度都可以被2整除(※偶数)。

2. 开启栅格功能(①视图→栅格);

并②设定栅格的原点为中间、间隔为画布长边的数值。

分割数则没有一定。当然,如果您想使用栅格作量度之用的话,则可按照需求而设定。例如,如果希望在图案的长度逢¼处加入线条,则可设定分割数为“4”。

3. 于中心位置绘制图像,请注意:

① 绘画时不要接近边缘。

例外情况是如果您想设计只有横向重复的图案(即完成后会像是一条长长的带子),则绘制时可以填满上下方;唯左右方的边缘仍需被留空。

② 使用笔刷绘制时,如不需要贴紧栅格绘画,需关闭笔刷的“可以对齐”功能。

③ 绘画时可分开不同的图层(例如不同物件、背景颜色分开)。唯绘画完毕时需要合并图层。

④ 我会建议合并前把物件图像图层先复制一个出来作为备份。

💡TIPS

绘画时可以使用尺规辅助,例如对称尺规等,详情可看这篇官方教学。

另外,使用加工后的相片也是个不错的选择,此部分将于后面再作示范。

4. ①全选画面(快捷键:Ctrl+A)→

②右键图层并选择【图层转换】,转换成“图像素材图层”。

5. ①使用“物件”工具→②把图层移动至左下,并对齐物件边框的左上角至画布中心。

*可以把画面尽量放大来确定位置准确。

6. 于物件选择工具设定中,勾选“密铺”。

可根据喜好选择重复方法,请参考下图示范:

(下图只作示范用途,在此步骤请不要缩小图像)

7. 右键图层并选择【转换图层】→转换成“点阵图层”。

8. 在中心较空白位置填上图案。

*可以从步骤3中的图像备份图层中,复制粘贴过来。

9. 右键图层并选择【图层转换】,转换成“图像素材图层”。

10. 使用物件选择工具,勾选“密铺”。

缩小物件后可检视图案样式,完成!

🔧相连图案的做法

在了解了基本做法后,我们来看看想绘制相连的图案的话,有什么需要注意的地方吧!

1. 绘画一个基本图像。

2. 复制及粘贴步骤1的图像。图像之间尽量相连。

3. 由于示范图中的不是一个正几何形状(Regular shape)或对称形状,所以需要人手调整。

4. 重复基本做法的步骤4至7。

5. 在中心空白位置继续使用基本图像填满,然后再次调整形状。

请尽量连接各个图像。

(*下图以蓝色标示在此步骤绘画的图像)

6. 重复基本做法的步骤9至10。完成!

🔧重叠图案的做法

那么,重叠的图案又该如何建立呢?以下我会示范波纹/鳞片形的图案:

1. 利用栅格,画出正确大小的形状。

在示范图中,画布长度被分成八格。所以中间的圆形直径为四格;而两侧的圆形是同样大小,且圆心在画布边缘。

如果希望绘画椭圆形或其他形状作基本图形,则要注意其水平及垂直两边的直径都应该要能被画布的两边长度整除。画布可以是长方形而非正方形的。

可以依照个人喜好加入边框等装饰,注意边框需描绘于圆形内侧。

视乎您的设计如何,如果鳞片的颜色没有变化的话,只画上方一片鳞片、下方左右各半片鳞片,也能获得一样的图案。

2. 使用对齐功能,使图像位于画布中心位置。

3. 重复基本做法的步骤4至7。

4. 将图层转换回点阵图层后,剪下下半部分的半圆,并粘贴到新图层。

5. 把原本的图层移至上下方图形图层和上方图形图层之间。

6. 把原本的图层转换成“图像素材图层”。密铺方向为“左右”。

移动物件图层,其左上角位置至画布左上¼处。

7. 复制物件图层,并置于倒数第二层底的位置。

移动其右下角位置至画布右下¼处。

8. 选取所有图层并合并。

9. 重复基本做法的步骤9至10。完成!

🔧使用照片加工成图案的做法

除了手绘图案外,您亦可以使用自己拍摄的照片来加工成图案!

1. 拍摄照片。我会建议拍摄物件时,尽量以纯色作为背景。

另外,同一物件可以以不同的角度拍摄,令图案有多一点变化。

2. 开启照片,并作出色调调整。目的在于令图像色调更加明确。

下图分别示范了使用【编辑→色调补偿】中 ① “亮度、对比度”、②“色调曲线”、③“色阶”的不同方法去调整。您可以选择自己喜欢的方法去调整颜色。

3. 以【套索工具】先选择图像,反转选择范围,删除周围不需要的部分。

4. 以【自动选择工具】选择剩下的部分。有需要的话可以使用【扩大选择范围】来选取适当的范围,然后再删除。

5. 以【橡皮擦】人手修正边缘的部分。

6. 在得到清晰的草莓后,可以进一步调整图像,以达到满意的颜色及美术效果。

以下示范图利用了图层混合模式调整颜色、以及加入了外框。

您亦可以使用各种滤镜来获得不同效果。组合不同的调整方法,来获得属于自己的图像吧!

使用以上的图案,跟着基本做法的步骤,轻松创作图案!

🔧利用自定义笔刷的做法

利用笔刷,可以做到不规则图形重复及排列的图案!

有关自定义笔刷的详细设定,请参考这篇官方教学。

1. 选取绘有图像的图层,选择【编辑→登记素材→图像】。

勾选“作为笔刷前端形状使用”,并加入检索用标签。

2. 右键点选一个笔刷,复制辅助工具。

3. 点选笔刷设定,选择“笔刷前端”,点选素材选择位置。

4. 在选取窗口中输入搜索标签,把刚刚的图像都加进去。

5. 设定笔刷的数值,来达到随机图案的效果。以下列举了一些会影响图形随机的数值,数值设定则可依照个人喜好而定。

A.笔刷前端→方向→随机

B.散布效果→粒子尺寸→随机

C.散布效果→粒子的方向→随机

6. 使用笔刷并在画布直接涂抹,就能得到一个以不规则图形重复及排列的图案!

完成!

3️⃣【第三部分:将图案应用在插图中】

📁把图案登记成素材

虽然只把文件储存成clip文件也可以使用,但如果您希望把图案作为素材上传到云端方便取用,或者上传到Clip Studio Paint Asset分享给其他用户,请参考此部分的做法!

方法非常简单,直接用鼠标拖拉图层到素材库就可以了:

双击素材的图标,可以修改名称及加入检索标签等:

🖼️将图案加入成插图背景

图案于插图中最简单的用法,莫过于用于背景上!

🔧做法

直接从素材库,用鼠标拖拉图案文件到图层窗口中。

💡TIPS

由于图案在加进插图后,一般在视觉上会有令人眼花缭乱的感觉,所以可以为人物主体加上轮廓外框以凸出人物。

由于不能直接在图像素材图层上使用色调调整功能,所以如果需要修改图案颜色以切合插图需要的话,可以利用【色调补偿图层】。

🔧建立色调补偿图层——做法

1,2. 加入图案图层后,点击图层窗口左上角的图标。

3,4. 新建色调补偿图层。按需要选择调色方法。

5. 把色调补偿图层用下一图层剪裁。完成!

🧇将图案加入成插图纹理

除了背景之外,您亦可以把图案加入成插图纹理!

我推荐可以在一些色块范围较大,需要增加视觉信息量的插图使用这种做法。

另外,由于插图本来就已经上好色,所以推荐使用单色的图案,以免混乱插图主体。

🔧利用图层混合模式——做法

1. 加入图案图层,并设定成所需部分的剪裁图层。以示范图来说,就是剪裁到衣服的图层。

2. 设定图层混合模式,可根据需要调整图层不透明度。

💡TIPS

使用图层混合模式,可以保留原本插图已经处理好的光影。

不同的混合模式有不同的效果,详细可参考官方这篇示范或这篇示范。

请参考下图,这是本人对混合模式大概的分类。可以先从“希望图案比原本物件深色或是浅色?”开始,试用不同的模式看看哪种合意,然后再调整不透明度。

🌽将图案加入成为插图中物件的花纹①

如果希望图案不要过于平面,而是能贴合物件的表面,请参考这部分的做法!

🔧做法

1. 加入图案后,可先决定图层混合模式及不透明度等设定,还有图案的大小及角度,以预览成品。

2. 如果您的图案连接画布边缘的话,需要新建一个文件,大小比原本的画布大少许。

3. 把图案图层复制及粘贴至新文件。

4. 点阵图像化图案图层。然后复制及粘贴至原本的画布。

💡TIPS

如果图案不会碰到画布边缘,则直接点阵图像化图案图层即可,不需要另建新文件。

扩大画布的用意在于,预留更大面积的图案作变形之用。不然的话,如果图案需要向内屈曲,边缘位置的图案将会断裂。

5. 选择多余的图案部分删除。(可能需要略为移动图案以删除到画布外面的部分)

6. 使用【网格变形】功能来使图像变形。变形方向需要贴合物件的表面,下图则画上辅助线以助说明。

【网格变形做法】

① 编辑→变形→网格变形

② 在工具属性窗口中,可以调整网格数量。

③ 设定成“移动平面”。

④ 根据物件的表面扭曲图案。

7. 利用【剪裁蒙版】和【图层蒙版】来擦掉不需要的部分。完成!

🌽将图案加入成为插图中物件的花纹②

在某些时候,我们需要把图案断开,以切合物件的表面,这情况在衣服的表示上尤其常见。

判定的标准在于,“该物品是否有一部分不能被看见?”

如果有的话,则粘贴图案时需要留意其断面,以下将示范有断面的图案要怎样加入。

在开始之前,先来分析一下示范图中领口的结构:

① 正面能看见的面总共有6面。

② #3和#4的图案最好能让人看到有连接,因为这两面之间被折叠的部分不多。相反,其他面例如1和2之间就可以不需要有连接,因为这两面之间被折叠的部分相当多。

③ 除此之外,#1至#4面是大约向着画面左方;而#5及#6则是向着右方的,加起来就是两个大方向。所以我们需要两个图案图层作【自由变形】:编辑→变形→自由变形或快捷键:【Ctrl+Shift+T】,先把图案变形成为大约的方向。

(*事实上#5的方向是介乎两者之间,这步骤是先作个大方向的变形,之后再微调。)

④ 在完成变形后,需要再复制已变形的图案。#2、#4可以共用一块;#1、#3可以共用一块。

由于这个图案中草莓之间留有空间,所以在处理时集中留意草莓就可以了。

首先,我推荐使用【折线选择】工具,跟着衣服的折边来选取范围。

1. 在第一个图案图层中,选取#3的面,然后擦掉。

2. 选择第二个图案图层(示范图中以蓝色展示),处理#3 和#4 中间的心形。由于#3在#4的上面,所以向上移动图层。

3. 擦掉多余的部分。

💡TIPS

刻意在折边加入断掉的图案,能轻松获得真实感效果。

如遇上边缘位置的图案时,有时候需要把画布尺寸扩大才比较容易处理。

此外,亦可以利用【液化】工具来微调图案。

【结语】

谢谢您读到这里!

在我个人而言,创作无缝图案的一大挑战在于:“到底心目中的图案是从哪里到哪里开始重复的?我应该要在一开始画些什么形状才能得到那种图案?”。

很遗憾,这个问题只能靠自己多观察及分析图案才能直觉回答。

这篇文章只能说明一些软件的使用功能,但是我相信作为入门,也是相当有用的。来享受图案设计的乐趣吧!

对于这篇文章,您觉得如何呢?

欢迎留言让我知道!希望这个教学对您有帮助。

如果对我的作品感兴趣,欢迎追踪我的SNS:

(中文):Facebook @hye.art

(英文):X (前Twitter) @hye_exc