《PS网页设计》作品设计报告书

PAGEPAGE1广西交通职业技术学院信息工程系作品设计报告书题目：PS网页设计班级学号姓名指导教师2010年6月目录一、设计目标 31.1内容 31.2功能 31.3实现方式 3二、设计指导思想 32.1技术背景 32.1.1网页设计 42.1.2图形编辑 42.1.3平面设计 42.1.4主流软件 42.2开发环境 5三、设计内容及制作步骤 53.1页面展示 53.1.1成品展示 53.2.2参考作品 63.2制作构思 73.2.1板式 73.3.2颜色 73.3制作流程 73.3.1背景 73.3.2LOGO 83.3.3导航条 93.3.4板块 93.3.5板块内容 103.3.6板块文字美化 113.3.7页尾 11四、设计制作进度表 11五、作品提交清单及运行环境要求 125.1文件清单 125.2运行环境要求 12六、相关问题及结束语 126.1相关问题 126.2结束语 126.3感悟 13七、参考资料 13一、设计目标1.1内容通过PS这款软件，设计一个简单、美观、符合实际的网页页面，页面内容具备网页经常可以看到的功能。这次的作品既是PS设计，同时也是网页设计，因此在页面及其功能上应按一个正规网站来设计。1.2功能对于网站设计来说，不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。本网站的建设主要是建成一个集在线阅读、书籍下载、文化新闻等功能于一体的商业化网站。1.3实现方式运用PS相关功能，设计出一个静态的页面，然后通过HTML输出，得到一个基本的网页文件。二、设计指导思想2.1技术背景对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。2.1.1网页设计网页设计是伴随着网络的快速发展而快速兴起，由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户,随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。2.1.2图形编辑图形编辑是纠正数据采集错误的重要手段，其基本功能要求是：具有友好的人机界面，即操作灵活、易于理解、响应迅速等；具有对几何数据和属性编码的修改功能；具有分层显示和窗口功能，便于用户的使用。图形编辑的关键是点、线、面的捕捉，即如何根据光标的位置找到需要编辑的要素以及图形编辑的数据组织。2.1.3平面设计平面设计（graphicdesign）的定义泛指具有艺术性和专业性，以“视觉”作为沟通和表现的方式。透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。平面设计师可能会利用字体排印、视觉艺术、版面（pagelayout）等方面的专业技巧，来达成创作计划的目的。平面设计通常可指制作（设计）时的过程，以及最后完成的作品2.1.4主流软件AdobePhotoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。CS是AdobeCreativeSuite一套软件中后面2个单词的缩写，代表“创作集合”，是一个统一的设计环境，将AdobePhotoshopCS2、IllustratorCS2、InDesignCS2、GoLiveCS2和Acrobat7.0Professional软件与VersionCueCS2、AdobeBridge和AdobeStockPhotos相结合。最新版本是AdobePhotoshopCS5。2.2开发环境本次设计所采用工具：PhotoshopCS3PhotoshopCS3是可以将设计者的想法表现为图像的一种工具。PhotoshopCS3提升了编辑图像的速度，改善了图像的画质效果，使用户在处理图像时更为轻松便捷。现在，不论是公司还是学校或家庭都会用PhotoshopCS3来制作或处理图像三、设计内容及制作步骤3.1页面展示3.1.1成品展示成品展示（阅读网）3.2.2参考作品参考作品（文章阅读网）截图1参考作品（文章阅读网）截图23.2制作构思3.2.1板式参考大量用类网站，商业化的阅读型网站，都是采用中规中矩的结构，通过大小不一的方框分解整个页面。3.3.2颜色为了提高阅读的舒适度，颜色应以柔和淡雅的色调为主，在作导航条等反差颜色采用也应以采用柔和淡雅的色调。3.3制作流程3.3.1背景采用木纹的背景增强了阅读的纸质感，提高阅读的舒适度。白色半透明的方框将页面切割成三部分，两边木纹背景留白，中间则做填充各种内容。：“书本和咖啡”的图片提高网站的书香气息。3.3.2LOGO柔和的淡蓝色加上夸张的淡绿色描边，给人一种清新淡雅的感觉，使人看着贴切和谐，构造出网站的名字——阅读网。3.3.3导航条黄色基地的远角长条方框，纯白色的描边，已经红色小圆点组成的切割条，构成基本的导航条。再用文字工具写上相应的导航文字。3.3.4板块采用白、蓝、柠檬黄三种颜色划分成大小不一的板块，并对板块添加“描边、阴影、浮雕”的图层样式。3.3.5板块内容板块主题文字，添加橙色描边，时使其更醒目。书籍图片添加白色描边，使其更具动感。板块内容文字颜色采用黑色，庄重大方，3.3.6板块文字美化宝石蓝的球型水晶按钮，使文字行间划分更容易辨别，同时也醒目。3.3.7页尾蓝白基调的渐变细长方框，使页与主题有一个明了的分割。添加上“友情链接、联系我们”等标准网页应具备的页尾内容。四、设计制作进度表设计内容及时间大致分配如下：序号设计内容天数（约占比例）1请教老师，和同学探讨1（10％）2查找网络上的参考资料2（20％）3制作PS5（50%）4后期整理文件1（10％）5撰写作品设计报告书1（10％）总计10天五、作品提交清单及运行环境要求5.1文件清单源文件：2009404045麦芳荣.psd报告书：《PS网页》作品设计报告书.doc日志：《PS网页设计》作品制作日志.doc截图：网页截图.jpgHTML：2009404045麦芳荣网页.htmlHTML附带：images（文件夹）5.2运行环境要求PhotoshopCS3六、相关问题及结束语6.1相关问题实践让我走向科技应用,走出课堂。当前,我们缺少的主要不是知识,而是缺少将知识与实际相结合的能力.我们在课堂上所学的,与在实际当中遇到的是不尽相同的.其往往具有不具有明显的特征,这需要我们进行抽象概括才能解决各种问题。6.2结束语通过一个学期学习PS，让我掌握了这个软件的使用方法，同时也完成这个网页设计作品。感谢李林军的细心指导，感谢同学们的支持与帮助。在日后的学习生活中，相信PS会给我带来更多。这次毕业设计让我更加熟悉了从理论到实践的跨越。从当初的在网上查阅资料，到现在的网站运行，这中间有很多值得回味的地方。在计算机的世界里，只要你有兴趣，总会有太多新奇的东西吸引着你。这次的设计，从选题到实现，几乎都是自己独立完成的。网站建设从需求分析到设计、测试，我都力求规范化，努力让自己以前学的知识运用到本网站的开发中，尽量保证整个系统的开发质量，顺利完成这次的设计，为自己的PS课程结束画一个完美的句号。不过，在网站建设过程中，好多知识都是随学随用，就增加了很多不必要的麻烦。虽说这些都会消耗开发的时间，但在老师、同学以及自己的不断努力下，一些问题也随之克服了，通过这次阅读网网站设计，使我增加了很多的知识，也掌握了很多网页设计的操作技巧，虽然还有很多不足之处，但这并不重要，重要的是我对网页的设计又有了更深的了解。我做的是静态的网站，好多信息只能通过浏览页面的方式查阅，网站的便用性比较差。希望各位评委老师和同学给予指正与建议。我相信，只要肯钻研，只要挤时间，一切自己想要的知识都可以掌握。6.3感悟网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。不要过于注重色彩的灿烂，只要简单就行。我们最终追求的主要是实用价值。七、参考资料本作