企业网站设计

企业网站设计Photoshop的应用

发布：2019-03-14 13:22:48 浏览：4169

随着信息技术的发展,网页制作成为时下互联网平台中人与人交流不可或缺的宠儿,但是要完成网页设计作品就少不了其他软件的支持,如Flash动画制作,Fireworks图像处理,Photoshop图片制作及处理等。如何结合Photoshop来设计出有自己风格的页面是本文所要研究的课题。

一、Photoshop和Dreamweaver的简单介绍

1.Photoshop的简介

Photoshop是一款由美国发布的用来处理图像、图形的软件,简称PS。它不仅可以处理出你所需要的图片,还可以根据自己的要求动手绘画出自己喜欢的图像、图形,比如画笔工具、钢笔工具以及图形工具,用鼠标单击选中,在自己新建的画布上描绘出你喜欢的图像,然后选择相配的颜色,注意色彩要均衡,单击“油漆桶工具”或选择菜单栏中“编辑|填充”命令即可,这样,简单的一幅画作就完成了,最后你可以根据自己对图像的需要进行图层样式的选择,单击菜单栏中“图层|图层样式”命令选择需要的选项就可以了。

2.Dreamweaver的简介

Dreamweaver简称Dw,是一款集网页制作和网站管理于一身的网页编辑器,也是人与人之间一种视觉的交流方式。一份精美的网页中包含的元素众多,包括图像、图形、文字、动画等,将这些元素进行规范的排版与合理的布局,就需要用Dw中的CSS样式、表格制作等众多功能来辅助完成。需要提及的是Dw中的编辑基本上都是靠代码来完成的。

二、Dw中网页布局和实例制作

1.Dw中的页面布局原则

(1)色彩要搭配恰当,网页在颜色搭配上要遵从以下几点:渲染主题深色调,突出氛围浅色调,简约大方白色调,对比鲜明黑色调,端庄奢华紫色调,浪漫婉约粉色调。

(2)元素要相得益彰,有些网站页面元素很多,尤以图片文字为首。文字过多会让人觉得乏味无趣,图片过多又会觉得低俗,为了防止视觉疲累,应该将图片和文字适当搭配。

(3)图片要处理合理,在页面布局中很多图片都不符合要求,有些色彩过于鲜艳,有些像素过低模糊不清,有些只需要一部分图片。针对这些问题,我们都可以用PS轻松处理。

2.实例制作

(1)打开Dw软件,选择新建栏目下的“HTML”模板,进入后选择“管理站点|站点|新建站点”,名称为“梦回唐朝”且保存在“E:/myweb”的根文件夹下。注意文件命名时要采用字母或数字,以便各网页之间进行有效的链接。

(2)处理需要的图片和文字存入“myweb/images”文件夹中,图片处理使用PS软件,主要处理图片的大小、色彩及像素值。比如网页的logo图片、导航条、锚点图标、分割图形等都可根据需要处理。在这里先介绍该网站主页的logo图片的制作合成,首先打开PS软件,新建立一个30×25cm的画布,然后分别打开一幅扇子图片和一幅背景图片,可单击工具栏中的“快速选择工具”将扇面抠下;处理背景图很简单,只需要用裁剪工具裁出中间的部分。最后返回新建的画布,将扇面和背景图分别放入两个图层中,再处理文字“梦回唐朝”,主要是用图层样式,这里不再详细说明。需要注意的是图片格式须保存为网页一般格式“.jpg”“.png”或“.gif”,以便浏览器快速下载。

(3)插入所需表格,将已经处理好的图片、文字、图标、导航条等进行规范合理的布局排版,然后调整表格的长度和宽度。

(4)保存之后根据浏览器的预览效果进行完善调整页面。

三、利用PS为网页布局

在Dw中布局页面会有些耗时,既要代码输入,又要调整表格搭配、背景颜色,相比较而言,在PS中将页面布局完成,然后将其插入网页设计中更简单有效,而且可以事先搭配好颜色。

1.PS布局原则

(1)色彩搭配要清新亮丽,选用一个主色调,其他颜色选用不可与主色反差太大,以防造成视觉错乱。

(2)布局应合理规范,不可随心布置,让人看起来不舒服,要疏密有度,和谐统一。

(3)突出主题,对比鲜明,不可让无关紧要的文字或图片占用大量篇幅,以至于忽略了主题,应将重要信息呈现在视觉的中心,让人一看简单明了。

2.实例操作

(1)打开PS并新建一个1024×768像素的画布,文件名为“主题相册”,颜色为白色,分辨率为72像素英寸。

(2)利用图形工具描绘出所需要的页面效果图,单击菜单栏中的“图层|图层样式”选择合适的样式,让图像看起来有立体的效果或其他效果。

(3)保存图片为“.jpg”格式,以便观察其效果。