配套课件-网页设计与制作.ppt

1、第第1 1章章 网站的规划与设计网站的规划与设计学习目标：u了解计算机网络的基础知识u了解网站建设的常用工具u理解域名地址和IP地址u掌握网站建设的基本流程u掌握网站规划和设计方法主要内容主要内容1.1 1.1 计算机网络基础知识计算机网络基础知识1.2 1.2 域名与域名与IPIP地址地址1.3 1.3 网站建设的工作流程网站建设的工作流程1 1.4.4 网站建设常用工具网站建设常用工具1.51.5网站规划与设计案例分析网站规划与设计案例分析1.1 1.1 计算机网络基础知识计算机网络基础知识u 计算机网络的分类计算机网络的分类 局域网 城域网 广域网 u Internet概述概述 Inte

2、rnet示意图 1.1 1.1 计算机网络基础知识计算机网络基础知识uInternet提供的服务 万维网服务（WWW）文件传输服务（FTP）电子邮件服务（E-mail）远程登录服务（Telnet）网上寻呼 电子商务 u网页与网站 网站网页 1.2 1.2 域名与域名与IPIP地址地址uIP地址地址 A类类IP地址地址 B类类IP地址地址 C类类IP地址地址 u域名域名 域名地址与域名地址与IP地址的关系地址的关系 域名注册与域名抢注域名注册与域名抢注 顶级域名顶级域名.com 商业机构商业机构 .edu 教育机构教育机构 .gov 政府机构政府机构.org 组织机构组织机构.cn 中国中国.j

3、p 日本等日本等 1.3 1.3 网站建设的工作流程网站建设的工作流程 u 客户需求分析 明确网站建设者想要达到的目标 明确本网站的主要目标客户群及其需求 明确组织内部信息需求，确定网站在组织内部信息管理方面所提供的功能客户需求分析的方法u 前期调研 u 素材收集与制作 文案撰写 图像处理 动画制作 音频处理视频处理1.3 1.3 网站建设的工作流程网站建设的工作流程 u 网站的规划与设计 建立网站结构土 规划网站文件夹 u 网页设计与制作 u 网站测试 本地测试 在线测试 u 网站的发布与维护 1.4 1.4 网站建设常用工具网站建设常用工具 u 网页素材制作工具软件 文本素材制作软件 图像

4、素材制作软件动画素材制作软件音频素材处理软件视频素材处理软件u 网页制作工具软件 Dreamweaver Frontpage u 网络编程工具 java ASP.NET 1.5 1.5 网站规划与设计案例分析网站规划与设计案例分析 u 客户需求分析 本网站的设计目标本网站目标客户分析组织内部信息需求u 前期调研 u 网站的规划与设计 u 站点文件夹规划 第第2 2章章 网页图像设计与制作网页图像设计与制作学习目标：学习目标：u了解色彩的搭配了解色彩的搭配u认识认识Photoshop工作界面工作界面u掌握掌握Photoshop图像处理图像处理u掌握网站掌握网站Logo、网站、网站Banner制作

5、、导航栏制作制作、导航栏制作u掌握掌握Photoshop页面草图设计页面草图设计主要内容主要内容2.1 2.1 图像基础及色彩应用图像基础及色彩应用2.22.2 网页图像设计网页图像设计2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.1 2.1.1 矢量图形和位图图像矢量图形和位图图像计算机图形图像一般可以分为两大类计算机图形图像一般可以分为两大类矢量图形和位图图像。矢量图形和位图图像。1.1.矢量图形矢量图形矢量图形使用直线和曲线来描述图形，它们是通过数学公式计算获矢量图形使用直线和曲线来描述图形，它们是通过数学公式计算获得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放

6、大、得，所以矢量图形文件体积一般较小。矢量图形最大的优点是无论放大、缩小或旋转等不会失真。制作矢量图形常用的软件有缩小或旋转等不会失真。制作矢量图形常用的软件有FreehandFreehand、IllustratorIllustrator、CorelDrawCorelDraw等。等。矢量图形矢量图形 2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.1 2.1.1 矢量图形和位图图像矢量图形和位图图像2.2.位图图像位图图像位图图像也称为点阵图或栅格图像，位图图像由像素点组成。即图位图图像也称为点阵图或栅格图像，位图图像由像素点组成。即图像由一个个的颜色方格所组成，与分辨率有关，单位面

