网页切图——网页美工设计2011-3-30

网页切图——网页美工设计2011.3.30一，基本概念1，切图，是一种网页制做技术，他是将美工疗效图转换为页面疗效图的重要技术。也提供了切图技术，Flash则直接提供了网页格式输出技术（不须要切图）。2，切块，是切图的直接结果，切图实际上就将图切分为一系列的切块二，切图操作过程1，切图工具图标的辨识2，切图基本操作1）基本操作有两个：界定切块和编辑切块界定切块，是使用切块工具，在原图上进行切分的操作。编辑切块，是对切分好的切块进行编辑的操作，编辑包括对切块的名称、尺寸等的更改等等下边我们看一下这两个操作2）基本操作假如想联通某个切块，可以使用“切片选择工具”选择某个切块，并用键盘进行拖动，也可以使用实现，另外如果想精确的细微联通，则可以使用实现假如想将某个切块存为某个图片输出，可以使用“切片选择工具”选择某个切块，之后选择“文件”菜单，并选择“存储为Web所用格式(W)...”，之后在弹出的界面中...3，切图技1）一张图，可以有多种切分方法，如下：既然存在n多种切图形式，这么是不是哪种方法都可以满足要求？答案：不是的。通常对页面的要求是，当页面大小发生变化时，页面的各部份可以相对自由地伸缩，而不会使页面发生错乱或变形等问题。

#

