图片素材这么用，作品设计颜值上升几个档次

在设计时，我们常常会用到一些图片素材，但是这些图片风格各异，有时放到画面中总是感觉不搭。

但如果换个方法来使用这些图片素材，不仅能让设计更出彩，颜值也会高不少，下面，数艺君教大家几个好用的技巧。

01

图片素材的使用

1.图片风格要与设计风格一致

设计的风格分为很多种。选择风格统一的图片进行设计，会让画面看起来更加统一。

我们先来看下图，画面中具备3个要素：桂花茶、猫、石榴。这张图看起来很凌乱，而且让人感觉比较低廉。若单独看每一张图片质量还是不错的，为什么组合起来就显得很乱呢？

图片风格举例

这是因为上面选用的3幅图片的风格不统一。设计的风格是清新、文艺的，但是图片的风格却是混乱不一的，因此应该选择都是淡雅色系的图片。

下面这张图将3幅图片调整为淡雅、文艺风格的，画面的“档次感”就提高了很多。

风格一致的画面

2.图片色调要与设计风格一致

除了画面风格要与设计风格保持一致以外，我们在选择图片的时候也要注意图片色调的一致。下面这两张图在风格一致的基础上都以黄色系为主，这样搭配在一起不会显得冲突。

色调统一举例

有些图片也会存在风格一致、但是色调不一致的情况。我们可以调整图片的色调，这种方法在制作画册的时候经常用到。

风格一致、色调不一致

调整色调，使色调保持一致

3.图片与色块的配合使用

有时候，有些图片的色调不是很明显，尤其是彩色图片，所以图片的风格无法统一。这时我们可以通过搭配色块的方法让图片的风格保持一致。

搭配色块让图片风格统一

当图片信息比较复杂、画面元素比较丰富的时候，我们也可以在画面上添加一些色块。这里的色块起到的作用与留白的作用是一样的，为画面营造透气感，让画面形成繁简之间的对比。

搭配色块增加留白

4.解决图片像素不够的问题

有时客户给的素材图会出现像素不够的问题。在设计时，细节不够丰富和画面不够细腻的图片是不能用来作为主图的。对于这类图片该如何处理呢？

如果图片的像素不够，我们可以通过拼合图片并搭配色块的方式，使用多张图片和多个色块构成一个面来作为主视觉图。但要注意，要保证所有的图片风格和色调是一致的，图片的亮度也要统一，不能有过亮或过暗的图片出现。

图片组合及色块构成主视觉图

5.置入画面的比例

很多新手设计师在使用图片的时候，总会迁就图片的原始状态。如果想让画面更有冲击力，想让人们一眼就能看到图片的主要信息，将图片进行放大，展示局部效果即可。不一定要将图片完整地展示出来，展示一部分的效果反而会更好。

完整展示素材

将素材放大只使用局部

通过上面两张图可以看到，只是对图片的置入比例进行了改变，但是画面呈现的视觉效果完全不一样。所以，在使用图片的时候，可以尝试将图片进行放大，展示局部的效果。

下面，数艺君用一个网站系列头图设计实例，来复盘一下图片素材的使用技巧。

02

网站系列头图设计实例

网站头图与Banner类似，也是放在网页上展示的图，不过网站系列头图一般是用来展示企业业务类型或网站功能的。这里将讲解网站系列头图的完整设计流程。

1.设计要求

客户来自一家设计公司，想要制作一套网站头图，在网站的轮播页面上展示。在风格的选择上，客户希望能够偏潮流、前沿一些，但是不要太另类。

客户信息：一家设计公司。

成品用途：官网首页轮播展示。

宣传重心：服务项目展示。

所需素材：全部服务项目文案。

设计要求：风格偏潮流、前沿一些，但是不要太另类。

尺寸：1920像素×550像素。

内容：客户给出的设计文案如下。

品牌设计：企业标志设计、企业形象设计、企业品牌管理、企业吉祥物设计。

画册设计：企业宣传画册、企业产品手册、企业员工手册、企业文化刊物。

平面设计：宣传海报设计、传单折页设计、办公识别设计、手绘包装设计。

