首页 > 网站建设 >

九步做好网站设计主图

发布时间:2018-10-23 作者:深圳网站制作

 图像是网页中不可或缺的组成成分,恰当地使用图像,可以使网站充满生命力与说服力。另外,网页图像又包括很多功能的类型图像元素。例如,用于完成站内导航功能的图像按钮和导航条;用于装饰页面的背景图像;用于显示动态效果的图像交换;实现页面布局的网页主图;吸引浏览者关注的LOGO图标,以及图像标题;实现网站经济收入的Banner广告条等。这些图像元素在网页中扮演不同的角色,构成幅完美的网页。深圳网站制作公司介绍用Photoshop制作上述各种类型的图像元素,并用Dreamweaver在网页中插入制作的图像元素,以及使用css控制背景图像的方法
【制作重点】
◆制作和插入网页主图
◆制作标题文字
◆制作网页按钮
◆制作网页背景图像
◆制作其他网页元素
◆制作LOGO
◆制作Banner
◆css控制背景图片的方法
◆综合运用css的背景样式进行网页设汁
制作网页主图
  网页主图是一个网页的门面,它体现所在网页的整体风格。例如,如图9.1所示是一个公司的主页,主页设计在很大程度上决定了整个网页的主体色彩、布局以及风格。因此,在网页设计时,般应首先在Photoshop中设计主页图形。
             公司主页制作设计效果图9.1
  设计网页主图是比较关键的环节,主图制作得好坏,将直接关系到能否吸引浏览者的注意力。一个优秀的主图寥蓼几笔就能生动地勾画网站的特点。一般来说,主图的颜色必须与网页完美融合、有独特的创意,这是制作主图时必须注意的。另外,网页中的主图不仅要好看,还应恰当地表现网页主题思想、图像文件大小等要求。
提示:主图是多种多样的,它可以是幅极具创意的特效国像,也可以是个特别精致的小图,或者干脆整个网页就使用幅大图,如图9.2所示是两家类型和风格迥然不同的主页,网站主题、颜色和布局都不同,但主页中都使用了幅大图,而这个简单漂亮的图形充分体现出了其网页的特色。
下面就以图9.l所示首页主图为实例,介绍主图的一般制作方法。
制作主页头部标题和导航区域
主页头部标题和导航区域具体操作如下。
第1步,启动Photoshop,新建文档,设置画布大小为1000像素×1000像素大小。选择【视图】【标尺】命令,显示标尺刻度。
第2步,在左侧和顶部分别拖动辅助线,用辅助线勾画出页面布局的草图,如图9.3所示。
         网站设计主图制作实操示意图9.3用辅助线勾画主页的布局
第3步,制作头部标题和导航区域。头部制作效果如图9.4所示,共分4个小步骤,1.步制作头部修饰边框,2.步制作头部渐变背景,3.步制作主导航按钮,第4步制作次导航按钮。
第4步,头部修饰边框需要自定义块纹理图案,如图9.5所示。然后选择【编辑】【定义图案】命令,把当前图案图像定义为Photoshop图案。
     网站设计主图制作示意图9.5自定义图案背景
第5步,自定义图案越小越好,保存在同文件夹中。用【矩形选框工具】绘制一个1004像素×28像素的长条矩形。
第6步,新建图层,选择【编辑】【填充】命令,在【填充】对话框的【使用】下拉列表框中选择【图案】选项,然后选择上面定义好的背景图案,如图9.6所示。单击【确定】按钮,填充选区,制作顶部装饰条。
第7步,用【直线工具】绘制条直线,在工具选项栏中设置填充颜色为#e4b5a6,粗细为4像素,然后按住Shift键,在顶部拉出条直线,效果如图9.7所示。
第8步,新建图层,使用【渐变工具】在线条的下方应用渐变填充,渐变类型为直线渐变,颜色从白色到浅黄色,如图9.8所示。
   网站设计制作主图实操步骤示意图9.8制作渐变背景
第9步,关于导航按钮可以用文本制作,按钮间隔点为直线,并设置直线点线线型,如图9.9所示。
深圳网站设计制作公司关于网页主图的制作实操步骤,本文就介绍到这里。博纳网络编辑整理。

没有了

下一篇:

文章标题:九步做好网站设计主图
本文地址:https://www.198bona.com/news/1561.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