网页制作教程网页版面设计与制作

《网页制作教程网页版面设计与制作》由会员分享，可在线阅读，更多相关《网页制作教程网页版面设计与制作（62页珍藏版）》请在装配图网上搜索。

1、 掌握了网页布局方法仅仅是掌握了一项掌握了网页布局方法仅仅是掌握了一项版面布局技术，如何让版面设计得更美观、版面布局技术，如何让版面设计得更美观、得体，还需要学习版面设计的根本知识。本得体，还需要学习版面设计的根本知识。本工程将介绍版面的根本类型、设计准那么以工程将介绍版面的根本类型、设计准那么以及使用及使用PhotoshopPhotoshop制作版面的方法。制作版面的方法。工程四工程四 网页版面设计与制作网页版面设计与制作学习目标掌握版面的根本类型。掌握版面的根本类型。掌握版面的设计准那么。掌握版面的设计准那么。掌握使用掌握使用PhotoshopPhotoshop设计版面的方法。设计版面的方

2、法。任务一 版面的根本类型和设计准那么一一 版面的根本类型版面的根本类型二二 版面的设计准那么版面的设计准那么一一 版面的根本类型版面的根本类型概括起来，目前网页版面的根本类型主要有概括起来，目前网页版面的根本类型主要有10种，分别是种，分别是骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型和自由型。下面分别进行简要说明。焦点型、三角型和自由型。下面分别进行简要说明。1.骨骼型骨骼型骨骼型是一种标准的、理性的分割方法，通常有竖向或横骨骼型是一种标准的、理性的分割方法，通常有竖向或横向通栏、双栏、向通栏、双栏、3栏、栏

3、、4栏等几种，一般以竖向分栏为最多，如栏等几种，一般以竖向分栏为最多，如果综合运用这几种分栏形式效果会更好，如下图。果综合运用这几种分栏形式效果会更好，如下图。一一 版面的根本类型版面的根本类型2.满版型满版型满版型是指页面以图像充满整版，主要以图像为诉求点，满版型是指页面以图像充满整版，主要以图像为诉求点，也可将局部文字压置于图像之上。满版型视觉传达效果直观、也可将局部文字压置于图像之上。满版型视觉传达效果直观、强烈，给人一种舒展、大方的感觉。随着宽带的普及，这种版强烈，给人一种舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多，如下图。式在网页设计中的运用越来越多，如下图

4、。一一 版面的根本类型版面的根本类型3.分割型分割型分割型是指将整个页面分成上下或左右两局部，分别安排分割型是指将整个页面分成上下或左右两局部，分别安排图像和文案，有图像的局部感性而具活力，有文案的局部那么图像和文案，有图像的局部感性而具活力，有文案的局部那么理性而平静。通常可以调整图像和文案所占的面积，来调节比理性而平静。通常可以调整图像和文案所占的面积，来调节比照的强弱，如下图。照的强弱，如下图。一一 版面的根本类型版面的根本类型4.中轴型中轴型中轴型是指沿浏览器窗口的中轴将图像或文字作水平或垂中轴型是指沿浏览器窗口的中轴将图像或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含

5、蓄的感觉，直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉，垂直排列的页面给人以舒畅的感觉，如下图。垂直排列的页面给人以舒畅的感觉，如下图。一一 版面的根本类型版面的根本类型5.曲线型曲线型所谓曲线型是指图像、文字在页面上作曲线的分割或编排，所谓曲线型是指图像、文字在页面上作曲线的分割或编排，从而产生韵律与节奏，如下图。从而产生韵律与节奏，如下图。一一 版面的根本类型版面的根本类型6.倾斜型倾斜型页面主题形象或多幅图像、文字作倾斜编排，形成不稳定页面主题形象或多幅图像、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目，如下图。感或强烈的动感，引人注目，如下图。一一 版面的根本类型版面的

6、根本类型7.对称型对称型对称型页面给人一种稳定、严谨、庄重、理性的感受。对对称型页面给人一种稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称，一般采用相对对称的手法，以防称分为绝对对称和相对对称，一般采用相对对称的手法，以防止呆板，如下图。止呆板，如下图。一一 版面的根本类型版面的根本类型8.焦点型焦点型焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果，如下图。焦点型分果，如下图。焦点型分3种情况：种情况：1中心，以比照强烈的图片或文中心，以比照强烈的图片或文字置于页面的视觉中心；字置于页面的视觉中心；2向心，视觉元素引

7、导浏览者视线向页向心，视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法；是一种传统的手法；3离心，视觉元素引导浏览者视线向外辐射，离心，视觉元素引导浏览者视线向外辐射，那么形成一个离心的版式。离心版式是外向的、活泼的，更具现代感，那么形成一个离心的版式。离心版式是外向的、活泼的，更具现代感，运用时应注意防止凌乱。运用时应注意防止凌乱。一一 版面的根本类型版面的根本类型9.三角型三角型网页各视觉元素呈三角形排列。正三角形金字塔型最具稳定网页各视觉元素呈三角形排列。正三角形金字塔型

8、最具稳定性，倒三角形那么产生动感。侧三角形构成一种均衡版式，既安定又性，倒三角形那么产生动感。侧三角形构成一种均衡版式，既安定又有动感。如下图，整体看为正三角形的构图，主体形象稳定而突出。有动感。如下图，整体看为正三角形的构图，主体形象稳定而突出。一一 版面的根本类型版面的根本类型10.自由型自由型自由型的页面具有活泼、轻快的风格，传达随意、轻松的气氛，自由型的页面具有活泼、轻快的风格，传达随意、轻松的气氛，如下图。如下图。二二 版面的设计准那么版面的设计准那么在进行版面设计的时候，必须注意版面设计的根本准那么。在进行版面设计的时候，必须注意版面设计的根本准那么。下面是一些根本的建议，希望对读

