当前位置:首页 > PS教程 > 设计教程

使人有购买欲的设计是如何使用图片的?

  • 2019-06-19 15:59:58
  • 来源/作者:互联网/佚名
  • 己被围观

我们第一眼看的一定是图片,而这一瞬间的注视,就能决定消费者是否够买你的商品,所以说,今天我就带大家来了解商业照片在设计中如何应用。








这种表现手法比较难,属于创意表达,画面中不一定会出现产品实体或者logo非常小放在角落,
要设计出与产品调性相符合的场景画面,如果这个画面气质传达的不够明确的话,很容易使消费者对商品产生怀疑。








这也是电商和DM当中最常用到的手法,将同一品牌或同一产品的照片以多种角度多种形式排列,
全方位展现商品的信息,如果说单一产品所呈现的是有格调,高逼格的感觉,
那多张产品会有节奏变化,会让人感觉很有亲切感,
这种手法会让消费者觉得产品就在身边一样,会更加放心的购买。

 

统一图片大小与位置


如果有一些同类图片,这里以这组美食图片为例,把它们编排到版面中:



首先把图片规划一下放置图片的区域,然后把图片置入同等大小的色块当中,把文字编排进去,
这样完成之后有什么问题?照片在色块中的大小没有统一,并且位置也没有统一,造成我们在看的时候视线的流动不顺畅。


统一它们的轮廓,外轮廓统一成均等的尺寸,这样视线才是流畅的。

两张单页放一起对比一下,不难看出哪个更好。


 

 

注意图片色调与方向

这里我们以原研哉与阿部雅世的对话为例,当要使用的照片具有方向性时,要根据内容和照片主⻆的角度来摆放,
两位设计师面部的朝向都是向外,这样就不符合对话的这种形式了。



好,我们把朝向转过来,统一图片内人物大小,再看色调,阿部雅世是偏明色调,
原研哉是暗色调,不妨给他们统一为黑白色调,这样整体画面就更加统一协调了。


 

 

表现时间的流动或对比

如果给你看一个这样的绘画流程图,想必你会很懵逼,这是个高手,完全不按套路画,
我要把序号标注上你就知道步骤的顺序是怎样的了,可是这样视线会非常跳跃,影响信息的接收。


步骤流程从左至右依次排列,这样就不乱了,也就是说,多张图片按照时间流程排列,
能凸出照片关联性,可以表现时间流动或者对比。


拿个案例来讲,
这是被打乱的编发步骤。



首先给它规划时间顺序,让人一目了然,这样再编排到版面中,就很清晰了。


用多张照片进行排版时,需要根据作品的用途和目的,将照片分为“主”和“次”等层级,对其提示的信息进行调整,要强调关联性的时候可以就近摆放,要弱化时则远离摆放,这样明确显示出信息的不同。

 

 

 

这里我们以日本四张旅游景点照片为素材,做一页画册设计。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

当我想突出日本人文情怀时,就把与之相关的照片放大,其他照片缩小,这样图片的对比就能更准确的传递信息(文字为模拟)。

如果我想表现都市繁华的感觉,放大这张照片,其他照片缩小为同等比例。

想表现建筑特色和特别著名的旅游景点时,选择它放大。

如果凸出生态环境呢,就放大动物的自然环境的图片。

如果把所有照片按照同样大小、同样距离摆放,所有信息会均等的传递给受众,使整体氛围很平淡。但是同样有两点需要注意:

第一,类似内容或类似色调要靠近放置,这里左边这两张是街道图片,放在一起,右边是关于风景的图片,同样放在一起,色调相近也可以靠近摆放,左边是暖色调,右边是冷色调。


第二,放置图片时要意识到视线移动,视线在横排时候是从左至右Z字形移动,竖排时是从右上到左下N字形移动,要意识到这种移动规则,人的阅读习惯来诱导视线,才能做出更好的版面。




设计一个网页



用这些大小不一、⻆度不同、色调不一致的图片,设计一个宜家居的网页。



这个网页我们来一屏一屏的设计,首先就是头图,头图我们选择一个场景图也就是前面我们讲过的,
产品使用场景图,使用产品的这种代入感更加具体形象,以它作为背景,加入文字与网页组件以及logo。




这部分我们想放跳往二级目录的指引,分三个部分,热搜产品、限量发售、畅销推荐,以三个角度不同的去底照片来展示,区分各项的类别。



中间可以穿插一个视频作为过度



这一屏是座椅,因为图片本身大小不一,所以我们划分六个相同的色块,统一大小,
展示三个不同⻆度的照片,然后有两个局部特写,让消费者有个直观的感受,增加消费者对产品的信赖。




下一屏我们来展现儿童的玩具,在此之前,需要一个主图,作为过渡,小孩抱着玩偶属于使用时的照片,
有种真实性和亲切感。然后我们配以手写的英文字体,来呼应画面传递的气质。




展示玩偶商品,调整成同样的⻆度,大小一致,放入产品信息。


 

 

 

 

这一屏是家居使用场景图,色调一致,看来不需要做任何调整了,但是我们在上面加文字就很难凸显出来,
所以,加个暗色调,做透明的处理,再加入相关的文字。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

底部规范一下文字信息

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本篇教程到这里就结束了,我们来回顾一下这节课所讲的知识点,第一,我们从各个角度来分析了照片,每个角度会传递出不同的心理感受,第二个,我们从照片表现形式出发,包含了8点内容,还有多张照片在一起编排时候,需要注意哪些事项,当然,这些照片在做设计时,很多是摄影师提供给你的,不一定是设计师亲自参与,所以为了避免出现后期多次反复改稿的情况,还是需要大家在拍摄之前和摄影师进行沟通,尽量拿出一些实例来给摄影师看,这样才会更有效率更好的完成工作,所以,设计师需要学习的东西非常多,我们经常说,设计师要是个杂家,你的知识储备越丰富,你在设计时才越会得心应手,设计这条路走到最后拼的就是你知识的广度,好了,我们下次再见吧。

 

 

 

 

 

 

 

 

 



(责任编辑:HX)

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • 文字排版技巧知识大全 文字排版技巧知识大全
  • 电商产品PS修图:金属质感效果 电商产品PS修图:金属质感效果
  • 色彩叠加在各类设计中的巧妙运用 色彩叠加在各类设计中的巧妙运用
  • PS CS5制作逼真绳子 PS CS5制作逼真绳子
  • PS绘制柔美飘逸的丝带 PS绘制柔美飘逸的丝带
  • PS制作一款科技感的立体插图 PS制作一款科技感的立体插图
  • banner制作初级教程 banner制作初级教程
  • 如何设计一个高端大气上档次的 logo? 如何设计一个高端大气上档次的 logo?