7、积内像素越多，像由一个个的颜色方格所组成，与分辨率有关，单位面积内像素越多，分辨率越高，图像的效果越好。制作位图图像常用的软件有分辨率越高，图像的效果越好。制作位图图像常用的软件有PhotoshopPhotoshop、PhotoImpactPhotoImpact等。等。位图图像位图图像 2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.2 2.1.2 常用的色彩模式常用的色彩模式1.HSB1.HSB颜色模式颜色模式HSBHSB颜色模式基于人眼对色彩的观察，把颜色分为色相（颜色模式基于人眼对色彩的观察，把颜色分为色相（H H）、纯度）、纯度（S S）、明度（）、明度（B B）三个要素，即

8、色彩的三要素。）三个要素，即色彩的三要素。（1 1）色相）色相色相也叫色调，是颜色的基本属性。色相是从物体反射或透过物体色相也叫色调，是颜色的基本属性。色相是从物体反射或透过物体传播的颜色。在传播的颜色。在 0 0 到到 360 360 度的标准色轮上，按位置度量色相。例如红、度的标准色轮上，按位置度量色相。例如红、橙、黄、绿、青、蓝、紫等。通过色相，人们才能区分彩色，人们通常橙、黄、绿、青、蓝、紫等。通过色相，人们才能区分彩色，人们通常说的颜色，其实就是指色相。如红色、橙色或绿色。说的颜色，其实就是指色相。如红色、橙色或绿色。色相色相 2.12.1 图像基础及色彩应用图像基础及色彩应用2.1

9、.2 2.1.2 常用的色彩模式常用的色彩模式1.HSB1.HSB颜色模式颜色模式（2 2）纯度）纯度纯度也叫饱和度，是指色彩的鲜艳程度。饱和度表示色相中灰色分纯度也叫饱和度，是指色彩的鲜艳程度。饱和度表示色相中灰色分量所占的比例，它使用从量所占的比例，它使用从 0%0%（灰色）至（灰色）至 100%100%（完全饱和）的百分比来（完全饱和）的百分比来度量。饱和度大，颜色就鲜艳，饱和度小，颜色看起来显得灰暗。度量。饱和度大，颜色就鲜艳，饱和度小，颜色看起来显得灰暗。（3 3）明度）明度明度也叫亮度，指颜色的深浅。在无色彩中，明度最高的色为白色，明度也叫亮度，指颜色的深浅。在无色彩中，明度最高的

10、色为白色，明度最低的色为黑色，中间存在一个从亮到暗的灰色系列。在有色彩中，明度最低的色为黑色，中间存在一个从亮到暗的灰色系列。在有色彩中，任何一种纯度色都有自己的明度特征。例如，黄色为明度最高的色，紫任何一种纯度色都有自己的明度特征。例如，黄色为明度最高的色，紫色为明度最低的色。色为明度最低的色。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.2 2.1.2 常用的色彩模式常用的色彩模式2.RGB2.RGB色彩模式色彩模式RGBRGB模式是基于自然界中模式是基于自然界中3 3种基色混合的，红（种基色混合的，红（R R）、绿（）、绿（G G）、蓝（）、蓝（B B）3 3种基色按照从种基

11、色按照从0 0到到255255的亮度值在每个色阶中分配，当不同亮度的基色混的亮度值在每个色阶中分配，当不同亮度的基色混合后，便会得到合后，便会得到256256256256256256种颜色，约为种颜色，约为16701670万种颜色。万种颜色。3.CMYK3.CMYK色彩模式色彩模式CMYKCMYK模式以打印在纸上的油墨的光线吸收特性为基础。纯青色（模式以打印在纸上的油墨的光线吸收特性为基础。纯青色（C C）、）、洋红（洋红（M M）、黄色（）、黄色（Y Y）、黑色（）、黑色（K K）。）。CMYK CMYK 模式中，为每个像素的每种模式中，为每个像素的每种印刷油墨指定一个百分比值。最亮（高光）

12、颜色指定的印刷油墨颜色百印刷油墨指定一个百分比值。最亮（高光）颜色指定的印刷油墨颜色百分比较低，而较暗（暗调）颜色指定的百分比较高。分比较低，而较暗（暗调）颜色指定的百分比较高。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.3 2.1.3 网页配色原理网页配色原理配色是网页设计中很重要的一个环节。配色的效果很大程度上决定配色是网页设计中很重要的一个环节。配色的效果很大程度上决定了浏览者对网站的第一印象。自然界中的色彩可以分为非彩色和彩色两了浏览者对网站的第一印象。自然界中的色彩可以分为非彩色和彩色两大类。黑、白和各种深浅不一的灰色属于非彩色，其它颜色属于彩色。大类。黑、白和各种深浅

