第4章-网页图像的制作与美化

第4章美化网页图像2014.11《网页设计与制作》第4章网页图像的制作与美化4.2Photoshop应用4.2Photoshop工作窗口4.1《网页设计与制作》本章要点AdobePhotoshop是Adobe公司推出的图像处理软件，是美化网页界面的最好助手。“我爱旅游”网站的模板设计，充分运用了PhotoshopCS6技术，取得了较好的视觉效果。本章以“我爱旅游”网站为基础，通过网页页眉制作、logo制作、按钮和文字美化等实例，介绍PhotoshopCS6在网页图像制作中的应用。掌握图层、图层蒙版、路径、选区的基本概念掌握渐变、文字、钢笔、选择、裁剪、移动、填充等工具的使用编辑图像、制作图像制作文字效果《网页设计与制作》4.1Photoshop工作窗口Photoshop可分为图像编辑、图像合成、校色调色及特效制作等部分。图像编辑是图像处理的基础，可以对图像做各种变换。例如，放大、缩小、旋转，图像的合成，色彩调整，特殊效果的制作等。快捷工具栏属性栏菜单栏工具箱工作区控制面板5.1.1《网页设计与制作》4.1Photoshop工作窗口Photoshop工作界面介绍4.1.1（1）快捷工具栏主要用于快速调整桌面布局及显示方式。例如，同时打开的多个图像文件以选项卡的方式显示，通过排列文档工具，可以快速控制多个文件在工作区的排列方式。（2）菜单栏包括文件、编辑、图像、图层、选择、滤镜、分析、3D、视图、窗口和帮助等11个菜单。单击任意一个菜单，将会弹出相应的下拉菜单，选择任意一个菜单项即可实现相应的操作。（3）工具箱工具箱包含各种图形绘制和图像处理工具。例如，对图像进行选择、移动、绘制、编辑和查看的工具；在图像中输入文字的工具；3D变换工具以及更改前景色和背景色的工具等。通过“窗口”菜单的“工具”选项，可以打开或关闭工具箱的显示。单击工具箱蓝条可以改变工具箱的形状；拖动工具箱蓝条，可移动工具箱到窗口的其它位置。工具按钮右下方的小三角，表示该工具有扩展工具，单击该按钮不松开，可弹出隐藏的工具。《网页设计与制作》4.1Photoshop工作窗口Photoshop工作界面介绍4.1.1（4）属性栏用于显示当前所选工具的参数和选项设置。在工具箱中选择不同的工具，属性栏将显示不同的选项和参数。（5）控制面板23种控制面板。利用控制面板可以对当前图像的色彩、尺寸、样式以及相关的参数进行设置。每个控制面板的右上角都有一个菜单按钮，单击该按钮可打开菜单。拖动右下角和面板边缘可以调节面板大小，单击面板的标题栏可将面板最小化，再次单击即可恢复原来的形状。（6）工作区工作区是指Photoshop工作窗口中的大片灰色区域，打开的图像文件将显示在工作区。按Tab键，即可将属性栏、工具箱和控制面板同时隐藏；再次按Tab键，可以重新显示。《网页设计与制作》4.1Photoshop工作窗口图像窗口的基本操作4.1.2（1）打开图像文件选择“文件”菜单的“打开”选项，或按Ctrl＋O快捷键，进入“打开”窗口。（2）多个图像文件在显示窗口的排列选择“窗口”菜单的“排列”、“层叠”选项，图像文件将以层叠方式在窗口显示；选择“窗口”菜单的“排列”、“平铺”选项，图像文件将以平铺方式在窗口显示。《网页设计与制作》4.1Photoshop工作窗口图像文件的基本操作4.1.3（1）新建图像文件选择“文件”菜单的“新建”选项，或按Ctrl＋N快捷键，进入“新建”对话框。·名称：默认文件名为“未标题-1”，可输入自己选择的名字。·预设：在下拉列表中提供了多种不同的图像尺寸。·宽度/高度：设置图像的大小，单位有像素、英寸、厘米、毫米、点、派卡、列等度量单位。当输入高度和宽度值后，对话框的“图像大小”显示出该图像使用的内存大小。·分辨率：设置新建图像文件的显示分辨率。分辨率大小决定了图像的清晰度，也决定了文件的大小。分辨率越高文件越清晰，图像文件也越大。·颜色模式：设置创建的图像所采用的颜色模式。有位图、灰度、RGB、CMYK和Lab等5种色彩模式。·背景内容：设定新图像的背景层颜色。有三种设置：白色：背景色为白色，这是常用的背景方式。背景色：以工具栏设定的背景色为背景颜色。透明：透明背景色不具有任何颜色，以棋盘栅格形式表示。《网页设计与制作》4.1Photoshop工作窗口图像文件的基本操作4.1.3《网页设计与制作》4.1Photoshop工作窗口图像文件的基本操作4.1.3（2）新建图像窗口新建图像窗口的标题栏有三个关于图形的信息，首先是图像的名称，名称后是缩放比例，最后是图像的颜色模式。窗口右侧的“图层”面板可以看到当前图像的图层情况。例如，当前图像仅有一个图层，即背景图层。窗口下方显示的是缩放比例。（3）保存图像文件第一次保存时，可选择“文件”菜单的“存储”选项，直接保存图像。如果需要保留原始文件，应选择“存储为”选项，在“存储选项”中选择“作为副本”选项，则将文件保存为一份副本。对于完成设计的图像，一般保存为两种类型的文件。PSD原始文件，用于以后的修改；JPG文件，用于插入网页。《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.11．知识点一：图层图层是Photoshop中最基本也是最重要的概念之一。一幅图像是由许多图像元素与渲染效果组成的。在图像设计过程中，往往希望对这些图像元素单独修改、编辑和渲染，而不影响其它图像元素。Photoshop的图层，允许将图像的不同元素绘制在不同的层上，每一个图层都具有独立性，所有图层上绘制的内容叠加起来就构成了完整的图像。例如，图4-4所示的图像含有5个图层，最底层的图层是图像背景层。因此，通过图层不仅可以单独编辑图层元素，还可以给图层添加样式、蒙版、改变图层的叠放顺序等。《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.12．知识点二：图层蒙版蒙版是浮在图层之上的一块挡板，它本身不包含图像数据，图层蒙版可以显示或隐藏图层的不同区域，通过编辑图层蒙版可以将大量的特效灵活地运用到图层中，而图层的原内容不会受到影响和破坏。例如，图4-4所示的图层面板中，“背景副本”有两个图层蒙版。3．知识点三：如何确定网页页眉图像的宽度值网页的大小通常以屏幕分辨率为参照，常用显示屏一般为800*600和1024*768两种。现在网页主流设计中通常以1024为标准。网页制作中，网页页面的两侧通常会留出一定距离的页边距。因此，作为网页页眉图像的宽度一般应在1000px以内。《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.1操作实例4-1制作上图所示的网页页眉图像操作步骤：（1）选择背景素材，并修改尺寸①在“文件”菜单选择“打开”选项，选择作为素材的图像文件。②使用裁剪工具，裁剪图片，设定大小为948px*281px。《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.1（2）新建图层与蒙版为了达到美化页眉的效果，通常使用渐变工具为背景图像添加渐变效果。①在“图层”面板复制背景层。右键单击“背景层”，在快捷菜单选择“复制图层”选项，在图4-7所示的“复制图层”对话框，保留图层默认名，单击“确定”按钮，即创建了一个新的背景层。②在“图层”面板添加蒙版。选中图层“背景副本”，单击“图层”面板下方的“添加图层蒙版”按钮，为图层设置蒙版。“复制图层”对话框复制图层添加蒙版《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.1（3）对背景设置渐变效果①在工具箱单击“渐变工具”，在其属性栏单击“可编辑渐变”按钮，进入“渐变编辑器”对话框。②选择第二个色块“前景色到透明渐变”，单击“确定”按钮。③在工具栏下方的颜色调板，设置前景色为白色。④在“图层”面板，选中图层“背景副本”，按住shift键，在工作区的图像上由上至下拖拽鼠标，添加白色透明渐变效果。白色渐变区域的大小取决于鼠标拖拽区域的大小，本例拖拽到图像垂直距离的三分之一处即可。⑤为图层“背景副本”添加第二块蒙版，选择渐变工具后，由下至上拖拽鼠标，为图像下方添加白色透明渐变效果。⑥在“文件”菜单选择“存储”选项，保存图像。在“文件”菜单选择“存储为”选项，保存一个PSD的原始文件。《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.1（4）为图像添加文字页眉图像中通常添加一些文字效果，这些文字即可以是静态效果的，也可以是FLASH制作的动态效果。静态效果的文字，可以利用Photoshop的文字工具进行编辑与制作。①单击工具栏的“文字”工具，在图像右侧单击鼠标设置文字插入点，输入文字“快乐去旅游”，按回车键换行，继续输入“行走人生路”。文字输入结束后，自动在“图层”面板添加一个新图层。②选中全部文字，在工具属性栏设置文字的大小与颜色。单击工具箱的“移动”工具，退出文字编辑状态。如果需要再次编辑文字，可重新选择“文字”工具，并在指定文字上单击，即可进入文字编辑状态。《网页设计与制作》4.2Photoshop应用利用渐变技术制作网页页眉图像4.2.1③为文字添加倾斜效果。在“编辑”菜单选择“自由变换”工具，进入编辑状态（文字周围出现黑色边框）。如下图所示。按住ctrl键，在文字编辑区右上角，按住鼠标左键向右拖拽，可以使文字产生向右倾斜的效果。调整好倾斜角度后，按回车键或在矩形框内双击鼠标左键，退出编辑状态。如果在拖拽鼠标的同时按住shift键，文字区域将按图像比例进行缩放。④参照步骤①-②，选择工具栏的文字工具，输入“HappytotravelWalkoflife”，并调整文字的位置与大小。⑤保存图像。《网页设计与制作》4.2Photoshop应用利用钢笔绘制网站LOGO4.2.21．知识点一：钢笔工具使用钢笔工具可以绘制出比较精细的线段轨迹。绘制时，首先单击钢笔工具，在图像工作区单击鼠标绘制节点，节点之间将自动连线。如果绘制曲线，可以单击并按住鼠标拖拽，在节点处将得到贝兹曲线调节柄，拖拽调节柄可以调节曲线的曲度。如下图所示。钢笔的绘制《网页设计与制作》4.2Photoshop应用利用钢笔绘制网站LOGO4.2.22．知识点二：路径如果说画布是钢笔工具的舞台，那么路径面板则是钢笔工具的后台。路径面板记录了每条绘制好的路径曲线以及名称、缩略图。路径的主要作用是填充图像、描边图像区域或轮廓、将图像转换成选区。路径工具是编辑矢量图形的工具，对矢量图形的放大和缩小不产生失真。例如，下图所示的路径面板中，有三条路径。其中，路径3是当前路径。3．知识点三：在图像制作中，文字颜色一般不使用纯黑色，建议使用灰色作为文字颜色。灰色是很好的调和色，容易与图像颜色协调，以提高视觉效果。路径面板《网页设计与制作》4.2Photoshop应用利用钢笔绘制网站LOGO4.2.2操作实例4-2制作网站LOGO对于网页而言，Logo起到的是画龙点睛的作用。一个好的Logo可以提升网页的可视性。下图所示的Logo，既有图形也有文字。首先新建图像文件，并设置图像大小；然后创建路径、使用钢笔绘制图形、为图形填充颜色、设置效果；最后添加Logo文字。操作步骤：（1）新建路径①在“文件”菜单选择“新建”选项，设置宽度为183px，高度为50px。②在控制面板区，单击“路径”标签，进入“路径”面板，在其下方单击“创建新路径”按钮，创建“路径1”。Logo的制作效果《网页设计与制作》4.2Photoshop应用利用钢笔绘制网站LOGO4.2.2（2）使用工具栏的钢笔工具绘制树叶图形①首先单击鼠标确定绘画起点，然后在确定的第二点位置，单击鼠标不松手，以拖拽的方式调整好曲线的弧度后再松手。按此方法绘制图形，待终点与起点闭合后结束。如图4-17所示。②创建新的“路径2”、“路径3”，分别在路径中绘制树叶和根茎的图形。如图4-18、4-19所示。路径绘制完成效果如图4-20所示。图4-17描点方法与路径1中绘制的图形图4-18路径2绘制的图形图4-19路径3绘制的图形图4-2