fireworks界面切图操作指导书.doc

界面切图软件介绍与其他的常用应用软件类似，有标题栏、菜单栏和快捷栏，标题栏用于显示目前正在处理的文件，菜单栏显示当前软件的可操作功能，快捷栏将常用的设置功能以功能图标的方式显示，除此之外，还有每个软件独特的面板组。（1）Photoshop图像图层处理软件这是选择psd文件之后，Photoshop的显示效果，其中图片区域左侧为工具箱，显示各种常见的图片图层处理工具，右侧最下方为图层面板组（如图2 所示），显示当前所有图层，以及每个图层上增加的特殊效果。工具箱中我们在此次应用中常用的是最上方的（移动工具），点击此工具可以在图片中点击欲处理图层任意位置，右击后将弹出的快捷菜单，列出与当前点相关图层，从中选择当前位置的图层，如果已知图层名称也可直接在图层面板组中单击选择，选中之后，图层名称项将以蓝色背景显示，表示当前处于可处理状态。图2 图层面板组 选中图层后，即可对该图层进行操作，如可在任意位置拖动鼠标，图像中图层将根据鼠标拖动方向进行移动；或直接按Del键删除；或按图层面板组下方的按钮，从中选择某项功能，对当前图层进行样式设置，即改变图层显示效果，尤其是“颜色叠加”，可以改变当前的图层的显示颜色；如果打开了两个图片，甚至可以将其中一个图片的图层拖动至另一个图片增加图层。而图片是可以点击的，有此图片，表示此图层或此效果将在图片中显示，单击后消失，表示此图层或此效果将取消。 除了快捷方式Ctrl+“+”和Ctrl+“-”可缩放图片之外，还可以利用右侧面板组上方的导航器面板组（如图3所示），下方的显示控制，或直接输入百分比，或右侧滑块进行调整。放大显示后，如果当前软件界面中图片可视区域不能盛放当前图片，除了可以通过默认出现在图片旁边的滚动条进行图片编辑区域定位外，也可利用默认出现在导航器面板中图片缩略图的红色框（表示当前可视区域）进行拖动找到指定位置。图3 导航器面板组 除此之外，在此应用中，菜单中常用的功能，除了【文件】菜单的存储命令外，另外一个常用菜单就是【图像】|【调整】|【色相/饱和度】命令（快捷方式Ctrl+“u”），选中某个图层后，可以利用该命令转变图层中当前显示颜色，与样式设置中的颜色叠加不同，颜色叠加是相当于在图层上方蒙了一层同种颜色的布，而该命令是按照某种规律直接改变当前图层中的每种颜色，并且不同颜色的改变结果不同。其中色相是指色彩颜色，比如红、蓝等。饱和度是指该颜色的深浅度，亮度指的颜色的光感，最低为全黑，最高为全白。（2）Fireworks图片切割网页生成软件 利用fireworks可以实现页面的切割，一般处理的图片为png格式，并且在处理过程中也有层的概念。左侧也是相应图片处理工具箱，并根据工具类型进行命名和分类，在网页图片处理的过程中常用的是【选择】工具（如图5所示）和【Web】工具（如图6所示）。其中【Web】工具中的切割工具用拖选方式来切割图片，而下方的切割框架显示工具用于显示或隐藏切割示意框，【选择】工具中的（指针工具）用于选中层及拖动操作（可在右侧的默认打开的“层”面板组中进行选择），（部分选中工具）用于调整切割边界，用于通过拖选方式将画面直接裁切至拖选框大小。图5 图6 此外，最常用的命令是菜单栏中【文件】菜单的【另存为】和【导出】命令，另存为主要用于将图片存为jpg格式或png格式，导出主要用于将图片根据切割效果导出为网页文件（注意切割出来的图片最好用images文件夹保存，即导出对话框中选择下方的将“图象放入子文件夹”选项）。 保存为png格式可以将当前的切割效果保存，下次打开时能够看到上次切割方式。 同时可以利用拖动方式将其他图片拖动至当前处理切割图像，利用指针工具拖动，或下方的属性面板，将其与原切割图像对齐。这样如果两幅图像大小一致的话，导出时将按照原图像的切割效果切割。（3）Dreamweaver网页处理软件当前应用，在打开生成的HTML文件之后，主要用到的是下方的属性面板，进行初步的属性设置，以及右侧CSS面板组，进行样式调整设置。此外就是菜单栏的【修改】菜单中的【页面设置】命令，调整页边距、背景色等，以及【插入记录】菜单中的各种插入元素命令，尤其是【媒体】和【图像对象】命令。在打开HTML文件之后，页面实际为多个图片的拼接，拼接方式由Fireworks的切割效果决定，选中当个图片后，即可在下方的属性面板对当前图片进行属性设置，其中“源文件”文本输入框中显示当前图像的文件位置，删除文本输入框中的文字，则显示图像占位符，即表示当前仍是图像，只是具体图像未知。如果要想去掉当前的图像及图像占位（因为图像本身不能在其上输入文字，所以如果打算再图像上输入文字，则需要删除图像后，此时下方的属性面板将更换为与文字设置相关的属性面板，此时可以直接输入欲显示文字，并将其“背景”文本输入框输入刚才图像文件的存储地址，将图片以背景显示）直接按Del键删除即可。 说明：背景图像和图像的不同，首先背景图像不能调整图像大小，根据当前区域进行自动填充，如果小则局部显示，如果大则平铺显示；图像则可以调整大小，根据设置“宽”和“高”文本输入框的值进行显示，如果当前区域小于设置大小，区域将适应图像大小进行扩充。其次就是刚才所说的背景图像可以在其上添加文字，而图像本身不可。 输入文字后，即可利用属性面板进行字体、字号和颜色的设置，设置完成后将在“样式”下拉列表框中，将设置效果进行自动命名后，将名称显示其中，并可以直接看到效果，这样如果再有同样设置的文字，可以将文字选中后，直接利用该