13、不一的灰色属于非彩色，其它颜色属于彩色。1.1.基于色相的配色基于色相的配色（1 1）红色）红色红色给人以活力、热情、积极、温暖、前进的感觉。在很多使用了红色给人以活力、热情、积极、温暖、前进的感觉。在很多使用了红色的网站中，红色所担任的角色都是强调色，因为红色比较鲜明，易红色的网站中，红色所担任的角色都是强调色，因为红色比较鲜明，易吸引人们的眼球。红色除了具有较佳的明视效果之外，另外红色也常用吸引人们的眼球。红色除了具有较佳的明视效果之外，另外红色也常用来表示警告、危险、禁止、防火等。来表示警告、危险、禁止、防火等。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.3 2.1.3 网

14、页配色原理网页配色原理1.1.基于色相的配色基于色相的配色（2 2）黄色）黄色黄色的明度是色相中最高的，黄色给人明亮、快乐、希望、活泼和黄色的明度是色相中最高的，黄色给人明亮、快乐、希望、活泼和轻快的感觉。另外除了红色，黄色也常用来表示警告、危险、禁止、防轻快的感觉。另外除了红色，黄色也常用来表示警告、危险、禁止、防火等。火等。（3 3）橙色）橙色橙色是介于红色和黄色之间的混合色，给人明亮、快乐、希望、收橙色是介于红色和黄色之间的混合色，给人明亮、快乐、希望、收获、活泼和轻快的感觉，橙色加入少许的黑色或白色，给人稳重、含蓄获、活泼和轻快的感觉，橙色加入少许的黑色或白色，给人稳重、含蓄和明快的感

15、觉，加入较多的白色给人甜腻的感觉，橙色与浅灰色搭配给和明快的感觉，加入较多的白色给人甜腻的感觉，橙色与浅灰色搭配给人舒适的感觉。人舒适的感觉。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.3 2.1.3 网页配色原理网页配色原理1.1.基于色相的配色基于色相的配色（4 4）绿色）绿色绿色给人和平、宁静、希望、生长的感觉。在网站设计中，绿色所绿色给人和平、宁静、希望、生长的感觉。在网站设计中，绿色所传达的清爽、理想、希望、生长的意象，符合服务业、卫生保健业的要传达的清爽、理想、希望、生长的意象，符合服务业、卫生保健业的要求。求。（5 5）蓝色）蓝色蓝色给人平静、博大、安详、洁净、永恒

16、的感觉。深蓝色作为网页蓝色给人平静、博大、安详、洁净、永恒的感觉。深蓝色作为网页的主色调，表达了一种凝重的气氛，显得更加规矩。蓝色适合运用在高的主色调，表达了一种凝重的气氛，显得更加规矩。蓝色适合运用在高科技、医疗、文教、工业等为主题的网站。科技、医疗、文教、工业等为主题的网站。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.3 2.1.3 网页配色原理网页配色原理1.1.基于色相的配色基于色相的配色（6 6）紫色）紫色紫色给人优雅、高贵、魅力、自傲、轻率、神秘、惊恐的感觉。紫紫色给人优雅、高贵、魅力、自傲、轻率、神秘、惊恐的感觉。紫色中加入黑色，会变的沉闷、伤感，还有一点恐怖的感觉

17、。加入少许的色中加入黑色，会变的沉闷、伤感，还有一点恐怖的感觉。加入少许的红色给人危机感，加入少许的白色，给人优雅、充满女性的妩媚。红色给人危机感，加入少许的白色，给人优雅、充满女性的妩媚。（7 7）黑色和白色）黑色和白色黑色给人一种深沉、安全的感觉，可与任何颜色搭配。白色给人纯黑色给人一种深沉、安全的感觉，可与任何颜色搭配。白色给人纯洁、无辜、恢复、中立、永恒的感觉。洁、无辜、恢复、中立、永恒的感觉。（8 8）灰色）灰色灰色被认为是万能色，可以和任何彩色搭配。灰色被认为是万能色，可以和任何彩色搭配。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.3 2.1.3 网页配色原理网页配色

18、原理2.2.色彩在网页中的情感作用色彩在网页中的情感作用网页的色彩表现是丰富多彩的，不同色彩作用于人的视觉感官，最网页的色彩表现是丰富多彩的，不同色彩作用于人的视觉感官，最后形成的一系列的色彩心理反应。后形成的一系列的色彩心理反应。（1 1）色彩的冷暖）色彩的冷暖红色、橙色、黄色等颜色，让人联想到火焰、太阳等，产生温暖的红色、橙色、黄色等颜色，让人联想到火焰、太阳等，产生温暖的感觉，以这些颜色为主导的色调称为感觉，以这些颜色为主导的色调称为“暖色调暖色调”。青色、绿色、蓝色等。青色、绿色、蓝色等颜色让人联想到太空、冰雪等，产生寒冷的感觉，以这些颜色为主导的颜色让人联想到太空、冰雪等，产生寒冷的

