第七章-Photoshop网页效果图设计PPT课件.ppt

第七章 Photoshop网页效果图设计 Photoshop网页网页效果图效果图设计设计 网页设计艺术.主要内容7.1 网页标志设计网页标志设计17.2 网页导航设计网页导航设计27.3 主页栏目设计主页栏目设计37.4 子页栏目设计子页栏目设计47.5 Fireworks图像切片制作图像切片制作5.7.1 网页标志设计.领跑者网页标志的设计本着“领跑”的含义，采用图形与文字相结合的方式，使用猎豹的造型，牵动前进的旗帜，旗帜的造型通过字母“L”即“领”字的第一个字母来设计，展示领跑者的形象，色彩采用蓝灰色和白色相结合的方式，体现科技色彩。7.1.1 标志创意分析.7.1.2 Photoshop CS3界面介绍.7.1.3 网页上部背景的设计1.新建文件 启动Photoshop CS3，选择菜单“文件|新建”命令，设置文件大小为1004*600（宽度*高度），分辨率72像素/英寸（dpi），色彩模式为RGB，背景颜色为白色，文件名称为领跑者首页。在设计效果图时，我们需要注意，由于网页是需要用浏览器打开显示的，需要考虑浏览器的菜单、工具栏、滚动条等窗口元素所占据的空间，因此当显示器的分辨率为800*600像素时，网页效果图标准尺寸是775*435像素。当显示器的分辨率为1024*768像素时，网页尺寸为1004*600像素，注意设置网页的左右、上下边距为0。.7.1.3 网页上部背景的设计2.创建图层 单击图层面板右下角的创建新图层按钮，创建“图层一”，双击“图层一”文字，修改为“网页背景”。注意：当前选中哪个图层，单击创建新图层按钮后，新图层就出现在当前选中的图层之上，可以用鼠标拖动图层改变层次顺序，或按【CTRL+】或【CTRL+】来调整当前图层的顺序。.7.1.3 网页上部背景的设计3.钢笔勾画背景区域 使用工具箱中的钢笔工具，设置属性为路径方式，连续单击鼠标，用钢笔工具勾勒出背景的基本形状，到最后一个节点时单击第一个锚点，实现封闭路径。注意：单击出现新锚点后，在不松开鼠标的情况下拖动鼠标可以直接改变锚点的形状为平滑，再单击鼠标创建新锚点，这样可以一次性成型。.7.1.3 网页上部背景的设计4.路径调整 按住钢笔工具，在弹出的工具组中选择转换点工具，单击路径上的锚点，然后按住鼠标拖曳，可以对路径锚点类型的调整，拖动控制柄使曲线变得圆滑。反之，单击该锚点可以将圆滑的路径变得尖锐。我们可以使用添加锚点工具增加锚点或选择删除锚点工具，单击路径上的锚点删除该锚点，从而进行路径细节的刻画，但要注意并不是锚点越多越好，锚点只安排在曲线转折的地方。相反，锚点越少，越容易将路径调整平滑。.7.1.3 网页上部背景的设计4.路径调整 使用路径选择工具选择路径，单击鼠标右键建立选区，在弹出的建立选区对话框中，设置羽化半径为0。.7.1.3 网页上部背景的设计5.填色与处理 选择渐变工具，进行参数设置，上面的控制点用于控制该点的不透明度，下面的控制点用于控制该点的颜色，我们这里只需设置颜色即可。从左向右颜色为左侧：（R：149，G：213，B：242），40%位置处：（R：178，G：226，B：249）右侧：（R：26，G：95，B：168）从左下角向右上角拖曳鼠标，为选区填充渐变颜色。使用减淡工具，设置较大的画笔半径，减淡右侧下面部分颜色。使用加深工具，设置属性为较大的画笔半径，加深导航区域的颜色。.7.1.4 标志曲线造型 选择放大镜工具，将效果图界面放大到400%左右，并拖曳滚动条，将当前工作窗口显示左上角的位置。注意：按住Alt键再单击放大镜工具可以缩小图像。为了看清路径，单击图层面板中“网页背景”前的眼睛图标，将该层隐藏。使用工具箱中的钢笔工具，设置钢笔的属性为路径模式，按如图所示节点连续单击鼠标，用钢笔工具勾勒出猎豹的基本形状，并使用转换点工具调节路径曲线，可结合直接选择工具调节节点的位置。.7.1.4 标志曲线造型 同样方法，使用钢笔工具绘制猎豹头上的“L”。使用路径选择工具，调整两条路径的位置。.7.1.5 标志上色描边 1.创建图层 单击图层面板右下角的创建新图层按钮，创建新图层，改名为“猎豹”。2.建立选区填色 使用路径选择工具单击猎豹路径，单击鼠标右键“建立选区”。.7.1.5 标志上色描边 3.填色 单击图层面板中“网页背景”层前的空白位置，使眼睛图标显示，显示网页背景层。单击“猎豹层”，使其为当前层，设置工具栏底部前景色图标，设置前景色为白色，按【Alt+Delete】，为猎豹图形填充白色。.7.1.5 标志上色描边 4.图像描边 单击图层面板下面的添加图层样式按钮，选择“描边”选项，设置描边颜色为蓝灰色（R：30，G：109，B：166），大小为2像素。.7.1.5 标志上色描边 4.图像描边 同样新建“L”图层，用同样的方法建立选区上色为蓝灰色（R：30，G：109，B：166）与描边，描边颜色为白色，大小为2像素。.7.1.6 网站名称设计 使用文本工具，输入网站名称“领跑者IT培训中心”，设置颜色为蓝灰色（R：30，G：109，B：166），设置图层样式为“描边”白色，大小为2像素。选择“领跑者”三个字，单击鼠标右键，选择仿斜体，字体为中圆，大小为28。选择“领”字，设置颜色为橙色（R：210，G：84，B：10）。选择文字“IT培训中心”设置字体为黑体，大小为24。在“领跑者”后面添加空格，适当改变空格字符的文字大小，使领跑者与IT培训中心之间适当拉开距离。.7.1.6 网站名称设计 同样使用文本工具，设计网站的网址，字体选择为Bell Gothic Std，进行上色与描边，选中所有文字，单击右键选择仿斜体，单击文字工具属性面板上显示字符面板的按钮，显示字符控制面板，调节字符面板的“AV”选项的数值，适当拉开文字距离。.7.2 网页导航设计 为了突出网页导航的功能，将导航文字安排在圆角矩形的渐变色背景之上，使其与背景形成较大区别，并对矩形背景做描边处理，以使导航显得更加明显，文字采用白色中圆体，在背景的衬托下，显得不是那么生硬。.7.2.1 导航背景的设计1.创建圆角矩形路径 选择矩形工具右侧下方的三角形，选择圆角矩形工具，设置圆角半径为3px，工作方式为路径，在网站名称右侧拖动出导航区域。.7.2.1 导航背景的设计2.创建圆角矩形选区 选择图层面板最上方的文字图层，单击创建新图层图标创建新图层，双击图层的名字改名为“导航区域”。使用路径选择工具，单击导航区域的路径，单击右键，选择“建立选区”。设置前景色为淡灰色（R：240，G：240，B：240），选择菜单“编辑|描边”命令，设置参数，对选取进行描边。注意：图层样式的描边是添加的描边样式图层，原图并没有变化，方便参数的调整，但任意变形时描边的宽度不会变化。而选择编辑中的描边命令则直接描在普通图层上（原图）上，任意变形时描边也会变化。.7.2.1 导航背景的设计3.填充渐变颜色 选择渐变工具，设置渐变颜色带为左侧（R：104，G：179，B：221），右侧（R：38，G：108，B：178），从选取左下角向右上角拖曳鼠标，填充蓝色的渐变，按【CTRL+D】可以取消当前区域的选择，后面会经常用到这一快捷键。.7.2.2 导航文字的设计 使用文字工具，设置文字字体为中圆，大小为16点，颜色为白色，输入导航文字。.7.3 主页栏目设计 网页采用流线型设计，网页主图通过高耸入云的大楼，微笑的人物神情来展示网站的效果，构图采用均衡的方式，使右侧的文字与左侧的图形相呼应。栏目的设计中注意采用统一个圆角矩形造型，使其各得其所。并注重图标类的细节刻画，展示精致的界面效果。.1.素材的部分选择 打开大楼的素材，使用多边形套索工具沿大楼轮廓单击鼠标，选择大楼的主体，选择菜单“编辑|复制【CTRT+C】”，选择“网页背景”图层，单击创建新图层图标，在“网页背景”图层上面创建新图层，改名为“大楼”，选择菜单“编辑|粘贴【CTRL+V】”。注意：快捷方法是，使用移动工具直接将选中的大楼图形拖动到目标效果图中，Photoshop会自动新建图层放置该图形。7.3.1 网页主图的设计.2.图片的变形 按【CTRL+T】对大楼进行自由变形，选中变形选项中的锁定宽高比按钮，保持比例关系。然后按回车键确认变形操作（后面的自由变形命令使用同样的方法），并调整大楼的位置。3.选区的载入 单击网页背景图层，按住【CTRL】键用鼠标单击图层面板中“网页背景”图层的图层缩览图图标，载入网页背景的选区。选择大楼图层，选择菜单“选择|反选”命令，按【Delete】键删除多余的部分按【CTRL+D】，取消选区。7.3.1 网页主图的设计.同样方法，在大楼图层上新建“人物”图层，打开人物素材，并删除多余部分。4.文字的设计 使用文本工具，输入文字“TO BE FIRST”，设置文字字体颜色选择白色并倾斜。同样输入中文文字信息。我们可以选择选择工具单击输入的文字，按【CTRL+T】键对文字进行进一步变形。7.3.1 网页主图的设计.7.3.1 网页主图的设计5.曲线区域造型的设计 选择背景层，新建“曲线”图层，使用钢笔工具创建路径，使用路径选择工具，单击鼠标右键建立选区，设置前景色为灰色（R：228，G：228，B：228），按【Alt+Delete】键为选区填充前景色，按【CTRL+D】取消选区。之所以建立的选区超过了显示的区域，是因为上面的背景图像能够遮住下面的图像，所以使用了比较简单的方法。.7.3.2 网页底部的设计1.渐变色的填充 选择背景图层，创建“底部背景”图层，使用矩形选择工具，从左上角向右下角拖动鼠标，框选网页底部矩形部分。.7.3.2 网页底部的设计 选择渐变工具，设置颜色从左至右依次为（R：229，G：246，B：254），（R：87，G：195，B：241），（R：32，G：112，B：172），不透明度从左至右依次为10%，80%，100%，注意渐变色带上面的标志为不透明度设置，下面的标志为颜色设置，单击标志，再改变不透明度或颜色，从上向下填充渐变颜色，按【CTRL+D】取消选区。.7.3.2 网页底部的设计2.文字信息的输入 使用文本工具，输入版权信息，颜色为白色，对齐方式为右对齐，上面字体大小为12，下面字体大小为10，行间距为18，并添加“描边”图层样式。.7.3.3 信息中心栏目的设计1.环形图标的绘制 选择背景图层，创建“信息中心图标”图层，使用选择工具组中的“椭圆选择工具”，按住【Alt+Shift】从中心创建正圆形选区。再次选择椭圆选择工具，设置方式为第三个选项“相减”，在大圆中创建小圆的选区，从大圆中减去小圆，得到如图环形。.7.3.3 信息中心栏目的设计 设置前景色为（R：212，G：71，B：17），背景色为（R：248，G：174，B：54），选择渐变工具，为选区从上向下填充前景向背景的渐变色，按【CTRL+D】取消选区。当然我们也可以先创建圆形渐变图形，再删去中间的小圆得到结果。3.栏目文字的设计 选择文本工具，输入“信息中心 News”栏目文字，设置字体为中圆和字号16，颜色为深灰（R：45，G：45，B：45）。.7.3.3 信息中心栏目的设计4.栏目信息的设计 同样使用文本工具，设置文字字体为宋体，大小为11，行距为18，颜色和标题一样为深灰，输入五条新闻标题信息。使用同样的方法输入新闻日期。.7.3.3 信息中心栏目的设计4.栏目信息的设计 创建“新闻图标”图层，这里不必规定在哪个图层上方，因为这个图标与其他图层上的图像没有交接。使用矩形选择工具，设置选择方式为第二个图标“相加”，在每条新闻的前面创建小的正方形选区，设置前景色为橙色（R：212，G：71，B：17），按【Alt+Delete】键填充前景色。注意，创建正方形选区并填色的过程，可以创建一个选区，填充一个颜色，也可以设置选择方式为相加，依次创建五个正方形选区，然后再填色。.7.3.3 信息中心栏目的设计5.更多新闻的设计 使用文本工具输入英文更多“MORE”，设置字体与大小，放置在信息中心栏目的右侧。选择“新闻图标图层”，按照绘制信息中心图标的方法，绘制表示更多的图标，注意中间的三角形可以通过多边形套索工具建立。.7.3.4 热点链接栏目的设计1.图标与热点链接标题 热点链接的图标和信息中心的图标一样，因此我们采取复制图层的方法。按住鼠标左键将图层面板中“信息中心图标”图层拖动到创建新图层按钮上，从而复制得到“信息中心图标层副本”，改名为“热点链接图标”，使用移动工具将该图标移动到如图位置，可以借助键盘上的方向键实现位置的微调。.7.3.4 热点链接栏目的设计 同样复制信息中心 News文字层，使用移动工具将文本移动到热点链接图标后位置，使用文本工具选择文字，改为“热点链接 Hot”。我们这里使用复制得到文字的方法是为了省去文字属性的设置，保证栏目文字的一致性。使用文本工具，设置文字大小与字体，输入热点链接下面的文字信息。.7.3.4 热点链接栏目的设计2.热点链接图形 使用圆角矩形工具，设置圆角半径为8，创建圆角矩形路径，使用路径选择工具选择路径，单击鼠标右键创建选区。选择菜单“编辑|描边”命令，设置描边颜色为淡灰（R：210，G：208，B：208），宽度为1像素，对选区描边。.7.3.4 热点链接栏目的设计 2.热点链接图形 单击路径面板，单击面板中的工作路径，从而在设计图中显示工作路径，使用路径选择工具移动该路径到如图圆角矩形右侧，同样建立选区对路径描边。可以使用路径面板底部的第三个按钮“将路径作为选区载入”建立选区。按照上面的方法得到三个圆角矩形。注意，移动路径时，可以使用键盘上的方向键，实现水平移动，每次描边后，按【CTRL+D】取消选区，再进行路径的选择。.7.3.4 热点链接栏目的设计3.热点链接图标 打开素材图片“电脑.png”，使用移动工具把电脑图片移动到效果图上，新移进的图形会出现在自动生成的“图层X”中。按【CTRL+T】对图片自由变形，结果如图所示，并改变图层的名称为“电脑”。.7.3.4 热点链接栏目的设计 在“电脑”图层下创建“电脑阴影”图层，使用椭圆选择工具创建椭圆阴影选区，单击工具栏中的设置默认的前景背景色图标（注意是前面的图标，后面的是交换前景和背景颜色），设置前景色背景色为默认的黑色白色，使用渐变工具，设置填充方式为径向，颜色为前景到透明，前景色不透明度为70%，为选区填充渐变颜色。按【CTRL+T】对选区变形为椭圆形，按【CTRL+D】取消选区。.7.3.4 热点链接栏目的设计4.热点链接文字 使用文本工具，设置英文字体为Arial，中文字体为中圆，颜色为深灰（R：80，G：80，B：80），安排好热点链接的文字信息。5.热点链接“GO”创建“热点go”图层，使用圆角矩形工具，设置圆角半径为10px，创建圆角矩形路径，使用路径选择工具，单击鼠标右键创建选区，设置前景色为（R：188，G：248，B：255）背景色为（R：17，G：106，B：236），使用渐变工具，设置渐变方式为菱形，从中心向外拖动鼠标，为选区填充从前景到背景的渐变颜色，使用文本工具，设置字体为Bitsumishi，大小为10，颜色为白色，设置字体与颜色。.7.3.4 热点链接栏目的设计 使用和第一个热点链接同样的方法设计后两个热点链接，导入汽车和天气预报的图片，复制电脑阴影图层，复制文字图层并改变文字信息，单击路径面板，选择工作路径，使用路径选择工具单击路径，使用键盘上的方向键向右移动圆角矩形路径，单击鼠标右键创建选区，创建“热点go2”和“热点go3”两个图层，分别填充灰色（R：111，G：111，B：111）和浅灰（R：165，G：165，B：165），复制“go”图层，分别放在对应的位置。.7.3.5 认证栏目的设计1.认证图形区域的绘制 创建新图层，改名为“认证”，使用与创建热点链接图形同样的方法，创建图形，注意可以创建水平辅助线，使两个图形分别位于辅助线的上下，这样做的目的是为了后面切片的方便。创建辅助线方法是使用移动工具将鼠标移动到标尺上，拖动标尺到目标位置，要想删除辅助线，只需将辅助线移出窗口即可。.7.3.5 认证栏目的设计2.认证证书的导入 打开素材“微软标志”和“Adobe标志”，使用移动工具将两幅图片移动到效果图窗口，按【CTRL+T】对图片进行变形，移动位置如图所示，并为两个图片所在的图层改名为“微软”和“Adobe”。.7.3.5 认证栏目的设计 最后，我们检查网页元素并进行细节的补充，补充顶部的超级链接“Home Sitemap Contact US”，当然可以使用中文，或增加英文版等内容，得到首页效果图如图所示，然后选择菜单“文件|存储”命令保存文件，并选择菜单“文件|存储为”命令，保存格式为“PNG”格式，文件名为“领跑者首页”，以备后面进行图像切片的制作。.7.4 子页栏目设计 子页栏目的设计可以采用与首页设计相同的方法，注意要保持一致性，包括导航的一致性、布局的一致性等。因为是子页面，相应的显示导航栏目中的内容。子页的设计与首页很相似，这里简单介绍设计的方法。.7.4.1 子页主图的设计1.新建文件 启动Photoshop CS3，选择菜单“文件|新建”，设置文件大小1004*600，分辨率72像素/英寸，色彩模式为RGB，背景颜色为白色，文件名称为领跑者子页。如果实际文件的高度大于效果图的高度，可以通过效果图中间内容的延长来实现。.7.4.1 子页主图的设计2.网页背景设计 采用首页设计的方法，设计子页主图。新建“网页背景”图层，使用钢笔工具勾画出曲线轮廓，使用路径选择工具创建上面曲线选区。使用渐变工具设置渐变颜色从左到右颜色为：左边（R：33，G：97，B：156）35%位置处（R：114，G：277，B：216），右边（R：179，G：227，B：249），从上向下拖动鼠标填充渐变颜色。.7.4.1 子页主图的设计3.网页元素的导入 打开“领跑者首页.psd”效果图，使用移动工具将“猎豹”“L”“领跑者IT培训中心”“导航区域”和导航文字，网址文字等移动到子页效果图中。技巧：可以将上述图层按住【CTRL】键同时选定，然后使用链接工具建立图层链接，再使用移动工具可以一次全部移到目标文件中，而且位置保持不变。将大楼图片也移动到图中，当然也可以从素材中移入，使用【CTRL+T】改变图片大小，创建人物图层，将素材“人物2”打开，移动到如图位置。.7.4.1 子页主图的设计5.主图文字信息 使用文本工具输入文字信息，修改文字字体与颜色，并设置图层样式为白色描边，注意改变“F”和“领”字的颜色，以突出领跑者的含义，将英文做倾斜处理，适合其主题效果，结果如图所示。.7.4.1 子页主图的设计6.曲线装饰的设计 在网页背景层下创建曲线图层，使用钢笔工具勾画出如图路径，创建选区，填充颜色（R：180，G：208，B：222），结果如图所示。.7.4.1 子页主图的设计7.热点链接图形的导入 使用移动工具将热点链接的相关图形和文字移动到如图位置，并适当缩小图形。.7.4.1 子页主图的设计8.底部背景和文字的导入 使用移动工具将底部背景和文字信息移动到如图位置。.7.4.2 左侧导航的设计1.左侧导航背景 选择背景图层，新建左侧背景图层，使用矩形选择工具创建矩形选区，填充颜色（R：219，G：242，B：254），结果如图所示。.7.4.2 左侧导航的设计 按【CTRL+R】显示标尺，将鼠标移到边缘拖动水平辅助线到如图位置，作为左侧栏目的上面界限，这样做是为了切图的方便，能够将主图和栏目分开，并且将热点链接图形都放在主图区域的切片上。在最上面的图层上面创建“左侧栏目”图层，使用圆角矩形工具创建圆角矩形路径，切换到路径面板单击工作路径，使用将路径作为选区载入按钮创建选区，为选区填充白色，如图所示。.7.4.2 左侧导航的设计2.栏目文字背景设计 在“左侧栏目”图层上创建“栏目文字背景”图层，使用矩形选择工具创建矩形选区，设置前景色为（R：83，G：176，B：229），背景色为（R：32，G：96，B：132），使用渐变工具从上向下填充从前景到背景的颜色渐变，结果如图所示。.7.4.2 左侧导航的设计 在“栏目文字背景”上新建“斜线”图层，打开“斜线.png”素材，放大图片，选择菜单“编辑|定义图案”命令，定义斜线图案，如图所示。切换到效果图文件的斜线图层，确保在选定矩形选区的情况下，选择菜单“编辑|填充”，使用“图案”填充，自定图案选定刚才定义的“斜线”，填充结果如图所示。.7.4.2 左侧导航的设计 我们发现填充的颜色很深，选择图层不透明度选项，设置图层不透明度为20%左右，如图所示。.7.4.2 左侧导航的设计 拖动两条垂直的辅助线到上面矩形的两侧，使用矩形创建矩形选区，填充灰色（R：221，G：221，B：221），如图所示。使用矩形工具创建矩形选区，再对四行灰色文字背景做小图标式的描边，如图所示。.7.4.2 左侧导航的设计3.栏目文字设计 使用文本工具输入文字，如图所示。.7.4.2 左侧导航的设计4.联系电话设计 创建电话背景图层，使用圆角矩形工具创建圆角矩形，创建选区，进行白色描边。导入电话图形，使用文本工具输入联系电话，并复制电脑阴影得到电话阴影效果结果如图所示。.7.4.3 右侧内容的设计1.右侧栏目线和图标 新建“子栏目线”图层，使用矩形选择工具建立长矩形选区，填充灰色（R：208，G：208，B：208），得到灰色的栏目线。接下来设计子栏目前的图标，同样使用矩形工具建立矩形选区，分别填充蓝灰色（R：36，G：103，B：139）和灰色（R：208，G：208，B：208），得到如图子栏目线，结果如图所示。.7.4.3 右侧内容的设计2.栏目名称和位置信息 使用文本工具在栏目图标后输入子栏目信息“图形设计类”，颜色为蓝灰（R：36，G：103，B：139），在右侧输入位置信息：“您的位置：首页/培训课程/图形设计类”，颜色为灰色（R：101，G：101，B：101），得到如图结果。.7.4.3 右侧内容的设计3.右侧栏目内容的设计 新建“右侧背景”图层，使用直线工具从上向下建立垂直的直线路径，如图所示。使用文本工具，将鼠标移动到路径的顶部，当鼠标指针变成如图所示形状时单击鼠标，输入文字“-”（多个减号）。然后全选输入的文字，在字符面板中设置文字的大小和间距，如果文字不够或超过直线可以增减字符得到最终结果。.7.4.3 右侧内容的设计 设置前景色为蓝色（R：144，G：190，B：231），使用圆角矩形工具，设置圆角半径为2px，方式为填充像素，创建圆角矩形区域，同样设置前景色为淡红（R：255，G：154，B：159），绘制第二个圆角矩形。使用文本工具输入文字信息。.7.4.3 右侧内容的设计 打开素材“平面广告大师.png”和“网页设计师.png”，使用移动工具移动到效果图中，并使用文本工具输入“MORE”，结果如图所示。当然我们还可以给栏目加上圆角矩形边框，再进行下面页面的设计，我们可以采用同样的方法设计其它网页子页的效果图，由于版面有限，我们只能设计到这里了。最后选择菜单“文件|存储”命令，保存效果图文件，并选择菜单“文件|存储为”命令，保存格式为“PNG”格式，文件名为“领跑者子页”，以备后面进行图像切片的制作。.7.5 Fireworks网页图像切片制作7.5.1 图像切片的作用 在PhotoShop中设计好的网页效果图，需要导入到Dreamweaver中进行排版布局。在导入到Dreamweaver之前，可以使用PhotoShop或Fireworks对效果图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。制作网页图像切片的目的是为了获得图片素材并对图片进行优化，使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，从而提高网页加载的速度，能够通过网页设计软件实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。另外，通过切片可以导出不同类型的图片，从而有效的减小图片的大小，再有就是切片之后的图片便于设置超级链接。制作网页切片的软件主要Photoshop和Fireworks，Fireworks在网页切片制作方面有很强的优势，是网页设计三剑客重要角色之一，所以我们采取Fireworks进行切片的制作。.7.5.2 图像切片的制作1.打开效果图文件 使用Fireworks CS3打开效果图文件“领跑者首页.PNG”，使用切片工具进行图片切片的制作，可以放大图形，选择部分选定工具进行图片边界的调整，如图所示。.7.5.2 图像切片的制作2.切片的技巧 在进行图像切片的时候，要尽量将网页图像整齐的分成几个横向的块，因为在使用Dreamweaver进行网页表格排版时，能够避免一些麻烦，而且规则的表格能够提高网页加载的速度。所以，我们先把效果图切成几行，然后在行中进行列的切片，也就是说，先做出大的行的切片，再进行行中列的切片。.7.5.2 图像切片的制作3.整体切片的划分 这里，我们先创建四个横向的切片，如图所示。因为我们在设计效果图时，已经借助辅助线做好第二行和第三行之间的图像，使第二个切片底部能够正好在右侧两个认证图形中间穿过，便于排版布局。右侧之所以保留是因为右侧图像和左侧图像界限很清楚，最后用一条很窄的图像作为背景而实现。.7.5.2 图像切片的制作4.顶部和主图的切片 下面进行行中列的切片制作，将第一行切出标志、网站名称、各链接文字。第二行切成左右两部分，而右侧的内容分为上下两部分，是为了将Microsoft认证图形切出来，如图所示。.7.5.2 图像切片的制作5.中部栏目部分的切片 这个部分比较乱，我们要考虑如何排版，因此本着3行的方式切分，并将新闻的小图标切出来。.7.5.2 图像切片的制作6.底部和右侧的切片 将底部左侧切出一小条，以后将这一小图像作为底部的背景即可填充整个区域，同样切出图像右侧部分的一小条，右侧下面是白色背景和底部背景图像，因此不必多切。将版权信息切出一个图像，注意只要文字向下的部分，这样能够减小文件大小，结果如图所示。.7.5.3 图像切片的优化1.全部切片的优化 选择“预览”视图，按【CTRL+A】全选所有切片，在右侧优化面板中选择“JPEG-较高品质”,进行全部切片的优化，如图所示。.7.5.3 图像切片的优化2.重要切片的优化 对于质量要求较高的图片，可以使用部分选择工具进行个别设置，选择标志、网站名称、主图和热点链接等图形，选择优化选项为“JPEG-较高品质”,并调整品质的参数，可以从效果图左侧下方可以看到优化后切片的大小与加载的时间，如图所示。.7.5.3 图像切片的优化3.次要切片的优化 对于质量要求较低的图片，可以将图片优化为GIF格式，注意保证图片的颜色为256色，对于渐变色范围的图像不适合。.7.5.4 图像切片的导出1.全部切片的导出 选择菜单“文件|导出”命令，设置导出的类型为HTML和图像，并勾选将切片放入子文件夹“images”,可以浏览指定图片文件夹的位置，勾选“包括无切片区域”，单击保存按钮导出网页文件和图像切片，如图所示。.2.个别切片的导出 如果只想导出某个切片，可以在原始视图中使用部分选择工具单击该切片，单击鼠标右键选择“导出所选切片”。最后选择菜单“文件|另存为”命令，将文件保存为“领跑者首页切片.png”，以备以后使用。7.5.4 图像切片的导出.1.保存不带文字的图片 对于子页的设计中，左侧栏目、栏目条目、右侧栏目只存在文字的不同，因此可以在效果图设计完毕后，将栏目等文字隐藏再保存效果图文件，如图所示。7.5.5 栏目文字图形切片的技巧.2.图片切片导出 在Fireworks中对效果图进行切片，注意将栏目等切片独立切开，如图所示。7.5.5 栏目文字图形切片的技巧.3.在Fireworks中输入文字 使用Firework打开导出的没有文字的图片，使用文本工具输入文字即可，我们发现，在Fireworks中写入的文字非常清晰，所以一般情况是按这种方法进行实际的设计制作。然后保存为PNG格式，对于其它的网页子页，只需修改文字然后导出图片即可，省去了重复切片与制作的过程，如图所示。7.5.5 栏目文字图形切片的技巧.