分享
 
 
 

轻松制作显示输入朋友名字的贺卡网页

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

新的一年就要到来了,今天我们来制作一个很简单又非常有趣的动态贺卡页面送给自己的朋友们吧!我们首先用Fireworks来绘制一个可爱的新年场景,然后对绘制的图像进行切割,导出为HTML页面,再通过简单Javasript代码的调用,生成一个功能强大的贺卡页面:只要你输入好友姓名,就能够生成专门给好友的定制页面和链接。当朋友们收到你为他们送上的特殊祝福,一定会非常开心的。文章末尾提供原文件供大家下载参考。

制作步骤:

一、静态场景绘制

场景描述:一场大雪之后,堆一个胖胖的雪人。蓝蓝的天空,白白的雪地上,一个憨厚可爱的雪人给寒冷的冬天带来了许多乐趣,就连顽皮的小狗狗都被吸引过来了,围着雪人好奇的看个不停。这个场景是不是也牵动了你们童年的思绪呢?

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所示。

图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 导出后的图片

下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有