19、感觉，以这些颜色为主导的色调称为色调称为“冷色调冷色调”。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.3 2.1.3 网页配色原理网页配色原理2.2.色彩在网页中的情感作用色彩在网页中的情感作用（2 2）色彩的轻重）色彩的轻重色彩的轻重在不同的领域起着不同的作用，明度高的亮色感觉轻，色彩的轻重在不同的领域起着不同的作用，明度高的亮色感觉轻，明度低的暗色感觉重。明度低的暗色感觉重。（3 3）色彩的前进与后退）色彩的前进与后退在同一距离观察不同的色彩时，暖色感觉比较前进，冷色感觉比较在同一距离观察不同的色彩时，暖色感觉比较前进，冷色感觉比较后退。后退。（4 4）色彩的兴奋与平静）色彩

20、的兴奋与平静暖色系中，明亮、纯度高的色彩给人兴奋的感觉，深暗、浑浊的色暖色系中，明亮、纯度高的色彩给人兴奋的感觉，深暗、浑浊的色彩给人沉静的感觉。彩给人沉静的感觉。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.4 2.1.4 网页色彩搭配网页色彩搭配色彩的搭配只有遵循一定的规律，才能使页面统一，使页面更有针色彩的搭配只有遵循一定的规律，才能使页面统一，使页面更有针对性。下面主要介绍网页配色时要注意的几个原则以及网页配色的技巧。对性。下面主要介绍网页配色时要注意的几个原则以及网页配色的技巧。1.1.网页色彩搭配原则网页色彩搭配原则（1 1）色彩的鲜明性）色彩的鲜明性网页的色彩要鲜艳，

21、网页的色彩要鲜艳，以引人注目。网站的用色要有以引人注目。网站的用色要有自己的风格，怎样才能给浏览自己的风格，怎样才能给浏览者留下深刻的印象是需要考虑者留下深刻的印象是需要考虑的问题。的问题。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.4 2.1.4 网页色彩搭配网页色彩搭配1.1.网页色彩搭配原则网页色彩搭配原则（2 2）色彩的独特性）色彩的独特性不同的色彩给浏览者不同的印象。如蓝色是很多企业的首选色。不同的色彩给浏览者不同的印象。如蓝色是很多企业的首选色。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.4 2.1.4 网页色彩搭配网页色彩搭配1.1.网页色彩搭配原则网

22、页色彩搭配原则（3 3）色彩的合适性）色彩的合适性色彩搭配要合适，就是说色彩和所要表达的内容气氛相适合。如粉色彩搭配要合适，就是说色彩和所要表达的内容气氛相适合。如粉色体现女性网站的柔美性。色体现女性网站的柔美性。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.4 2.1.4 网页色彩搭配网页色彩搭配1.1.网页色彩搭配原则网页色彩搭配原则（4 4）色彩的联想性）色彩的联想性不同色彩会产生不同的联想，如蓝色想到天空，绿色想到植物等，不同色彩会产生不同的联想，如蓝色想到天空，绿色想到植物等，选择的色彩要和网页内容相关联。如看到红色的剪纸就想到中国的民间选择的色彩要和网页内容相关联。如看

23、到红色的剪纸就想到中国的民间艺术。艺术。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.4 2.1.4 网页色彩搭配网页色彩搭配2.2.网页色彩搭配的技巧网页色彩搭配的技巧 网页颜色搭配直接影响到浏览者的情绪。好的色彩搭配会让浏览者网页颜色搭配直接影响到浏览者的情绪。好的色彩搭配会让浏览者心情舒畅，能够使浏览者愿意花时间浏览你的网页。因此，在网页色彩心情舒畅，能够使浏览者愿意花时间浏览你的网页。因此，在网页色彩搭配要注意一些技巧，使网页更具有活力和生命力。搭配要注意一些技巧，使网页更具有活力和生命力。（1 1）使用单色）使用单色先选定一种色彩，然后通过调整透明度或饱和度，产生新的色彩

