第3单元 网页艺术设计1[34页]
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在视觉中，点具有形状、方向、 大小等特性。点的概念是相对的，是 与周围的视觉元素相比较而言的。点 一般多为圆形，但也可以是三角形、 方形、无规则图形。点的面积扩大就 会形成面。
图3.6 网站首页
第3单元 网页艺术设计
3.2 点设计 3.2.1 点设计概述
图3.7所示的网页项目列表是多 个类似的点同时出现，在点与点之间 就会形成一种视觉上的连接线，点的 等距垂直排列，在视觉上形成虚拟的 竖线。起到分割页面的作用。如果项 目符号是水平排列的，则有种平稳、 安详的感觉。
图3.8点设计
第3单元 网页艺术设计
3.2 点设计 3.2.2 案例一
本案例采用点设计手法，案例 里有很多点，虽然元素都是相同的， 但是通过大小不同、高低不同或者相 同的组合，并不感觉页面单调，而是 产生跳跃、活泼、自然的感觉，通过 其明暗、位置、阴影、投影效果设置， 页面感觉很丰富，当然层次感（表示 环境的分层状态）、立体感也就体现 出来了。中心是网页的重心，并将标 志也放在中心点。它能吸引人的视线， 成为视线的集中处。最终的效果如图 3.9所示。
图3.9 最终网页效果图
第3单元 网页艺术设计
3.2 点设计 3.2.3 操作步骤
1.打开Photoshop cs3，按 Ctrl+N快捷键，将出现【新建】对话 框，具体设置如图3.10所示。单击 【确定】按钮。
2.前景色设置如图3.11左图所示。 按Alt+Delete键，填充背景图层。
3.按Ctrl+Shift+N键，新建图层， 按M键，在大概黄金分割点处制作矩 形选区，前景色设置如图3.11右图所 示。按Alt+Delete键，填充选区，按5 键，将此图层变为半透明。
解面在网页设计中的作用
面在网页设计的作用
掌握视觉流域的概念，掌握 美学概念和法则，掌握九对 形式美法则和自然法则
视觉流域，美学，美学法则，自然法则，网 页设计的法则
第3单元 Hale Waihona Puke Baidu页艺术设计
3.1 网页艺术设计概述
3.1.1 网页常用的图像格式以及优化 Web设计的流程经历了很多戏剧性的变化，其实设计如同万事万物一样，
图3.10 【新建】对话框 图 3.11 设置两次前景色
第3单元 网页艺术设计
图3.7 网页的项目列表
第3单元 网页艺术设计
3.2 点设计 3.2.1 点设计概述
图3.8所示的页 面是多个点，看一个 点会受到另外一个点 的干扰。三点连接构 成一个稳定的三角， 成为一个平面，多个 点还可以组合图形， 组合模块。注意点元 素放置的时候注意大 小，颜色的差别。如 果太一致就会产生呆 板的感觉。
图3.5 胡杨林的个人网页的截图
第3单元 网页艺术设计
3.2 点设计 3.2.1 点设计概述
如图3.6所示的网站首页，当网 页中有一个点时，它能吸引人的视线， 成为视线的集中处。点的本质是一种 体现动态张力的静止图形。实际上， 点在设计中可以起某种稳定图式、造 型的作用，而同一面中有三个点能形 成视觉感受稳定的面。
形式变化多样，但是优秀设计的原则和规律从未改变，无论网页配色，还是 浏览者浏览网页顺序，以及合理有效使用图形。
• 裁剪掉多余的白色区域 有时候你的图像周
围会留下空白区域，用 来避免它与文字或其他 页面元素靠在一起。作 为替代，裁剪掉空白， 然后使用CSS 来创建图 像周围的边距。如图3.1 所示。
图3.1 裁切图片
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.2 网页创意的基本表现形式
图3. 4 莫里斯的两幅作品点、线、 面是视觉构成的基本元素，自然界万 事万物的构成都离不开点、线、面。 点、线、面是表现视觉形象的基本设 计语言。网页设计实际上就是如何处 理好三者的关系，因为不管是任何视 觉形象或者版式构成，归结到底，都 可以归纳为点、线和面。图3.5是胡 杨林的个人官方网站首页的截图。
图3.3 画面构图
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.2 网页创意的基本表现形式
网页创意的基本表现形式也是构成， 这个构成从美术画面构成而来的，网页构 成可以理解为：在有限的网页空间里，将 网页构成要素—文字、图形、线条、和颜 色色块等因素，根据特定主题的需要进行 组合排列，并运用造型要素及形式原理， 把构思与计划以视觉形式表达出来。 构成的历史，应追溯到20世纪初英国的艺 术与手工艺运动领导人莫里斯，后人称之 为设计之父，其设计风格严谨、朴素大方、 十分简洁、淡雅。在构成中采用对称式构 图、美观的字体、新颖的面编排和精美的 装饰纹样，具有经久耐看的效果，如图3.4 是莫里斯的两幅作品。
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.1 网页常用的图像格式以及优化
•选用最佳的文件格式 对于包含简单平面插图
或 绘 画 的 图 像 ， 选 用 8-bit PNG 或GIF格式并减少调色 板中的颜色数目，如图3.2所 示的绘画图像。PhotoShop允 许你为 web 应用保存图像， 同时可以微调图像设置。通过 把调色板从256色改为32色， 就可以极大地减小文件尺寸。 图像的颜色数越少，文件越小。
图3.2 绘画图像
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.2 网页创意的基本表现形式
画面构图是美术基本知识，
可以这样理解：比如一张白纸没 有任何的空间，当画上一条线， 就破坏了纸面的完整与稳定，就 出现了线将白纸分割的现象，那 么白纸出现了画面构图。如果在 纸上放置一个物体，那纸面就形 成了一个空间，如果放置两个以 上的物体，就得考虑形体的组合 方式，如图3.3所示左图一线分割 画面；中图一点在画面空间；右 图三点组合分割页面并且构成一 个三角形。
第3单元 网页艺术设计
教学要求
知识要点 点设计 线设计 面设计
美学法则
能力要求
关联知识
掌握点设计手法和技巧，了 点设计，点本质，点在几何学的作用，点在
解点在网页设计中的作用
网页的作用
掌握线设计手法和技巧，了 线设计，线作用，线的视觉效果，线在网页
解线在网页设计中的作用
设计中的作用
掌握面设计手法和技巧，了 面设计，面在几何学的作用，面的表现形式，
图3.6 网站首页
第3单元 网页艺术设计
3.2 点设计 3.2.1 点设计概述
图3.7所示的网页项目列表是多 个类似的点同时出现，在点与点之间 就会形成一种视觉上的连接线，点的 等距垂直排列，在视觉上形成虚拟的 竖线。起到分割页面的作用。如果项 目符号是水平排列的，则有种平稳、 安详的感觉。
图3.8点设计
第3单元 网页艺术设计
3.2 点设计 3.2.2 案例一
本案例采用点设计手法，案例 里有很多点，虽然元素都是相同的， 但是通过大小不同、高低不同或者相 同的组合，并不感觉页面单调，而是 产生跳跃、活泼、自然的感觉，通过 其明暗、位置、阴影、投影效果设置， 页面感觉很丰富，当然层次感（表示 环境的分层状态）、立体感也就体现 出来了。中心是网页的重心，并将标 志也放在中心点。它能吸引人的视线， 成为视线的集中处。最终的效果如图 3.9所示。
图3.9 最终网页效果图
第3单元 网页艺术设计
3.2 点设计 3.2.3 操作步骤
1.打开Photoshop cs3，按 Ctrl+N快捷键，将出现【新建】对话 框，具体设置如图3.10所示。单击 【确定】按钮。
2.前景色设置如图3.11左图所示。 按Alt+Delete键，填充背景图层。
3.按Ctrl+Shift+N键，新建图层， 按M键，在大概黄金分割点处制作矩 形选区，前景色设置如图3.11右图所 示。按Alt+Delete键，填充选区，按5 键，将此图层变为半透明。
解面在网页设计中的作用
面在网页设计的作用
掌握视觉流域的概念，掌握 美学概念和法则，掌握九对 形式美法则和自然法则
视觉流域，美学，美学法则，自然法则，网 页设计的法则
第3单元 Hale Waihona Puke Baidu页艺术设计
3.1 网页艺术设计概述
3.1.1 网页常用的图像格式以及优化 Web设计的流程经历了很多戏剧性的变化，其实设计如同万事万物一样，
图3.10 【新建】对话框 图 3.11 设置两次前景色
第3单元 网页艺术设计
图3.7 网页的项目列表
第3单元 网页艺术设计
3.2 点设计 3.2.1 点设计概述
图3.8所示的页 面是多个点，看一个 点会受到另外一个点 的干扰。三点连接构 成一个稳定的三角， 成为一个平面，多个 点还可以组合图形， 组合模块。注意点元 素放置的时候注意大 小，颜色的差别。如 果太一致就会产生呆 板的感觉。
图3.5 胡杨林的个人网页的截图
第3单元 网页艺术设计
3.2 点设计 3.2.1 点设计概述
如图3.6所示的网站首页，当网 页中有一个点时，它能吸引人的视线， 成为视线的集中处。点的本质是一种 体现动态张力的静止图形。实际上， 点在设计中可以起某种稳定图式、造 型的作用，而同一面中有三个点能形 成视觉感受稳定的面。
形式变化多样，但是优秀设计的原则和规律从未改变，无论网页配色，还是 浏览者浏览网页顺序，以及合理有效使用图形。
• 裁剪掉多余的白色区域 有时候你的图像周
围会留下空白区域，用 来避免它与文字或其他 页面元素靠在一起。作 为替代，裁剪掉空白， 然后使用CSS 来创建图 像周围的边距。如图3.1 所示。
图3.1 裁切图片
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.2 网页创意的基本表现形式
图3. 4 莫里斯的两幅作品点、线、 面是视觉构成的基本元素，自然界万 事万物的构成都离不开点、线、面。 点、线、面是表现视觉形象的基本设 计语言。网页设计实际上就是如何处 理好三者的关系，因为不管是任何视 觉形象或者版式构成，归结到底，都 可以归纳为点、线和面。图3.5是胡 杨林的个人官方网站首页的截图。
图3.3 画面构图
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.2 网页创意的基本表现形式
网页创意的基本表现形式也是构成， 这个构成从美术画面构成而来的，网页构 成可以理解为：在有限的网页空间里，将 网页构成要素—文字、图形、线条、和颜 色色块等因素，根据特定主题的需要进行 组合排列，并运用造型要素及形式原理， 把构思与计划以视觉形式表达出来。 构成的历史，应追溯到20世纪初英国的艺 术与手工艺运动领导人莫里斯，后人称之 为设计之父，其设计风格严谨、朴素大方、 十分简洁、淡雅。在构成中采用对称式构 图、美观的字体、新颖的面编排和精美的 装饰纹样，具有经久耐看的效果，如图3.4 是莫里斯的两幅作品。
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.1 网页常用的图像格式以及优化
•选用最佳的文件格式 对于包含简单平面插图
或 绘 画 的 图 像 ， 选 用 8-bit PNG 或GIF格式并减少调色 板中的颜色数目，如图3.2所 示的绘画图像。PhotoShop允 许你为 web 应用保存图像， 同时可以微调图像设置。通过 把调色板从256色改为32色， 就可以极大地减小文件尺寸。 图像的颜色数越少，文件越小。
图3.2 绘画图像
第3单元 网页艺术设计
3.1 网页艺术设计概述 3.1.2 网页创意的基本表现形式
画面构图是美术基本知识，
可以这样理解：比如一张白纸没 有任何的空间，当画上一条线， 就破坏了纸面的完整与稳定，就 出现了线将白纸分割的现象，那 么白纸出现了画面构图。如果在 纸上放置一个物体，那纸面就形 成了一个空间，如果放置两个以 上的物体，就得考虑形体的组合 方式，如图3.3所示左图一线分割 画面；中图一点在画面空间；右 图三点组合分割页面并且构成一 个三角形。
第3单元 网页艺术设计
教学要求
知识要点 点设计 线设计 面设计
美学法则
能力要求
关联知识
掌握点设计手法和技巧，了 点设计，点本质，点在几何学的作用，点在
解点在网页设计中的作用
网页的作用
掌握线设计手法和技巧，了 线设计，线作用，线的视觉效果，线在网页
解线在网页设计中的作用
设计中的作用
掌握面设计手法和技巧，了 面设计，面在几何学的作用，面的表现形式，