photoshop在网站群中的应用

更新时间:2023-12-16 作者:用户投稿原创标记本站原创 点赞:10279 浏览:43788

摘 要: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结合站群技术来实现网页的制作.由于现在是一个信息化的时代,网站制作的需求越来越多,了解和熟悉这些技巧,可以提高网页的制作效率,同时也拓宽了我们制作网页的方式和方法.当然,网页的设计方法还有很多,如Dreamweer+Fireworks+Flash网页三剑客来制作网页,asp.+Sqlserver+Dreamweer来制作网页,只有通过不断的实践,摸索出更多的技巧和方法,才能不断地优化网页制作,设计出高水准的网页界面.