24、用先选定一种色彩，然后通过调整透明度或饱和度，产生新的色彩用于网页。这样的页面看起来色彩统一，有层次感。于网页。这样的页面看起来色彩统一，有层次感。（2 2）使用对比色）使用对比色先选定一种色彩，然后选择它的对比色（互补色）。对比色可以产先选定一种色彩，然后选择它的对比色（互补色）。对比色可以产生强烈的视觉效果，合理的使用对比色可以使整个页面色彩丰富而不凌生强烈的视觉效果，合理的使用对比色可以使整个页面色彩丰富而不凌乱。乱。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.4 2.1.4 网页色彩搭配网页色彩搭配2.2.网页色彩搭配的技巧网页色彩搭配的技巧 （3 3）使用相邻色）使用相

25、邻色色相上色彩相邻的颜色，如红色和黄色，蓝色和绿色是相邻色，使色相上色彩相邻的颜色，如红色和黄色，蓝色和绿色是相邻色，使页面达到统一。页面达到统一。（4 4）使用黑色）使用黑色黑色与任何一个具有表现力的色彩都能够和谐的搭配在一起，网页黑色与任何一个具有表现力的色彩都能够和谐的搭配在一起，网页上大面积的黑色搭配一点色彩，网页就感觉很酷。上大面积的黑色搭配一点色彩，网页就感觉很酷。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.5 2.1.5 实例实例常见的几种配色方案常见的几种配色方案1.1.暖色调暖色调 红色、橙色、黄色是红色、橙色、黄色是“暖色暖色”，暖色与黑色搭配可以到达较好的效

26、，暖色与黑色搭配可以到达较好的效果。采用暖色调的网站显得热烈、兴奋。下图所示的网页采用了暖色调果。采用暖色调的网站显得热烈、兴奋。下图所示的网页采用了暖色调为主。为主。2.12.1 图像基础及色彩应用图像基础及色彩应用2.1.5 2.1.5 实例实例常见的几种配色方案常见的几种配色方案2.2.冷色调冷色调 青色、绿色、蓝色是青色、绿色、蓝色是“冷色冷色”，冷色与白色搭配可以到达教好的效，冷色与白色搭配可以到达教好的效果。采用冷色调的网站显得平静、洁净。下图所示的网页采用了冷色调果。采用冷色调的网站显得平静、洁净。下图所示的网页采用了冷色调为主。为主。2.12.1 图像基础及色彩应用图像基础及色

27、彩应用2.1.5 2.1.5 实例实例常见的几种配色方案常见的几种配色方案3.3.非彩色非彩色黑色、白色、灰色是黑色、白色、灰色是“非彩色非彩色”，他们可以和任意一种颜色搭配。，他们可以和任意一种颜色搭配。具有缓冲和调和作用，如下图所示。具有缓冲和调和作用，如下图所示。主要内容主要内容2.1 2.1 图像基础及色彩应用图像基础及色彩应用2.22.2 网页图像设计网页图像设计2.2.2 2 网页图像设计网页图像设计 2.2.1 2.2.1 图像格式简介图像格式简介图像是组成网页的元素之一，在网页适当位置添加图像，会使网页图像是组成网页的元素之一，在网页适当位置添加图像，会使网页内容丰富，更准确、

28、更快速地传递信息，因此掌握图像的创建、编辑至内容丰富，更准确、更快速地传递信息，因此掌握图像的创建、编辑至关重要。虽然计算机存在很多种图形文件格式，但关重要。虽然计算机存在很多种图形文件格式，但 Web Web 页面中通常使用页面中通常使用的只有三种，即的只有三种，即 GIFGIF、JPEG JPEG 和和 PNGPNG文件格式。文件格式。1.GIF1.GIF格式格式GIFGIF（图形交换格式）：文件最多使用（图形交换格式）：文件最多使用 256 256 种颜色，最适合显示色种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽调不连续或具有大面积单一颜色的图像，例

29、如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。有透明处理功能，支持动画效果。标或其它具有统一色彩和色调的图像。有透明处理功能，支持动画效果。2.2.2 2 网页图像设计网页图像设计 2.2.1 2.2.1 图像格式简介图像格式简介2.JPEG2.JPEG格式格式JPEGJPEG（联合图像专家组标准）：文件可以包含数百万种颜色，随着（联合图像专家组标准）：文件可以包含数百万种颜色，随着 JPEG JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。可以通过文件品质的提高，文件的大小和下载时间也会随之增加。可以通过压缩压缩 JPEG JPEG 文件在图像品质和文件大小之间达到良

