可能是最全面的设计师图片设计入门手册！

编者注：本文从找图、图片比例到降噪方法、后期处理技巧、运用须知等全方位总结了关于图片设计的基础知识，

今天给大家分享的是关于图片设计的那些事儿，希望今天的分享可以让你知道图片的重要性以及图片在设计中的一些基本处理技巧。

前言

图片在设计中的定位就如同一个人的衣着品味，不同的穿衣风格会使别人对你作出不同的判断，为你打上不同社会属性的标签。随着用户对各类体验的不断升级，商家也在各种细节上面不断优化，对于图片的要求也不断加以重视。今天给大家分享的就是关于图片的那些事儿，希望可以带给你更多帮助。

本文将从图片在设计中的重要性开始解析，加强大家对图片的认知；再从图片比例、后期处理技巧、设计中的运用须知等方面分享关于图片在设计中的处理经验；最后也会分享一下我们在寻找合适的图片过程中的方法与后期图库的管理经验。

图片在设计中的重要性

相信图片在设计中的重要程度对于设计师来说已经了然于胸，虽然大家都会选择更好的图片资源来进行设计，但是依然还有很多需要设计师注意和把控的地方，下面我们一起来看看。

  1. 提高图片的质量

越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个设计的格调。

在产品设计中，很多伙伴会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

• 最佳的设计输出是设计师专业的体现；
• 把最好的效果呈现给决策者，增加他对你设计能力的印象；
• 通过制定运营视觉规范来把控图片质量，是可以严格把控你对图片的视觉追求；
• 你的态度会给你带来好运。

 2. 图片的真实还原

虽然前面提到图片质量的重要性，但是我们不能为了视觉效果选择一些与主题无关的配图，这样也会给决策者一种误导。我们可以提高配图的质量，但是需要保证图片的真实还原，这样才能让你的设计作品更加真实合理。

在一些本土的产品设计中，对于国外图片素材的运用，需要谨慎对待。如案例中的模特形象，文案信息的传达更加偏向于国内的场景，如果运用一张国外的模特素材也许格调更高，可是却无法真实的还原产品场景，会给决策者传达一种错误的认知。

3. 图片版权须知

关于版权这个问题往往还有很多设计师不以为意，要么是压根就没注意这个问题的重要性，要么就是抱着侥幸心理。我们作为专业的设计师，不仅需要保护和维护自身权益和公司利益，对于作者的尊重也是基本的职业素养。

在项目中面对图片版权问题我们要主动告知需求方，这样我们尽到了职业义务，也让需求方能够做出正确的判断。

图片比例

在对产品界面进行布局的时候，图片的比例往往被大家所忽略，凭着自我感觉任意选择一个整数数值进行设计，在多个地方出现相同内容图片的时候也会尺寸混乱，这样无形中增加了前后台的规范性和存储压力。

下面从项目中常用的图片比例和需要注意的地方给大家进行分析，也给大家分享一下图片比例的选择方式，在整套产品设计中需要保持一致性等问题。

1. 图片比例有什么讲究

不同比例的图片所传达的信息主体不尽相同，根据产品属性我们会选择与之相符的图片比例进行整体的界面布局。

通过体验一些主流的产品，我们会发现比较常用的图片比例，如 1:1、2:1、3:1、3:2、4:3、16:9、16:10 等等。也会发现一些打破常规比例的设计，我们需要分析它们的性格，结合自身产品的特点，才能在自己的产品设计中合理地运用。

下面选择几个常用比例进行分析，希望抛砖引玉，带给大家更多的思路。

1:1 强调主体的存在感

1:1的图片比例是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出主体的存在感。常用于产品展示、头像、特写展示等场景，在电商类产品中尤为常见，如：淘宝、网易严选、网易考拉等。

在产品设计中通常以两栏或以上为主，通栏展示的情况一般用于商品详情页头图部分展示居多，其余界面布局较少利用通栏展示。

4:3 图像紧凑、更易构图

4:3的图片比例可以使图像更紧凑，更易构图，方便设计师进行发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在产品设计布局上面占用空间较大，通常我们作为分栏来进行界面布局。

对于设计师来说，这个比例经常接触，站酷、Dribbble 等的作品封面，在携程、厨房故事等产品中也均采用这个比例。

16:9 电影场景般的效果

16:9的图片比例可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。在很多影视娱乐类产品设计中运用广泛，如腾讯视频、网易云音乐等。

16:10 拥抱黄金比例

黄金比例就像金字塔上的明珠，越接近她越有魅力，16:10的图片比例最为接近。设计没有绝对的标准，我们可以遵循一些优秀的规则，但是也要敢于突破规则，尝试更多的可能性。

X:≤Y 瀑布流设计

X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。X:≤Y的图片比例要注意高度的控制，最大值不要超出屏幕可显示区域的范围。

以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。

2. 图片比例选择方式

图片比例选择方式：

• 以商品展示效果为准，选择能够充分表现商品特点的图片展示比例；
• 以产品气质为准，选择符合产品内容气质的图片展示比例；
• 结合产品特点选择合适的常用比例；
• 根据版面布局灵活地自定义特殊的比例值；
• 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。

