当前位置:首页 >> 其它课程 >>

图文混排(3)


图文混排

WEB版式设计的视觉要素
主讲:赵娅琼

版式设计的视觉要素
●文字 ●图形 ●色彩

版式设计 版式设计的视觉要素 版式设计的构成要素

文字
? 文字编排的基本参数
? ? A:字体、字号、字距 B:标题与正文

? 文字编排的基本形式
? ? ? ? 左右均齐 齐中 齐左或齐右 文字绕图排列

? 文字编排的创意表达
? 文字的局部强调 ? 文字的整体编排 ? 文字的图形编排

文字编排的基本参数
? ? ? ? ? ? ? ? ? 字体:同一个版式中字体使用越多,整体性越差 字号:表述有号数制、级数制、点数制;字越小整体 性强,但太小会影响阅读。 标题:14点以上;正文:9~12点;文字多的 版面一般为7~8点; 字距、行距:字10点~行12点~字距1/10; 标题与正文: 让标题醒目:a:放大标题字体和字号;b:加粗字 体笔画,c:对标题进行创意设计; 正文:分栏3~4栏

无饰线的字体

分栏

分栏

文字编排的基本形式
? 左右均齐 ? 齐中 ? 齐左或齐右
? 左右均齐:严谨、美观 ? 齐中:视线更集中、中心更突出, 有随意轻松之感;

? 文字绕图排列

? 齐左:符合人们阅读习惯;齐右:
比较新颖。 ? 文字绕图排列:亲切、自然、生动 之感

齐中

齐中与左右均齐

齐中

齐左

齐左

文字绕图编排

左齐

文字编排的创意表达
? 文字的局部强调
? 首字放大 ? 加线 ? 衬色

? 文字的整体编排
? 矩形 ? 圆形 ? 几何形

? 文字的图形编排
? 形象文字的创意表达 ? 图文透叠与叠印 ? 文字图形化组合编排

文字局部强调——首字放大

文字局部强调——衬色

文字局部强调——加线

文字局部强调——衬色

文字局部强调——衬色

文字的整体编排——圆形

文字的图形编排——形象创意

文字的图形编排——图文透叠与叠印

图形
? 图形的裁切方式 ? 图形的面积 ? 图形的位置

? 方形图 ? 退底图 ? 出血图

? ?

大图:注目、感染力强、给人舒服、 愉悦;引导版面中心,视觉焦点 小图:简洁、精致、拘谨、静止、趣 味弱

? 中:视觉冲击力强 ? 下:下坠、压仰 ? 四角:平衡、稳定版面

图形的裁切方式——方形图

图形的裁切方式——方形图

图形的裁切方式——退底图

图形的裁切方式——退底图

图形的裁切方式——出血图

图形的裁切方式——出血图

大图

大小图

大小图编排

中图

图置下

置四角

色彩
? 色彩的感知对版面的影响 ? 色彩的版面的易读性 ? 文字、图形、色彩的综合构成

文字色彩与背景色彩
? 两者色彩尽量不要选择一致,调整 明度; ? 突出文字可以使用对比、或互补色 调整纯度、明度; ? 相同的背景加大正文与背景的对比

色彩的感知对版面的影响——优雅、都市

色彩的感知对版面的影响——清新

色彩的感知对版面的影响——古朴

色彩的感知对版面的影响——稳重、和谐

色彩的感知对版面的影响——热烈

色彩的感知对版面的影响——阳光、温暖

色彩的感知对版面的影响——饱满

色彩的感知对版面的影响——女性柔美

色彩的感知对版面的影响——理智、冷静、商务

色彩的感知对版面的影响——清爽、舒适

色彩的感知对版面的影响——梦幻、神秘

色彩的感知对版面的影响——活泼、自由

色彩的版面的易读性——明度对比

色彩的版面的易读性——明度对比

色彩的版面的易读性——明度对比

色彩的版面的易读性——明度对比

色彩的版面的易读性——纯度对比

色彩的版面的易读性——色相对比

色彩的版面的易读性——色相对比

色彩的版面的易读性

色彩的版面的易读性——白底黑字

色彩的版面的易读性——黑白 对比

增强对比度提高文字易读性

文字描边提高易读性

文字描边提高易读性

文字、图形、色彩的综合构成


相关文章:
3-1-2图文混排
3-1-2图文混排 - 课题 图文混排 1、编辑图片和绘制图形 2、插入剪贴画、图片和艺术字 3、文本框的使用 4、插入公式 课时 2 学时 教学内容 1、认知目标:...
word上机练习3===04-3图文混排和综合排版10.docx
2015-10-316:40:33 PM 第课, :图文混排和综 合排版一,图文混排 1,图形的位置 题目:对以下的图形改变位置:改为顶端靠右,四周型文字 环绕 提示:单击图形...
图文混排
图文混排 - 图文混排 教学目标:1、学会艺术字的编辑 2、会插入插入各种图片, 3、会插入文本框及绘制图形 教学重点:1、艺术字的编辑 2、插入图片 教学难点:...
实验三 图文混排及页面排版
实验三 图文混排及页面排版 1. (1) (2) (3) (4) (5) 实验目的和要求掌握艺术字体的使用。 掌握图片的插入及其格式的设置。 掌握文本框的使用。 掌握页面...
实验4 Word图文混排(2013-10-23)
10. 【合并文档】新建一个 WORD 文档,该文档名为部分:学号+姓名+word 图文混排, 将上述所有文档合并到该文档中,每个文档中间用分节符隔开,在每篇文档的最...
实验3WORD高级应用及图文混排的模板
WORD 高级应用及图文混排 设计型 二、实验内容: 请按要求完成给定文件夹中 WORD 上机练习题中 4 个练习。 三、实验步骤 (1)按文档中中给定的参考结果实现图文...
第三课 设计教室壁报---图文混排
课 设计教室壁报---图文混排 教学班级:七年级 班 教学时间:2014 年 9 月日一、教学目标: (一)、知识与技能: 1 掌握 Word 中图片的插入。 2 掌握 ...
03单元3制作图文混排网页1
单元3 【教学导航】 制作图文混排网页 (1)学会通过“管理站点”对话框创建站点 (2)学会通过【文件】面板创建网页 (3)掌握设置页面背景图像的方法 教学目标 (4)...
第三课 设计教师壁报——图文混排
托克逊县第一中学信息技术集体备课组 教学设计第课 设计教师壁报——图文混排参加人员:艾克拜尔·吾买尔 阿孜古丽·塞提尼亚孜 孙晓红 席勇 完成日期: 2016-...
第三课设计教室壁报—图文混排
课设计教室壁报—图文混排_其它课程_初中教育_教育专区。第三课 设计教室壁报—图文混排 【教材分析】 本节课需要讲授教科书的第二章第 3 课《图文混排》...
更多相关标签: