推荐!版式设计中一图多用的处理技巧(PDF下载) - 优设网 - UISDC

推荐!版式设计中一图多用的处理技巧(PDF下载)

2013/09/09 57281评论区

美国著名平面设计师JohnMcWade为你全面地讲解了平面设计的基本知识,分享了实用的设计方法和技巧,并且详细地解读了许多完整的设计案例——包括宣传册、新闻简报、网页、幻灯片等:你可以将书中的技巧运用到平面、网页等不同的设计项目中,提升自己的平面设计能力,做出优雅、实用和不凡的版面。

John WcWade是个天才,确切地说,他是一个可化繁为简、化难为易、化晦涩为通透的设计大师。他的作品对我影响巨大。我想,他也同样会给您一些启发。
  ——前雅虎营销总裁,畅销书《紫牛》作者,Soth Godin

节选自《超越平凡的平面设计:版式设计原理与应用》

通过《超越平凡的平面设计:版式设计原理与应用》你可以学会:

  • 如何根据功能和意义裁剪图片
  • 吸引读者目光的诸多技巧
  • 平面设计中的基本原理
  • 运用色轮来搭配悦目的色彩
  • 为版面挑选最适合的字体

CgQCtVItIyqABh77AAC7eytlGos42100_380x380

在版面设计过程中,你可能会有很多地方都需要用到图片,也许你花费比设计创作需要的多得多的时间来寻找图片,有没有简单的方法呢?在下面,我们用两个实例来说明如何解决这个问题,我们只用一张图片,通过分割剪切,就可以将这张图片用在不同的地方,出来的效果同样非常漂亮。一张图片解决一个版面甚至多个版面,其实也是足够的!要将你买回来的图片物尽其用,通过有创意的做法从原图中得到几个小图,来配合你的版面设计。

版式设计中一图多用的处理技巧

这是我们要利用的原图

版式设计中一图多用的处理技巧

在版面设计中,就变成这样。

你有注意到其实在大图中隐藏着一些小图片吗?所以我们可以大胆尝试,将一张照片剪切成多张小照片。而且,由于这些小图片都是来自同一张大图片,所以它们的色调及图案都显得非常统一,这使你的设计轻而易举就可以获得协调的效果。
其中的关键就是你要选择好到底要哪部分。我们可以想象一下我们是在跟别人讲一个故事。一张从大图片出来的小图片其实有着一种全新的意义,这个过程本身就很有趣。将图中各个不同的部分分离,然后看一下我们到底有什么信息可以传达给别人。

版式设计中一图多用的处理技巧

当我们一眼望去这张海滩的图片时,我们是将它看成一个整体的,或多或少会对其中的细节置若罔闻。但如果我们将各部分分离,我们会发觉,其实每一部分都隐藏着一个”故事”,都有着各自的重点。
如上图右下角小图中,我们就会想,海岸线到底有多长?这张图片虽然显得有点小,但因为它里面包括了陆地与大海,所以这张图片可以使它与另外两张我们截取的图片形成统一。

版式设计中一图多用的处理技巧

一幅人间天堂式的风景,它是驶离陆地还是准备靠岸?如果我们没有看原图,我们无从判断。

版式设计中一图多用的处理技巧

旧的总比新的更有性格。我们选择这艘破旧的小船,让你不禁在想,这艘小船见证了多少的风雨?当我们从大图中截取让它变成一幅单独的图片时,这艘小船显得孤伶伶的,它以前的主人是谁?它现在为什么会停在这里?旁边的那些脚印又是谁留下的?

版式设计中一图多用的处理技巧

我们只截取小船的船头部分,这部分只占原来的大图很小的位置,还不到十分之一。但我们却将它作为版面的大图,这样,它给人的尺寸感觉就完全改变了,现在,它成为了一个有趣的视觉焦点。上图中,三张图片的尺寸都不一样,右边的特别大,左下的图片特别小,这种不同尺寸的图片可以让我们的整个版面产生层次感。而读者的眼睛就会从右的到左(上图下的线条表示了读者在观看时的视觉线路)。

采用上面的这种方法,我们还可以创造出另外一种完全不同视觉效果的设计。

版式设计中一图多用的处理技巧

下面这个网页上的所有图片其实都是来自于上面这张椅子的照片。

版式设计中一图多用的处理技巧

如果你仔细观察一下那张椅子的照片,你就会发现其实这张普通的椅子包含了各种各样的线条、图案、颜色、孤线及转角位,它们充满着对比(如浅色及深色,直角与圆角)。

版式设计中一图多用的处理技巧

在整个版面中分为上下两部分,它们各自所形成的视觉效果并不一样。上面部分显得开阔平静,而下面部分则显得饱满充实。

版式设计中一图多用的处理技巧

这个版面的上下两部分的构图差别非常大。我们只利用一张图片就可以使整个版面充满视觉对比,包括不同的尺寸、材料、图案、形状及方向的对比。

版式设计中一图多用的处理技巧

上面的开阔设计使到眼睛很容易就集中在那张椅子上。

版式设计中一图多用的处理技巧

而下面显得很充实的版面传达一种动感及丰富的层次感。在这部分中并不存在一个视觉焦点,因为所有的图片都是在大小不一的矩形区域中,产生了不同的方向感。
我们将下部分其中几张小图片用颜色区域代替,并加上标题来使设计显得更具吸引力。现在的关键问题是我们要选择什么样的颜色才能与整个版面配合。

版式设计中一图多用的处理技巧

我们首先用吸管在椅子上取一种颜色,然后看一下这种颜色在色轮中是处在哪一个位置上。

版式设计中一图多用的处理技巧

在这个例子中,椅子上的所有颜色几乎都是暧色调,为了使整个设计具有暧色调的感觉,我们可以采用一种相近色来作为搭配。两种相近色具有同一种基色,具体在这个例子中,我们从上图的色轮可以看出,棕色与草绿色都包含了黄色这种基色。这种拥有同一种基色的颜色总是能够形成良好搭配效果。

版式设计中一图多用的处理技巧

如果你不希望整个版面有太多的暧色,那我们可以采用补色(即在色轮中相对的颜色或相隔 180 度的颜色)搭配。

为了使版面能够形成强烈对比,或希望整个版面充满动感,我们可以采用补色搭配,因为互为补色的两种颜色能够形成高强度对比的视觉效果。但是,补色搭配会使到两部分的区域在视觉上都一样具有强烈的视觉效果,从而会互相削弱对方。

为了解决这个问题,我们将其中一种颜色变浅(在上图中,我们是将蓝色变浅),减少蓝色的”气势”,这样使到棕色区域仍然能够突围而出。

版式设计中一图多用的处理技巧

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:15335158)分享实战经验。
设计微博:拥有粉丝量47万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

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