基于Photoshop的网页制作模型的设计与实现.docVIP

基于Photoshop的网页制作模型的设计与实现 　　摘要 　　Photoshop在图片处理上具有强大的功能，尤其是对图像进行精细化操作，更是奠定了其在广告设计及美术创作中的坚实地位。当然，在网页制作模型设计上，Photoshop依然可以凭借其精细化、功能化优势来实现美轮美奂的网页规划效果。 　　【关键词】Photoshop 网页制作 模型设计 实现方法 　　1 引言 　　现代网络技术的发展，对网页制作提出越来越高的要求。Photoshop作为功能强大的图像处理软件，同样在网页制作设计中不容小觑。如在不同格式文件上兼容性强，图像处理精度高、误差少、视觉效果显著，更成为网页图像、动画、基于Web页面设计领域的优秀工具。 　　2 Photoshop在网页建模的独特优势 　　2.1 页面布局功能的灵活性 　　利用Photoshop来进行网页设计，主要是利用图层的特色功效，可以实现不同层次上不同元素的放置，且在进行移动时不会影响其他元素及整体视觉效果。当然，对于图层空间不仅可以放置单独页面要素，还可以放置链接，还可以进行叠加，确保不同图层上不同要素的色彩、亮度、大小等不会出现偏差。由此以来，在进行网页要素规划及布局上，可以依照设计者的思维进行灵活操作，增强了设计自由度。 　　2.2 修改功能的便捷性 　　由于网站在设计过程中因客户的要求而进行修改是常有的，而Photoshop因其便捷的修改功能，可以先通过Photoshop设计出效果图，然而结合需求变化来优化，最终获得客户的满意。对于其他软件则无法实现自由、从容的修改。 　　2.3 网页浏览的快速性 　　网页制作的目的在于浏览，而浏览体验不仅需要美观和规范的视觉效果，还要具有良好的网站交互能力。特别是对于大型网页架构，因加载项目过多，对网速要求过高。但对于Photoshop制作的网页，多采用裁切体积及文件格式转换，对系统资源占用率较低，从而能够保障快速的反应速度，提升浏览的流畅度。 　　3 Photoshop网页制作模型的设计与应用 　　3.1 Photoshop新建图像文件 　　根据网页设计模型基本框架要求，首先需要新建图像文件，以常规1280*800像素为例，可以设置浏览器的图像宽度、高度为1260*780，选择RGB色彩模式，便于在Photoshop中利用色彩的叠加营造五彩缤纷的视觉效果。 　　3.2 Photoshop设计网页布局 　　针对不同功能、不同用途的网站，其页面框架结构也不尽相同。通常情况下，对于视觉的热点效应多聚焦于左上角。在进行网页浏览时，左上部及上部为视觉中心，其后往下阅读，呈现出“F”形特征。因此，在页面布局上，围绕网站标识、站名、导航条、热点栏目、头条等页面布局要素，来重点优化左上部区域。如对于综合性网站，通常采用“国”字型页面布局，最上面为标示栏及广告条，其次为网站的主体内容，再次左右各一列小字号标题栏目，中间侧重于图文并茂的内容，最下面为基本信息，包括版权、联系方式等说明。因此，在设计上，利用Photoshop在页面上设置“T”型字，形成三块空间，最上面为标识、广告条等；左侧为导航栏，右侧为网站主体内容；接下来设置不同的页面图层，并在不同图层上进行绘制，结合Photoshop的图形、渲染功能来完成。 　　3.3 Photoshop网页模型集成 　　完整的网站需要具备Logo、广告栏Gif动画，背景底纹及导航按钮等。对于网站Logo，利用Photoshop丰富的图像设计功能来设计独特的富有个性的标识。如新浪网标识中的“i”通过进行艺术化处理，将之转换为活灵活现的眼睛，正是传达“世界在你眼中”的设计理念，增强了视觉动感；再如人人网的标识，利用对“人”字的抽象变形，代表每一个人；辅以圆圈，寓意人际圈，其共同的交集则象征着人与人的协作、分享、沟通。可见，对于标志的设计，既要从视觉审美上来表达生动的效果，还要从文化内涵彰显丰富的意蕴。Photoshop可以实现对矢量图形的任意变形而不失真，从而为我们进行自由创作和设计提供了无与伦比的设计环境。如可以利用钢笔工具来绘制矢量图，保存为JPG格式占用空间小，带来较快的响应速度。 　　广告栏多采用GIF动画，位置多居于网页的最醒目中间靠上，在动画内容上可以是企业精神、也可以是产品介绍，以图像自动切换等方式来呈现。利用Photoshop和ImageReady可以制作出简单、易用、低系统占用率的GIF动画，避免了传统SWF动画设计对插件的要求。举例来说明，以600*200像素广告栏为例，其操作过程如下：首先新建600*200像素文件，分别插入四张不同的图片到1，2，3，4个图层里，调整各图层中图形尺寸，使其保持和谐度；分别在4个图层新建文本图层，并打出不同的广告语，与相应图层进行