ps技能培训自学教程|photoshop渐变工具可轻松制作出抽象渐变唯美柔和图片

社会上的ps基础技能培训班我没有去参加过，但在成都企业建站科技集团及高端网页设计工作室做设计主管和总监的那几年，面试过很多来自网页设计技能培训班的学生，他们的设计作品和个人作品集都包装得不错，个人简历也自信的写着精通各种时下流行的软件。不过我发现了一个现象，就是他们的作品整体上都是大同小异，表现手法也类似。这不得不让我思考一个问题，这些学校给设计师上了什么photoshop教程能整体上大幅度提升一些从未参加过美术学习学生的ps工具运用能力呢。原来，一款经典的设计作品，一张唯美富有创意的图片，只要熟练掌握ps中某一个或两个工具的运用就能做出超棒的效果来。今天破天荒跟大家分享photoshop中的渐变工具运用细节，我把它整理成一个ps自学教程供大家一步一步对照操作，只要你爱学习，只要你经常关注创新互联自媒体推广部每天发布的技能文章，相信你也能轻松设计制作出抽象渐变的作品！

成都创新互联专注于广灵企业网站建设,自适应网站建设,商城网站定制开发。广灵网站建设公司,为广灵等地区提供建站服务。全流程按需定制设计，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

-

抽象渐变工具

大家可能会觉得奇怪，ps中工具那么多，为什么我们首推这个抽象渐变工具来讲。原因是这样的，2017年全年互联网企业建站

网页设计风格年终总结及2018年初新项目实战经验总结出今年的趋势，继扁平化火热后，为了让界面更加轻盈、灵动，国内外设计师都纷纷尝试着将渐变色融入到ui界面设计中，逐渐形成了今年ui视觉界面设计的一种趋势。所以我们自媒体推广部决定先从ps中渐变工具开始入手。

渐变工具操作非常简单，但不同级别的设计师用了同样的工具，效果却是相差甚远。或者说渐变里的模式选择会得到不同的结果。

这是一种平淡过的的渐变视觉效果。

当然，如果你要结合网页制作前端工艺能否实现的话，到这一步或许就可以了。

例如你要实现下面的这个渐变效果：

使用纯CSS3制作的平滑过渡的渐变背景颜色就可以。

A.HTML结构

第一种背景渐变效果的HTML结构如下：

B.CSS样式

所有的背景渐变效果的通用CSS代码如下：

.samples div {

 text-shadow: 0px 1px 0px rgb(204, 204, 204), 0px 2px 0px rgb(201, 201, 201), 0px 3px 0px rgb(187, 187, 187), 0px 4px 0px rgb(185, 185, 185), 0px 5px 0px rgb(170, 170, 170), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 20px 20px rgba(0, 0, 0, 0.15);

 color: #FFFFFF;

 font-family: 'League Gothic',Impact,sans-serif;

 letter-spacing: 0.02em;

 text-transform: uppercase;

 text-align: center;

 font-size: 2em;

 width:33%;

 height:300px;

 line-height:285px;

 float:left;

 margin:1px;

}          

第一种背景渐变效果的CSS代码如下：

.background-1 {

 background: #282537;

 background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);

 background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);

 background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);

 background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);

}

但这个做法不是我们今天要讲的，而且这是前端制作工艺方面的，跟ps没有直接关系。只是说，当设计师把这个渐变色调出来后，需要把渐变色的色值告诉前端工程师即可。

我们今天要重点讲的是制作出比这个平淡过去的渐变还要唯美柔和吸人眼球的做法。接着往下看！

-

光感柔和图片怎么用抽象渐变工具轻松制作出来

‍

要完成像下面那样的高逼格、超柔和唯美的抽象渐变图片，需要经过基础色填充、变形、调色、模糊和质感、画龙点睛五个大步骤实现。其中每个大步骤里需要细分一下小操作步骤。来吧，一起看看怎么做出来的。‍

一、设定渐变基础色

渐变一定和色彩有着密不可分的关系，所以色彩学是用好渐变的基础。当然，你也可以慢慢来，学习的过程就是次序成长。所以我们在本文中也会涉及到部分色彩学的内容。

第一步：

我们首先打开PS中的渐变工具，确定好渐变的基础色。之所以称其为基础色，是因为色彩在整个的创作过程中并不是一蹴而就，它是渐进式一步步接近最终效果的一个发展变化的过程。所以第一步设置的色彩，只能是一个基础。

在设置这些基础色的时候，我们要确定渐变基础色色标的数量。这个数量为2、3、4……都行，但是总体的渐变所覆盖的色彩的幅度不要太大，这里的幅度就是指在色轮上的色彩的范围。

上图中，距离180°的渐变色(下)就比距离90°的渐变色(上)来得更为复杂，但不是简单就一定好过复杂，大家要对即将要做出的渐变的色彩在色轮上的位置以及相互间的关系有个了解。这就比盲目尝试各种组合配色来得更为踏实。尽量在配色上保持某种协调性。

第二步：

根据确定好的配色方向，设定好配色，以及在渐变工具中它们之间的距离。在设定这些基础色时，除了在色相上对色彩进行安排，还应该考虑的是色彩的明度和饱和度，这两者都是能影响整体色调的感觉。通常在选择色彩时，起码要考虑加入进一个明度较高的色彩、一个饱和度较高的色彩，使整体的配色在明度和饱和度上都能体现出一定的变化对比，从而利用明度等属性来营造出光感。

将这几个色彩确定好了以后，就采用渐变工具拉出一个铺满整个画布的背景。这时，渐变的方式为线性渐变，当然你也可以采用其他的渐变形式，这将会改变你的整个抽象的基础形。

