《平面设计项目实战》教学课件 项目八设计『易通』电子公司网站首页效果图.pptVIP

Graphic design 平面设计项目实战 项目八 设计『易通』电子公司网站首页效果图 网站首页是企业的门面，是企业向访问者传递企业信息的重要载体。一个优秀的网站首页必须要做到逻辑清晰、版式优美。在视觉上具有美观性的网页往往能吸引更多的访问。 在本项目中，我们通过设计右图所示的“易通”电子公司网站首页，详细讲解设计网页效果图的方法。 了解网页的常规尺寸。 了解网页的布局原则。 了解网页设计的流程。 掌握利用Photoshop CS6 设计网页效果图的方法和技巧。 1 2 CONTENTS 项目设计流程与分析 任务一　设计横幅广告条（Banner） 项目知识链接——网页设计基础知识 3 任务二　设计图标 4 任务三　设计网站首页效果图 5 项目实训——制作文具公司网站首页 6 项目知识链接——网页设计基础知识 网页效果图设计包括网站首页和次级页面等一系列页面的设计。网页效果图设计是网站项目开发中非常重要的环节之一，利用网页效果图可以把客户想展示的内容以图像的方式表现出来，然后网站制作人员会以效果图为模型，使用Dreamweaver等网页制作软件制作真正的网页，搭建真正的网站。 一、网页设计概述 项目知识链接——网页设计基础知识 网页的尺寸受限于显示器屏幕的尺寸，虽然现在办公领域中以22英寸及以上的宽屏为主流，但也有不少企业在用17英寸的显示器，其分辨率通常为1 024×768像素。因此，为避免浏览网页时频繁地拖动浏览器水平滚动条，最好将网页宽度设为1 002像素以内。同时，由于浏览者可以利用浏览器的垂直滚动条上下滚动网页，因此对网页的高度没有要求，可根据需要设置。 在Photoshop CS6里制作的网页效果图放置在网上会出现色差，因为实际网页中只能使用Web颜色，其只包含256中颜色，而Photoshop CS6中的RGB， CMYK，Lab或者HSB模式的色域都很宽，颜色范围很广，所以会有失色的现象出现。 项目知识链接——网页设计基础知识 网页布局是指合理规划网页的栏目和板块，并以最适合浏览的方式将网页内容，如图片、文本、动画等排放在网页的相应位置。好的网页布局不仅可以在有限的空间内放置最多的内容，而且美观大方，主次分明，重点突出。 二、网页的布局原则 项目知识链接——网页设计基础知识 独特性是高炮广告设计最基本的要求。高炮广告所面向的群体是车内的人或路上的行人，要在最短的时间内吸引行人的目光，使其接受广告所传达的信息，除了考虑距离、视觉和环境等要素外，还要注重创意的表现，追求与众不同的视觉感受。例如，使色彩更鲜明，结构更突出，从而给人留下深刻的印象。 在设计网页效果图时，可遵循以下布局原则。 过度的对称会给人一种缺乏生气、千篇一律的感觉，因此网页布局可在整体上采用正常平衡，而在细部制造一些变化，这样网页才不至于过分呆板。 项目知识链接——网页设计基础知识 让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。 要考虑浏览者在页面上的视觉中心，这个中心一般在显示器屏幕的中央，或者在屏幕左上方的视觉优势位置。在视觉中心安排一些重要的内容，在视觉中心以外安排一些次要内容，从而做到主次分明，重点突出。 项目知识链接——网页设计基础知识 一个页面撑得太满，会给人一种压抑的感觉，让人喘不过气来，因此，适当留白是比较好的布局方法。合理的留白除了能让浏览者心情轻松外，也可以体现出网页的品味，给人一种大气的感觉。 设计者也可在页面中制造一些视觉中心点，这需要考虑浏览者的心理，在页面中给出一些暗示，以达到将浏览者的目光锁定在中心点上的目的。例如，可以利用一些色彩或线条制造视觉中心点。 项目知识链接——网页设计基础知识 文字和图片具有相互补充的视觉关系。页面上文字太多，显得沉闷，缺乏生气；图像虽然有极强的视觉冲击力，但页面上图片太多，缺少文字，会减少页面的信息量。因此，最理想的效果是文字与图片互为衬托，密切配合，既能活跃页面，又能避免内容空洞无物。 1 2 CONTENTS 项目设计流程与分析 任务一　设计横幅广告条（Banner） 项目知识链接——网页设计基础知识 3 任务二　设计图标 4 任务三　设计网站首页效果图 5 项目实训——制作文具公司网站首页 6 项目设计流程与分析 项目设计流程与分析 项目设计流程与分析 项目设计流程与分析 项目设计流程与分析 项目设计流程与分析 本任务要设计“易通”电子公司网站的首页效果图。“易通”电子公司是一家综合性的科技公司，总部位于广州。该企业一直以生产高品质、高科技的电子产品为宗旨，其建设网站的目的主要是为了进行网络营销，加强企业的品牌美誉度，全面、完整地展现企业的产品，所以网页在视觉传达上要注重页面的美感、行业感，在形式上追求大方、简约的设计风格。另外，设计者可以通过版面、文字、图片和