微信平台开发宣传：微信平台建设、动态H5页面制作、企业微信搭建、微信公众平台托管。

客户案例。

2.分析与构思

根据客户的要求可以了解到，客户的主要诉求是体现画面的设计感，但是设计师必须要考虑设计风格的兼容性。

后期客户会在网站上展示自己设计的案例，这些案例的风格各异，如果风格差距太大，会导致整个页面很混乱。那么，解决页面混乱的最好方法就是留白，因此头图的风格应该以一种设计感强且画面相对简洁的方式呈现。

3.设计进行时

划分文案等级：

客户给的文案结构很清晰，文案层级的划分也比较简单。

品牌设计（大标题）：企业标志设计、企业形象设计、企业品牌管理、企业吉祥物设计（二级文字）。

画册设计（大标题）：企业宣传画册、企业产品手册、企业员工手册、企业文化刊物（二级文字）。

平面设计（大标题）：宣传海报设计、传单折页设计、办公识别设计、手绘包装设计（二级文字）。

微信平台开发宣传（大标题）：微信平台建设、动态H5页面制作、企业微信搭建、微信公众平台托管（二级文字）。

客户案例（大标题）

选择合适的风格：

通过前面的分析搜索一些参考素材。例如，以下几张当下比较流行的渐变风格的素材。这种风格比较符合客户的设计诉求，有设计感，新颖且不另类。

参考图1

参考图2

参考图3

观察前面3张图可以发现它们的一些共同点。在画面的表现方式上，使用了流体或球状结合渐变的方式，给人一种光影流动的感觉；在画面配色的选择上，以冷暖色的渐变为主，其中参考图1和参考图3的配色更符合本次的设计要求；

在画面元素的选择上，参考图1和参考图3都以圆球作为点缀元素。我们要在这3张参考图的基础上增加留白，以完成对网站风格兼容性的要求。

正确建立画布：

使用软件：Photoshop CC 2018。

尺寸：1920像素×550像素。

颜色模式：RGB。

分辨率：72ppi。

因为要对画面中的元素添加渐变等效果，所以在Photoshop中操作更方便。新建文档，对各参数进行设置。

设置网页安全区:

01 建立辅助线，计算辅助线尺寸的方法是1920像素（头图宽度）–1200像素（安全区）=720像素，720像素/2=360像素，每边的辅助线应该是距离边缘360像素的位置。

因为辅助线都是从左边开始算起的，所以第1条辅助线的位置是360像素，第2条辅助线应该是1920像素–360像素=1560像素的位置。使用快捷键Alt+V+E调出“新建参考线”对话框，然后对参数进行设置。

第1条辅助线位置

第2条辅助线位置

02 设置好辅助线，画布上辅助线以内的区域就是主要的设计区域。

画布上辅助线的位置

绘制主展示图:

01 下载一个立体样式的样机，在该样机中找到智能对象图层，用来替换当前设计的内容。

立体样机

找到智能对象图层

02 进入智能对象图层的内部，删掉原有的画面，重新输入需要的文字。

03 输入文字之后，保存并关闭智能对象。回到刚才的操作界面，原文件会自动更新智能对象，所以我们可以看到刚刚输入的文字有了立体的效果。

图1 在智能对象内部替换所需的内容

图2 得到的立体字效果

04 样机中的图是有背景的，这里可以将背景隐藏。如果有超出立体字区域的图像，需要将其放到立体字区域内部，并将该图层删除，也可以对该图层创建剪切蒙版。

按住Alt键，在两个图层中间进行单击，然后使用快捷键 Ctrl+Shift+Alt+E生成一个盖印图层，再将全部图层合并，作为一个新的图层。隐藏背景后，除了需要的立体部分以外都是透明的，这样对于后续的操作才更加方便。

05 将合并后的立体图像图层拖曳到建立好的画布中。

06 获取图像图层的选区，按住Ctrl键单击图层预视框。

整理并盖印图层

将图像拖曳到建立好的画布中

获得立体图像图层选区

07 在立体图像图层上面新建一个图层，然后命名为“渐变颜色层”，再打开“渐变编辑器”对话框，新建一个渐变颜色层，颜色由玫红到亮蓝，一共建立4个色块。