9、者能有所帮助。下面是一些根本的建议，希望对读者能有所帮助。1.通用的网页设计建议通用的网页设计建议保持文件容量尽可能小，以便能够快速下载。保持文件容量尽可能小，以便能够快速下载。将最重要的信息放在第将最重要的信息放在第1个满屏幕区域。个满屏幕区域。将页面长度限制在两个到将页面长度限制在两个到3个满屏幕区域内。个满屏幕区域内。不要只为一个专门的平台或者浏览器设计网页。不要只为一个专门的平台或者浏览器设计网页。不要使用过多的动画。不要使用过多的动画。二二 版面的设计准那么版面的设计准那么2.文本设计建议文本设计建议对相似的元素使用相同的设计，对重要的元素在视觉对相似的元素使用相同的设计，对重要的元

10、素在视觉上要更加突出。上要更加突出。不要将所有文本设置为大写。不要将所有文本设置为大写。不要将大量文本设置为斜体。不要将大量文本设置为斜体。不要将文本同时设置为大写、粗体和斜体。不要将文本同时设置为大写、粗体和斜体。不要在没有必要的情况下插入换行符。不要在没有必要的情况下插入换行符。不要使用不要使用或者或者标签。标签。二二 版面的设计准那么版面的设计准那么3.图像设计建议图像设计建议对图像中大多数文字使用边缘平滑处理字体大小小对图像中大多数文字使用边缘平滑处理字体大小小于于“10的文本例外。的文本例外。将图像文件的大小保持在将图像文件的大小保持在30kB以下除非是确实需要以下除非是确实需要使用

11、较大的图片文件。使用较大的图片文件。消除透明图像周围的色晕。消除透明图像周围的色晕。不显示链接图像的蓝色边框线。不显示链接图像的蓝色边框线。每个图像都要提供替代文本，当图像无效时就显示替每个图像都要提供替代文本，当图像无效时就显示替代文本。代文本。不要将图像制作得像按钮一样，链接按钮图像除外。不要将图像制作得像按钮一样，链接按钮图像除外。二二 版面的设计准那么版面的设计准那么4.美观设计建议美观设计建议不要使网页上任何内容都居中对齐。不要使网页上任何内容都居中对齐。不要混合使用对齐方式。不要混合使用对齐方式。不要使用太多种颜色，最好先选择一到两种主流色和不要使用太多种颜色，最好先选择一到两种主

12、流色和一种强调色，并在整个网站中坚持一直使用下去。一种强调色，并在整个网站中坚持一直使用下去。不要使用重彩的平铺背景图案。不要使用重彩的平铺背景图案。不要使用黑底白字，特别是对较大量的小字体文本，不要使用黑底白字，特别是对较大量的小字体文本，最好选择一种柔和的颜色来反衬，例如淡灰色反衬黑色，或者最好选择一种柔和的颜色来反衬，例如淡灰色反衬黑色，或者淡蓝色反衬深蓝色。淡蓝色反衬深蓝色。二二 版面的设计准那么版面的设计准那么5.主页设计建议主页设计建议表达站点的标识和使命。表达站点的标识和使命。加强网站导航和站点层次功能。加强网站导航和站点层次功能。对于信息量大的网站，提供搜索功能是很必要的。对于

13、信息量大的网站，提供搜索功能是很必要的。导读，主页要用一些导读，主页要用一些“里面有精彩内容的暗示来吸引用户。里面有精彩内容的暗示来吸引用户。内容更新，如果网站的成功取决于用户是否经常来访，那么主内容更新，如果网站的成功取决于用户是否经常来访，那么主页应该有一些经常更新的内容。页应该有一些经常更新的内容。如果网站使用会员制，主页应该为新用户注册和老用户登录提如果网站使用会员制，主页应该为新用户注册和老用户登录提供链接或者直接出现登录框，防止用户到处寻找。供链接或者直接出现登录框，防止用户到处寻找。主页应该设法让用户想要的任何东西都显而易见，防止将一些主页应该设法让用户想要的任何东西都显而易见，

14、防止将一些重要内容放在网页的角落里。重要内容放在网页的角落里。主页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，主页应该让用户看到一些很精彩的、用户也许会感兴趣的内容，就算用户并没有寻找他们。就算用户并没有寻找他们。任务二任务二 制作制作“夏威夷页面夏威夷页面制作制作“夏威夷页面，如下图。通过本实例的制作，掌握使用夏威夷页面，如下图。通过本实例的制作，掌握使用Photoshop CS3制作版面的根本方法。制作版面的根本方法。一一 预备知识预备知识Photoshop CS3根底根底二二 任务实施任务实施制作制作“夏威夷夏威夷页面页面三三 延伸阅读延伸阅读图层、蒙板和通图层、蒙板和通道道一一

15、 预备知识预备知识Photoshop CS3Photoshop CS3根底根底现在根本上没有不使用图像的网页，因此，要想制作出精现在根本上没有不使用图像的网页，因此，要想制作出精美的网页，必须熟练掌握图像软件的使用方法。美的网页，必须熟练掌握图像软件的使用方法。1.认识认识Photoshop CS3Photoshop CS3的工作界面主要由标题栏、菜单栏、属性栏、的工作界面主要由标题栏、菜单栏、属性栏、工具箱、图像窗口、状态栏、控制面板等几局部，如下图。工具箱、图像窗口、状态栏、控制面板等几局部，如下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(1)工

16、具箱工具箱工具箱位于工作界面的左侧，工具箱位于工作界面的左侧，包含包含Photoshop CS3的各种图形的各种图形绘制和图像处理工具，如下图。绘制和图像处理工具，如下图。单击工具箱中最上方的单击工具箱中最上方的 按钮按钮或或 按钮，可以将工具箱转换按钮，可以将工具箱转换为单列或双列显示。为单列或双列显示。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(2)属性栏属性栏属性栏位于菜单栏的下方，当用户在工具箱中选择某个工属性栏位于菜单栏的下方，当用户在工具箱中选择某个工具时，属性栏中就会显示出相应的属性和控制参数，并且外观具时，属性栏中就会显示出相应的属性和控

