首页 > 网站建设 >

网站设计师分享网页制作图像处理技巧(一)

发布时间:2018-09-17 作者:深圳网站制作

 网页制作离不开图片,可以不夸张的说,一个网站的视觉效果客户满意程度大部分是由图片的效果决定的,深圳网站制作公司设计师,今天与各位分享,网站前端设计如何处理图片。
一、网页图像制作技巧无论用户是初学者还是图像制作高手,在制作网页图像时,都应掌握下面几个要点。
1.网络图像制作要小而精,忌大而滥网络图像不是在个人电脑上,在网络上浏览网页,速度非常重要,所以首先要考虑图像文件的大小,尽量不使用500KB以上的图像。此外,网页中的图像不在于多,而在于能否衬托出主题、渲染内容,即图像一定要与内容有关,不要只追求漂亮,而加入没有意义的图像,如图所示是腾讯公司的首页。图,图像小巧以服务内容为目的的页面效果图页面以蓝色为主色调,各个栏目的标题颜色为浅蓝色,与白色背景相协调,文字链接的背景也用淡蓝色,虽然网页信息量大,但这种以冷色调为主的网页颜色规划会给人以清新的感觉,不会因为网页的内容多而感到烦躁。该网页所用的图形大多是卡通或简笔画,气氛轻松活泼,图像的色彩也采用单一的较纯的颜色,让人耳目一新。更为主要的是这些图像文件都非常小,不过几KB。整个图像设计小巧简约却不幼稚,色调明晰却不妖艳,让人感到轻松愉悦。

2.图像要分主次,忌喧宾夺主同一页面中的图像,要有主次之分,在大小、颜色、位置上辅助图不要超过主图。一般来说,一个页面上只有一幅主图,应放在较醒目的位置,其余放在次一些的位置。而且图像大小也应有所不同,除非是介绍性的图像,如产品图像、风光照片等可以同等大小。如图所示是苹果中国官网页面,整个页面就插入了一幅图片,占据整体页面,图片虽然有点大,但不喧宾夺主,其主要原因就在于色调和内容的协调统一。图像与页面融为一体的页面效果

3.用色讲究主色调,忌杂乱无章一个优美的网页,都有一种主色调来烘托内容。页面的大部分应该用同一种颜色或者相近的颜色,而图形可以用与主色调反差大一些的颜色,颜色,起到画龙点睛的作用。如图5.3所示,页面插入多幅小图,这些小图重在渲染气氛,烘托主题,使不明白本页功能的浏览者一看见该图就知道网页的内容,即使图像的颜色与网页主色调反差比较大,但作用不可小视,也很引人注目。图像烘托主题的页面效果

4.选择合适的软件会事半功倍图像制作软件有很多,如Photoshop、Fireworks、Illustrator等。随着这些软件的不断升级和功能的不断改善,均可以用来制作网页图像。它们制作出来的图像最终效果都差不多。如何在众多软件中选择一种适合制作网页图像的软件呢?最主要的是看自己用起来能否得心应手,此外,使用起来是否方便。如果用户熟悉Photoshop,那么Photoshop肯定是首选,毕竟Photoshop是一个比较专业的图像处理软件。如果要为后期网页设计工作多考虑一些,则可能会选择Fireworks,因为Fireworks是专业的网页图像设计工具,与Dreamweaver也能够很好地协作。例如,在Fireworks中保存的网页或是分割区域,可以直接插入到Dreamweaver中使用,而不会改变原有位置,并且在Fireworks中所做的一切设置(如图像位置、链接地址等)都不会改变。

二、搜集图像素材
  只有拥有了丰富的网页素材,才能制作出优质的网页。一般来说,图像文件均可作为网页的图像素材使用,但是由于网页图像受格式和文件大小的限制,因此并不是所有图像都可直接用于网页中,而需要经过处理(如缩小文件等)和格式转换后才能使用。网页图像不同于普通图像,它包含了各种专门用于网页的图像元素,如LOGO(网站图标)、Banner(广告条,或网页横幅)、按钮、背景、项目符号、小图标和分隔线等,如下图所示。因此,搜集网页图像素材,不只是搜集一些漂亮的风景图像,还要搜集一些专门用于网页的图像素材。图各种网页使用的图像素材如何获得图像素材呢?
.购买网页素材光盘。
.通过百度搜索网页素材。下面列出一些比较专业的网页资源站点仅供参考:
.http://www.sucaiw.com(素材精品屋)。
.http://www.jzzy.com/(建站资源网)。
.http://www.dabaoku.com/(网页制作大宝库)。
.http://www.68design.net/(网页设计师联盟)。
.http://www.mbsky.com/(模板天下)。
.http://www.citk.net/(丁丁家园)。利用搜索引擎可以快速找到需要的网页素材。例如,利用百度搜索网页LOGO。
【操作步骤】
第1步,先拨号上网,并启动IE浏览器。
第2步,在IE地址栏中输入“http://www.baidu.com/”,打开百度搜索引擎,如图5.5所示。百度是全球最大的中文搜索引擎,能够提供专业快速的搜索功能,特别在搜索音乐、图片等多媒体信息方面功能强大。
第3步,在菜单栏中选择“图片”,切换到图片搜索页面,如图5.6所示。百度能够从亿万中文网页中提取各类图片,建立了世界第一的中文图片库。选择搜索图片
第4步,在【图片搜索】文本框中输入要搜索的关键字,例如“LOGO网页”,然后在下面选项组中选择搜索图片的大小、颜色、类型和格式,如图5.7所示。在搜索时,默认的选择是搜索所有格式的图片。设置搜索条件
第5步,单击【百度一下】按钮,即可搜索出相关的全部图片,如图5.8所示。
第6步,在搜索结果页面中,单击合适的缩略图,可将图片放大观看,如图5.9所示。有时当单击缩略图后会出现“找不到图片”等情况时,这是由于图片所在的源网页已经删除、改动或暂时无法访问等问题所导致的。对于这种情况,只能以翻页查看更多图片来进行选择。
第7步,如果想看到更多的图片,可以滚动鼠标,向下翻页查看,最后单击页面底部的【加载更多图片】按钮查看更多搜索结果,如图5.10所示。在图片列表中查找需要的图片如果要在网页中展示公司产品,或者是个人照片等图像,则还需要配备一台扫描仪或数码相机,这样可以随时将各种风景、人物、艺术作品或公司产品的图像输入到计算机中,加以处理后应用到网页中。由于使用扫描仪和数码相机所涉及的内容较多,这里就不做介绍了。以上获取图像素材的方法方便快捷,但是,要很快找到能够真正应用于网页中的图像,却并不容易。所以,最有效的方法还是用户自己制作网页图像,这样更具有针对性,并且可以结合网页内容来制作图像。当然,也可以找一些图像素材作为底稿,在其基础上进行修改。深圳网站制作公司关于网页制作图像处理技巧的文章今天就分享到这里。后期我们会实操举例分享具体操作。博纳网络编辑整理。
 
文章标题:网站设计师分享网页制作图像处理技巧(一)
本文地址:https://www.198bona.com/news/1377.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