在立体图像图层上新建一个图层

设置渐变颜色

08 选中新建的“渐变颜色层”，并拖曳渐变条，使渐变色由左到右铺满整个选区。因为选区中包含半透明的阴影部分，所以这部分在画面中也会被填充上渐变色。

填充渐变

09 这是最关键的一步，将图层的“混合模式”设置为“颜色”。至此，完成图像部分的制作。

更改图层模式

渐变立体图像制作完成

设计文字部分：

01 将文字部分放在LOGO的左边。按照前面讲过的排版规则，中文标题搭配小字号的英文会使画面效果更好。因此这里在大字号标题下配上了小字号的英文，同时，文字组与右侧的LOGO部分保持对齐。

输入文字部分

02 为文字添加渐变效果。添加渐变的方法有很多种，为了方便后续其他头图的使用，这里使用了“图层样式”中的“渐变叠加”效果。双击文字图层，在弹出的“图层样式”对话框中选择“渐变叠加”，然后进行参数设置。

添加“渐变叠加”的图层样式

文字效果

03 除了添加渐变效果以外，还可以为文字添加投影效果。双击文字图层，在弹出的“图层样式”对话框中选择“投影”，然后进行参数设置。

添加投影效果

添加投影后的效果

04 复制大标题的图层样式，对英文叠加一层渐变效果和投影效果。

复制图层样式后的效果

05 绘制一个矩形选框并输入文字，制作“开启设计”矩形按钮。

绘制“开启设计”矩形按钮

添加边框汇聚视线:

01 为了让视线更加汇聚和增强立体效果，可以绘制一个边框。

绘制边框

02 删掉边框与文字和图像重叠的地方。选中边框图层，单击“图层”面板下方的“添加图层蒙版”按钮 ，为图形添加一个蒙版。在蒙版中，黑色表示隐藏画面，白色表示显示画面，所以在想要删除的部分涂黑即可。

在蒙版上填涂黑色隐藏画面

使用蒙版填充后的画框

添加二级文案:

客户给的文案中还有一些业务的展开介绍，也要将其排到画面中。将文字直接排上去显得没有设计感，因此可以在文字前面添加小方块，作为装饰元素，还可以引导读者阅读文字。

添加二级文案

绘制球形渐变点缀:

01 参考前面搜索的素材图，绘制一些渐变的球体效果。这里对球体进行大小变化、模糊处理并调整图层顺序，使画面看起来更具有立体感。

添加球形渐变点缀

02 为球体添加杂色，增加画面的纹理效果。选中对象，执行“滤镜>杂色>添加杂色”菜单命令，然后在弹出的“添加杂色”对话框中进行参数设置。最后观察整体的效果，可以看到文字内容都在安全范围内。

调整杂色参数

整体效果

使用同样的方法制作其他头图:

01 将其中一张头图制作好之后，运用这个思路完成其他头图的制作。下图使用了办公用品样机来表示客户案例页。

客户案例页

02 下图使用了带有尺寸标记的纸张来表示平面设计页。

平面设计页

03 下图使用了手机图片和微信标志来表示微信平台开发页。

微信平台开发页

04 下图使用了画册样机来表示画册设计页。

画册设计页

自我修改——整体风格一致:

因为这些图最后将在网站上轮播，所以每一页的画面风格都要保持一致。这里所说的一致，除了前面讲到的元素和配色的一致，图中的样机部分也尽量以白色为主，使画面风格更加和谐。

4.效果运用与提交

制作提案图:

制作提案图的时候，可以为设计稿添加一个背景，然后为背景添加渐变色和杂色的效果，再为设计稿添加一个投影效果，使画面的效果更丰富。注意，提案图的尺寸要小于原图的尺寸。

提案效果图

向客户表述设计思路:

本次设计在风格的选择上，采用了当前非常流行的流体渐变风格，这种风格大气、新潮，并且耐看；在颜色的选择上，使用了当前流行的蓝色和紫色，并配以大面积的留白减弱颜色的主导性，这样在搭配其他风格的设计时可以起到弥补、辅助和衬托的作用。