基于PXF模式快速提升网页视觉效果的研究.doc

《基于PXF模式快速提升网页视觉效果的研究.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、.word格式.基于PXF模式快速提升网页视觉效果的研究　　摘要随着互联网的飞速发展，各种系统逐渐采用了Web架构。如何在有限的时间内设计出更精美的Web页面并吸引住用户，成为巨大的挑战。针对该难题，提出结合PXF（Photoshop、Xara3D、Flash）的快速设计的模式，并通过一个课程网站的案例分析了该模式的步骤及要注意的问题。实践表明，基于PXF能够较好的提升网页视觉效果，缩短开发周期。　　【关键词】PXF模式PhotoshopXaraFlash网页效果　　1PXF模式　　众所周知，Web系统的应用日益广泛。例如，以往收发电

2、子邮件需要安装Foxmail、Outlook等软件，而现在基本上在Web页面中完成。Web网页设计也可被称为建立网站，Web系统的迅猛发展，快速设计出美观的Web页面成为研究的热点。对于基础较为薄弱、培养复合应用型人才为培养目标的中职学生，如何才能掌握该技术呢？.专业.专注..word格式.　　笔者长期从事中等职业学校的相关教学，经过大量实践研究，认为将图片处理软件Photoshop、3D立体制作软件Xara3D、动画制作软件Flash三大设计工具有机结合起来，就能取得较好的效果，这种模式可以称为PXF模式。　　2PXF的实践　　2.

3、1Photoshop的应用　　HTML可以直接显示文字，配合CSS可以获得较为理想的文字大小、颜色的效果。但是，对于复杂的文字、图像效果，它们就无能为力了，这个时候就需要图像处理软件。目前常见的图像处理软件很多，例如Photoshop、美图秀秀、光影魔术手、可牛、CorelDRAW、Fireworks等。这些软件各有千秋，但是普通人不可能全部掌握。对于网页设计，最好还是采用Photoshop，因为它功能最为强大，基本上能满足网页设计中图像处理的所有需求。其常见的应用如下：　　2.1.1图像基本编辑　　包括对图像进行的放大、缩小、旋转、

4、倾斜、镜像、透视等变换。　　2.1.2图像修复　　常见的有去除斑点、修补、修饰残损等。　　2.1.3校色调色　　包括明暗、色偏的调整和校正，从而满足图像在网页界面搭配的需求。.专业.专注..word格式.　　2.1.4图像合成　　将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像。　　2.1.5特效制作　　通过滤镜、通道等工具实现特效创意和特效字。　　2.1.6切片　　也就是将大图片分解并生成网页，从而加快网页浏览和图片下载的速度。切片步骤为：设计大图->切片->编辑和细化->调整布局->导出。　　2.2Xara3D的应用

5、　　人们对Photoshop了解较多，生活中经常听到PS、P图。但是，它主要面向静态图像设计，没有3D动画功能。实际上，Web页面非常讲究动静结合。页面中添加3D动画，很容易吸引用户的眼睛。　　Xara3D就是一个强大且不需要特别专业技术就能掌握的理想软件。它提供了文字、图案、斜边、阴影、材质、动画等特色模版，能够快速生成高清3D动画。其操作步骤如下：　　（1）输入文字，设置字体，当然也可以导入一些个人喜欢的创意字体。　　（2）设置3D厚度，斜边角度，材质选择，灯光颜色，调整角度等。.专业.专注..word格式.　　（3）选择动画特效

6、，导出gif文件。如图1右下角的3D文字特效。　　2.3Flash的应用　　有了HTML、CSS的文字效果，有了静态图像、3D动态图像，再添加一定的动画，则网页技能脱胎换骨了。能设计动画的软件很多，例如Maya、Animo等，不过要是应用到网页的，还是Flash最为有效。Flash提供了绚丽的矢量动画效果，独有的ActionScript可以控制动画中的时间线、声音、颜色、光标、图形及数据等，能够瞬间提升视觉效果，最关键的是其尺寸小巧，非常适合Web页面。　　一般来说，Web页面的Flash都是相对简单的动画，当然也可以直接利用现成的透

7、明Flash素材。将其放置到网页中并不复杂，主要是利用div（层）来存放。例如一个名为wcyu.swf的Flash动画在网页中的代码如下：　　　　　　.专业.专注..word格式..专业.专注.