30、好的平衡。这种压缩文件在图像品质和文件大小之间达到良好的平衡。这种压缩是一种有损压缩格式。是一种有损压缩格式。3.3.PNGPNG格式格式PNGPNG（可移植网络图形）：（可移植网络图形）：PNG PNG 是是Macromedia FireworksMacromedia Fireworks固有的文件固有的文件格式。格式。PNGPNG文件格式是一种替代文件格式是一种替代 GIF GIF 格式的无专利权限制的格式，用与格式的无专利权限制的格式，用与在在WWWWWW上无损压缩和显示图像。它包括对索引色、灰度、真彩色图像以及上无损压缩和显示图像。它包括对索引色、灰度、真彩色图像以及 Alpha Alp

31、ha 通道透明的支持。通道透明的支持。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介常用的网页图像处理软件有常用的网页图像处理软件有PhotoshopPhotoshop和和FireworksFireworks。其中。其中PhotoshopPhotoshop具有强大的图像处理功能，使用具有强大的图像处理功能，使用PhotoshopPhotoshop可以方便地处理图像、设计网可以方便地处理图像、设计网页草图、网页页草图、网页LogoLogo、网页按钮等图像。我们首先来了解一下、网页按钮等图像。我们首先来了解一下Photoshop

32、Photoshop CS4CS4工作界面。工作界面。1.1.操作界面操作界面操作界面主要由菜单栏、选项卡栏、应用程序栏、工具箱、面板等操作界面主要由菜单栏、选项卡栏、应用程序栏、工具箱、面板等几个部分组成。几个部分组成。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介Photoshop CS4的工作界面的工作界面2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介1.1.操作界面操作界面（1 1）菜单栏）菜单栏Photoshop CS4 Photoshop CS4 包

33、括文件、编辑、图像、图层、选择、滤镜、分析、包括文件、编辑、图像、图层、选择、滤镜、分析、3D3D、视图、窗口和帮助、视图、窗口和帮助1111个主菜单。个主菜单。Photoshop CS4Photoshop CS4新增了一个新增了一个3D3D菜单，菜单，3D3D菜单可以处理和合并现有的菜单可以处理和合并现有的 3D 3D 对象、创建新的对象、创建新的3D3D对象、编辑和创建对象、编辑和创建3D3D纹理及组合纹理及组合3D3D对象与对象与2D2D图像。图像。菜单栏菜单栏2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介1.1.操作界

34、面操作界面（2 2）应用程序栏）应用程序栏Photoshop CS4Photoshop CS4中新增了应用程序栏，用户可以更方便地选择命令从中新增了应用程序栏，用户可以更方便地选择命令从而对图像进行编辑。而对图像进行编辑。应用程序栏应用程序栏 2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介1.1.操作界面操作界面（3 3）工具箱）工具箱工具箱位于屏幕左侧。通过工具箱中的工具可以输入文字、绘画、工具箱位于屏幕左侧。通过工具箱中的工具可以输入文字、绘画、绘制、编辑、移动、注释和查看图像，或对图像进行取样。工具图标右绘制、编辑、移动

35、、注释和查看图像，或对图像进行取样。工具图标右下角的小三角形表示存在隐藏工具。下角的小三角形表示存在隐藏工具。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介 工具箱工具箱2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介1.1.操作界面操作界面（4 4）选项卡栏）选项卡栏选项卡栏与工具箱中的所选工具有关，会随着工具箱中所选工具的选项卡栏与工具箱中的所选工具有关，会随着工具箱中所选工具的不同而变化，如图所示。选项卡栏中的某些设置对于许多工具是通用的，不同而变化，如图

36、所示。选项卡栏中的某些设置对于许多工具是通用的，有些设置则专用于某个工具。有些设置则专用于某个工具。“矩形工具矩形工具”选项卡栏选项卡栏 2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介1.1.操作界面操作界面（5 5）面板）面板面板可以监视和修改用户的图像。下图为图层面板和颜色面板组。面板可以监视和修改用户的图像。下图为图层面板和颜色面板组。图层面板和颜色面板组图层面板和颜色面板组2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介1.1.操作界面操作界面（6 6）

37、文档窗口）文档窗口文档窗口主要用于图像文件的显示、编辑。单击应用程序栏文档窗口主要用于图像文件的显示、编辑。单击应用程序栏 ，选择，选择“使所有内容在窗口浮动使所有内容在窗口浮动”命令，可以使所有打开的文件浮动在工作区。命令，可以使所有打开的文件浮动在工作区。文档窗口显示图像的名称、格式、显示比例、色彩模式以及当前图层等文档窗口显示图像的名称、格式、显示比例、色彩模式以及当前图层等信息。信息。（7 7）状态栏）状态栏状态栏位于每个文档窗口的底部，显示文档信息。状态栏位于每个文档窗口的底部，显示文档信息。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网

