从这四个方面挑选图片素材,可以提高电商设计的出图质量 - 优设-UISDC

从这四个方面挑选图片素材,可以提高电商设计的出图质量

2016/08/21 17265评论区

find-best-e-commerce-image-1

SoHappy:相信很多做视觉设计的小伙伴(特别是电商),有时候素材直接影响到出图的质量。那么如何选择合适优质的图片素材来提高出图质量呢?今天从风格、色彩、光影、透视4个方面分享收集素材的一些心得,希望对大家有所帮助。

往期电商设计好文回顾:

  1. 《高效流程!帮你快速做出优秀电商BANNER 的设计三部曲》
  2. 《5个帮你快速进阶的电商BANNER 设计技巧(案例多)》
  3. 《设计基础功!聊聊平面构成中的点线面(超多案例)》
  4. 《电商好文!超多实战案例帮你解锁5种商品摆放姿势》
  5. 《实战好文!帮你做出优秀电商BANNER的五个方面(超多案例)》

本章从以下四个方面进行深入了解:

  1. 基础属性
  2. 色彩
  3. 光影
  4. 透视

1、 基础属性:时间、地点

bp201608213

首先不同时期的艺术作品、建筑、人文、服饰都会有明显的差异,在选择图片的时候一定要设定好画面所需要的年代、地域、历史人文;

bp201608215

通过背景纹理、色调、环境我们能区分上面三张图的风格,分别为复古、甜美、简约,而纹理色调环境都是与我们生活中的环境、历史人文挂钩的, 所以在选择素材的时候,对号入座:先提取所需素材关键字,然后根据关键字拓展近义词、同义词等相关的词;通过不同关键字搜索出相同属性的素材图片。

2、色彩:色调、影调、色彩层次

A、色调

bp201608211

根据颜色明度的特征,我们可以把明度分为高明度、纯色、低明度。

bp201608214

高明度的色彩常用于儿童、女性、偏向于柔和的画面;纯色调的色彩饱和度高、色彩穿透力强,常用于电商大促营销的设计中,撞色也是高纯度的色彩对比形成的;低明度的色调常用于轻奢、品质、质感的设计页面中。这样划分之后我们就能根据产品的属性、外观等特性选择合适的搭配素材。

bp201608218

当明度确定了,那色相在冷色和暖色之间再选择一个大方向,然后去挑选素材,这样所选择的素材的色调就不会相差太远,后期调整起来会更容易。

B、影调(主要针对摄影图片素材)

影调是光照射物像所呈现的明暗层次倾向。对影调的设计就是对光线与明暗的设计,理解影调的性质有利于烘托画面的情绪,渲染主题。按照整体画面的明暗程度,影调分为高调、中间调、低调。按照画面中最亮部分与最暗部分的差值,影调又可以分为长调、短调、硬调。

bp201608212

高调洁净、飘渺、活泼明快,白到浅灰占画面的绝大部分,暗色只占小部分。

bp201608216

中间调平和、朴素、朦胧、含蓄,灰色占画面绝大部分。

bp2016082110

低调深沉、稳重、跳跃,深色占画面绝大部分,亮色占小部分。

bp201608217

长调细腻、舒缓,色阶过渡均匀,层次丰富。短调局促、直率,色阶分明,具有较强的节奏感。硬调激烈、有力,色阶极少,对比强烈。

C、色彩层次

bp2016082113

大家都知道太阳光通过三菱镜会被分成七种颜色,但很少有人去了解具体的差别。颜色是一种感觉,光是一种物质—电磁波。正是由于七种颜色的波长(电磁波)长短不一,所以造就了色彩丰富的物理世界。

bp2016082114

观察上图,细心观察会发现,会发现近处的树木饱和度更高,远处的山头的树木饱和度低。这是由于物体反射了太阳的颜色(电磁波),距离远的颜色(电磁波)被大气中的微小分子所散射,当电磁波被眼睛捕捉到时会减弱很多,所以视觉上就会产生远近的空间关系。

bp2016082116

再次把远景和中景的高光、中间调、暗部的颜色选择出来。近处的图像对比度更高,细节丰富;远处的图像对比度低,没有啥细节;所以在选择素材时选择相同对比度和饱和度的图片与画面会更融合。

bp2016082115

根据上面几张摄影图分析,以及上面两张大神的合成图中也可以找到颜色变化的规律。总结为近处的色彩饱和高、对比高、细节丰富、立体感强,远处反之。所以选择合适色彩的素材放在画面近、中、远处让画面更有真实感。

3、光影:光的方向、光的环境

A、光的方向