17、制参数，并且外观上也会随着工具的改变而改变。例如，单击工具箱中的【横排上也会随着工具的改变而改变。例如，单击工具箱中的【横排文字】工具文字】工具 后，属性栏中就只显示与文本有关的选项及后，属性栏中就只显示与文本有关的选项及参数，在画面中输入文字后，单击【移动】工具参数，在画面中输入文字后，单击【移动】工具 来调整文来调整文字的位置，属性栏中将更新为与【移动】工具有关的选项，如字的位置，属性栏中将更新为与【移动】工具有关的选项，如下图。下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(3)控制面板控制面板控制面板位于界面的右侧，在控制面板位于界面的右侧，在

18、Photoshop CS3中共提供了中共提供了21种控制面板。利用这些控制面板可以对当前图像的色彩、大小种控制面板。利用这些控制面板可以对当前图像的色彩、大小显示、样式以及相关的操作等进行设置和控制。显示、样式以及相关的操作等进行设置和控制。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底2.创立和保存文件创立和保存文件选择【文件】选择【文件】/【新建】命令，弹出【新建】对话框，进行【新建】命令，弹出【新建】对话框，进行参数设置后单击参数设置后单击 按钮，将创立新的图像文件，如下按钮，将创立新的图像文件，如下图。图。一一 预备知识预备知识Photoshop C

19、S3Photoshop CS3根底根底对于新建的文件进行编辑后保存，选择【存储】和【存储对于新建的文件进行编辑后保存，选择【存储】和【存储为】命令的性质是一样的，都是为当前文件命名并进行保存。为】命令的性质是一样的，都是为当前文件命名并进行保存。但对于翻开的文件进行编辑后再保存，就要分清【存储】命令但对于翻开的文件进行编辑后再保存，就要分清【存储】命令还是【存储为】命令，【存储】命令是将文件以原文件名进行还是【存储为】命令，【存储】命令是将文件以原文件名进行保存，而【存储为】命令可将修改的文件重命名后进行保存。保存，而【存储为】命令可将修改的文件重命名后进行保存。在文件存储时，需要设置文件的存

20、储格式。在文件存储时，需要设置文件的存储格式。PSD格式是格式是Photoshop的专用格式，它能保存图像数据的的专用格式，它能保存图像数据的每一个细节，还可以保存图像中各图层的效果和相互关系，各每一个细节，还可以保存图像中各图层的效果和相互关系，各图层之间相互独立，便于对单独的图层进行修改和制作各种特图层之间相互独立，便于对单独的图层进行修改和制作各种特效。其唯一的缺点是存储的图像文件特别大。效。其唯一的缺点是存储的图像文件特别大。JPEG格式是最卓越的压缩格式。虽然它是一种有损失格式是最卓越的压缩格式。虽然它是一种有损失的压缩格式，但是在图像文件压缩前，可以在文件压缩对话框的压缩格式，但是

21、在图像文件压缩前，可以在文件压缩对话框中选择所需图像的最终质量，这样就有效地控制了中选择所需图像的最终质量，这样就有效地控制了JPEG在压缩在压缩时的数据损失量。时的数据损失量。JPEG格式支持格式支持CMYK、RGB和灰度颜色模和灰度颜色模式的图像，不支持式的图像，不支持Alpha通道。通道。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底GIF格式的文件是格式的文件是8位图像文件，几乎所有的软件都支持位图像文件，几乎所有的软件都支持该格式。它能存储成背景透明化的图像形式，所以这种格式的该格式。它能存储成背景透明化的图像形式，所以这种格式的文件大多用于网络传

22、输，并且可以将多张图像存储成一个档案，文件大多用于网络传输，并且可以将多张图像存储成一个档案，形成动画效果。但它最大的缺点是只能处理形成动画效果。但它最大的缺点是只能处理256种色彩的图像文种色彩的图像文件。件。PNG格式可以使用无损压缩方式压缩文件，支持带一个格式可以使用无损压缩方式压缩文件，支持带一个Alpha通道的通道的RGB颜色模式、灰度模式及不带颜色模式、灰度模式及不带Alpha通道的位图、通道的位图、索引颜色模式。它产生的透明背景没有锯齿边缘。索引颜色模式。它产生的透明背景没有锯齿边缘。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底3.编辑图像编

23、辑图像下面介绍编辑图像的常用操作。下面介绍编辑图像的常用操作。(1)创立选区创立选区如果要选择整幅图像，可以选择【选择】如果要选择整幅图像，可以选择【选择】/【全部】命令。【全部】命令。如果在图像中选择了局部区域，此时要将所选择区域以外的区如果在图像中选择了局部区域，此时要将所选择区域以外的区域选择，可以选择【选择】域选择，可以选择【选择】/【反向】命令。在【反向】命令。在Photoshop中，中，大局部的选择是针对图像的局部区域而不是整幅图像。当用户大局部的选择是针对图像的局部区域而不是整幅图像。当用户只对图像中的某个区域进行复制、删除、填充等操作时，可以只对图像中的某个区域进行复制、删除、

24、填充等操作时，可以先创立该区域的选区，然后再编辑，这样只会改变选区内的图先创立该区域的选区，然后再编辑，这样只会改变选区内的图像，而选区外的图像不会受到影响。在像，而选区外的图像不会受到影响。在Photoshop中，创立选区中，创立选区的方法有多种，可以使用选区工具直接创立选区，也可以使用的方法有多种，可以使用选区工具直接创立选区，也可以使用命令来创立选区。命令来创立选区。当在工具箱中选择选区工具按钮时，在属性栏会显示该工当在工具箱中选择选区工具按钮时，在属性栏会显示该工具的属性参数，可以根据实际需要进行设置，然后再创立选区。具的属性参数，可以根据实际需要进行设置，然后再创立选区。一一 预备知

