资源简介

(共37张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
实践篇
第 6 章
不言而信——店铺页头与页尾
6.1　认识店铺页头与页尾
6.3　店铺招牌的设计与制作
6.2　店铺标志的设计与制作
6.4　店铺页尾的设计与制作
6.4　店铺页尾的设计与制作
6.4.1　店铺页尾的内容安排
6.4.2　设计与制作美妆店铺页尾
设计与制作店铺页尾的目的在于增强消费者的品牌记忆和购物安全感，方便消费者再次光临店铺。
6.4　店铺页尾的设计与制作
6.4.1　店铺页尾的内容安排
（1）店铺公告。在店铺页尾中添加发货须知、温馨提示、售后服务等信息，可以帮助消费者提前了解购物过程中可能遇到的问题和店铺保障，以减轻消费者的顾虑，提高消费者对店铺的信任度。
店铺页尾中的店铺公告
（2）客服联系方式。在店铺页尾中添加客服联系方式，能够方便消费者在浏览到页面底部时及时联系客服。
店铺页尾中的客服联系方式
6.4.1　店铺页尾的内容安排
（3）底部导航。在店铺页尾中添加底部导航信息，可以方便消费者选购商品，提升消费者的购物体验。
6.4.1　店铺页尾的内容安排
店铺页尾中的底部导航
（4）返回顶部按钮。
（5）收藏和分享店铺链接。
6.4.1　店铺页尾的内容安排
本节以美妆店铺页尾的设计与制作为例，学习店铺页尾的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch6”→“店铺页尾”文件夹中的“美妆店铺页尾 .psd”文件。
美妆店铺页尾效果
6.4.2　设计与制作美妆店铺页尾
（1）内容安排。
（2）配色分析。
6.4.2　设计与制作美妆店铺页尾
1．设计美妆店铺页尾
步骤1　新建一个名为“美妆店铺页尾”，宽度为950 像素，高度为400像素，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。
6.4.2　设计与制作美妆店铺页尾
2．制作美妆店铺页尾
提示
店铺页尾的宽度通常为950像素，高度自定（建议不要超过500像素），格式为JPG、PNG 等。
步骤2　新建一个图层并将其填充为酒红色（#86011e），然后再新建一个图层，接着在图像编辑区上方合适位置绘制一个宽度为950像素，高度为42像素的矩形选区，并将其填充为红色（#ab182a），最后按“Ctrl+D”组合键取消选区。
绘制矩形选区并填充颜色
6.4.2　设计与制作美妆店铺页尾
绘制并编辑正圆选区
6.4.2　设计与制作美妆店铺页尾
步骤3　新建一个图层，绘制一个直径为14像素的正圆选区，然后将其填充为红色，接着同时选中正圆和步骤2创建的矩形，单击工具属性栏中的“水平居中对齐” 按钮 ，将两者水平居中对齐，最后框选正圆下半部分，按“Delete”键将其删除。
步骤4　在步骤3创建的正圆上输入“返回顶部”文本，然后设置文本属性。采用同样方法在红色矩形上输入“首页 | 新品上市 | 特价区 | 折扣促销 | 全部商品”文本并设置文本属性。
输入文本并设置文本属性
6.4.2　设计与制作美妆店铺页尾
6.4.2　设计与制作美妆店铺页尾
步骤5　采用同样方法在红色矩形下方添加文本并设置文本属性。选中本步骤添加的所有文本，然后依次单击工具属性栏中的“垂直居中对齐” 按钮 和“水平分布” 按钮 ，使文本垂直居中对齐后水平均匀分布，接着按“Ctrl+G”组合键将所有文本图层进行编组。
保持图层组处于选中状态，加选“背景”图层，然后单击工具属性栏中的“水平居中对齐” 按钮 ，将文本在画面中水平居中对齐。
添加并调整文本对齐和分布方式
步骤6　显示标尺，在“购物流程”文本左侧添加参考线，然后在其下方输入分段文本，并设置文本属性。采用同样方法添加其他参考线和文本。
添加参考线和文本
6.4.2　设计与制作美妆店铺页尾
步骤7　使用“钢笔工具” 在“购物流程”与“温馨提示”文本中间绘制白色装饰线。复制装饰线并将其移至其他文本中间。
绘制并复制装饰线
6.4.2　设计与制作美妆店铺页尾
步骤8　采用步骤2的方法在图像编辑区下方合适位置绘制一个宽度为950像素，高度为70像素的红色矩形。
绘制红色矩形
6.4.2　设计与制作美妆店铺页尾
绘制并编辑多边形
6.4.2　设计与制作美妆店铺页尾
步骤9　选择“多边形工具” ，在新绘制的红色矩形上单击，然后在打开的“创建多边形”对话框中设置相关参数后，单击“确定”按钮，绘制一个多边形。接着设置多边形填充色为白色，并将多边形移至合适位置。
步骤10　采用上述方法在多边形上绘制一个红色五角星。
绘制并编辑五角星
6.4.2　设计与制作美妆店铺页尾
步骤11　在多边形右侧添加文本并设置文本属性，然后将步骤9～步骤11创建的图层进行编组，并重命名为“诚信经营” 。
添加文本并编组
6.4.2　设计与制作美妆店铺页尾
步骤12　采用步骤9～步骤11的方法绘制其他图形、添加相应文本并编组。
绘制其他图形并添加相应文本
6.4.2　设计与制作美妆店铺页尾
步骤13　在图像编辑区底部添加文本并设置文本属性，然后置入素材文件夹中的“旺旺 .png”和“旺旺灰 .png”文件，并将其移至合适位置。至此，美妆店铺页尾制作完成。
添加文本和图片
6.4.2　设计与制作美妆店铺页尾
本章实训 ——设计与制作男装店铺页头
本实训以男装店铺页头的设计与制作为例，练习店铺页头的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch6”→“店铺页头”文件夹中的“男装店铺页头 .psd”文件。
男装店铺页头效果
设计与制作男装店铺页头
设计与制作男装店铺页头
2
1
（1）内容安排
（2）配色分析
1．设计男装店铺页头
（1）新建一个名为“男装店铺页头”，宽度为 950 像素，高度为 150 像素，分辨率为72 像素 / 英寸，颜色模式为 RGB 颜色的文档。
2．制作男装店铺页头
（2）新建一个图层，选择“矩形选框工具” ，在图像编辑区底部绘制一个宽度为950 像素，高度为 30 像素的黑色矩形，作为导航底图。
设计与制作男装店铺页头
（3）在导航底图上添加文本并设置文本属性，然后选中添加的所有文本，选择“图层”→“对齐”→“顶边”菜单项对齐文本。
添加并对齐导航文本
设计与制作男装店铺页头
（4）新建一个图层，在“所有分类”文本右侧绘制一个适当大小的正方形选区，然后利用变换功能将选区旋转45°，接着将选区上半部分删除使其变成三角形，最后将三角形填充为白色。
绘制三角形
设计与制作男装店铺页头
添加文本和装饰线
（5）在图像编辑区左侧添加文本并设置文本属性，然后为文本添加黑色装饰线。
设计与制作男装店铺页头
（6）在文本下方绘制红色圆角矩形，然后置入素材文件夹中的“爱心 .png”文件，适当缩放后移至合适位置，接着在爱心右侧添加文本并设置文本属性。
绘制图形、置入素材并添加文本
（8）新建一个图层，在品牌口号文本右侧绘制一个淡灰色矩形，然后为其添加“投影”图层样式。
设计与制作男装店铺页头
（9）置入素材文件夹中的“钱图标．png”文件，并将其放置在浅灰色矩形中合适位置。
（10）在浅灰色矩形中添加文本并设置文本属性，然后在“领”文本下方绘制一个红色正圆作为装饰，此时一个优惠券制作完成。采用同样方法制作其他优惠券。
设计与制作男装店铺页头
优惠券效果
（11）在图像编辑区右侧绘制一个红色矩形框，然后使用“多边形套索工具” 在矩形框左上角绘制一个红色旗帜图形。
文本和装饰图形效果
设计与制作男装店铺页头
（12）在红色旗帜图形上和矩形框中添加文本并设置文本属性，然后在“立即抢购”文本下方绘制一个红色矩形作为装饰。
矩形和旗帜图形效果
（13）置入素材文件夹中的“男裤．jpg”文件，然后将其适当缩放后移至合适位置。
设计与制作男装店铺页头
作业布置
完成如上图的页尾效果。大家可利用Photoshop工具，尽情尝试，多设计几套通用的模版，以备不同品类的店铺需要。
谢谢观看

展开更多......

收起↑