二、变形记

第三步：

液化工具是PS中一个非常好用且能直接改变图像外形的工具(听说很多爱美的小姑娘用它来美颜~)。我们在这里把这个工具看作一个变形工具。目前这个线性渐变所绘制的背景看上去相对比较平淡，运用液化工具就能将它改变成任意你希望的造型。

抽象的魅力就是没有目的和方向，任由你做到满意为止。这一过程也是我最喜欢的部分。平面设计中有很多这类即兴创作，是作为设计师最为享受的时刻。

进入【滤镜>液化】，在液化的工具面板中，首先记得勾选“固定边缘”，这可以确保你在使用各种变形的工具时不会改变你的背景边缘。

因为渐变的方向是直线或者放射性的，为了画面更加抽象和唯美，需要进行不规则渐变，这时我们就借助液化工具来变形一下。

第四步：

在进行液化工具时，我使用的小工具有左侧的“向前变形工具”、“褶皱工具”、“平滑工具”、……几乎左侧的工具箱中从上至下开始数的前7个小工具都能用上。这是一个即兴创作的过程，所以我就不再详述。每个工具的用途都不同，但它们都能改变你的图案外形。

操作习惯培养注意：

1)尽量保留你的渐变色中所设定的深色与亮色的对比，不要不小心把某一种色彩变“没”了，这样也失去了一开始设定渐变基础色的意义。

2)使用一个工具改变一次，可以就保存一次(也即是退出液化工具)，然后再进一步进入液化工具继续做出变化。否则有些时候由于显卡等各方面配置等原因会出现液化后的效果偏离在工具面板中的效果(比如莫名出现一些黑色的矩形)，这是很难预料的。所以做一次保存一次是比较保险的做法。

三、调色大师

如果对PS的调色工具只能想到对照片的优化，那就太局限了。接下来，对于目前的色彩仍然是有调色的必要。

第五步：

选中这一图层的基础上，为其增加一个“曲线”调整图层，曲线可以增加它的明暗对比，让对比显得更大或更小。

在使用调整工具时，不要想着一个工具就能直达效果，它往往只能是细微的改变，通过不断小小的微调，最终达到质的飞跃。(如果是直接调整原图的，我建议可以复制一个层，然后在复制层上进行调整，这样好不断和原图进行对比。或者像我一样采用调整图层。)

运用曲线工具，可以让画面中色泽对比更加明显，主次更加突出。

上图中运用了曲线后的图像明显去掉了一层“灰蒙”之感

第六步：

运用饱和度等色彩属性，为其增加“色相/饱和度”调整图层。进一步让色彩更为明晰透彻。

运用色相/饱和度微调画面

你当然也可以运用其他的调整图层，根据实际的需求对图片进行调色。我们这里就暂定再这个阶段。

四、模糊和质感

让我们继续为其增加质感，这时主要需要用到的就是模糊工具。模糊能将目前已经被处理得较尖锐化的部分变得柔和透亮。

第七步：

将以上步骤完成的合并为一个图层，然后在这个图层上运用高斯模糊。高斯模糊的半径为9，模糊的数值设置太大就会失去高光的存在感。

运用高斯模糊柔和一下画面

第八步：

这一步不是必要的步骤，前提是如果你在上一步中运用高斯模糊后将整个色彩变得比较“平”，也就是高光或阴影的色彩被抹平了的感觉，那么就可以采用复制一层的方法，然后将其进行比较大的高斯模糊的处理。

例如在这里我将这个复制层的高斯模糊参数设定为48。然后将复制层的混合模式改为正片叠底，透明度降低至23%。

再次运用高斯模糊柔和画面

当然，如果你是想要让图片的高光部分更亮，那么就将混合模式改为滤色、强光等加亮的混合模式。

第九步：

这时，我们要为这个背景图案增加一种颗粒感，颗粒感可以提升整体画面的质感。

也是将上面步骤的图层全部合并为一个图层，然后进入【滤镜>杂色>添加杂色】。可在面板中将数量设定为10，分布的方式为平均分布。

添加杂色

五、完成背景：画龙点睛

第十步：

这时，我们可以绘制一个匹配手机屏幕的背景外形，画好一个矩形，然后再将图案设置为这个矩形的剪切蒙版。

背景区域搞定

第十一步：

最后在这个已完成的背景上，再一次进行自由创作。我们可以在此绘制一个圆形，圆形填充为渐变。这个渐变可以和之前所用的渐变保持一致。

绘制一个渐变圆形

第十二步：

将渐变圆进行高斯模糊处理，模糊半径为28。然后将这个图层设置为下面图层的剪切蒙版。

模糊渐变圆形

第十三步：

为这个图层增加一个蒙版，在蒙版上使用黑白渐变。然后将图层混合模式改为“划分”，透明度降至45%。也可以根据情况挪动圆形的位置。

也可以复制再复制一层渐变圆形，然后重新安排它的位置和形状尺寸，让画面看起来更“丰富”。

最后的微调美化，这样做会增强光泽、荧光感和柔和度，看起来更细腻。

第十四步：

最后为其添加上文字，以下就是最终的效果。

大功告成！

-

小结

请保持耐心按照上面的步骤多尝试做几次，用不同色系来做做看，一定大有收获！创新互联自媒体推广部还会继续分享ps自学教程的，更多抽象渐变及唯美柔和图片处理技能将会陆续推出等你来哦。也希望掌握这个ps技能后多多运用到平面海报设计和网页海报设计项目当中，学以致用，加油！