25、识预备知识Photoshop CS3Photoshop CS3根底根底(2)填充选区填充选区填充选区就是在选区的内部填充颜色或图案。选择【编辑填充选区就是在选区的内部填充颜色或图案。选择【编辑】/【填充】命令不仅可以填充前景色、背景色和图案，而且还【填充】命令不仅可以填充前景色、背景色和图案，而且还可以设置填充颜色或图案的混合模式和不透明度。【填充】对可以设置填充颜色或图案的混合模式和不透明度。【填充】对话框及效果图如下图。话框及效果图如下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(3)描边选区描边选区描边选区是指沿着图像选区的边缘描绘指定宽度的颜色

26、。描边选区是指沿着图像选区的边缘描绘指定宽度的颜色。如果要对选区进行描边，可选择【编辑】如果要对选区进行描边，可选择【编辑】/【描边】命令，在弹【描边】命令，在弹出的【描边】对话框中进行参数设置，如下图。出的【描边】对话框中进行参数设置，如下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(4)羽化图像羽化图像羽化在处理图像中应用广泛，是通过建立选区和选区周围羽化在处理图像中应用广泛，是通过建立选区和选区周围像素之间的转换边界来模糊边缘。在设置羽化值后，选区的虚像素之间的转换边界来模糊边缘。在设置羽化值后，选区的虚线框会缩小并且拐角变得平滑，填充的颜色不再

27、局限于选区的线框会缩小并且拐角变得平滑，填充的颜色不再局限于选区的虚线框内，而是扩展到了选区之外并且呈现逐渐淡化的效果。虚线框内，而是扩展到了选区之外并且呈现逐渐淡化的效果。羽化图像的常用方法是，先选择图像的某个区域，然后在选区羽化图像的常用方法是，先选择图像的某个区域，然后在选区工具属性栏的【羽化】文本框中设置羽化值，或选择【选择】工具属性栏的【羽化】文本框中设置羽化值，或选择【选择】/【修改】【修改】/【羽化】命令，在弹出的【羽化选区】对话框中设置【羽化】命令，在弹出的【羽化选区】对话框中设置羽化值，最后反选图像，按羽化值，最后反选图像，按Delete键删除反选区域，如下图。键删除反选区域

28、，如下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(5)变换图像变换图像选择【编辑】选择【编辑】/【自由变换】命令，可以对图像中的选区或除【自由变换】命令，可以对图像中的选区或除背景层以外的所有图层进行放大、缩小和旋转等自由变形处理。背景层以外的所有图层进行放大、缩小和旋转等自由变形处理。选择【编辑】选择【编辑】/【变换】中的相应命令，可以对图像中的选区或除【变换】中的相应命令，可以对图像中的选区或除背景层以外的所有图层进行更丰富的变换操作，如下图。背景层以外的所有图层进行更丰富的变换操作，如下图。一一 预备知识预备知识Photoshop CS3Pho

29、toshop CS3根底根底(6)旋转画布旋转画布在编辑图像时、可能会对整个图像进行旋转，例如在编辑图像时、可能会对整个图像进行旋转，例如180旋转、旋转、90旋转、水平翻转和垂直翻转等。要对图像进行旋转或翻转，首旋转、水平翻转和垂直翻转等。要对图像进行旋转或翻转，首先需要翻开该图像，然后选择【图像】先需要翻开该图像，然后选择【图像】/【旋转画布】中的相应命【旋转画布】中的相应命令即可，如下图。如果选择【图像】令即可，如下图。如果选择【图像】/【旋转画布】【旋转画布】/【任意角度【任意角度】命令，将弹出【旋转画布】对话框，如下图，可对其参数进行】命令，将弹出【旋转画布】对话框，如下图，可对其参

30、数进行设置。设置。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底4.编辑文字编辑文字在图像处理中，文字是经常用到的，一件完整的作品都需要在图像处理中，文字是经常用到的，一件完整的作品都需要有文字内容来说明主题或通过特殊编排的文字来衬托整个画面。有文字内容来说明主题或通过特殊编排的文字来衬托整个画面。(1)输入文字输入文字在在Photoshop CS3中，可利用工具箱中的中，可利用工具箱中的 横排文字工具、横排文字工具、直排文字工具输入横排或直排文字，利用直排文字工具输入横排或直排文字，利用 横排文字蒙版横排文字蒙版工具和工具和 直排文字蒙版工具创立文字形状的

31、选区。如果要直排文字蒙版工具创立文字形状的选区。如果要处理的文字较多，可以按住鼠标左键并拖曳，绘制矩形框，然后处理的文字较多，可以按住鼠标左键并拖曳，绘制矩形框，然后在矩形框内输入所需的段落文本。通过文字属性栏中的在矩形框内输入所需的段落文本。通过文字属性栏中的 创立创立文字变形工具按钮，可以在保持文字可编辑的状态下，使用系文字变形工具按钮，可以在保持文字可编辑的状态下，使用系统提供的统提供的15种不同的变形样式，将文字扭曲为不同的形状，使其种不同的变形样式，将文字扭曲为不同的形状，使其呈现弧形、旗帜等特殊效果，如下图。呈现弧形、旗帜等特殊效果，如下图。一一 预备知识预备知识Photoshop

32、 CS3Photoshop CS3根底根底一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(2)栅格化文字栅格化文字在在Photoshop中，不能使用画笔工具、铅笔工具、渐变工具等中，不能使用画笔工具、铅笔工具、渐变工具等绘画工具直接在文本图层上绘画，也不能直接对其应用滤镜操作。绘画工具直接在文本图层上绘画，也不能直接对其应用滤镜操作。要解决这个问题，需要将文本图层进行栅格化处理。方法是，选要解决这个问题，需要将文本图层进行栅格化处理。方法是，选中文本图层，然后选择【图层】中文本图层，然后选择【图层】/【栅格化】【栅格化】/【文字】或【图层】【文字】或【图层】