特别是在合成场景中尤为重要,选择相同方向的光影图片融合会更加自然。

bp201608219

轮廓光,即逆光,帮助主光勾勒受光体的轮廓,使主体与背景分离,制造空间感。

bp2016082111

顶光,光线来自被摄体的正上方,如中午的阳光,顶光会给人神秘、神圣的感觉。

bp2016082112

底光,光线来自被摄体的下方,通常表现比较阴暗、恐怖的一面。

bp2016082117

侧光vs正面光。侧光是指光源从被摄体的左侧或右侧射来的光线,侧光会让增强画面的立体感!例如左图中,由于光是从侧面过来,所以脸部和服装上都会形成明显的亮部和暗部,通过对比,立体感就强了。就好比女生爱美喜欢化妆,也会通过不同的粉底涂抹脸部,让五官更加立体,看起来则更加精致。

B、光的环境

(主要针对摄影图片、摄影产品)

bp2016082118

强光VS柔光,强光的画面中物体立体感强,有明显投影,明暗交界线明显,如果拿出来做素材,光影难调整,只能与相同光影强度的图片或产品组合;而柔光的画面色阶过渡柔和,无明显投影,可以根据画面需求调整素材的光影强弱,收集素材时,尽量收集柔光素材,方便再次编辑。

bp2016082120

室内VS室外,光线良好的情况下,室内的光感柔和,室外的光感强烈。(只有自然光的情况下)

bp2016082126

阴天VS晴天,不同天气下的颜色、光影也会有所差别,所以同在室外也应该注意到图片中的天气变化。

bp2016082124

除了要注意光的环境,还要了解光源,一切能够辐射可见电磁波的物体都可以称为光源,光源包括日光、闪电、火焰、荧光生物、人造光等。因为物体不发光,我们看到的物体都是反射了光源的光,所以不同光源下物体呈现的视觉效果就大不一样。

4、透视:视平线、拍摄距离

A、视平线

bp2016082121

视平线,是透视的专业术语之一,就是与画者眼睛平行的水平线。常见的海平线、地平线都是视平线所在。

bp2016082122

商品、模特在拍摄的时候就确定它的视平线,当把商品摆放在一个背景图中时,要保证商品的视平线与背景图的视平线保持一致,商品的融入才会更融洽。所以合成前需先找到商品的视平线,然后匹配背景图片。

bp2016082119

简单说明透视的三种类型,方便大家去寻找视平线,首先是平行透视(即一点透视),一个立方体只要有一个面与画面平行,透视线消失于心点的作图方法,称为平行透视。

bp2016082128

两点透视,一个立方体任何一个面均不与画面平行(即与画面形成一定角度),但是竖直的边线却垂直于画面,有两个消失点,称为成角透视,也称二点透视。

bp2016082125

一个立方体任何一个面都倾斜于画面(即人眼在俯视或仰视立体时)除了画面上存在左右两个消失点外,上或下还产生一个消失点,因此作出的立方体为三点透视

bp2016082123

上图一点透视、两点透视、三点透视的示意图会明白些。

bp2016082127

那么,了解透视之后,商品的透视、背景的透视以及搭配小元素的透视在一个场景中都必须统一才会达到更加逼真的视觉效果。这样无疑又增加了一个筛选素材的条件,寻找素材难度+1。

B、拍摄距离

bp2016082129

例如上图中有微距、中景、远景,选择素材时画面背景必须和产品相结合。微距拍摄的图片细节丰富、纹理清晰、色彩饱和度高、光影细腻;中景拍摄的图片细节相对较少,但有明显的光影方向;远景只有大概的轮廓,没有什么细节,光影方向不明确。

bp2016082130

就如同上面这张海报一样,场景中需要有的近景、中景、远景,一般商品摆放在中景的位置,在选择素材时应选择合适比例和统一透视的素材,不统一的素材也可以后期处理,但是经过处理的素材总是没有原始素材的真实感强,或多或少会出现一些瑕疵,同时打造场景不仅是为了炫酷的视觉效果,更是通过场景体现商品的某个特性以及卖点,所以素材的风格属性也必须与商品的属性结合。

希望以上几点筛选图片的方法能够帮助到大家,谢谢!

欢迎关注我的个人公众号“三根设计骨”

sg201607111

「超实用的UI设计自学指南」

UI配色:《帮你从零开始全面掌握UI设计的配色方法》

UI版式:《一份详尽全面的UI设计字体与排版指南》

自学姿势:《别着急学软件!先掌握科学有效的UI设计自学姿势(超全面)》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/find-best-e-commerce-image

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里