浅析photoshop在网站群中的应用.doc

浅析photoshop在网站群中的应用浅析photoshop在网站群中的应用 摘 要：Photoshop作为图像处理软件，在各行业中已经有了广泛的应用，在网页制作中也有广泛的应用。本文主要介绍了Photoshop在网站群中制作网页的方法和技巧。 关键词：Photoshop；网站群；Web 0 引言 Photoshop是一个专业的图像处理软件，具有强大的图像处理功能，能够对各种图像文件进行精细的处理，可以用于平面设计、广告设计、数码摄影的处理，也可以用于网页的制作。设计一个整体效果协调、有创意、有个性，吸引浏览者视线的网页，是网页设计者所追求的目标，同时也使得网页的设计方法也越来越多，本文将以网页制作为主题，介绍Photoshop如何结合网站群技术，实现网页的制作。 1 网页的结构布局 一般情况下一个网页版面有：网站Logo图区、导航区、正文区、说明区等，版面布局是网页设计的框架，在整个网页设计过程中起到灵魂的作用，规划和确定网站Logo图区、导航区、正文区、说明区的位置，使网站的文字、图片和动画和谐完美地搭配一起，让网页在更好地传递信息的同时，也具有赏心悦目的视觉效果，下面分别论述几种比较常用的网页布局。 1）“国字”型布局：因布局结构与“国”字相似，采用上中下模式，网页顶部也即网页的Logo图区和导航栏区，一般放置网页的Logo标志和导航栏、Banner广告，网页中间放置网页的内容信息和图片资料，网页底部放置网页的版权信息、联系方式等，是比较受大中型企业欢迎网页布局模式。 2）左右框架型：是一种左右分割的网页框架结构，一般左面是导航链接，有时最上面会有一个标题或标志，右面是正文，大部分的大型论坛是采用这种结构，有些企业网站也喜欢采用这种结构。 3）T型布局：页面顶部放置网站的Logo标志或Banner广告，网页的左下侧放置导航链接栏、右下侧放置网页的正文内容；网页底部放置一些辅助信息。 4）封面型布局：页面以一些精美的平面设计结合一些动画为主体，放上一些链接或者“进入”链接，进而设计成首页，这种布局以企业网站和个人主页较多。 5）综合框架型布局：这种是左右框架型和上下框架型的结合，页面顶部放置网站标志、广告条、菜单栏，网页中间左侧为二级栏目条，右侧为链接栏目条，中间为网页的主体内容，网页的底部为网页说明区，放置版权、联系方式等辅助信息。 6）Flash布局：就是以Flash作为整个页面，通过Flash来诠释页面所要传达的信息。 2 简单web设计实例 下面以水土保持网站为例，讲述Photoshop如何在网站群中的应用，以及网页的设计流程。如图1所示。 图1 水土保持网站流程图 2.1 创建网页初步雏形 按Ctrl+N创建一个宽度为1000像素、高度为900像素、72像素/英寸、RGB模式的图像文件，选择菜单【视图】/【标尺】和【视图】/【显示】/【参考线】，利用水平标尺或垂直标尺按住鼠标左键进行拖动，创建水平参考线或垂直参考线，根据网页布局模式为Logo图区、导航区、正文区及说明区中信息的放置提供参考依据，并进行排版。 2.2 制作网页框架 由于网页框架在网页制作过程起着重要的作用，因此制定一个合适的网页布局，对网页设计有着事半功倍的效果，也决定着网页的美观程度。例如“水土保持”网页采用比较受欢迎的“国字”型布局，在网页顶部放置Logo图区和导航栏区，中间正文区放置网页的内容信息，网页底部放置版权、通讯地址、联系方式等相关说明信息。如图2所示 图2 2.2.1 网页Logo区制作 创建好参考线之后，打开“水土保持”网站的Logo图片，使用【移动工具】将Logo图片放置在网页的顶部，然后生成一个图层，并将图层进行重命名为“Logo”。 2.2.2 网页导航区的制作 设置前景色为#cef78d，利用矩形选框工具依据参考线在Logo图区下面绘制一个矩形选框并用前景色进行填充绘制导航栏放置区。 2.2.3 网页正文区的制作 设置前景色为#d3f89a，然后选择矩形选框工具，在正文区绘制一个矩形选区，执行【选择】/【修改】/【羽化】命令，对选区进行羽化2PX，然后执行【编辑】/【描边】命令，利用前景色对选区进行描边操作，描绘出颜色边框，在制作出的颜色边框内，选择【矩形选框】工具，描绘出一个矩形选区，更改前景色为#d8f7a8，对选区进行颜色填充，制作出分类内容标题框依次用同样的方法，绘制出正文区中的其它分类内容方形区，然后依据参考线把分类标题图标放置到各自的方形框标题区中。 2.2.4 网页说明区的制作 设置前景色为#9ace48，依据参考线，利用【矩形选框】工具绘制一个矩形选区，并利用前景色进行颜色填充，然后调整矩形选区的大小，进行1个像素的羽化，更改前景色为#60940e，对选区进行再次的颜色填充，绘制出底部说明区。 2.3 将图像加工成静态网页 为了让设计好的网页框架能够在IE中协调、连贯的显示出来，需采用Photoshop软件中的ImageReady软件包，利用切片工具和切片选择工具，对图像进行切割，即在图像中要创建切片的区域上拖动【切片工具】进行切割，把图像分割成若干个小图片组，然后选择【文件】/【存储为Web和设备所用格式】命令，在打开的对话框中直接单击【存储】按钮，在弹出的保存对话框中，选择保存类型为【HTML和图像】，将图像保存为网页文件格式，从而转换成网页形式输出。 2.4 静态网页转换成动态网页 在站群系统环境下，将已设计好的网页框架HTML文件上传到相应站点目录下，并在生成的首页文件中，在相应的图片区域添加组件按钮，实现功能的完善。 2.4.1 首页组件的建设 在导航区中添加网站导航组件，正文区中添加标题列表组件、文章列表组件、变换图片文章组件、滚动图片文章组件，并把这些组件移动到合适的位置，调整组件及页面显示样式，说明区中添加计数器组件及版权组件等相关网站说明信息；如图3 图3 2.4.2 首页内容的建设 打开站群系统管理环境，在栏目管理处，根据网页布局模式要求添加文字栏目创建文字导航栏，并设置在首页导航栏显示；在资料库管理处， “资料库管理”中相应的栏目下，添加对应的资料，让网站内容信息在正文区显示，使网站内容显示丰富多彩。如图4。 图4 3 结束语 Photoshop在网页制作中应用比较广泛，比如也可以制作动画、按钮等，本文只是阐述了Photoshop在站群中的应用，以及通过实例介绍了Photoshop结合站群技术来实现网页的制作。由于现在是一个信息化的时代，网站制作的需求越来越多，了解和熟悉这些技巧，可以提高网页的制作效率，同时也拓宽了我们制作网页的方式和方法。当然，网页的设计方法还有很多，如Dreamweaver+F