33、命令即可。文本图层一旦被转换为普通图层，用户将无法再编辑命令即可。文本图层一旦被转换为普通图层，用户将无法再编辑文本内容。文本图层经过栅格化变为普通图层后，就可以使用画文本内容。文本图层经过栅格化变为普通图层后，就可以使用画笔等工具对文字进行修改了，如下图。笔等工具对文字进行修改了，如下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底(3)路径和文字路径和文字在在Photoshop中，通过沿路径或在路径内部输入文字的方法，中，通过沿路径或在路径内部输入文字的方法，可以制作出优美的文字曲线或以各种形状编排文本效果。例如，可以制作出优美的文字曲线或以各种形状编

34、排文本效果。例如，在工具箱中选择钢笔工具在工具箱中选择钢笔工具 ，然后在属性栏中单击，然后在属性栏中单击 路径路径按钮，在图像窗口中通过依次单击鼠标绘制一条路径开放或封按钮，在图像窗口中通过依次单击鼠标绘制一条路径开放或封闭均可，再在工具箱中单击闭均可，再在工具箱中单击 横排文字工具按钮，将鼠标横排文字工具按钮，将鼠标指针移至路径上，当鼠标指针呈指针移至路径上，当鼠标指针呈 形状后单击鼠标确定一个插入形状后单击鼠标确定一个插入点，等到出现闪烁的光标后，即可沿路径输入文本，如下图。点，等到出现闪烁的光标后，即可沿路径输入文本，如下图。一一 预备知识预备知识Photoshop CS3Photosh

35、op CS3根底根底5.图层样式图层样式图层样式主要包括投影、阴影、发光、斜面和浮雕以及描边图层样式主要包括投影、阴影、发光、斜面和浮雕以及描边等。利用图层样式可以对图层中的图像快速应用效果，通过【图等。利用图层样式可以对图层中的图像快速应用效果，通过【图层样式】面板还可以查看各种预设的图层样式，并且仅通过单击层样式】面板还可以查看各种预设的图层样式，并且仅通过单击鼠标即可在图像中应用样式，也可以通过对图层中的图像应用多鼠标即可在图像中应用样式，也可以通过对图层中的图像应用多种效果创立自定样式。种效果创立自定样式。如果要对图层应用样式，选择【图层】如果要对图层应用样式，选择【图层】/【图层样式

36、】中的相【图层样式】中的相应命令即可，如下图，如选择【混合选项】命令，将弹出图所示应命令即可，如下图，如选择【混合选项】命令，将弹出图所示【图层样式】对话框，对其进行参数设置即可。【图层样式】对话框，对其进行参数设置即可。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底6.创立和保存切片创立和保存切片在工具箱中，切片工具在工具箱中，切片工具 主要用于分割图像，切片选择工具主要用于分割图像，切片选择工具 主要用于编辑切片。创立切片的方法是，单击主要用于编辑切片。创立切片的方法是，单

37、击 工具按钮，将鼠工具按钮，将鼠标指针移动到图像窗口中适合的位置，按住鼠标左键并拖曳，释标指针移动到图像窗口中适合的位置，按住鼠标左键并拖曳，释放鼠标左键后即在图像中创立了切片，可以根据需要反复进行切放鼠标左键后即在图像中创立了切片，可以根据需要反复进行切割，如下图。割，如下图。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底6.创立和保存切片创立和保存切片利用利用 工具选择图像中切片名称显示为灰色的切片，然后单工具选择图像中切片名称显示为灰色的切片，然后单击属性栏中的击属性栏中的 按钮，可以将当前选择的切片激活，即左上按钮，可以将当前选择的切片激活，即左上角

38、的切片名称显示为蓝色。另外，单击属性栏中的角的切片名称显示为蓝色。另外，单击属性栏中的 按钮，按钮，在弹出的【划分切片】对话框中，可对当前选择的切片进行水平在弹出的【划分切片】对话框中，可对当前选择的切片进行水平或垂直分割。或垂直分割。切片创立完毕后，还要保存成适合网页使用的图像。选择【切片创立完毕后，还要保存成适合网页使用的图像。选择【文件】文件】/【存储为【存储为Web和设备所用格式】命令，弹出【存储为和设备所用格式】命令，弹出【存储为Web和设备所用格式】对话框，如下图。根据需要设置参数，然后单和设备所用格式】对话框，如下图。根据需要设置参数，然后单击击 按钮，弹出【将优化结果存储为】对

39、话框，按钮，弹出【将优化结果存储为】对话框，可以根据实际情况在【保存类型】下拉列表中选择相应的选项，可以根据实际情况在【保存类型】下拉列表中选择相应的选项，如如“仅限图像仅限图像*.gif，这样每个切片都将按顺序被保存成一个，这样每个切片都将按顺序被保存成一个单独的图像文件。在单独的图像文件。在Dreamweaver中，使用表格或中，使用表格或Div技术将图像技术将图像拼接为一幅完整的图像即可。拼接为一幅完整的图像即可。一一 预备知识预备知识Photoshop CS3Photoshop CS3根底根底二二 任务实施任务实施制作制作“夏威夷页夏威夷页面面在学习了在学习了Photoshop的根本知

40、识后，现在开始制作的根本知识后，现在开始制作“夏威夷夏威夷页面。页面。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道图层、蒙板和通道是图层、蒙板和通道是Photoshop学习中的学习中的3只只“拦路虎。下拦路虎。下面简要地阐述图层、蒙板和通道的根本知识，以到达融会贯穿、面简要地阐述图层、蒙板和通道的根本知识，以到达融会贯穿、灵活应用的目的。灵活应用的目的。1.认识图层认识图层图层是利用图层是利用Photoshop进行图形绘制和图像处理的最根本的命进行图形绘制和图像处理的最根本的命令，每一幅图像的处理都要在图层中进行。令，每一幅图像的处理都要在图层中进行。(1)图层的概念图层的概念使用图

