• 学前教育
  • 小学学习
  • 初中学习
  • 高中学习
  • 语文学习
  • 数学学习
  • 英语学习
  • 作文范文
  • 文科资料
  • 理科资料
  • 文档大全
  • 当前位置: 雅意学习网 > 文科资料 > 正文

    网页的设计与应用 [浅谈PhotoShop在网页设计中的应用]

    时间:2019-05-11 03:30:27 来源:雅意学习网 本文已影响 雅意学习网手机站

      随着网络的快速发展,一个新兴的专业——网页设计诞生了。网页已经成为网络信息的表现和思想传播的主要形式。网页设计是随着网络的产生而形成的艺术设计新课题,是网页设计者以个人长期积累的技术和艺术经验为基础,依照设计目的和要求对网页的构成元素进行艺术规划的创造性思维活动,更重要的是网页版式编排的过程中PhotoShop的应用。
      一、PhotoShop平面设计软件设计页面的优点
      网页制作的工具很多,但是使用PhotoShop(以下简称:PS)平面设计软件设计网页是当前网页设计的主流方法,是一个功能强大的图像处理软件。按照预想的整个页面布局的思路在PS中分层摆放元素,并利用自己掌握的图像处理的技巧适当地进行图像处理,使层与层之间过渡自然,元素与整个网页的主题相一致,整个页面成为一个协调的整体。
      1.灵活性:PS的灵魂是图层,一个完整的网页设计作品往往有许多元素组成,层的功能就是能够对这些元素单独进行修改和编辑,而不影响其他元素;可以给图层添加样式、蒙版、改变叠放的顺序;可以对每个图层进行图像设置,如图像色阶、饱和度、亮度、大小等单独调整。图层之间是单独存在的,但又是相互连接的,每个图层上的图像位置可以随意挪动而不影响其他图层的图像位置。如此灵活的功能,完全可以让设计者发挥创意、灵活运用。
      2.加快浏览速度,互联网有一项著名的8秒原则:即客户在访问网站时,如果页面打开的速度超过8秒,那么访问者就会感到不耐烦,甚至极有可能直接关闭该网页。PS能对网页大小及网页元素大小进行适当的调整。用PS设计的网页经过裁切后体积相对要小得多,相同的元素因为其格式变化也会大大提高下载速度,因此PS就成了提高页面下载速度的有效工具。
      二、PhotoShop在设计网页布局中应该把握的几个要点
      1.网页文档尺寸与分辨率。最常用的浏览器页面是1024*768像素,但浏览器本身还要让出一定空间,才不会出现水平滚动条和垂直滚动条,所以网页设为1001*600像素,分辨率为72像素较为合适,当然这个可以看情况调整,太高的分辨率并不能增强效果,反而会降低下载速度。
      2.页面设计前的元素准备。考虑页面的整体风格,思考页面的区域划分。一般情况下网页为以下几个部分:背景、header部分、body部分、footer部分。
      3.分层的重要性。网页中有很多元素,很多层,像Banner、文本、LOGO、渐变等,尽量把这些元素独立的放在不同的层上,以便日后修改
      三、PhotoShop设计网页布局中应该遵循的原则
      网页作为一种版面,既有文字,又有图片,可能还有动画、视频等。文字和图片需要同时展示给用户,如果只是将它们简单地罗列在一个页面上,往往会使页面显得杂乱无章。因此,必须根据内容需要,将它们按照一定的次序进行合理布局和编排,使其组成一个有机的整体,展示给用户。下面详细介绍网页布局一般应遵循的原则。
      1.图文搭配,文字和图像具有相互补充的视觉关系,如果页面上的图像太多,缺少文字,就会降低页面的信息容量;而如果页面上的文字太多,则会显得沉闯,缺乏生气。一个好的网站图片量和文字量应该以网站的功能、行业、目的而定;文字和图片相互依托,合理搭配,才能制作出形式生动、内容丰富的网页。
      2.疏密交错,网页上重复的形式过多,会使页面显得呆板,容易使浏览者产生视觉疲劳,因此在内容安排上要恰当地留白,适当地运用空格,改变行间距和字间距等来制造变化的效果,打破页面呆板、平淡的格局;在对称性上既要使用对称美,也要兼顾非对称美,均衡的网页生动活泼富于变化,可以给页面增加一些生动性和趣味性;在色彩上可以适当使用对比,以形成鲜明的视觉效果,最重要的还是要让个体和主体统一协调,以免产生,颜色搭配不合理,或者太多,给人一种不舒服的感觉。
      3.强调整体,这在设计中占据了关键位置,起着主导作用。网页上的整体包括内容和形式上的整体性,这里主要讨论的设计形式上的整体性。从版面、色彩、风格入手。在网页上所有的元素要整体考虑,以周密的结合和精确的定位来获得页面的整体感,即使运用“散”的结构,也要经过巧妙的整合,顾全大局,使其产生和谐的美感。
      4.突出主题,一个优秀的网页设计作品必须条理清晰,服务于网站的主题。从空间层次、视觉次序、主次关系,有条理的把握运用。在空间上应该放大主体;从视觉出发重心一般在中偏上位置,这个位置最能吸引浏览者;从主次出发,应在视觉中心以外的地方可以安排一些稍微次要的内容,或增加一些空白,可以便得被强调的主体形象更加鲜明突出。
      四、“裁切”工具是PhotoShop通向DreamWeaver的桥梁
      利用PS设计网页布局的成品,还有关键一步,就是“裁切”,只有正确的裁切以后DreamWeaver才能对效果图进行有效的整合,PS在网页布局的积极作用才发挥到了极致。必须注意以下几点:
      1.必须依靠参考线。设计时用到参考线,切图时更要用好参考线,参考线能保证我们切出图片同表格尺寸相统一的尺寸,有效避免“留白”和“爆边”。参考线能保证我们切出图在同一表格中的尺寸同一协调
      2.设计处的虚线、圆角必切、渐变必切,这些都是DW实现不了的,大图必切,大的图片均匀的切成小图,这样可以提高网页下载速度。特殊文字必切,避免浏览器的不兼容,
      3.有效存储切片,存储切片时用“文件——存储为WEB所用格式”命令。切片格式要求存为DIF格式,占用体积小,要求高的图像存储为JPEG格式,JPG格式显示更多的图片细节。
      网页的艺术设计,日益被网站建设者所重视。一个好的网页是艺术和技术的结合,既要内容详实,又要视觉新颖,还要布局合理,把内容的层次性和空间性突显出来。网络不断地更新发展,网页设计只有掌握了各种网络技术规律、通过多样的视觉形式,注重技术、功能和艺术的关系,相辅相成,才能满足未来受众对网页信息的更高要求。

    推荐访问:网页设计 浅谈 PhotoShop

    • 文档大全
    • 故事大全
    • 优美句子
    • 范文
    • 美文
    • 散文
    • 小说文章