网站美工设计说明

网站美工设计
4）上左中右结构式 同上左右框架式稍有区别的是中间部分为内容区域，右 侧则是该网站较重要的内容导航区域，或是登录、搜索 区域、Flash广告等。 5）综合结构式 特点是功能模块多，信息分类详细，因此根据需要采用 区域版面结构较合适。信息储量大的门户网站较多应用 这类结构。 6）不规则结构式 信息量少，通常在以产品宣传为目的的企业网站和个人 网站中使用。
网站美工设计
(3)网页色彩规划 A 色彩基本概念
自然界中的颜色可以分为非彩色和彩色两大类。非彩色 指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属 于彩色。任何一种彩色具有三个属性：
（1）色相（Hue）：是颜色的基本特征，反映颜色的基 本面貌。
（2）饱和度（Saturation）：指颜色的纯洁程度。 （3）明度（Brightness）：体现颜色的深浅。 非彩色只有明度特征，没有色相和饱和度的区别。 B 三原色 电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的， 调整这三个基色就可以调校出其它的颜色。在许多图像处理 软件里，都提供有色彩调配功能，可以输入三原色的数值来 调配颜色，也可直接根据软件提供的调色板来选择颜色。 网页设计是以三色模式为标准。在Photoshop里也可直接选 择WEB模式进行色彩编辑。
网站美工设计
1.2 网站美工设计流程 (1)需求分析
随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 (2)网站项目规划
一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
同时也可以为个人网站加入一个自定的主题，如我心飞扬、 浪漫满屋、E酷一族等等，这些主题也是进行网站创意的关键切 入点。
网站美工设计
1．将要设计网页最终效果如图所示，主题确定为我心飞扬，简洁大 方的风格。
网站美工设计
2．对所设计的个人网页进行整体规划。首先，为网站确定主 题名称以便Logo的设计，然后确定所设计个人网页的尺寸大 小，最后确定网站结构风格，最好能先画出结构草图以便科 学合理的分布所表现内容。 3．确定主题：我心飞扬。新建文件并将文件命改为“我心飞 扬”，页面大小为780 X580像素。
网站美工设计
B．网络Logo设计的基本过程： 一看、二挖、三总结。 一看：看客户，准确定位 要仔细分析客户是什么行业，其公司行业特征，产品 服务特征是什么，只有做到定位准确才不会犯方向性 错误。 二挖，挖掘和客户行业、产品等有联系的、可以用来 表现的想法，进行创意。在定位明确后既开始进入创 意阶段，这个过程是思考的过程，挖掘的过程，不放 过任何相关的想法点子，最后进行综合分析提炼创意。 三总结，总结挖掘出的点子创意，并进行实施。这个 过程是个总结的过程也是个实施的过程，把好的想法 提炼选取出后进行制作，通过图形创作软件实现其最 终效果。
网站美工设计
网站美工设计
(4)网站配色的原则 第一原则：先定主色，再配辅色。
在网站美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。
制这些对比关系。如色彩的明度对比，纯度对比，色相对比， 冷暖对比，轻重对比，面积对比等等。只有有效控制这些对 比关系，网页才会达到色彩明快、视觉和谐的效果。
ห้องสมุดไป่ตู้
网站美工设计
(5)色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学
和民俗学等等。心理学家近年提出许多色彩与人类心理 关系的理论。他们指出每一种色彩都具有象征意义，当 视觉接触到某种颜色，大脑神经便会接收色彩发放的讯 号，即时产生联想，例如红色象征热情，于是看见红色 便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静 下来。经验丰富的设计师，往往能藉色彩的运用，勾起 一般人心理上的联想，从而达到设计的目的。
在网站美工设计中，任何漂亮绚丽丰富的色彩都需要黑白 灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统 一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效 果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。
网站美工设计
第三原则，注意色彩的对比。 有对比才会有和谐，要注意色彩中的对比关系并有效控
网站美工设计
(2)网站Logo设计规范 Logo的应用一直是CIS（企业形象识别系统）导入
的基础和最直接的表现形式，网络标志的设计尤其如此。 A．标志的职能：
作为独特的传媒符号，标志（Logo）一直成为传播 特殊信息的视觉文化语言。无论从古时繁复的欧式徽标、 中式龙纹，到现代洗练的抽象纹样、简单字标等都是在 实现着标志被标志体的目的，即：通过对标志的识别、 区别、引发联想、增强记忆，促进被标志体与其对象的 沟通与交流，从而树立并保持对被标志体的认知、认同， 达到高效提高认知度、美誉度的效果。作为信息时代的 产物，网络Logo的设计，更应遵循CIS的整体规律并有 所突破。
指文字与图案结合的设计，兼具文字与图案的属性， 更容易被观者所接受。
网站美工设计
D．网络Logo的规范 设计Logo时，面向应用的各种条件作出相应规范，
对指导网站的整体建设有着极现实的意义。设计时要 规范Logo的标准色、辅助色等配色体系，同时要考虑 其大小，色彩。如果企业有VI规范手册要按VI规范手 册严格执行，大小依据网页的整体结构风格而定。
创意的概念：什么是创意？简单的说就是具有新颖性 和创造性的想法。创意的范围很广，网站的创意不同于一 般的平面广告，既要考虑网页的新颖独特，同时更重要的 是考虑所用创意是否符合所设计网页客户的行业特点及网 页整体功能的实现。
创意的表现：创意的完美实现需要具体的形式来加以 表现，关键是找到合适的创意点。例如：设计可口可乐的 网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色 彩带，所有和可口可乐相关的元素。
通过独特、醒目的图形来吸引观者的眼球，特殊图 案本身易被区分、记忆，通过隐寓、联想、概括、 抽 象等表现方法表现被标志对象，更容易强化沟通和被理 解。 2)特殊文字：
在沟通与传播活动中，将反复使用的被标志体的名 称或其产品名称，用一种文字形态加以统一，并对文字 进行独特设计变形，以加深观者的印象，达到传播的目 的。 3)图文并貌:
网站美工设计
(3)广告形象区域（Banner)设计 Banner的英文翻译有网幅广告的含义，指网幅广告、
旗帜广告、 横幅广告。 (4)导航区域设计
导航区域是网页设计中不可缺少的部分，它是指通过 一定的技术手段，为网站的访问者提供一定的途径，使其 可以方便地访问到所需的内容，是人们浏览网站时从一个 页面转到另一个页面的快速通道。利用导航条，可以快速 找到要浏览的页面。
网站美工设计
(3)网站设计 通过前期的沟通与策划，使用图形软件实施创意，完成初步的 作品设计。 (4)客户反馈 在提供客户小样后，设计师需要根据客户提出的修改建议修正 设计作品。这一流程非常关键，设计的网页能否得到客户的认 可与这一过程有很大的关系。
网站美工设计
1.3 网页构成及特点 (1)网页的创意
网站美工设计
二、任务1——个人网页设计
个人网站是指个人或团体因某种兴趣、拥有某种专业技术、 提供某种服务或把自己的作品、商品展示销售而制作的具有独 立空间域名的网站。
个人网页可以充分体现个人的个性风格，形式自由灵活， 受到广大电脑爱好着的青睐。制作个人网页或为别人设计个人 网页不要盲目开始设计，一定要做好前期定位工作。要注意设 计个人网页的风格。例如：男孩子可能一般喜欢简洁大方或是 色彩个性，蓝色、灰色、黑色的网页风格，而女孩子可能多数 还是喜欢颜色温柔漂亮艳丽活泼，风格唯美的网页风格，这些 元素都直接影响最终的设计风格。
这个色彩和心理联想的理论，对设计师来说又重要 的指导意义。在选择运用何种色彩时，须得同时考虑作 品面向的是那类群体，以免适得其反。我们一定要充分 理解色彩的一般象征含义，才能正确有效的把握色彩应 用色彩。
网站美工设计
1.4 网页框架结构 (1)网页框架结构的内容组成
一个基本的门户型网页一般包括标志（Logo）设计、广告形象 区域（Banner） 设计、导航区域设计、网页主体内容显示区域或产 品服务介绍区域，以及一些附加的消息栏、搜索区域、注册用户区 域等。在基本构架完成后，我们可以充分发挥聪明才智，为客户合 理的科学的展示他们需要展示的内容。
导航条的目的是让网站的层次结构以一种有条理的方 式清晰展示，并引导用户毫不费力地找到并管理信息，让 用户在浏览网站过程中不至迷失。
为了让网站信息可以有效地传递给用户，导航一定要 简洁、直观、明确。
网站美工设计
(5)网页的框架结构类型 网页的框架结构无疑就是网页的骨骼、筑“房”地基。网 页版面布局以导航栏为界，大致可分为：上下、左右、上 左右、上左中右、综合，不规则等。 1）上下结构 通常上方为导航条，或者动态的企业形象、广告区域。下 方为正文、内容部分。通常在内容较少或简洁的企业网站 或个人网站中出现。 2）左右结构 一般左侧是导航条，右侧是正文、内容部分或者公司企业 形象展示。 3）上左右结构 上方为主要的菜单导航条，左侧为点击出现的细分栏目导 航条，下方为较主要的栏目及小广告等，右侧为内容区域。 这种结构形式是大中型企业较喜欢的框架形式。
网站美工设计
网站美工设计
一、网站美工设计的特点与思路分析 1.1 网站美工的任务概述
网站美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网站美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。
网站美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网站美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
网站美工设计
色彩象征 红——血、夕阳、火、热情、危险 橙——晚霞、秋叶、温情、积极 黄——黄金、黄菊、注意、光明 绿——草木、安全、和平、理想、希望 蓝——海洋、蓝天、沈静、忧郁、理性 紫——高贵、神秘、优雅 白——纯洁、 素、神圣 黑——夜、死亡、邪恶、严肃
网站美工设计
但心理学家也留意到，一种颜色通常不只含有一个 象征意义。正如上述的红色，既象征热情，却也象征了 危险，所以不同的人，对同一种颜色的密码，会作出截 然不同的诠释。除此之外，个人的年龄、性别、职业、 他所身处的社会文化及教育背景，都会使人对同一色彩 产生不同联想。
网站美工设计
C．网络Logo的表现形式： 作为具有传媒特性的Logo，为了在最有效的空间内实现所有 的视觉识别功能， 一般是通过特示图案及特示文字的组合， 达到对被标志体的出示、说明、沟通、交流，从而引导受众 的兴趣、达到增强美誉、记忆等目的。
网站美工设计
表现形式的组合方式一般分为特殊图形，特殊字体， 图文并貌。 1)特殊图形：
网站美工设计
4．设计Logo。创意分析：为了表现飞翔、自由等概念， 我们以翅膀为Logo设计的切入点。 5．打开图层面板，单击“创建新组”按钮，创建新组， 将组命名为“Logo”。在新组中新建图层，命名为“翅 膀”。选择工具箱中的钢笔工具，在工具选项栏中单击 “路经”按钮，在文档中画出一支翅膀的外轮廓路径。
网站美工设计
网站美工设计
(2)网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产
品手册、宣传单、网页设计等许多设计形式。本章我们 只针对网页设计研究版式。 A网页版式设计的组织原则
鲜明主题的诱导力 形式内容的统一 强化整体布局 B 网页版面的构成元素 世间百态千变万化，归纳这些事物的空间形态均由 点、线、面等基本元素构成，它们彼此交互，有序构成 了缤纷的世界。在设计中也是同样的道理，任何的版式 设的基本元素归根结底都是点、线、面的和谐构成。