41、层，可以将图像中各个元素分层处理和保存，从而方使用图层，可以将图像中各个元素分层处理和保存，从而方便图像的编辑处理。可以将图层想象成是一张张叠起来的透明画便图像的编辑处理。可以将图层想象成是一张张叠起来的透明画纸，如果图层上没有图像，就可以一直看到最下面的背景图层。纸，如果图层上没有图像，就可以一直看到最下面的背景图层。对图层的操作，主要通过【图层】面板进行，如下图。它的主要对图层的操作，主要通过【图层】面板进行，如下图。它的主要功能是显示当前图像的所有图层、图层样式、图层混合模式及【功能是显示当前图像的所有图层、图层样式、图层混合模式及【不透明度】等参数的设置，以方便设计者对图像进行编辑和修

42、改。不透明度】等参数的设置，以方便设计者对图像进行编辑和修改。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(2)图层的类型图层的类型图层类型主要有背景图层、普通图层、调节图层、效果图层、图层类型主要有背景图层、普通图层、调节图层、效果图层、形状图层、蒙幅员层和文本图层等几类。形状图层、蒙幅员层和文本图层等几类。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(3)创立图层创立图层选择【图层】选择【图层】/【新建】命令，弹出【新建】子菜单。中选择【新建】命令，弹出【新建】子菜单。中选择其中的【图层】命令时，系统将弹出如下图的【新建图层】对话其中的【图层】命令时，系统将弹出如下图的

43、【新建图层】对话框。在此对话框中，可以对新建图层的【颜色】、【模式】和【框。在此对话框中，可以对新建图层的【颜色】、【模式】和【不透明度】进行设置。不透明度】进行设置。中选择【背景图层】命令时，可以将背景图层改为一个普通中选择【背景图层】命令时，可以将背景图层改为一个普通图层，此时【背景图层】命令会变为【图层背景】命令。选择【图层，此时【背景图层】命令会变为【图层背景】命令。选择【图层背景】命令，可以将当前图层更改为背景图层。图层背景】命令，可以将当前图层更改为背景图层。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道中选择【组】命令时，将弹出如下图的【新建组】对话框。中选择【组】命令时

44、，将弹出如下图的【新建组】对话框。在此对话框中可以创立图层组，相当于图层文件夹。在此对话框中可以创立图层组，相当于图层文件夹。当【图层】面板中有链接图层时，【从图层建立组】命令才当【图层】面板中有链接图层时，【从图层建立组】命令才可用，选择此命令，可以新建一个图层组，并将当前链接的图层，可用，选择此命令，可以新建一个图层组，并将当前链接的图层，除背景图层外的其余图层放置在新建的图层组中。除背景图层外的其余图层放置在新建的图层组中。选择【通过复制的图层】命令，可以将当前画面选区中的图选择【通过复制的图层】命令，可以将当前画面选区中的图像通过复制生成一个新的图层，且原画面不会被破坏。像通过复制生成

45、一个新的图层，且原画面不会被破坏。选择【通过剪切的图层】命令，可以将当前画面选区中的图选择【通过剪切的图层】命令，可以将当前画面选区中的图像通过剪切生成一个新的图层，此时原画面将被破坏。像通过剪切生成一个新的图层，此时原画面将被破坏。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道2.认识蒙板认识蒙板蒙板是蒙板是Photoshop中用于制作图像特效的一种重要的处理手段，中用于制作图像特效的一种重要的处理手段，它可以保护图像的选择区域，并可将局部图像处理成透明或半透它可以保护图像的选择区域，并可将局部图像处理成透明或半透明效果，蒙板在图像合成中被广泛应用。明效果，蒙板在图像合成中被广泛应用

46、。(1)快速蒙板快速蒙板快速蒙板是一个临时性的蒙板，利用快速蒙板可以很容易地快速蒙板是一个临时性的蒙板，利用快速蒙板可以很容易地对选区进行修改。对选区进行修改。创立快速蒙板的方法是，首先在图像上创立一个选区，然后创立快速蒙板的方法是，首先在图像上创立一个选区，然后单击工具箱底部的单击工具箱底部的 以快速蒙板模式编辑按钮，这时图像上以快速蒙板模式编辑按钮，这时图像上就会出现一层红色的透明蒙板，如下图。就会出现一层红色的透明蒙板，如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道快速蒙板在默认情况下，是以快速蒙板在默认情况下，是以50%不透明度的红色填充图像，不透明度的红色填充图像，可

47、以根据需要来设置快速蒙板的不透明度和蒙板的颜色。创立好可以根据需要来设置快速蒙板的不透明度和蒙板的颜色。创立好蒙板后，双击工具箱中的蒙板后，双击工具箱中的 按钮，弹出【快速蒙板】对话框，在按钮，弹出【快速蒙板】对话框，在【色彩指示】选项中可以设置快速蒙板的方式，在【颜色】选项【色彩指示】选项中可以设置快速蒙板的方式，在【颜色】选项中可以设置蒙板的颜色和不透明度，如中可以设置蒙板的颜色和不透明度，如“#00ff00，最后再次单，最后再次单击工具箱中的击工具箱中的 按钮，效果如下图。按钮，效果如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道快速蒙板的编辑主要是使用画笔工具来对蒙板进行

48、不同透明快速蒙板的编辑主要是使用画笔工具来对蒙板进行不同透明度的涂抹，但凡被涂抹的地方都将作为选区。画笔的硬度决定涂度的涂抹，但凡被涂抹的地方都将作为选区。画笔的硬度决定涂抹边缘的羽化程度，硬度越小的画笔，创立出选区的羽化程度也抹边缘的羽化程度，硬度越小的画笔，创立出选区的羽化程度也就越大。在编辑快速蒙板时，当用白色涂抹时，蒙板为就越大。在编辑快速蒙板时，当用白色涂抹时，蒙板为0%不透明不透明度，表示增加原选区的大小。当用黑色涂抹时，蒙板为度，表示增加原选区的大小。当用黑色涂抹时，蒙板为100%不透不透明度，表示减少原选区的大小。当用其他颜色涂抹时，蒙板那么明度，表示减少原选区的大小。当用其他

