资源描述
,布局之美,#,图形运用,具体设计,距离之美,对齐之美,第一章,布局之美,对称之美,留白之美,边距,1.1,距离之美,1,行距,2,段距,3,1.2,对齐之美,模块对齐,2,边界,对齐,1,等距分布,3,1.3,对称,之美,左右对称,上下对称,1.4,留白,之美,留白,直接,地说就是留下一片空白,。留白真的是难以言,说,的,一种表达方式,因为留白更接近于一种意境。,。我也说不清楚。我是怎么留白的呢?我觉得留白,既要彰显意境美,又要画面不失重,,即是说,画面整体的重心要稳。,线,框、圈,第二章,图形运用,面、色块,图形,2.1,线,线在标题栏中的应用,虚线效果,1,实线效果,2,2.1,线,线在,内,标题设计上的应用,实线效果,(双,下划线),2,虚,线效果,1,2.1,线,线在正文中的区域分割作用,线在正文中的区域分割作用,2.1,线,线在正文中的边界作用,用“,线,”勾勒出画面中模块内容的边界,形成规矩、整齐的感觉。,2.1,线,线在正文中对称和装饰作用,2.1,线,线在图表中的连接作用,图表中线的作用不仅仅是连接,而且可以展现出设计的美感。,2.1,线,请从左图中找到线的用法,至少三种哦:),2.2,框、圈,框的模块化作用,用“,框,”更清晰的展示不同模块的内容。,2.2,框、圈,框形成的对齐效果,很规整,上图:“,框,”作为独立模块与其他内容对齐;,右,图:“,框,”将文字和图片包围起来很规整。,2.2,框、圈,用框展示引用观点或案例,上,图:用,“,框,”展示案例;,右,图:用“,框,”展示观点。,2.2,框、圈,圈的灵活运用,艺术化排版,左,图:左边框是从矢量图中导出的,PNG,图片,右边的“粗框圈”和“同心圆”则是后来绘的图,形成整体一致的效果。,右图:用“,圈,”、“,线,”和“,PNG,人像,”完美地融合在一起。,2.3,面,、色块,面设计出整体内容页的版面,在暗红色的背景上面,设置两层有透明度的白色的“,面,”,从而形成了左图的逻辑区域效果。,2.3,面,、色块,用色块展示不同的模块内容,1,不同颜色,不同章节。,2,相同,颜色,并列展示。,左图:色块覆盖色块的效果,2.3,面,、色块,色块和图形形成模块区域效果,,很规整,要注意色块的,颜色,和图片的,颜色,是接近的。,2.3,面,、色块,用色块展示观点、案例、点缀,1,灰色背景的色块上展示故事,2,带有透明度红色色块上放上人名,3,小色,块的点缀,4,色,块展示观点,2.3,面,、色块,色块设计标题栏、,过渡,页、标识、页码等,色块展示页码,色块展示页面标识,过渡页设计,标题栏设计,章节过渡效果,2.3,面,、色块,具有透明效果色块和图形的搭配效果,2.3,面,、色块,色块与图形搭配运用形成,Win8,风格,2.3,面,、色块,母色块放上子色块形成的逻辑效果,母色块,子,色块,2.4,图形,2.4,图形,如何实现左边图形?,请思考,2.4,图形,2.4,图形,请思考,与,有啥区别?,2.4,图形,如何实现下图的设计?,请思考,2.4,图形,2.4,图形,2.4,图形,的各种变形后并组合的效果,如何实现上图的效果?,请思考,文字排版,图形排版,第三章,具体设计,标题设计,3.1,文字排版,字少时的排版,字少时的排版:,错落有致、突出重点。,3.1,文字排版,字多时的排版,字多时的排版:,合理布局,、规整匀称。,3.1,文字排版,文字的图表化处理,无论字少、字多,尽可能:,图表化处理。,3.2,图文,排版,单图排版,单图排版的要点:,小,图点缀、中图排列美、大图冲击力。,3.2,图文,排版,双图排版,双,图排版的要点:,并列或对称。,3.2,图文,排版,多图排版,多,图排版的要点:,讲究布局排列之美。,3.3,标题设计,简洁式标题,简洁式,标题:,简洁,基本无修饰。,3.3,标题设计,点缀式标题,点缀,式标题:,简单点缀,不一样的效果。,点缀式标题样式非常多,请大家再举几例,或者到布衣公子的作品中,找一些案例。,3.3,标题设计,背景,式标题,背景,式标题:,以色块作为背景,时尚流行。,
展开阅读全文