我们切分好的图是要输出为Html格式的网页文件的，之后通过网页编辑器，将该页面进行加工，弄成符合要求（比如可以依据内容多少，自由伸缩等）的模板页面。这其中，切图的形式直接影响着模板页面是否还能满足实际的要求。我们来看一个反例：2）切图方法主要有几下几点属性均匀的区域适宜分为一个切块，均匀主要是指颜色和形状都没有变化，或则在X或在Y方向上没有变化。属性渐变的区域适宜分为一个切块，渐变有两种表现方式颜色渐变形状渐变按照原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想像上将整个布局看成是一个两个table，之后在具体到每位table，去考虑上面应当怎样切。下边通过几个图例来说明三，切图的Html格式输出切图完成，就可以输出为Html格式的页面了。在“文件”菜单中，选择“存储为Web所用格式(W)...”，在弹出的页面中直接选择“存储”，之后在弹出的界面中，填入文件名，保存类型选择“HTML和图象(*.html)”，设置为“默认设置”即可，切块选择“所有切块”。之后点击“保存”按钮就可以了。旁边的事情，就是编辑输出的Html页面了。网页制做：从切图到生成网页鉴于好多同学问到怎样切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以明天有空闲在家里就举一个简单的事例来说明这个问题吧!OK，让我们开始：step1:在中打开设计稿，如右图选择工具板上的slice切块工具，先大刀阔斧的切上一番!方法：大面积的色块单独劈成一块，尽可能的保持在水平线上的整齐(这个问题大家在前面的制做页面中深有感慨)切好的图如下所示：step2:中选择file-saveforweb...来输出，这儿要注意一些参数的选择：我们来瞧瞧红线所标示的1，2，3部份，将1所示的切块工具选中，之后点选2所示的图片，3所示的地方选择色值，假如色调单一可以选择尽量小的色值位;(为何要这样？？)答案：这样会大大降低文件的大小，同时又能比较好的保持图片的色调；设置好后点OK输出文件，这儿的文件包括了一个htm和文件夹，如图：这儿候你的页面才算完成了一半，接出来在里构建站点：step3:定义站点：在图示左侧的sitename中为站点起一个名子，如之后在下边的localroot中选择我们刚刚导入的站点所以的文件夹；站点建好后在sitemap中我们看见：(为何要构建站点？)构建站点可以使我们养成一种挺好的习惯，就是把一个网站所包含的文件，文件夹有条理的置于一起，同时我们很容易的将这个站点联通到其它地方而不用对文件路径进行任何改写!(其实假如你实在不想构建站点也没人强求你，我在事际工作中就遇见这样的朋友，没有习惯为页面构建站点，其实后果的要麻烦少少了)step4:重新制做页面表格(为何？)一般在中直接导入的htm文件是不可以直接使用的，由于有些地方在实际运用时要作调整，例如有动态文字的地方，我们须要在页面中输入页不是使用图片，这么图片就要把它取走，假如你在直接生成的htm中取走不想要的图片再加上你想要的东西，大家发觉页面将显得惨不忍睹，整个页面可能完全乱了套!好了，先来剖析一下导入的htm文件吧：按照这个页面表格所示，我们在新的页面中构建一个三行一列的表格:注意，,,三项值设为0，这个很重要；由于图片中我们不希望见到缝隙和错位；之后再在第一行中插入一个三行两列的表格，并合并一侧三列的表格，如图：插入表格的时个要注意对比原htm文件中的内容，思索为何这样做；接出来在第二行中插入一个二行二列的表格，按前面的方式合并一侧的条纹，并在右侧条纹的第一行插入一个一行五列的表格如图示：最后在下边一行插入一个三行二列的表格，并将图示中1,2外分别合并：最后得到的页面应当是这样的：好了，如今我们的任务就是往表格上面加图加内容了!这儿就不再赘言了!(虽然早已赘言得够多了!)还要提醒你们注意的是在加图片和内容时，表格单元格的align,这两个属性十分重要，要不遗余力的运用它们来帮你做事!OK，自己实践一下!不用切图的页面圆角首先看款式表文件：.b1{:1px;font-size:1px;:;:block;:#000;:05px;}.b2{:1px;font-size:1px;:;:block;:#fff;-right:2pxsolid#000;-left:2pxsolid#000;:03px;}.b3{:1px;font-size:1px;:;:block;:#fff;-right:1pxsolid#000;-left:1pxsolid#000;:02px;}.b4{:2px;font-size:1px;:;:block;:#fff;-right:1pxsolid#000;-left:1pxsolid#000;:01px;}接着看页面代码：其实你也可以用其他的标签

#

或则之类，应当也是可以的用制做具有动态疗效的切图在上一章中，我们说到用进行切图，可以将一个大图片分割成不同色深的多个小图片，而且生成相应的网页文件或代码，因而降低网页的重量。明天我要接着告诉您的是，功能强悍的除了可以制做静态切图，更才能导入动态特效！打开.gif件后你可以看见那前面画的是一个电视机，如今我们要做的是将这个电视机装入一个网页，但是当浏览者的键盘按下电视机上的开关后，会在屏幕中播放内容。第一步，要在图像上制做拿来调用的热区，制做热区的方和上一章中切割图像的方式一样，都是使用工具栏最右下方的切割工具（）。因为我们构想中的这个是通过按下电视机开关后在屏幕上出现变化，所以须要定义两个热区，分别是电视机开关和电视机屏幕。之后选择“>”（Ctrl+I）选项，打开面板。先选中电视屏幕的热区，面板正式显示这个热区的属性，其中的连接地址默认为“NoURL()”也就是当前网页的联接（#）；项内容为键盘放在图片上时显示的提示；这下边那种黄色的靶子是，拿来确定联接标签的目标的，在这里就不多说了；最关键的是：不要激活下的“Auto-Name”功能，而需自动给这个切割热区起一个名子，这样做是为了在指定时才能便捷的辨别目标。 #

还要注意的是在给slice命名时，不能使用英文，否则生成的代码会在浏览器中长时间报错。在这个反例中我给屏幕热区起的名子是“”，再以同样的方式给电视开关起名为“”。接着做一个电视上要显示的图像，选择“File>New”（Ctrl+N）命令新建一个和屏幕热区大小相同的图片（注意：规格过大或过小就会被缩放到屏幕热区的大小）。新建文件后，您可以使用工具栏上各种工具随心所欲地画出自己喜欢的东东（工具栏中各个绘图工具的使用方式将在之后的教程中做详尽介绍）。对自己的作品满意了吗？您画完后请选择“File>”（Ctrl+Shift+R）将图像导入为网路图形。的图像导入功能十分强悍，但如今您只要一路NEXT就可以了，并将生成的gif文件保存到指定的目录下。之后回到我们刚刚编辑的电视机画面，选取开关热区，再选择“>”（Ctrl+Alt+H）选项，打开面板。按下添加按键，选择“SwapImage”，在此后弹出的SwapImage对话框中的“SwapImageinSlice”选项中选择“”热区（也可以在左边的热区画面中直接选择热区，这样做就可以让热区调用一个使热区形成变化的）；在“”中选择“ImageFile”并在浏览面板手指定刚刚制做的那种gif图像。 #

最后激活“Image”（激活这个功能后，浏览者将滑鼠离开调用的热区后，发生变化的图像将恢复正常。当前面这步完成后，面板上将出现一个“”的件处理器，这就说明昨天做的热区早已成功调用了。但我们期的疗效是当滑鼠按下开关后才在电视屏幕中显示内容，所以请按下“”旁的下拉菜单按键，在弹出的菜单中选择“”。好，到这里基本上该竣工了。想瞧瞧作品的疗效怎样吗？选择“File>in>in...”（F12）命令，就可以在新窗口中预览昨天的作品了。达到预期疗效了吗？满意的话就可以导入成品了，这里有个小方法，因为的预览功能早已生成了临时的图形和HTML文件，所以如您使用IE5行预览的话，可以直接在自己满意的预览窗口上将所以文另存，就可以免去导入步骤而得到完整的作品了。倘若您没有IE，那只能乖乖地使用导入功能，具体地导入方式和我们在上一章中所说的静态切图的导入方式相同，在这里就步重复了。

#

使用方法迄今为止，在一阵又一阵的喝采声中经历了4个成长阶段，目前早已推出了4.0版本。最初，同时又是互联网的婴儿，它特别郑重地吸收了众家的长处。不管是平面设计软件的视口和色调，还是动漫制做的帆要领不管是它的Flash图符和库面析，还是的快速启动栏；不管是矢量绘图软件中的工具，还是位图图象编辑软件的面析，只要它们有优点，它都学来。在学习中创新，因而一步一步迈向成熟，也越来越受你们的偏爱。第一篇用切割图形但传统的切图工作非常繁杂，许多设计者都是使用类软件将图一片片分好，之后在分别保存为不同色深的gif图像，尽管可以使用之类的手动执行命令集，但实际工作量仍然非常惊人，但是十分容易切错规格。如今用了就可以十分轻松地切割图片了，首先用打开要切割地图形文件（File>Open），当图片打开后选择工具栏最右下方的切割工具（），在图中按住滑鼠左键任意画出想要的切割疗效（注意不要将选区重叠），图中这些红线表示就是最后生成的表格页脚情况。 #

等全部的切割区域完成后选择“FILE>”进入导入，在中选择gif，再依照图像的具体情况设置色深、调色板和透明色，之后按下“Next”。最后再导入成HTML文件的对话框手指定保存的目录，在“:”选项中选择“UseSlice:”按照刚刚界定出的切割情况来切图，并分别保存。在“Style选项”中选择“”导出成标准的HTML源码。OK，假如要和一齐使用的话，可以选择“Libra-ry.lbi”将导入为的一个模板，而“”选项将导入成做出来的网页源码。就这样，仅几秒种的时间，就完成了一个极其专业的图形切割。怎样样，您是不是感遭到了的强大功能。第二章用制做具有动态疗效的切图在上一章中，我们说到用进行切图，可以将一个大图片分割成不同色深的多个小图片，而且生成相应的网页文件或代码，因而减少网页的重量。 #

明天我要接着告诉您的是，功能强悍的除了可以制做静态切图，更才能导入动态特效！打开.gif件后你可以看见那前面画的是一个电视机，如今我们要做的是将这个电视机装入一个网页，但是当浏览者的键盘按下电视机上的开关后，会在屏幕中播放内容。第一步，要在图像上制做拿来调用的热区，制做热区的方和上一章中切割图像的方式一样，都是使用工具栏最右下方的切割工具（）。因为我们构想中的这个是通过按下电视机开关后在屏幕上出现变化，所以须要定义两个热区，分别是电视机开关和电视机屏幕。之后选择“>”（Ctrl+I）选项，打开面板。先选中电视屏幕的热区，面板即将显示这个热区的属性，其中的连接地址默认为“NoURL()”也就是当前网页的联接（#）；项内容为鼠标放在图片上时显示的提示；这下边那种黄色的靶子是，拿来确定联接标签的目标的，在这里就不多说了；最关键的是：不要激活下的“Auto-Name”功能，而需自动给这个切割热区起一个名字，这样做是为了在指定时才能便捷的辨别目标。

还要注意的是在给slice命名时，不能使用英文，否则生成的代码会在浏览器中长时间报错。在这个反例中我给屏幕热区起的名子是“”，再以同样的方式给电视开关起名为“”。第三章下边告诉你怎么做动漫，COOL！用制做动漫一共有中学方式，由简到难的排列上去分别是：合并图像产生动、使用符号（）生成画疗效和手工勾画。合并图像产生动漫，顾名思义就是将一系列图片按序排列生成不同的帧而产生动漫（很象中的Spacetotime功能），不过这些排列完全是程序手动执行的网页设计切图，免去了大量的手工操作。具体的方式是这样的（其实使用这些技巧的前提是必须有一连串连续的图片）：选择“File>Open”命令。步入系列图片所在的目录，之后按顺序将一连串的图片加入（“Add”命令）对话框左上部的窗口，但是激活“Openas”选项，再按下“Done”按钮就OK了。在动漫生成后，按下“>Frame”（Ctrl+Alt+K）命令，您就听到原先的一系列图片都按顺序地从往下排究竟。

#

按下屏幕右下角的播放键就可以浏览动漫疗效了。这些纯粹的懒办法最合适我这样画不来腰线的人了，一次有只用了10秒钟就搞定了一个小鸟飞飞的图片，疗效棒极了！不过，要是手头没有现成的连续图片，那只能劳驾，自己亲自动手了。而许多图画中有规则的动态疗效若是用手工制做，既费时间也未必才能达到理想的疗效。所以提供了一个Twee功能，使用户可以指定程序生成动态过度疗效（觉得就更Flash里的一样）。在勾画动漫前，我们事先必须明晰动漫的工作原理。我想简单的说，动漫是有不变的物件（）和会变的物件两部份组成。一般不变的物是只如背景之类一直在动漫中显示的物件，而会变的物件是指通过变化形成动漫的物件。所以在制做动漫之前得先制做不变的物件，因此Fire-提供了一个共享层的概念（ShareLayer）。我们都晓得，动漫是由一个个不同的帧（Frame）组成的，而共享层就是在所有帧中都显示的一个层，这样我们只要将动漫中不变的物件全置于这个层中，之后只须要更改一个帧的共享层中内容就可以使所有的帧都达到相应变化，大大降低了工作量。设置共享层的命令是Layer面版的弹出菜单中的“ShareLayer”命令，设置为共享的层在Layer面版中都有一个特定的共享符号（WegbLayer是系统手动设置的共享层网页设计切图，用于放置热点、切割区）。 #

在完成不变的物件（）后就可以使用Tween功能制做动漫疗效了。Tween功能的原理是将物件（）转化为符号（），之后确定符号的初始和结束样例（），再将这种样例转换为具有过度疗效的连续帧（frame）。Tween功能支持物件的位移、旋转、缩放、扭曲以及透明度和层疗效（）的过度。下边我来举个实例：通过十个帧让我的名子“Arky”从图像的左上角联通到右下角同时渐渐变深。第三章下边告诉你怎么做动漫，COOL！用制做动漫一共有中学方式，由简到难的排列上去分别是：合并图像产生动、使用符号（）生成画疗效和手工勾画。合并图像产生动漫，顾名思义就是将一系列图片按序排列生成不同的帧而产生动漫（很象中的Spacettime功能），不过这些排列完全是程序手动执行的，免去了大量的手工操作。具体的方式是这样的（其实使用这些技巧的前提是必须有一连串连续的图片）：选择“File>Open”命令。步入系列图片所在的目录，之后按顺序将一连串的图片加入（“Add”命令）对话框左上部的窗口，但是激活“Openas”选项，再按下“Done”按钮就OK了。

#

在动漫生成后，按下“>Frame”（Ctrl+Alt+K）命令，您就听到原先的一系列图片都按顺序地从往下排究竟。按下屏幕右下角的播放键就可以浏览动漫疗效了。这些纯粹的懒办法最合适我这样画不来腰线的人了，一次有只用了10秒钟就搞定了一个小鸟飞飞的图片，疗效棒极了！不过，要是手头没有现成的连续图片，那只能劳驾，自己亲自动手了。而许多图画中有规则的动态疗效若是用手工制做，既费时间也未必才能达到理想的疗效。所以提供了一个Tween功能，使用户可以指定程序生成动态过度疗效（觉得就更Flash里的一样）。在勾画动漫前，我们事先必须明晰动漫的工作原理。我想简单的说，动漫是有不变的物件（）和会变的物件两部份组成。一般不变的物是只如背景之类一直在动漫中显示的物件，而会变的物件是指通过变化形成动漫的物件。所以在制做动漫之前得先制做不变的物件，因此Fire-提供了一个共享层的概念（ShareLayer）。我们都晓得，动漫是由一个个不同的帧（Frame）组成的，而共享层就是在所有帧中都显示的一个层，这样我们只要将动漫中不变的物件全置于这个层中，之后只须要更改一个帧的共享层中内容就可以使所有的帧都达到相应变化，大大降低了工作量。

设置共享层的命令是Layer面版的弹出菜单中的“ShareLayer”命令，设置为共享的层在Layer面版中都有一个特定的共享符号（WegbLayer是系统手动设置的共享层，用于放置热点切割区）。在完成不变的物件（）后就可以使用Tween功能制做动漫疗效了。Tween功能的原理是将物件（）转化为符号（），之后确定符号的初始和结束样例（），再将这种样例转换为具有过度疗效的连续帧（frame）。Tween功能支持物件的位移、旋转、缩放、扭曲以及透明度和层疗效（）的过度。下边我来举个实例：通过十个帧让我的名子“Arky”从图像的左上角联通到右下角同时渐渐变深。第五章文字工具以及文字特效这章教程，我想单单给你介绍的文字工具以及文字特效，之所以要将对文字功能版块的介绍独立成一章，是由于中的文字以及相关功能，是目前我所见的图像编辑软件中最强悍，最健全！＃完整的文字低格功能，支持双字节文字这是所有成功的图像设计软

#