49、颜色涂抹时，蒙板那么以该颜色的灰度色阶值来确定不透明度。如下图是分别使用黑色、以该颜色的灰度色阶值来确定不透明度。如下图是分别使用黑色、白色和其他颜色的画笔进行涂抹后的效果。当对快速蒙板编辑涂白色和其他颜色的画笔进行涂抹后的效果。当对快速蒙板编辑涂抹好后，就可以再次单击抹好后，就可以再次单击 按钮，退出快速蒙板模式。此时选区按钮，退出快速蒙板模式。此时选区和最初的选区相比，发生了如下图的变化。和最初的选区相比，发生了如下图的变化。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(2)图层蒙板图层蒙板图层蒙板是一种特殊的蒙板，图层蒙板附加在目标图层上，图层蒙板是一种特殊的蒙板，图层蒙板附加

50、在目标图层上，用于控制图层中的区域是进行隐藏还是显示。创立图层蒙板的方用于控制图层中的区域是进行隐藏还是显示。创立图层蒙板的方法是，翻开一幅图像，在【图层】面板中选中法是，翻开一幅图像，在【图层】面板中选中“图层图层1，然后在，然后在工具箱中选择魔棒工具工具箱中选择魔棒工具 ，按住，按住Shift键并在图像窗口中依次单击键并在图像窗口中依次单击鸟不同颜色的部位来创立鸟的选区，如下图。鸟不同颜色的部位来创立鸟的选区，如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道最后在【图层】面板中单击最后在【图层】面板中单击 按钮，为当前图层创立图层蒙按钮，为当前图层创立图层蒙板，如下图。板，如

51、下图。由此可见，使用图层蒙板的好处是，可以在不损坏图像的根由此可见，使用图层蒙板的好处是，可以在不损坏图像的根底上，自由地绘制出以假乱真、移花接木的艺术效果。底上，自由地绘制出以假乱真、移花接木的艺术效果。如果要断开图层与蒙板的链接，可以选择【图层】如果要断开图层与蒙板的链接，可以选择【图层】/【图层蒙【图层蒙板】板】/【取消链接】命令，或在【图层】面板中单击图层缩览图和【取消链接】命令，或在【图层】面板中单击图层缩览图和蒙板之间的蒙板之间的 链接按钮。如果要重新查看应用了蒙板的原图层链接按钮。如果要重新查看应用了蒙板的原图层效果，可以选择【图层】效果，可以选择【图层】/【图层蒙板】【图层蒙板

52、】/【停用】命令，暂时停【停用】命令，暂时停用图层蒙板。用图层蒙板。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(3)矢量蒙板矢量蒙板矢量蒙板是通过路径工具创立的一种图层矢量蒙板。利用矢矢量蒙板是通过路径工具创立的一种图层矢量蒙板。利用矢量蒙板可以显示或遮盖图层在路径中的内容。矢量蒙板与图层蒙量蒙板可以显示或遮盖图层在路径中的内容。矢量蒙板与图层蒙板主要的区别在于，矢量蒙板与分辨率无关，它主要是通过钢笔板主要的区别在于，矢量蒙板与分辨率无关，它主要是通过钢笔或形状工具来创立蒙板区域。创立矢量蒙板有两种方式。或形状工具来创立蒙板区域。创立矢量蒙板有两种方式。第第1种是利用菜单命令。在要

53、创立矢量蒙板的图层中，使用钢种是利用菜单命令。在要创立矢量蒙板的图层中，使用钢笔等路径工具绘制出一个要添加蒙板的路径，然后选择【图层】笔等路径工具绘制出一个要添加蒙板的路径，然后选择【图层】/【矢量蒙板】【矢量蒙板】/【当前路径】命令，即可给当前图层创立矢量蒙板，【当前路径】命令，即可给当前图层创立矢量蒙板，如下图。如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道第第2种是利用形状图层。使用路径工具时，在工具属性栏中单种是利用形状图层。使用路径工具时，在工具属性栏中单击击 形状图层按钮，创立路径时就会自动创立一个具有矢形状图层按钮，创立路径时就会自动创立一个具有矢量蒙板的图层。矢

54、量形状的颜色由前景色决定，并能进行修改。量蒙板的图层。矢量形状的颜色由前景色决定，并能进行修改。另外，矢量蒙板经过栅格化可转换为图层蒙板。方法是，在另外，矢量蒙板经过栅格化可转换为图层蒙板。方法是，在【图层】面板中选中矢量蒙板，然后选择【图层】【图层】面板中选中矢量蒙板，然后选择【图层】/【栅格化】【栅格化】/【矢量蒙板】命令即可。【矢量蒙板】命令即可。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道3.认识通道认识通道通道分为颜色通道、专色通道和通道分为颜色通道、专色通道和Alpha通道。前两种通道主要通道。前两种通道主要用来储存颜色信息，是根据颜色模式将颜色信息别离出来，以便用来储存

55、颜色信息，是根据颜色模式将颜色信息别离出来，以便查看和编辑。后一种通道主要用来储存选区，是以灰阶来表示并查看和编辑。后一种通道主要用来储存选区，是以灰阶来表示并记录选区，也可通过对记录选区，也可通过对Alpha通道颜色的改变来调整选区。在这通道颜色的改变来调整选区。在这3种通道中，颜色通道是不可缺少的，而后面的两种通道可以根据种通道中，颜色通道是不可缺少的，而后面的两种通道可以根据需要来创立。需要来创立。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(1)颜色通道颜色通道颜色通道主要用于保存颜色信息。当翻开一幅图像后，系统颜色通道主要用于保存颜色信息。当翻开一幅图像后，系统便自动创立了

