渐变质感技法：制作阶梯渐变抽象纸艺图案

迈不过友情╰ 2023-02-09 14:06 7阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div style="margin-left:0px;">
      阶梯渐变是以纯色作为填色的方式来进行阶梯状的递增或者递减表现形态，这组纯色一般来说是在一个小范围的色域内进行过度，通常是邻近色系之间的过度。 
    </div> 
    <div style="margin-left:0px;">
      这一次我们就通过制作一个纸艺图案的造型来讲解阶梯渐变，除了感受渐变以外，纸艺图案的造型最重要是找到图层间的重叠关系。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" height="405" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDIyMGQzaTRnM2lvcDhlZXBoOG8ucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png" width="720"> 
    </div> 
    <div style="margin-left:0px;"> 
     <strong>一、制作渐变色板</strong> 
    </div> 
    <div style="margin-left:0px;">
      邻近色的过度也可以从三个色彩属性上进行对比：色相、饱和度、明度。由于是纯色填色，因此每个色彩之间就要通过色彩间的关系来表现渐变感，最重要是一个变化的感觉。 
    </div> 
    <div style="margin-left:0px;">
       
    </div> 
    <div style="margin-left:0px;">
      我最喜欢用的还是用AI来制作这类渐变的配色色板，当然纸艺造型要表现的色彩间的关系，也需要在色板中表现出来，因此这时的配色色板制作要稍微复杂一点。 
    </div> 
    <div style="margin-left:0px;">
       
    </div> 
    <div style="margin-left:0px;">
      STEP 01 
    </div> 
    <div style="margin-left:0px;">
      打开AI，在新建文档中绘制一个圆形，然后给这个圆形填充浅紫色#b6c9fc，以这个颜色作为基础来进行创作。然后复制5个圆。单击圆形右键，进入移动工具， 
    </div> 
    <div style="margin-left:0px;">
      垂直：0 
    </div> 
    <div style="margin-left:0px;">
      水平：150px 
    </div> 
    <div style="margin-left:0px;">
       
    </div> 
    <div style="margin-left:0px;">
      然后单击复制。这时出现第2个圆，然后依次利用CTRL+D重复上一步的操作。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDMzMm9qZmR6YWJhamFhaXFxamEucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> 
    <div style="margin-left:0px;">
      ### STEP 02 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      将最末尾的圆的色彩填充为#3c5fef，然后进入编辑颜色&gt;前后混合，就能得到我们的色板。这时把这些这些圆形的色块靠拢，看看这样的效果是否合适（比如色彩之间如果间隔不明显，就要重新拉开色彩之间的差距，如果色彩差距太大，又会有显不出缓慢的变化，倒像是一种突变了）。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDQxNGRoOGh0Y2VqcGJlZ2hxZmIucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> 
    <div style="margin-left:0px;"> 
     <strong>二、绘制图案基础形</strong> 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      我们这次要绘制的纸艺造型，是一个抽象的图案。我建议大家可以先画草图，再开始进行绘制。 
    </div> 
    <div style="margin-left:0px;">
      在这里最终我们是在一个矩形的边框中创作，因此我们可以先把这个矩形画出来，然后放置在上方，作为边框存在，让我们看到矩形内的造型效果。 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <strong>STEP 03</strong> 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      在PS中通过钢笔工具进行绘制，大家可以用以前我们熟悉的普通的钢笔工具，还可以用到弯度钢笔工具。弯度钢笔工具少了控制杆，利用锚点彼此间的关系平衡，反而能容易得出非常平滑的弧度效果。 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      绘制过程中，首先要明确每一块形状与其他形状之间的重叠关系。因为我们要模拟纸张的重叠效果，那么最上层的也就是最大的这块形状，以此类推。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDQ1NHJvbDFqeWxyaWxqbDVseW0ucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDUxN3hjYndpN2p3dzVmY2E0OGMucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> 
    <div style="margin-left:0px;"> 
     <strong>STEP 04</strong> 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      每块形状画好以后，都要给形状增加蒙版，增加了蒙版才能看出和上一层之间的形状关系是否美观。图形的诀窍都是藏在细节里的。用硬边圆的画笔来隐藏彼此遮盖的细节。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDU1MXpoaDVueDFzbnVweDV1cmIucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <strong>三、上色、投影</strong> 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <strong>STEP 05</strong> 
    </div> 
    <div style="margin-left:0px;">
      利用我们之前在AI里做好的色板进行上色，分别从深至浅开始从中心往外围填色。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDYyM2FwZjJsdWRheDFwZGY1YmcucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <strong>STEP 06</strong> 
    </div> 
    <div style="margin-left:0px;">
      上色完成后，最关键的一步是制作投影，但是这里注意不要直接使用投影，而应该采用图层样式中的内阴影。 
    </div> 
    <div style="margin-left:0px;"> 
     <img alt="" src="https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDkzMnluOGVpbGFzNzMycDVvM2YucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png"> 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      到这一步大概的形状就完成了。 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <strong>四、增加细节</strong> 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;">
       游客，如果您要查看本帖隐藏内容请 
      <a href="http://bbs.itheima.com/forum.php?mod=post&amp;action=reply&amp;fid=405&amp;tid=437454" rel="nofollow">回复</a> 
     </div> 
    </div> &nbsp; 
    <div style="margin-left:0px;"> 
     <strong>四、结语</strong> 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      阶梯渐变的配色其实在很多领域都可以用得非常出彩，很多人对于颜色的困惑，可能大部分还是出在理论的诱导上。比如大家也许听过“红配绿”的谣言，但是真实的世界里也有很多可以搭配出的好看的例子和不好看的例子。 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      每一种图形都能带来一种视觉上的差异感受，所以即使是同样的配色用在不同的图形上，效果也是不同的。 
    </div> &nbsp; 
    <div style="margin-left:0px;">
      最终还需大家日渐深入在实践里去体会。颜色的本质是光，而光本身又是一个谜团。说真的，我们有限的科学认知只能走到这里而已。 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[图片12.png][12.png] *(321.42 KB, 下载次数: 2)*

![图片12.png][12.png 1]

[12.png]: http://bbs.itheima.com/forum.php?mod=attachment&aid=MjY2MzU1fDY2YWEyNjM5fDE1ODk4NTI5MTV8MHw0Mzc0NTQ%3D&nothumb=yes
[12.png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxOTAxLzAzLzE3NDc0MWJnMWc0MnJ0eDJ0Z3IxdDIucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png