网站视觉艺术设计 for 色彩搭配
第 7 章 品牌商城 B2C 网站（橙色+米黄色+B2C 商城页面设计）
网页设计在某种程序上和平面设计有直接的关系，整个网页的布局设计，构图和色彩搭配等无一不是
和平面设计所共有的特征，一个成功的平面设计师只要了解网页设计基本的知识，必定可以做出美观的网
页界面效果。本实例已突破网页设计的局限，以平面设计的表现手法制作了一个网站封面作品。
7.1 实例分析
本章所用素材图片
本章部份素材图片，其它请在本书配套光盘中获取，或直接从网上寻找
本章实例效果浏览
7.1.1 设计目的
本章详细讲解一个比较规范和常见的 B2C 电子商务商城网站页面的设计过程。整个界面在美工设计上
遵循网页设计的各种规范和标准化版式设计，使设计出来的作品能够立即交付给前端设计师或程序工程师
切图并制作最终完整的网页效果。
7.1.2 交流重点
本章实例类型为电子商务在线商城的版式设计，在界面设计上尽量达到通用性，通过学习本章的作品，
掌握电子商务在线商城的界面设计布局排版后，在对布局的细节和版面的调整下，可以做出适合多种形
式和产品的在线商城网页设计。本章重点包括以下这些内容：
1：电子商务在线商城网页设计的技巧
2：大型实用型网页设计布局设计
3：网页素材图标的合理应用
4：微软 Surface 简洁风格色块的应用
7.2 实例详解- Photoshop 设计过程
7.2.1 顶部导航菜单
（1）背景素材
Step1 启动 Photoshop 简体中文版，按下“Ctrl”+“N”键新建一个文档，设置文档宽度为“1280”像素，
高度为“2500”像素，其它按默认值即可，保存为“第 7 章 品牌商城 B2C 网站（橙色＋米黄色＋B2C 商城
页面设计）.psd”。
这里设置的文档像素尺寸与最终的网页尺寸是有一些出入的，因为在设计的时候，界面布局希望可以
尽量展示多一些两侧的区域的效果，以方便前端工程师或程序工程师了解设计的思路和效果。
Step2 新建“background”图层文件夹，打开本书配套光盘路径“本书实例源文件/第 7 章 品牌商城 B2C
网站（橙色＋米黄色＋B2C 商城页面设计）”，将文件夹下的“背景素材.jpg”文件打开，如图 7-1 所示。
图 7-1 打开背景素材文件
Step3 单击“背景素材”文件的标题栏选中“背景素材”文件,按下“Ctrl”+“A”键将图层全部选中,再
按下“Ctrl”+“C”键复制选区内容; 单击“第 7 章 品牌商城 B2C 网站（橙色＋米黄色＋B2C 商城页面设
计）”文件的标题栏选中“第 7 章 品牌商城 B2C 网站（橙色＋米黄色＋B2C 商城页面设计）”文件，选中
“background”图层文件夹，按下“Ctrl”+“V”键对复制的图层内容进行粘贴，粘贴后会出现一个新的
图层，双击图层的名字，将图层名称更名为“背景效果”。关闭“背景素材”文件。
（2）导航菜单
Step1 新建“top”图层文件夹，在“top”图层文件夹内新建“导航菜单背景”图层文件夹。选择“矩形
选框工具”,在画布上绘制一个矩形，并填充颜色为“＃f7f3e9”，效果如图 7-2 所示。
图 7-2 填充颜色
Step2 在“导航菜单背景”层上右键，选择“混合选项”，打开图层混合设置，如图 7-3 所示，选择“投
影”混合模式，设置距离为“２”像素，大小为“８”像素，其它保持默认设置即可。完成后效果如图 7-4
所示。
图 7-3 投影图层混合模式
图 7-4 阴影效果
Step3 选择“横排文字工具”，设置参数如图 7-5 所示，设置颜色为“#3b1b14”，在顶部菜单背景左侧处
单击，输入文字“云集居品”，效果如图 7-6 所示，对于文字的尺寸大小，可参考图中所示，参数和字体也
可根据自已的喜好自由设置。
图 7-5 文字参数设置
图 7-6 创建 LOGO
Step3 设置文字参数如图 7-7 所示，文字颜色为“#ff7f00”，在“云集居品”的下面创建一排小字，输入
“中国领先的酒店装饰材料整合供应商”，效果如图 7-8 所示。
图 7-7 文字参数设置
图 7-8 小字效果
Step4 使用相同的参数和颜色设置，在“云集居品”的右侧创建网址，适当调整文字的大小，效果如图 7-9
所示。
图 7-9 输入网址
Step5 在 LOGO 右侧，使用创建 LOGO 文字的类似的方法，创建文字菜单，参数图 7-10 所示，需要注意的
是，在创建 LOGO 和菜单的时候，需要预先定义好版面的布局尺寸和位置，才好将 LOGO 和菜单摆放的位置
确定下来。
图 7-10 创建导航菜单文字
首先，需要清楚的知道网页最终发布的尺寸大小，本例默认网页最终发布的尺寸为“1003”像素，所
以新建一个文档，设置宽度为“1003”像素，高度为“100”像素，如图 7-11 所示，填充背景颜色为
“#ff7f00”，如图 7-12 所示。
