搜索
制作步骤：一、静态场景绘制场景描述：一场大雪之后，堆一个胖胖的雪人。蓝蓝的天空，白白的雪地上，一个憨厚可爱的雪人给寒冷的冬天带来了许多乐趣，就连顽皮的小狗狗都被吸引过来了，围着雪人好奇的看个不停。这个场景是不是也牵动了你们童年的思绪呢？1．我们首先在Fireworks中新建一个大小为1024×768的图像，从而能够让这个图片可以作为桌面来使用。先在脑海中构想一下蓝色的天空、白色的雪地。首先使用矩形工具为图像绘制一个背景，这里填充使用线性填充，左边的颜色滑块设置为#013366，右边的颜色滑块设置为#FFFFFF，得到如图1所示的图像。图1绘制图像背景2、接下来我们就开始绘制雪人了。首先是雪人圆圆的脑袋，先绘制一个椭圆，填充设置为用白色实心填充，笔触大小为4，颜色为#858786，采用柔化圆形的方式来得到一种朦胧的效果，如图2所示。图2绘制雪人的脑袋3、然后就是雪人胖胖的身子了，使用椭圆工具绘制一个椭圆然后使用部分选定工具将其锚点进行调整，就得到雪人的身子了，将头部排列位置移到最前面，便于下一步的操作。如图3所示。图3绘制雪人的身子4、要将雪人的脑袋和身子连成一个整体，就要用到刀子工具，选中圆圆的脑袋，然后选择工具箱上的刀子工具，将不要的部分裁掉，如图4所示。图4选择要裁掉的部分5、按Delete键就可以将多余的部分切掉，得到如图5所示的雪人完整的身子。图5裁切后完整的身子6、在堆雪人的时候，我们通常会用小桶作为雪人的帽子，下面我们就为雪人添加一个可爱的小帽子。使用矩形工具绘制一个矩形，然后取消组合使用部分选定工具将其进行调整，使用实心填充，笔触和实心的颜色都设置为#FA0234，得到如图6所示的小帽子。图6为雪人添加小帽子7、小桶通常都会有一个小提手，扣在雪人头上就好像是帽子的一条带子，使雪人更加可爱，下面就来添加这样一条带子。用直线工具绘制一条直线，选择无填充，笔触大小为4，颜色设置为跟小桶一样的#FA0234，选择自由变形工具，将直线调整成弯曲的形状，如图7所示。图7为帽子添加一条带子8、接下来就要为雪人添加眼睛、鼻子和嘴巴了。雪人的眼睛很简单，只要绘制两个圆形，用黑色填充就可以了。绘制一个椭圆，使用部分选定工具将其进行形状上的调整，选择红色填充，就可以得到雪人的鼻子。绘制两条直线，选择自由变形工具，将直线调整成弯曲的形状，选择无填充，黑色笔触就可以得到雪人的嘴巴，如图8所示。图8为雪人添加眼睛、鼻子和嘴巴9、然后我们为雪人添加上两个由树枝做成的小胳膊。仍然是用到画几条直线，选择自由变形工具，将直线调整成树枝的形状，选择无填充，笔触选择的颜色是#5F2C00，样式选择毛毡笔尖中的暗色标记，将树枝的枝条组合到一起，就形成了雪人的胳膊，如图9所示。design.yesky.com©天极软件频道设计在线原创©2001374542图9为雪人添加胳膊10、接下来我们为雪人添加一个雪地投影，显示出阳光的照射。绘制一个椭圆，填充颜色设为#666666，使用部分选定工具将其锚点进行调整，并将其移到雪人的背后，就得到如图10所示的阴影。图10添加雪地投影11、接下来就该绘制可爱的小狗狗了。先勾勒出小狗的轮廓，绘制一个椭圆，填充颜色设为#E6A116，画笔颜色设置为#673301，使用部分选定工具和自由变形工具将其锚点进行调整，并移到雪人的背后，雪地投影之上，如图11所示。图11勾勒小狗的轮廓12、接下来我们给小狗添加耳朵和尾巴，如图12所示。图12给小狗添加耳朵和尾巴13、给小狗的嘴巴和肚皮添加一些高光和阴影，使得小狗显示出立体感。这里我们可以用钢笔工具描画，或者绘制一个椭圆进行自由变形，如图13所示。图13添加高光和阴影14、给小狗添加上眼睛、鼻子和嘴巴，只要几个圆形，几条直线，任意变形组合，小狗活灵活现的面部表情就出现了，如图14所示。图14给小狗添加眼睛、鼻子和嘴巴15、为了增加一点顽皮的气息，我们还可以在雪人的头上，小狗的头上以及树枝上面都添加一些雪，如图15所示，是不是觉得非常可爱呀？图15添加雪堆16、最后让我们给图片添加上漫天飞舞的雪花，更增添上一份浪漫的情调。如图16所示。图16添加漫天雪花17、这样一副富有冬天色彩的雪人和小狗就做好了，将图片导出看一下效果，如图17所示。这里为了将来的贺卡制作，我们将图像导出宽度设置为760，以方便800×600的屏幕分辨率，如果读者用于做桌面就直接导出为1024×768即可，就不用在导出预览中设置大小了。图17导出后的图片[nextpage]二、制作显示输入名字的定制祝福页面18．图是制作好了，下面我们的工作就是要将其制作成为一个能够输入好友姓名就可以送上祝福的HTML页面，这里我们调用一个Javascript程序，将其放置在页面的同级目录下，具体代码如下所示：varlusername=location.search.split(=)[1];if(!lusername){lusername=XXX;}else{lusername=unescape(lusername);}functioncheck(obj){if(obj.stra.value.length8){alert('太长');returnfalse;}if(obj.stra.value.length==0){alert('还没填姓名呀');returnfalse;}varurl=http://+location.host+location.pathname+?stra=+escape(obj.stra.value);window.clipboardData.setData(Text,url);alert('网址已生成并替您复制好了，快发给您的朋友吧！');window.location.replace(url);returnfalse;}将这个代码存储为一个JS文件。其中默认的祝福名称是XXX，当用户输入名称的时候就会调用输入的名称。19．我们做贺卡的图片未必要有桌面那么大小，而且边缘也最好不要那么棱角分明，这里就需要羽化一下边缘，打开导出的JPG图像，然后选择工具箱上的选框工具，设置其属性面板的边缘为羽化，羽化大小为30，绘制一个选框选取我们需要作为贺卡的图像部分，如图18所示。design.yesky.com©天极软件频道设计在线原创©200754542图18选取部分图像20．按住Ctrl＋X剪切选取的区域，然后新建一个文档，此时新建文档的大小自动设置为剪切区域的大小，不过我们这里可以将其设置为稍大一些，设置大小为760×500，然后粘贴图像，如图19所示。最后将其导出为yuandan.jpg文件。图19粘贴剪切的图像21．接着，我们就在Dreamweaver中制作贺卡了，新建一个heka.htm文件，绘制两个表格，上面用于插入我们绘制的图像，下面用于添加一些文字，如图20所示。design.yesky.com©天极软件频道设计在线原创©2001327582图20插入图片和文字22．这个HTML首先使用scriptsrc='sd.js'/script调用外部的sd.js文件。对于上面的文本区域的开头红色冒号区域我们使用scriptdocument.write(lusername)/script命令来调用输入的名称，如图21中的拆分模式下所示。图21名称调用代码23．下面再插入一个层，也是用于祝福者姓名的调用，我们将其放置的雪人的肚子位置，如图22所示。其中层的代码如下所示：divid=Layer2style=position:absolute;width:118px;height:138px;z-index:2;left:525px;top:314px;divalign=centerfontcolor=#000000size=4strongbr祝br/strongbrstrongfontcolor=#ff0000scriptdocument.write(lusername)/script/font/strongbrbrstrong元旦快乐/strong/font/div/div图22新建祝福人名的层24．最后我们在页面的同级目录下还放置一个名为snow.swf的雪花效果的Flash文件，在页面中再新建一个层，然后插入这个swf文件，如图23所示。为了取得雪花纷飞的效果。design.yesky.com©天极软件频道设计在线原创©2001324752图23插入Flash的图层25．这样我们的页面就制作好了，我们可是使用F12快捷键在浏览器中浏览一下效果，是不是非常有动感啊，这里默认的祝福人的名称是XXX，如图24所示。不过需要我们注意的是：由于这里JS程序是针对网站目录的，因而在本地情况下，输入人名是不能调用的，需要我们传到网页空间上才可以。图24预览贺卡26．最后，我们将贺卡页面、图片、JS和swf文件都传到网页空间的某一个目录下，这样我们的JS程序就能够起作用了，随便在下面的文本区域中输入一个祝福对象的名字，就会出现一个如图25所示的提示对话框。图25提示对话框27．点击确定按钮，这样送给好友的贺卡就制作好了，如图25所示。这样复制地址栏的地址给好友发过去就可以送给她元旦祝福了，如图26所示。图26元旦祝福贺卡