56、相应的颜色通道，同时其图像模式决定了颜色通道便自动创立了相应的颜色通道，同时其图像模式决定了颜色通道的数量，如下图。例如，的数量，如下图。例如，RGB模式的图像中，通常含有红色、绿模式的图像中，通常含有红色、绿色和蓝色色和蓝色3个颜色通道，分别用于保存图像的红色、绿色和蓝色信个颜色通道，分别用于保存图像的红色、绿色和蓝色信息；息；CMYK模式的图像共有模式的图像共有4个颜色通道，分别对应着青色、洋红、个颜色通道，分别对应着青色、洋红、黄色和黑色黄色和黑色4种颜色；种颜色；Lab模式的图像共有模式的图像共有3个颜色通道，分别对应个颜色通道，分别对应于明度通道、于明度通道、a由红色到绿色的光谱变化

57、通道和由红色到绿色的光谱变化通道和b由蓝色到由蓝色到黄色的光谱变化通道；灰度模式图像的颜色通道只有一个，用黄色的光谱变化通道；灰度模式图像的颜色通道只有一个，用来表示图像的黑白两种颜色。索引颜色模式的颜色通道也只有一来表示图像的黑白两种颜色。索引颜色模式的颜色通道也只有一个，用于保存调色板中的位置信息。每个颜色通道用于保存图像个，用于保存调色板中的位置信息。每个颜色通道用于保存图像中相应颜色元素的信息，最后通过颜色通道的叠加来获取图像的中相应颜色元素的信息，最后通过颜色通道的叠加来获取图像的最终颜色。如果要改变图像的颜色通道的类型，只需转换成相应最终颜色。如果要改变图像的颜色通道的类型，只需转

58、换成相应颜色模式的图像即可。颜色模式的图像即可。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道对颜色通道的编辑，主要是通过对颜色通道灰阶亮度的改变来对颜色通道的编辑，主要是通过对颜色通道灰阶亮度的改变来调整图像中的颜色。对颜色通道亮度的调节，可使用一些增加亮度调整图像中的颜色。对颜色通道亮度的调节，可使用一些增加亮度的命令，如色阶命令、曲线命令等。例如，翻开一幅的命令，如色阶命令、曲线命令等。例如，翻开一幅RGB模式的图模式的图像，在【通道】面板中选择像，在【通道】面板中选择“绿通道，然后选择【图像】绿通道，然后选择【图像】/【调整

59、【调整】/【曲线】命令，弹出【曲线】对话框，如下图。【曲线】命令，弹出【曲线】对话框，如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道拖曳窗口中的曲线，降低图像中的绿色信息。最后在【通道】拖曳窗口中的曲线，降低图像中的绿色信息。最后在【通道】面板中选择面板中选择“RGB主通道，就可观察调整后的图像效果，如下图。主通道，就可观察调整后的图像效果，如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(2)专色通道专色通道专色通道主要用来描述专色信息。彩色印刷品是通过黄、洋红、专色通道主要用来描述专色信息。彩色印刷品是通过黄、洋红、青和黑青和黑4种原色印制而成的。由于印刷油墨

60、本身存在一定的颜色偏差，种原色印制而成的。由于印刷油墨本身存在一定的颜色偏差，所以印刷品在再现一些纯色时会出现很大的误差，为了更好地再现所以印刷品在再现一些纯色时会出现很大的误差，为了更好地再现印刷品中的纯色信息，尽量减少颜色误差，或者为在印刷品上实现印刷品中的纯色信息，尽量减少颜色误差，或者为在印刷品上实现某种特殊效果，会在印刷某种特殊效果，会在印刷4种原色之外，加印其他专制颜色，即专色。种原色之外，加印其他专制颜色，即专色。创立专色通道，即指定用于专色油墨印刷的附加印版。创立专色通道，即指定用于专色油墨印刷的附加印版。创立专色通道的方法是，用选区选择好需要创立专色的图像，创立专色通道的方法

61、是，用选区选择好需要创立专色的图像，在【通道】面板中，单击右上角的在【通道】面板中，单击右上角的 按钮，在弹出的快捷菜单中选择按钮，在弹出的快捷菜单中选择【新建专色通道】命令，弹出【新建专色通道】对话框，进行设置【新建专色通道】命令，弹出【新建专色通道】对话框，进行设置即可，如下图。即可，如下图。三三 延伸阅读延伸阅读图层、蒙板和通道图层、蒙板和通道(3)Alpha通道通道Alpha通道是一种储存选区的通道，是一种特殊的蒙板，它是利通道是一种储存选区的通道，是一种特殊的蒙板，它是利用颜色的灰阶亮度来储存选区的，是灰度图像，只能以黑、白、灰用颜色的灰阶亮度来储存选区的，是灰度图像，只能以黑、白、

62、灰来表现图像。在默认情况下，白色为选区局部，黑色为非选区局部，来表现图像。在默认情况下，白色为选区局部，黑色为非选区局部，中间的灰度表示具有一定透明度效果的选区。当通过快速蒙板制作中间的灰度表示具有一定透明度效果的选区。当通过快速蒙板制作选区时，会出现临时的蒙板通道，如果需要保存临时通道，可以将选区时，会出现临时的蒙板通道，如果需要保存临时通道，可以将其保存为其保存为Alpha通道。可以使用通道。可以使用Alpha通道创立并存储蒙板，这些蒙通道创立并存储蒙板，这些蒙板可以用于处理、隔离和保护图像的特定局部。当创立了一个选区板可以用于处理、隔离和保护图像的特定局部。当创立了一个选区后，单击【通道】面板底部的后，单击【通道】面板底部的 按钮，将创立一个按钮，将创立一个Alpha通道，也通道，也可选择【选择】可选择【选择】/【存储选区】命令，在弹出的【存储选区】对话框【存储选区】命令，在弹出的【存储选区】对话框中创立中创立Alpha通道，如下图。通道，如下图。实训实训设计设计“中国古代文化版面中国古代文化版面在学习了在学习了Photoshop的根本知识后，设计如下图的的根本知识后，设计如下图的“中国古代文中国古代文化版面，以进一步稳固这些知识。素材文件位于化版面，以进一步稳固这些知识。素材文件位于“工程素材工程素材工程工程四四实训文件夹下。实训文件夹下。