38、页图形图像处理工具简介2.2.设置前景色和背景色设置前景色和背景色颜色是构成图像的元素，可以使用颜色是构成图像的元素，可以使用“拾色器拾色器”对话框为图像设置颜对话框为图像设置颜色。色。在在PhotoshopPhotoshop中，默认的前景色是黑色，背景色是白色。当设置了其中，默认的前景色是黑色，背景色是白色。当设置了其它颜色后要恢复默认设置的颜色，单击它颜色后要恢复默认设置的颜色，单击“默认前景色和背景色默认前景色和背景色”按按钮钮 。要切换前景色和背景色，单击。要切换前景色和背景色，单击“切换前景色和背景色交换切换前景色和背景色交换”按按钮钮 ，如图所示。如图所示。2.2.2 2 网页图像

39、设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介3.3.选取图像选取图像在选定区域内可以编辑各种效果，同时保持未选定区域不会被改动。在选定区域内可以编辑各种效果，同时保持未选定区域不会被改动。工具箱中直接创建选区的工具有工具箱中直接创建选区的工具有“选框工具选框工具”、“套索工具套索工具”、“魔棒魔棒工具工具”、“快速选择工具快速选择工具”。若要在整个图像或选定区域内选择一种特。若要在整个图像或选定区域内选择一种特定颜色或颜色范围，可以执行定颜色或颜色范围，可以执行“图像图像”|“色彩范围色彩范围”命令。命令。l羽化羽化 设置选区边缘像素的模糊程度。数

40、值越大，边缘模糊程度越大。设置选区边缘像素的模糊程度。数值越大，边缘模糊程度越大。4.4.渐变工具渐变工具渐变工具可以创建多种颜色间的逐渐过度效果。渐变工具可以创建多种颜色间的逐渐过度效果。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介4.4.渐变工具渐变工具2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径路径就是由贝塞尔曲线构成的线条或图形。路径是不包含像素的矢路径就是由贝塞尔曲线构成的线条或图形。路径是不包含像素的矢量对象，与图像是分开的，不

41、会被打印出来。路径可以是闭合的，也可量对象，与图像是分开的，不会被打印出来。路径可以是闭合的，也可以是开放的。路径有一个或多个直线段或曲线段、方向线、方向点和锚以是开放的。路径有一个或多个直线段或曲线段、方向线、方向点和锚点组成，如图所示。点组成，如图所示。A.A.锚点锚点B.B.直线段直线段C.C.方向线方向线D.D.方向点方向点E.E.曲线段曲线段2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径锚点有三种：不带方向线的路径由称为角点的锚点连接，平滑曲线锚点有三种：不带方向线的路径由称为角点的锚点连接，平滑曲线

42、由称为平滑点的锚点连接，锐化曲线由称为拐点的锚点连接由称为平滑点的锚点连接，锐化曲线由称为拐点的锚点连接,如图所示。如图所示。角点、平滑点和拐点角点、平滑点和拐点 2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径在在PhotoshopPhotoshop中使用任何形状工具、钢笔工具或自由钢笔工具进行绘中使用任何形状工具、钢笔工具或自由钢笔工具进行绘图之前，必须从选项栏中选取绘图模式。选取的绘图模式将决定是在自图之前，必须从选项栏中选取绘图模式。选取的绘图模式将决定是在自身图层上创建矢量形状、还是在当前图层上创建工作

43、路径或是在当前图身图层上创建矢量形状、还是在当前图层上创建工作路径或是在当前图层上创建栅格化形状。层上创建栅格化形状。矢量形状：使用形状或钢笔工具绘制的直线和曲线。矢量形状与分矢量形状：使用形状或钢笔工具绘制的直线和曲线。矢量形状与分辨率无关。辨率无关。路径：形状的轮廓是路径。路径可以转换为选区或者使用颜色填充路径：形状的轮廓是路径。路径可以转换为选区或者使用颜色填充和描边。通过编辑路径的锚点，可以很方便地改变路径的形状。和描边。通过编辑路径的锚点，可以很方便地改变路径的形状。栅格化形状：在当前图层绘制图像。栅格化形状：在当前图层绘制图像。2.2.2 2 网页图像设计网页图像设计 2.2.2

44、2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径（1 1）钢笔工具）钢笔工具绘制直线绘制直线在不同位置单击鼠标，可以创建由直线段组成的路径，如图所示。在不同位置单击鼠标，可以创建由直线段组成的路径，如图所示。创建直线段创建直线段2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径（1 1）钢笔工具）钢笔工具绘制曲线绘制曲线单击鼠标绘制第一个锚点，在曲线改变方向的位置单击并拖曳鼠标，单击鼠标绘制第一个锚点，在曲线改变方向的位置单击并拖曳鼠标，除了添加一个锚点外，该锚点两端还有方向线。方向线的

