应用Photoshop设计网页的初步探讨

2016-02-04刘业

山西青年 2016年11期

关键词：网站建设网页

刘　业

山东龙口矿业集团高级技工学校，山东　烟台　265700

应用Photoshop设计网页的初步探讨

刘业

山东龙口矿业集团高级技工学校，山东烟台265700

摘要：我们正在进入信息时代，信息技术知识已经成为当代知识分子知识结构中不可缺少的重要组成部分。信息技术的范畴十分宽广，内容十分丰富。对于大多数人来说，当前最迫切需要学习的是计算机与网络的应用知识，特别是互联网技术的应用知识。在互联网飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。因此网站建设和网页制作在互联网应用上的地位显的格外重要。

关键词：网站建设；Photoshop；网页；Internet

Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。本文根据实践经验对Photoshop在网页设计中的作用进行了初步探讨。

一、Photoshop软件简介

Adobe Photoshop，简称“PS”，是Adobe公司推出的图像编辑、网页制作和图像合成及特效制作软件。它横跨平面与网页多媒体设计领域，是一种全球标准的图像编辑解决方案。作为专业的图像编辑软件，Photoshop是网页设计师和平面设计师最常用的工具之一。在网页设计方面主要是对网页图像进行处理及制作，包括网站版式设计、导航按钮制作、Gif动画制作等等。

二、Photoshop在网站设计中的地位

网站访问量决定了其生存的空间，而确定这一切的根源在于网站设计及其开发过程。网站的的设计及开发过程也称为网站的设计流程。根据在网站设计过程中针对的侧重内容不同，可以将其划分为三个阶段。第一阶段准备阶段(需求分析、总体设计、素材整理)，第二阶段(网页设计、程序开发、测试、发布)，第三阶段(需求变更、设计变更、程序变更、测试、重新发布)。网站设计实际上就是设计整个网站的蓝图，即主页、其他网页及网页间的关系。先设计网站的整体结构再绘制草图。利用Photoshop设计效果图，正是处在整个流程第三部—网站视觉设计上。

三、Photoshop在网页设计中的作用

(一)图像处理，优化图片。在网页制作中，要处理大量的图片素材，无论是处理单张图片还是设计一个复杂的网页，Photoshop都是首选工具。在日常的生活中存在多种不同类型的图片文件格式，不同格式的图片文件所呈现出来的视觉效果不同。在网页设计过程中，经常使用的图片格式有GIF、JPEG、PNG三种格式，不同格式图像的展示效果不同，各自的实用场合也有所不同。心理学研究表明一个网站的下载时间超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，其中网页大小、网页元素的优化和网络配置是重要的因素。其中网页大小与网页元素的优化是设计者需要解决的，使用Photoshop设计的网页经过裁切、整合处理后体积会小得多，当然网页响应速度就会快很多。

(二)网页布局，整体规划。网站的视觉设计决定了网站整体页面风格和展示效果，而一个设计精美、独具个性、能够给人留下深刻印象的网站，也必然会得到用户的认可。无论简单还是复杂的页面，都是由网页的基本元素构成的，而这些网页元素均可以使用Photoshop工具进行制作和处理，最终组合成一个多彩炫目的网页。利用Photoshop做好布局效果图后，关键的一步就是“切片”。只有正确地切片，Dreamweaver才能对效果图进行有效的整合。

(三)图像特效，动态显示。在网页设计过程中，往往需要一些特殊的效果美化网页。如虚线、变幻线、阴影、圆角表格、标题、广告等特殊字体、渐变的网页背景等等，这些效果在Dreamweaver中无法直接实现，可以先在Dreamweaver中绘制相应效果，然后裁切成小图片在Dreamweaver中进行整合填充即可。虽然photoshop不是专门的动画制作软件，但是充分利用photoshop时间轴工具可以制作简单的GIF动画，实现图片动态展示效果。

(四)批处理动作，提高效率。Photoshop提供了一些自动化的功能，可以极大提高网页的制作效率。如“批处理”、“动作”、“脚本”、“历史记录”等，这些功能相互配合更加实用。如像册网站，像册网站、产品展示网站等，一般是先展示各图像的缩略图，然后链接相应的大图。当需展示的图像较多时，制作缩略图也是一件很大的工程。合理利用Photoshop的批处理功能可以提高制作速度，减少设计者的工作量。

四、Photoshop设计网页技术要点

(一)实用参考线来准确划分页面结构。参考线在页面布局中的主要作用就是位置对齐，每个网页中大布局下，都分为很多子模块，子模块与子模块之间水平或者垂直地对齐，就要靠参考先来调整。

(二)合理使用图层及图层组，使图层结构清晰。使用Photoshop设计网页，使用的元素非常多，一个大型的网站，元素和图层会超过上千个。根据布局位置的不同，把同一布局位置的元素整理到统一图层文件夹里，会避免元素的混乱。

(三)注意页面的合理用色和颜色之间的搭配。网页的用色分为主色、辅色和点睛色，若颜色搭配不合理，整个画面的效果就会大打折扣。其中尤其是要注意冷暖色系的配比，以及点睛色的缓冲作用。

(四)注意网页字与效果字的设置。页面的两大组成元素是文字和图片，处理好文字的效果，网站的设计就成功了一半。在设计中，所有起到总领、区域说明的文字，都应该设置一个文字效果，从而使这些有全局功能的文字更加明显。

(五)注意图片在画面中的位置。图片的摆放，直接影响到一个网页的视觉效果，合理抓住主次关系，让图片的摆放做到层次鲜明，比例匀称。

Photoshop与Dreamweaver的结合越来越紧密，图像是网页必不可少的重要元素。在网页设计中，充分利用好Photoshop的特有功能，不仅可以美化网页，提高网页的下载速度，还可以提高制作网站的效率。

[参考文献]

[1]《图像大师Photoshop CS》.西南师范大学出版社.

[2]《中文版Photoshop应用基础教程》.上海科学普及出版社.

[3]《BEWEB初级网站设计工程师培训教材》.电子工业出版社.

[4]《网页制作基础教程-Dreamweaver CS4》.电子工业出版社.