3. 图片比例的一致性

当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。

图片后期处理技巧

如果说公司有专业的摄影团队，那么对于图片的需求相对会容易满足。对于大部分的团队来说设计师找图与处理图片都是比较日常的工作，在产品设计里面，虽然不一定能够达到专业修图师的精修标准，但是比较常见的处理技巧还是需要掌握的。

1. 裁切简化图片

在项目中，我们会通过一些图库网站去寻找合适的配图，但是想要刚好满足还是比较难的，对素材进行裁切来突出我们想要的部分是比较简单的图片处理技巧。

实际生活中拍摄的照片总会出现很多干扰主体的内容，裁切掉多余的内容突出主体信息。裁切后的图片构图更紧凑、凝聚，主体更具吸引力。这也是我们说的对图片进行降噪，排除多余的干扰。

2. 相同尺寸的裁切

当系列图片进行排版时，需要保持图片比例尺寸的统一性，当我们在多个图片素材之间进行裁切处理时，需要以最小裁切空间的图片为示例去裁切其它图片，这样才能保证最终的展示效果。

如果是人物图片，需要注意人物眼睛的视平线，让眼睛的位置尽量保持在水平线左右。

3. 视平线作为水平线的基准

当我们在选择人物图片的时候，一张特写镜头能传达一种眼神与眼神交流的感觉，在进行裁切的时候要以视平线为准进行缩放裁切，可以保留眼神的交流感。图片放得越大，眼神的交流感就会越强。

4. 调整图片的垂直线

我们在选择图片的时候，如果是如同城市建筑等类型的垂直主体时，我们需要注意主体物与地平线的垂直关系。如果构图特意需要倾斜的效果另当别论，否则我们将会优先考虑这个因素，选择主体垂直的图片或者后期微调让主体垂直地平线，这样整个画面更加协调稳定。

5. 调整图片的地平线

在选择图片时如果有明显地平线的照片，需要注意地平线是否平行。地平线的平行将会有助于画面感的协调，如果遇到想要体现特殊效果，如体现速度感、突破画面张力、营造不稳定性、强化某种视觉效果等，也会特意打破地平线的平行。在调整地平线平行时，可以通过软件的变形工具等对图片进行后期处理。

6. 通过局部来强化主体

有时候一张普通的图片并不能引起我们的注意，但是我们通过局部放大突出单一的主体特征时，往往可以获得更好的视觉效果。放大后的主体构图更加饱满，视觉效果更强烈。

7. 局部特征的极端运用

局部特征放大到一定程度的时候主体信息会被淡化，为极端的处理方式。这样处理出来的图片主体将会无法识别，极端的裁切方式常用于背景的使用。我们也可以通过 Photoshop 软件的高斯模糊等工具进行处理，形成一些特殊色彩融合的背景图片。

8. 三分法

在进行图片裁切的时候，不一定总是将视觉主体放置在画面中心点，将视觉主体放置在三分处也许可以增加更多乐趣。如果当画面中主体是人物时，可以考虑将人物主体或者视平线放置在三分处。

9. 避免接近人物发际线

面对一些人物图片，我们在进行裁切的时候需要注意人物的发际线。在裁切人物发际线时就会联想到秃头，因此不要太靠近人物发际线，留下足够的头发，不要过度裁切，以免影响人物形象。

以上列举了一些常用的处理形式，更多的形式希望大家多多的总结，在设计中考虑到每一个细微的元素差别。

对图片进行降噪

噪音会对我们的生活造成干扰，我们喜欢安静的环境。对于图片的处理也有降噪的说法，可以让画面感更加简洁，主体更能突显。

下面给大家分享一下找图前的降噪思考和后期处理进行降噪的经验。

1. 找图前的降噪思考

在选择图片的时候，要尽量选择主体表现突出，没有过多信息进行干扰的图片。我们要明确主题，寻找的图片要能单一的表现这个主题，如果一张图片中表现多个信息源的时候，会给人一种信息干扰。

我们在拍摄商品展示图的时候就是考虑这个因素，尽量用最简单的背景来衬托，其它的物体元素仅仅作为装饰出现，不会抢占主体物的呈现效果。

2. 设计软件的后期处理

有时候没办法通过自行拍摄获取图片，我们在通过图库网站寻找图片的时候也不一定要刚好达到心中的标准，可以用设计软件进行后期处理，通常运用 Photoshop 软件居多。

3. 利用去底来进行降噪

对于一些背景比较杂乱的图片，我们为了更加统一视觉效果，让主体更加突出，会通过去底来进行降噪，特别是在展示商品图片的时候。

去掉底色后一般会有几种处理方式来衬托主体：

• 以白底的形式显示，这个比较常见，有时候为了让图片的外轮廓出现也会加一个浅色的描边；
• 设置一个固定值的浅灰色，这样处理也能形成视觉统一，还能让图片的外轮廓清晰，也有通过品牌色融入调出的一个偏向于品牌色的浅色作为背景；
• 根据图片主体的配色反推出浅色背景的配色，通常是以降低色彩明度与饱和度的形式；
• 图片去底后利用深色作为背景，比较少出现，一般为品牌色、深灰色、黑色等。