45、长度和斜度决除了添加一个锚点外，该锚点两端还有方向线。方向线的长度和斜度决定了曲线的形状。若要创建定了曲线的形状。若要创建C C形曲线，与前一条方向线的相反方向拖曳，形曲线，与前一条方向线的相反方向拖曳，然后松开鼠标。若要创建然后松开鼠标。若要创建 S S 形曲线，与前一条方向线相同的方向拖曳，形曲线，与前一条方向线相同的方向拖曳，然后松开鼠标，如图所示。然后松开鼠标，如图所示。绘制绘制C曲线和曲线和S 曲线曲线2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径绘制直线接曲线绘制直线接曲线绘制直线后，将绘制直线后，

46、将“钢笔工具钢笔工具”放置在所选直线段的最后锚点上，按放置在所选直线段的最后锚点上，按【AltAlt】键并拖曳鼠标，该锚点的方向线出现，拖动方向点。将鼠标定位键并拖曳鼠标，该锚点的方向线出现，拖动方向点。将鼠标定位到所需的下一个锚点位置，然后单击并拖曳鼠标添加一个新锚点及方向到所需的下一个锚点位置，然后单击并拖曳鼠标添加一个新锚点及方向线完成这段曲线的绘制，如图所示。线完成这段曲线的绘制，如图所示。绘制直线接曲线绘制直线接曲线2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径（2 2）路径和选区之间转换）路径和选区

47、之间转换l将路径转换为选区将路径转换为选区 任何闭合路径都可以转换为选区。将闭合路径转换为选区的操作步任何闭合路径都可以转换为选区。将闭合路径转换为选区的操作步骤如下：骤如下：在路径面板中选择要转换为选区的路径。单击路径面板底部的在路径面板中选择要转换为选区的路径。单击路径面板底部的“将将路径作为选区载入路径作为选区载入”按钮按钮 ，或按，或按【CtrlCtrl】键并单击路径面板中的路径缩键并单击路径面板中的路径缩览图，或在路径面板右上角单击览图，或在路径面板右上角单击 ，在菜单中选择，在菜单中选择“建立选区建立选区”命令。命令。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2

48、 网页图形图像处理工具简介网页图形图像处理工具简介5.5.路径路径（2 2）路径和选区之间转换）路径和选区之间转换l将选区转换为路径将选区转换为路径 任何选区都可以转换为路径。建立选区，将选区转换为闭合路径的任何选区都可以转换为路径。建立选区，将选区转换为闭合路径的操作步骤如下：操作步骤如下：单击路径面板底部的单击路径面板底部的“建立工作路径建立工作路径”按钮按钮 ，或路径面板上单击右，或路径面板上单击右上角上角 ，在菜单中选择，在菜单中选择“建立工作路径建立工作路径”。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介6.6.图

49、层图层Photoshop Photoshop 图层就如同堆叠在一起的透明纸。可以通过更改图层的图层就如同堆叠在一起的透明纸。可以通过更改图层的顺序和属性，从而改变图像的合成效果。也可以更改图层不透明度改变顺序和属性，从而改变图像的合成效果。也可以更改图层不透明度改变图层的透明度。图层的透明度。（1 1）添加图层）添加图层用户可以根据需要创建图层，执行用户可以根据需要创建图层，执行“图层图层”|“新建新建”|“图层图层”命令，命令，或单击图层面板底部的或单击图层面板底部的“创建新图层创建新图层”按钮。按钮。（2 2）删除图层）删除图层对于没有用的图层，可以将其删除。在图层面板中选择要删除的图对于

50、没有用的图层，可以将其删除。在图层面板中选择要删除的图层，执行层，执行“图层图层”|“删除删除”|“图层图层”命令，或在图层面板底部单击命令，或在图层面板底部单击“删删除图层除图层”按钮，或将该图层直接拖到按钮，或将该图层直接拖到“删除图层删除图层”按钮上。按钮上。2.2.2 2 网页图像设计网页图像设计 2.2.2 2.2.2 网页图形图像处理工具简介网页图形图像处理工具简介6.6.图层图层（3 3）合并图层）合并图层在图像设计过程中，创建的图层会越来越多，图层过多会使图像变在图像设计过程中，创建的图层会越来越多，图层过多会使图像变大，并且会使图像的处理速度变慢，因此，可以根据需要将一些图层