第7章网页美工设计PPT课件
合集下载
第7章 第2节 DIV+CSS布局网页 课件
7.12
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
《网店美工说课》课件
详情页设计
总结词：关联推荐
详细描述：在详情页中可添加关联推荐，向顾客推荐与该商品相关的其他商品，提高客单价。
详情页设计
总结词
购物车集成
详细描述
详情页应与购物车集成，方便顾客将商品加入购物车或 直接购买。
活动页设计
总结词
活动氛围营造
详细描述
活动页是网店举办促销活动的页 面，设计时应注重营造活动氛围 ，吸引顾客参与。
推广图设计
总结词：创意吸睛
详细描述：推广图是用于广告投放的图片素材， 设计时应注重创意和视觉效果，吸引目标受众点 击。
推广图设计
01
总结词：突出卖点
02
详细描述：推广图应突出商品的 卖点或促销信息，让目标受众了 解广告内容。
推广图设计
总结词：简洁明了
详细描述：推广图设计应简洁明了， 避免过多的文字和元素，以免干扰目 标受众的注意力。
网店美工的职责
负责网店的视觉设计
包括店铺首页、商品详情页、促销活 动页等页面的设店铺 的标志、字体、色彩等视觉元素，并
保持品牌形象的一致性和统一性。
商品图片处理和美化
对拍摄后的商品图片进行修图、调色 、添加水印等处理，提高商品图片的 质量和美观度。
情感化设计将更多地应用于网店美工，通过情感 化的元素和故事来吸引用户。
电商行业的发展趋势
社交电商的崛起
数据驱动的设计优化
社交电商的兴起将为网店美工提供更 多的展示机会和创意空间。
电商行业对数据的重视将推动网店美 工的数据分析能力，实现精准设计和 优化。
跨境电商的发展
跨境电商的崛起将促进网店美工的国 际化发展，要求更高的跨文化沟通能 力。
选择与品牌调性相符的颜 色，保持整体色调统一。
第7章网页美工设计
Photoshop职业应用项目教程
第7章 网页美工设计
Photoshop职业应用项目教程 第7章 网页美工设计
7.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述 网页美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。 网页美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网页美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.2网页美工设计流程 1．需求分析 随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划 一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
Photoshop职业应用项目教程 第7章 网页美工设计
Photoshop职业应用项目教程 第7章 网页美工设计
4．网站配色的原则 第一原则：先定主色，再配辅色。 在网页美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。 在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白 灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统 一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效 果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。
第7章 网页美工设计
Photoshop职业应用项目教程 第7章 网页美工设计
7.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述 网页美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。 网页美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网页美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.2网页美工设计流程 1．需求分析 随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划 一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
Photoshop职业应用项目教程 第7章 网页美工设计
Photoshop职业应用项目教程 第7章 网页美工设计
4．网站配色的原则 第一原则：先定主色，再配辅色。 在网页美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。 在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白 灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统 一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效 果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。
《网店美工设计》教学课件
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
1 分辨率
分辨率有两种：屏幕分辨率和图像分辨率。
2 像素
图像由一个个点组成，这个点叫作像素。像素是图像中最小的单位。每个像素是一个小点，不同颜色 的点（像素）聚集起来就变成一幅动人的画面。
学习目标
学习路径
任务描述 任务技能
技能点3 网店美工基本知识
任务描述 任务技能
淘宝网成立于2003年5月10日，由阿里巴巴集团投资创办。淘宝网分为淘宝C店和淘宝商城2种 模式。淘宝C店是淘宝集市卖家所开设的店铺，这种店铺的门槛低，任何通过实名认证的人，只要 发布10件宝贝就可以免费在淘宝上开店。淘宝商城（天猫）是亚洲最大的购物网站淘宝网打造的在 线 B2C 购物平台，自2008年4月10日成立以来，吸引了 Kappa、JackJones、苏泊尔、联想、惠普等 在淘宝商城开设官方旗舰店，受到了消费者的热烈欢迎。
而淘宝网作为服装类电子商务行业的老大，是国内B2C及C2C 电子商务网站中发展最快、 最为成功的案例，以提供具有本土特色的电子商务平台服务为宗旨，并一直不断完善和发展。 其在中国的 C2C 市场中可谓是一家独大，市场份额更是超过了 90%，行业领先的地位暂时是 无人能撼动的。目前，服装服饰类产品已经成为网络零售的第一大商品，无论从数量还是交 易规模上都是如此。单是淘宝网上初具规模的卖家群体皇冠店铺就已达上万家之多，并且仍 保持着快速增长的态势。本次任务主要是实现淘宝女装店铺首页设计。
【功能描述】 ● 使用淘宝布局要素来设计女装店铺首页。 ● 头部包括店铺的logo、宣传标语、购物车、账户登录及客户中心的图标。 ● 主体包括各个分类版块下的图片链接。 ● 底部包括店铺的各项服务链接、搜索框及返回首页和顶部的按钮。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
网店美工全书电子教案完整版课件全书教学课件
一、网店图片文件的类型
1. JPEG 格式 JPEG 是最常见的一种图片格式，文件的扩展名为 . jpg 或 . jpeg。
2. PNG 格式 PNG 是可移植的网络图形格式。
3. GIF 格式 GIF 是图形交换格式。
二、网店图片编辑软件
Photoshop CS6 是一款用于图像制作和处理的专业软件，具有 强大的功能，利用这些功能，可以有效地进行商品图片的编辑，是 网店美工必备的软件工具。
1. 文字编辑工具 2. “段落”调板
第 4 节 商品分类设计
一、商品类目的分类原则 二、商品类目的分类方式
1. 按商品种类按商品风格分类
三、商品类目导航条 四、商品分类设计的相关工具
1. 图层工具 2. 绘画工具 3. 图案图章工具 4. 切片工具
课件 制作
“动作”控制面板可以 对图像进行批量处理，避免 重复操作，提高处理图片的 效率。
课件 制作
第 2 章 网店图片设计
第 1 节 网店促销图设计 第 2 节 商品主图设计 第 3 节 商品详情页设计
第 1 节 网店促销图设计
一、促销图的类型
网店促销图一般分为整店促销图、单品促销图和活动推广促销图三种 类型。
一、色彩的分类
1. 无彩色
2. 有彩色 3. 特殊色
二、色彩的三要素
1. 色相：是区别不同色彩的名称。 2. 明度：是指色彩的明暗程度。 3. 纯度：是指色彩鲜艳的程度。
三、颜色的模式
1. RGB 模式 2. CMYK 模式 3. HSB 模式 4. Lab 模式
四、网店色彩的搭配
1. 同一色调搭配
文字栅格化后加滤镜的效果
2. 文字转换为形状 在图层面板中选择文字图层，右击鼠标转换为形状，可将文字转换为形
第7章视觉营销推广图制作
谢谢观看
7.2.2 智钻图的构图方式
11
智钻图片是有结构和层次的，不同布局将呈现不同的视觉焦点，若视觉焦点不统一或 者布局不理想，很容易形成信息错乱，让消费者忽视重点。智钻图片的常用布局方式主要 有以下8种。
两栏式
三栏式
上下式
正反三角形 构图
放射性构图
渐次式构图
斜切式
垂直构图
7.2.3 制作淘宝首焦智钻
7.4.2 设计家纺智钻
3. 操作步骤 下面根据进行的家纺四件套进行家纺智钻的制作，其具体操作如下。
1
添 加 形 状
输 入 文 本
填充背景并添加商品
31
2 3
7.4.2 设计家纺智钻
4
32
5
输入文本并添加投影
绘制形状并输入文本
7.4.2 设计家纺智钻
33
完成家纺智钻的制作
第7章 网店美工视觉设计实战教程
5
添加素材
7
坚果智钻效果
14
6
为素材添加投影
目录 Contents
7.1 制作高点击率的主图 7.2 智钻图设计 7.3 直通车推广图设计 7.4 实战演练
7.3.1 直通车展现方式
16
参加直通车推广的宝贝，主要展示在如下几个位置。
关键词搜索结 果页的展位
买家必经之路 上的众多高流 量、高关注度 的展位
素材的组合与编辑包括素材的添加，叠放顺序的设置， 以及素材位置与大小的调整，投影的制作方法。
文案的编辑方法。文本字体、颜色、大小的搭配组合。
7.4.1 设计唇彩直通车
26
3. 操作步骤 下面根据唇彩的外观展开直通车的制作，其具体操作如下。
1
2
7.2.2 智钻图的构图方式
11
智钻图片是有结构和层次的，不同布局将呈现不同的视觉焦点，若视觉焦点不统一或 者布局不理想，很容易形成信息错乱，让消费者忽视重点。智钻图片的常用布局方式主要 有以下8种。
两栏式
三栏式
上下式
正反三角形 构图
放射性构图
渐次式构图
斜切式
垂直构图
7.2.3 制作淘宝首焦智钻
7.4.2 设计家纺智钻
3. 操作步骤 下面根据进行的家纺四件套进行家纺智钻的制作，其具体操作如下。
1
添 加 形 状
输 入 文 本
填充背景并添加商品
31
2 3
7.4.2 设计家纺智钻
4
32
5
输入文本并添加投影
绘制形状并输入文本
7.4.2 设计家纺智钻
33
完成家纺智钻的制作
第7章 网店美工视觉设计实战教程
5
添加素材
7
坚果智钻效果
14
6
为素材添加投影
目录 Contents
7.1 制作高点击率的主图 7.2 智钻图设计 7.3 直通车推广图设计 7.4 实战演练
7.3.1 直通车展现方式
16
参加直通车推广的宝贝，主要展示在如下几个位置。
关键词搜索结 果页的展位
买家必经之路 上的众多高流 量、高关注度 的展位
素材的组合与编辑包括素材的添加，叠放顺序的设置， 以及素材位置与大小的调整，投影的制作方法。
文案的编辑方法。文本字体、颜色、大小的搭配组合。
7.4.1 设计唇彩直通车
26
3. 操作步骤 下面根据唇彩的外观展开直通车的制作，其具体操作如下。
1
2
网页美工设计课件 (2)
文字
1、文字就是页面中的内容 2 、包括任何地方出现的文字
三 、网页构架设计
如果把网页比喻成人的话，先要有骨架，也就是网页 的排版框架。 网页的分类主要有：分栏式结构，区块分布，平面图 片设计，以及非规律的设计 。
分栏式结构
1是二分栏 2是标准三分栏
3是四分栏
4～6是一些LOGO以及 导航在下面的情况， 7～9则是一般的变化
4 、色彩不易多,图形要简洁明了,文字不易太长,一二句话即可
按钮
1、 也叫下压式按钮, 是一种能在被按下时产生事件的控件。 2 、每当按钮被按下时，就产生一个动作事件 3 、从某种意义上来说,只要通过点击能产生另一个动作的地方,都可以看 作是一个按钮 4 、它的设计形式多样化,导航条也是一种特殊的按钮
LOGO（标志）
1、LOGO的位置通常在页面的左上角 2 、图形、符号既要简练、概括，又要讲究艺术性。 3 、色彩要单纯、强烈、醒目。
导航条
1、横排竖排,一排,两排,多排,都可 2 、图片式导航，很漂亮 3 、动态导航,体积小,变化效果丰富
Banner
1、468×60 为国际标准尺寸,但也可根据自己的画面定制大小. 2 、好的Banner要符合网站的风格 3 、 一个网页中若有多个Banner,要动静结合
· 背景是整图片
· 背景是整图片
非规律设计
非规律设计是指在网页里面用以上几种通常规律的结合 。
视觉效果强烈,不受版面分栏的约束,设计比较随意,大胆。 适合内容较少的情况下选用。
四 、网页色彩设计
根据专业的研究机构研究表明：彩色的记忆效果是黑 白的3.5倍。也就是说，在一般情况下，彩色页面较完全 黑白页面更加吸引人。
1、颜色是因为光的折射而产生的。 2、.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。 3、颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是 指除了非彩色以外的所有色彩。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
鲜明主题的诱导力 形式内容的统一 强化整体布局 B 网页版面的构成元素 世间百态千变万化，归纳这些事物的空间形态均由 点、线、面等基本元素构成，它们彼此交互，有序构成 了缤纷的世界。在设计中也是同样的道理，任何的版式 设的基本元素归根结底都是点、线、面的和谐构成。
2020/3/25
7
Photoshop职业应用项目教程 第7章 网页美工设计
3．网站设计 通过前期的沟通与策划，使用图形软件实施创意，完成初步的 作品设计。 4．客户反馈 在提供客户小样后，设计师需要根据客户提出的修改建议修正 设计作品。这一流程非常关键，设计的网页能否得到客户的认 可与这一过程有很大的关系。
2020/3/25
4
Photoshop职业应用项目教程 第7章 网页美工设计
Photoshop职业应用项目教程
第7章 网页美工设计
2020/3/25
1
Photoshop职业应用项目教程 第7章 网页美工设计
7.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述
网页美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。
和民俗学等等。心理学家近年提出许多色彩与人类心理 关系的理论。他们指出每一种色彩都具有象征意义，当 视觉接触到某种颜色，大脑神经便会接收色彩发放的讯 号，即时产生联想，例如红色象征热情，于是看见红色 便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静 下来。经验丰富的设计师，往往能藉色彩的运用，勾起 一般人心理上的联想，从而达到设计的目的。
网页美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网页美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
2020/3/25
2
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.2网页美工设计流程 1．需求分析
随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划
2020/3/25
12
Photoshop职业应用项目教程 第7章 网页美工设计
3．网页色彩规划 A 色彩基本概念
自然界中的颜色可以分为非彩色和彩色两大类。非彩色 指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属 于彩色。任何一种彩色具有三个属性：
（1）色相（Hue）：是颜色的基本特征，反映颜色的基 本面貌。
（2）饱和度（Saturation）：指颜色的纯洁程度。 （3）明度（Brightness）：体现颜色的深浅。 非彩色只有明度特征，没有色相和饱和度的区别。 B 三原色
制这些对比关系。如色彩的明度对比，纯度对比，色相对比， 冷暖对比，轻重对比，面积对比等等。只有有效控制这些对 比关系，网页才会达到色彩明快、视觉和谐的效果。
2020/3/25
11
Photoshop职业应用项目教程 第7章 网页美工设计
5．色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学
7.1.3网页构成及特点 1．网页的创意
创意的概念：什么是创意？简单的说就是具有新颖性 和创造性的想法。创意的范围很广，网站的创意不同于一 般的平面广告，既要考虑网页的新颖独特，同时更重要的 是考虑所用创意是否符合所设计网页客户的行业特点及网 页整体功能的实现。
创意的表现：创意的完美实现需要具体的形式来加以 表现，关键是找到合适的创意点。例如：设计可口可乐的 网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色 彩带，所有和可口可乐相关的元素。
2020/3/25
8
Photoshop职业应用项目教/25
9
Photoshop职业应用项目教程 第7章 网页美工设计
4．网站配色的原则 第一原则：先定主色，再配辅色。
在网页美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。
一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
2020/3/25
3
Photoshop职业应用项目教程 第7章 网页美工设计
在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白 灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统 一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效 果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。
2020/3/25
10
Photoshop职业应用项目教程 第7章 网页美工设计
第三原则，注意色彩的对比。 有对比才会有和谐，要注意色彩中的对比关系并有效控
电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的， 调整这三个基色就可以调校出其它的颜色。在许多图像处理 软件里，都提供有色彩调配功能，可以输入三原色的数值来 调配颜色，也可直接根据软件提供的调色板来选择颜色。 网页设计是以三色模式为标准。在Photoshop里也可直接选 择WEB模式进行色彩编辑。
2020/3/25
5
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
6
Photoshop职业应用项目教程 第7章 网页美工设计
2．网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产
品手册、宣传单、网页设计等许多设计形式。本章我们 只针对网页设计研究版式。 A网页版式设计的组织原则
2020/3/25
7
Photoshop职业应用项目教程 第7章 网页美工设计
3．网站设计 通过前期的沟通与策划，使用图形软件实施创意，完成初步的 作品设计。 4．客户反馈 在提供客户小样后，设计师需要根据客户提出的修改建议修正 设计作品。这一流程非常关键，设计的网页能否得到客户的认 可与这一过程有很大的关系。
2020/3/25
4
Photoshop职业应用项目教程 第7章 网页美工设计
Photoshop职业应用项目教程
第7章 网页美工设计
2020/3/25
1
Photoshop职业应用项目教程 第7章 网页美工设计
7.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述
网页美工顾名思义就是对网页的美化，其主要包括三方 面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、 图片的应用及版面规划，保持网页的整体一致性。
和民俗学等等。心理学家近年提出许多色彩与人类心理 关系的理论。他们指出每一种色彩都具有象征意义，当 视觉接触到某种颜色，大脑神经便会接收色彩发放的讯 号，即时产生联想，例如红色象征热情，于是看见红色 便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静 下来。经验丰富的设计师，往往能藉色彩的运用，勾起 一般人心理上的联想，从而达到设计的目的。
网页美工既要熟悉图形创作软件，也要有较好的视觉功 底，创意能力，才能创造出符合需求的美观的页面。网页美 工不同于网站后台开发的编程人员，其核心是美工，即对网 站整体形式美的把握。
2020/3/25
2
Photoshop职业应用项目教程 第7章 网页美工设计
7.1.2网页美工设计流程 1．需求分析
随着社会的不断发展，企业商家品牌意识的提高，现在的网站 开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象 品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划
2020/3/25
12
Photoshop职业应用项目教程 第7章 网页美工设计
3．网页色彩规划 A 色彩基本概念
自然界中的颜色可以分为非彩色和彩色两大类。非彩色 指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属 于彩色。任何一种彩色具有三个属性：
（1）色相（Hue）：是颜色的基本特征，反映颜色的基 本面貌。
（2）饱和度（Saturation）：指颜色的纯洁程度。 （3）明度（Brightness）：体现颜色的深浅。 非彩色只有明度特征，没有色相和饱和度的区别。 B 三原色
制这些对比关系。如色彩的明度对比，纯度对比，色相对比， 冷暖对比，轻重对比，面积对比等等。只有有效控制这些对 比关系，网页才会达到色彩明快、视觉和谐的效果。
2020/3/25
11
Photoshop职业应用项目教程 第7章 网页美工设计
5．色彩的象征意义 色彩牵涉的学问很多，包含了美学、光学、心理学
7.1.3网页构成及特点 1．网页的创意
创意的概念：什么是创意？简单的说就是具有新颖性 和创造性的想法。创意的范围很广，网站的创意不同于一 般的平面广告，既要考虑网页的新颖独特，同时更重要的 是考虑所用创意是否符合所设计网页客户的行业特点及网 页整体功能的实现。
创意的表现：创意的完美实现需要具体的形式来加以 表现，关键是找到合适的创意点。例如：设计可口可乐的 网页，大家会马上想到可乐瓶子的外型，热情飞扬的红色 彩带，所有和可口可乐相关的元素。
2020/3/25
8
Photoshop职业应用项目教/25
9
Photoshop职业应用项目教程 第7章 网页美工设计
4．网站配色的原则 第一原则：先定主色，再配辅色。
在网页美工设计中要想让网页美观大方，色彩和谐，达到 视觉统一的效果是要经过严格的色彩规划的。在一个网站中主 色直接决定网站的色彩风格，在网页色彩搭配中起主导作用， 决定网页的整体色调。主色决定后就是辅色的搭配，辅色的搭 配在主色的基础上进行，辅色在网页中的比例一般为主7辅3， 或主6辅4，切忌出现主辅色面积比例相当的情况，进而造成色 彩混乱，风格模糊的情况。 第二原则：有效利用黑白灰色进行网页的色彩搭配。
一个完整的网站应该具备整体布局、条理清晰、内容丰富的特 点，因此网站项目的规划十分重要。必须要让所看网站的客户在第 一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介 绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、 内容明确。
2020/3/25
3
Photoshop职业应用项目教程 第7章 网页美工设计
在网页美工设计中，任何漂亮绚丽丰富的色彩都需要黑白 灰的有效搭配才能在视觉上达到主次分明、重点突出、和谐统 一的效果。如果一个网站的页面全部都是丰富绚丽的色彩，效 果必定杂乱无章、画面跳跃不定，眼睛会倍感疲劳。
2020/3/25
10
Photoshop职业应用项目教程 第7章 网页美工设计
第三原则，注意色彩的对比。 有对比才会有和谐，要注意色彩中的对比关系并有效控
电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的， 调整这三个基色就可以调校出其它的颜色。在许多图像处理 软件里，都提供有色彩调配功能，可以输入三原色的数值来 调配颜色，也可直接根据软件提供的调色板来选择颜色。 网页设计是以三色模式为标准。在Photoshop里也可直接选 择WEB模式进行色彩编辑。
2020/3/25
5
Photoshop职业应用项目教程 第7章 网页美工设计
2020/3/25
6
Photoshop职业应用项目教程 第7章 网页美工设计
2．网页版式规划 版式设计的范围涉及包装、广告、报纸、书籍、产
品手册、宣传单、网页设计等许多设计形式。本章我们 只针对网页设计研究版式。 A网页版式设计的组织原则