图片运用须知

通过以上的一些分享我们可以掌握图片的基本处理方式，在进行运用的过程中会有很多需要注意的地方，比如关于结合卡片式布局的时候内外圆角的关系以及对图片设置投影的注意事项等。

1. 内圆角与外圆角的处理

现在很多产品布局都运用了卡片式，如果对卡片进行圆角设置以后，对于卡片内部的图片通常也会设置一点小圆角。设置的数值由卡片外圆角数值减去它们之间的间隙数值，如果算出来的数值为负数，原理上图片不做圆角设计也是可以的，只是为了整体风格的统一，我们通常会设置一个小圆角。

2. 图片的投影设置

如果我们设计需要不断更新的图片，通常不建议设置投影，因为图片配色风格、色彩比重、明暗程度等不同，都会影响投影的效果。

在相同投影参数设置的前提下，浅色风格的图片会显得投影重，深色风格的图片会显得淡。这样的反差会影响我们对图片的选择。如果图片都是用户随机上传的，我们是很难进行控制的。

但在一些特殊固定的场景，图片都是设计师可以把控的前提下，我们可以根据图片的情况不同来区别对待投影的参数。

如何找图

掌握了各种图片处理的技巧，但是能够找到更加合适的图片资源，将会大大降低我们的处理工作量，也能带来更好的效果。找图相对比较耗费时间，大家在平时要利用空余时间多进行体验，看到质量好的图片先进行分类收藏，需要的时候可以根据分类去寻找。

我们不仅要善于利用图库网站和关键词发散来进行找图，也要养成良好的习惯，可以关注更多的优质画板，也可以创建属于自己的图库资源。

1. 正确地利用各类网站资源

现在图库的网站也很多，我们在选择图片的时候也要注意版权说明，可以下载使用并不代表作者进行了原创授权，在进行商用的时候还是需要了解详情，找一些具备正版授权的正规平台。

当我们在一些平台发现优质的图片资源时，可以进行采集和分类，如果图片有编号，可以在存储的时候把编号备注在名称上，方便以后需要高清大图时可以通过编号进行搜索。

我们在利用图库网站搜索图片的时候可以利用图片信息筛选更大尺寸；利用相似图片功能可以搜索更多类似资源；点击图片可以进到原始出处，可以找到更多系列主题下的资源。在百度识图、站酷海洛等平台里面，设计师可以利用以图搜图功能在图库里面找寻高清正版图片。

推荐一些常用的图片网站给大家：站酷海洛、500px、1x、Pinterest、unsplash、foodiesfeed等等。网站很多，根据自己需求选择使用即可。

2. 巧用关键词发散

现在找图片的网站很多，但是我们要善于进行一些关键词发散，有些资源直接搜索不一定能够找到合适的。

举一个简单的例子来说一下关键词发散的作用，比如圆形和香蕉是没有本质联系的，但是通过关键词发散就会产生关联，圆形→西瓜→水果→香蕉。对图片资源来说原理相似，比如我们要找一张美女图片，搜索的关键词不一定是「美女」，这个关键词进行发散可以衍生出时尚杂志、街拍、模特、气质、时尚大片、穿搭等等，这样通过发散出来的关键词也许能找到更加符合的图片资源。

3. 关注雷锋

每个人的审美和设计感觉都不一样，也会影响最终作品的效果。方法技巧都可以短时间来提升，但是设计感觉是需要长时间进行熏陶的。我们可以关注一些优秀的设计师，关注他们创建的画板和分享的资源，让他们的审美能力成为你的一层过滤网，帮你筛选掉一些劣质的资源。

我们也可以通过老司机们关注的设计师或者画板来寻找出更多的优质资源，通过关系链可以让你认识和发现更多优秀的设计师。

4. 创建自己的图库资源

很多设计师会忽略日常资源采集的重要性，总是在需要的时候才去寻找想要的资源，但总是徒劳。也有很多通过一些途径一次性获得上百G资源，内心满是喜悦，以为从此设计无忧，却不知后面似乎也没什么用……你肯定还有更多类似的情况。

俗话说有备无患，养成良好的设计习惯很重要。日常的采集习惯将会给设计师带来大量灵感和提升执行效率，设计做不好其中部分因素就是灵感素材没有找对。

建立灵感图库相当于形成一本字典，当你需要的时候可以进行查询；闲暇的时候可以进行回顾，去挖掘一些优秀作品背后的轨迹，以便能够运用到后期的项目中，提升工作执行效率。

之前写了一篇相关的文章《2019年如何养成良好的灵感收集习惯？来看这份指南！》，欢迎阅读。

随着用户对体验的要求不断提升，我们需要从各个方面加强设计细节，图片资源的好坏不仅传递的是商品的品质，也能够体现产品的格调。希望今天的分享可以带给大家对图片的认知，在后期产品设计的过程中可以考虑得更全面，如有补充欢迎留言互动。

欢迎关注作者的微信公众号：「行设视觉」