网店美工设计--Photoshop CC案例教程
《网店美工设计——Photoshop 2022案例教程》教案
2
1 第1章 网店美工设计快速入门
教学内容 一、网店美工必备职业技能
二、了解 Photoshop 的基本概念
三、认识 Photoshop 2022 的工作界面
四、调整 Photoshop 2022 的视图
五、应用辅助工具
教学要求 【学习目标】
1．了解网店美工必备职业技能
2．了解Photoshop的基本概念
3．掌握Photoshop的基本知识
【技能目标】
1．了解 Photoshop 的基本概念
2．认识 Photoshop 2022 的工作界面
3．调整 Photoshop 2022 的视图
4．应用辅助工具
教学重点 1．美工必备职业技能
2．Photoshop 2022 的工作界面
教学方法 讲授法
课时数 1课时
教学内容
第一节 网店美工必备职业技能
网店美工是网店网站页面美化工作者的统称，主要工作内容是设计和美化网站页面、制作网店促销海报、把商品照片制作成商品详情中需要的图片等。
通过对比卖家信用级别较高和信用级别较低的网店可知，网店的美工设计也是影响网店流量的一个重要因素，好的网店设计（即图片、配色、布局、文字和创意设计 ) 更能引起 2
2 顾客的兴趣和购买欲望。也就是说，在装修网店和描述商品时要更深入地了解这些内容，才能快速地对网店的装修进行设计。
第二节 了解 Photoshop 的基本概念
对美工设计有一定了解后还需要对软件 Photoshop 的一些基本概念有所认识，其中主要包括图像的像素与分辨率、图像的颜色模式、图像的文件格式和位图与矢量图的区别。
第三节 认识 Photoshop 2022 的工作界面
启动 Photoshop 2022 后，任意打开一个图像文件，即可看到 Photoshop 2022 的工作界面，其主要由菜单栏、工具箱、属性栏、面板、状态栏和图像窗口组成。
第四节 调整 Photoshop 2022 的视图
为了更好地处理图像，Photoshop 2022 提供了多种视图显示模式和图像查看工具。
《Photoshop-CC网店美工》完整教学教案
《Photoshop CC网店美工》
配套教学教案
第1章
课时内容 网店美工常识 授课时间 45分钟 课时 1
教学目标 了解网店美工的基本概念。
掌握网店美工必备的设计要点。
掌握制作网店美工文案。
教学重点 掌握网店美工点、线、面3大基本设计元素。
掌握色彩搭配、构图及文字的应用。
掌握文案的策划与编写。
教学难点 熟悉网店美工工作内容以及其技能要求。
教学设计 1、 教学思路：（1）介绍美工的基础知识，使读者掌握网店美工的基础和技能要求；（2）着重讲解网店美工必需学会的设计要点，掌握时下最时尚的设计效果；（3）讲解文案在网店美工中的作用，以及制作文案的技巧与方法；（4）最后安排知识拓展和课堂实训，讨论和练习本章知识。
2、 教学手段：（1）由浅入深，从基础知识到实际操作；（2）通过知识拓展探讨问题，掌握网店设计装修中应注意的事项；（3）以实例讲解操作，对设置的方法以及效果均配图讲解。
3、 教学资料及要求：除教材中讲解的知识，学员可以学习关于设计和文案方面的知识，通过各种模板和资料，提升自己的操作能力、审美能力以及文字功底。
教学内容
讨论问题：1、网店美工主要做些什么，从事哪些行业？
2、设计风格和文案对网店的影响力？
内容大纲：具体可结合本章的PPT课件进行配合讲解。
1.1 什么是网店美工
1.1.1 网店美工要做些什么
1.1.2 网店美工的技术要求
1.1.3 网店美工须注意的问题
1.1.4 网店美工工作准备
1.2 网店美工必须掌握的设计要点 1.2.1 认识点、线、面3大基本设计元素
1.2.2 怎么搭配色彩更出色
1.2.3 怎么让构图更加美观
1.2.4 怎么选择字体提升图片竞争力
1.3 网店美工文案策划
1.3.1 文案在美工中的重要性
1.3.2 文案的策划与编写
1.4 知识拓展
1. 怎么定位网店的装修风格？
2. 常见的配色方案有哪些？
Photoshop CC网店设计与装修教学教案
《Photoshop CC网店设计与装修实战》
配套教学教案
第1讲 课时内容 网店装修必备利器——Photoshop
教学目标 熟练掌握Photoshop软件的工作界面和基本操作。
掌握绘图颜色的设置方法。
掌握恢复操作的应用技巧。
掌握图层的基本操作方法。
教学重点 掌握Photoshop软件基本操作方法。
掌握图像的色彩模式的应用。
了解和掌握图层的操作方法。
教学难点 图像文件窗口的创建方法。
图层的使用方法。
教学设计 1、教学思路：通过对图像基础知识的讲解掌握图像处理的技巧。
2、教学手段：通过对图像基础知识的讲解了解图像。
3、教学资料及要求：熟练掌握图像的相关知识来加深对图像的了解，以提高实际应用
能力。
教学内容
讨论问题：1、Photoshop中常用的界面操作有哪些？
2、图层基本操作有哪些？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
1.1 初识Photoshop
1.1.1 功能介绍
1.1.2 界面介绍 1.2 掌握基础操作 1.2.1 新建图像
1.2.2 打开图像
1.2.3 保存图像
1.2.4 关闭图像
1.2.5 缩放图像
1.2.6 抓手工具
1.2.7 调整图像大小
1.2.8 设置绘图颜色
1.2.9 恢复操作的应用 1.3 认识图层
1.3.1 新建图层
1.3.2 复制图层
1.3.3 删除图层
1.3.4 图层的显示
1.3.5 图层的选择
1.3.6 图层的链接
1.3.7 图层的排列
1.3.8 新建图层组
1.3.9 合并图层 1.4 课后习题
小结 1、 掌握Photoshop CC工作界面的构造。
2、 掌握文件的新建、打开、保存、关闭等基本操作。
3、 掌握图像的各种显示效果，以及各种辅助工具的使用。
4、 掌握图像和画布尺寸的调整方法，以及使用多种方法设置绘图的颜色。
5、 掌握图层显示、选择、链接和排列的方法；
网店美工案例教程教学大纲4
网店美工案例教程教学大纲
1《网店美工案例教程》
教学大纲
一、课程信息
课程名称：网店美工案例教程 课程类别：专业基础课 课程性质：必修 计划学时：18 计划学分：2 先修课程：无 选用教材：《中文版Photoshop CC基础培训教程》； 适用专业：本书可作为高等院校设计类相关课程的教材，也可作为各类社会培训学校相关专业的教材，同时还可供Photoshop初学者自学使用。 课程负责人：
二、课程简介
本书结合中教国赛以及网上常见商品的类别，分别对休闲运动类、玩具类、办公用品类、配件类、服装类、家居用品类和穿搭配饰类商品网店设计与装修进行了讲解。每种商品的设计均包括店标、店招、Banner、主图、详情页，并分别对PC端、移动端和跨境端的设计进行了介绍。此外，本书还在前两章讲解了电商美工设计的基础知识，以及文案创作和视觉营销等方面的基础知识，为后面的设计制作奠定良好的基础。 书中的“举一反三”板块是对正文中的案例进行的再设计，可以让学生针对同一个产品从多角度进行装修设计，启发学生思维，从而快速理解中教国赛的比赛要求。 本书知识讲解与实例操作同步进行，所涉及的案例尽可能还原中教国赛的要求，学生经过本书的学习后，不仅可以自行使用Photoshop完成店铺各个部分的设计，还可以对整个比赛的要求、比赛系统的形式等有一个整体了解。
三、课程教学要求 序号 专业毕业要求 课程教学要求 关联程度
1 工程知识 L
2 问题分析 熟悉网店基础知识，对整个比赛的要求、比赛系统的形式等有一个整体了解。 H
3 设计/开发解决方案 具备ITMC网店装修设计，同时能按照比赛要求设计出简单的图片作品。 H
4 研究 L
5 使用现代工具 通过使用Photoshop及提供的素材进行商品各部分的设计。 L
6 工程与社会 L 网店美工案例教程教学大纲
27 环境和可持续发展 L
8 职业规范 L
9 个人和团队 H
10 沟通 M
课堂案例——制作儿童牛奶海报_Photoshop网店美工实例教程（全彩微课版）_[共2页]
![课堂案例——制作儿童牛奶海报_Photoshop网店美工实例教程（全彩微课版）_[共2页]](https://360docs-1393072327.cos.ap-beijing.myqcloud.com/a848c3426bec0975f465e2e7.webp)
162Photoshop网店美工实例教程（全彩微课版）
图9-43 输入文字 图9-44 创建文字选区
9.2 创建变形文字
在Photoshop CS6中创建的文字可以对其进行变形操作，从而创作出更具有艺术美感的文字
特效。下面将学习如何创建文字变形效果。
9.2.1 课堂案例——制作儿童牛奶海报
【案例学习目标】学习使用“创建文字变形”按钮制作变形文字。
【案例知识要点】使用横排文字工具输入需要的文字，使用“创建文字变形”按钮制作变形
文字，使用“添加图层样式”按钮为文字添加描边效果，最终效果如图9-45所示。
图9-45 儿童牛奶海报
【效果所在位置】效果/第9章/制作儿童牛奶海报.psd。
（1）单击“文件”|“打开”命令，打开“效果/第9章/制作儿童牛奶海报/01.psd”文件，如
图9-46所示。选择横排文字工具，打开“字符”面板，设置各项参数，如图9-47所示。
（2）在图像中输入文字，按【Ctrl+Enter】组合键完成文字的输入操作，如图9-48所示。单
击“图层”面板下方的“添加图层样式”按钮，选择“描边”选项，在弹出的对话框中设置“大
小”为3像素，“颜色”为RGB（247，117，184），然后单击“确定”按钮，如图9-49
所示。微课9.2.1 儿童牛奶海报的制作过程
PhotoshopCCUI设计案例教程教学教案PDF版进店另有word版或PPT版
《Photoshop CC UI设计案例教程》
教学教案
第1讲
课时内容 初识UI设计 授课时间 90分钟 课时 2
教学目标 了解UI设计的相关概念。
了解UI设计项目流程。
了解UI设计的风格表现。
了解UI设计的行业发展。
了解UI设计的学习方法。
教学重点 了解UI设计的相关概念与常用软件。
教学难点 掌握UI设计的学习方法。
教学设计 1、 教学思路：（1）通过对UI设计的相关概念、项目流程、风格表现和行业发展的
讲解，可以对UI设计有一个宏观的认识；（2）通过UI设计的学习方法的讲解，
可以更好的了解如何学习UI设计。
2、 教学手段：（1）通过资料了解UI设计的基本概念；（2）通过深入讲解了解UI
设计的项目流程、风格表现、行业发展和学习方法。
教学内容
讨论问题：1、UI设计的常用软件有哪些？
2、UI设计的学习方法有哪几类？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
1.1 UI设计的相关概念
1.1.1 UI设计的概念
1.1.2 UI与WUI和GUI
1.1.3 UI设计常用术语中英文对照
1.1.4 UI设计常用软件 1.2 UI设计项目流程
1.2.1 项目设计流程
1.2.2 UI设计流程 1.3 UI设计的风格表现
1.4 UI设计的行业发展
1.4.1 UI设计行业现状
1.4.2 UI设计发展趋势 1.5 UI设计的学习方法
小结 1、 了解UI设计的相关概念、项目流程、风格表现和行业发展。
2、 掌握UI设计的学习方法。 第2讲 课时内容 图标设计 授课时间 90分钟 课时 2
教学目标 了解图标的基础知识。
熟练掌握图标的设计规范。
了解图标的风格类型。
教学重点 熟练掌握图标的设计流程和原则。
教学难点 了解并掌握图标的尺寸和单位。
教学设计 1、 教学思路：（1）通过对课堂实训案例的讲解掌握绘制扁平化风格-单色面性图标
UI设计网页美工设计师的Photoshop CC 生成器切片全攻略
UI设计网页美工设计师的Photoshop CC 生成器切片全攻略
在很多的设计项目中都会用到PS软件，PS功能强大功能中有一个切片工具，这是UI设计师和网页美工设计人员需要的掌握的使用方法。来自非凡学院UI设计培训的武老师为同学们带来了PS切片工具的教程的全攻略。在非凡学院学习UI设计培训、网页设计培训、网页美工培训等课程的同学使用的都是学院默认版本CS6进行练习，虽然老师们在课堂上都会强调PS的版本再高，但使用得最多最实用的功能仍然是那几个，事实也确实如此。但对于切片功能，CC版本以后确实发生了重大变化，使得原来的切片输入工具失去了意义。
以下仅针对需要经常使用Photoshop进行切片的同学，请安装至少Photoshop CC2014以上版本才能使用生成器。
打开编辑菜单——首选项，在增效工具下勾选启用生成器，然后关闭软件重开。
一、单个形状切片输出
值得注意的是，生成器并不支持像素对象的输出，所以首选的是形状图层，请同学们注意。
1，首先我创建一个“切图示范”的文件，保存在指定位置，格式是psd。
2，接下来使用形状层绘制两个图标，比较常见的填充色和描边色图标，分别按要求进行命名，然后在图层名称的后缀加上 . png
3，保存。选择文件菜单——生成——图像资源。
4，在保存psd文件的位置会自动生成一个同名assets文件夹，然后在里面就可以找到刚刚命名为 .png的图标文件，它们被自动切片输出，怎么样？很方便吧？
5，但大家仔细看一下，发现由于图标锁定宽高比的关系，变成了39*40。按照设计规范，这显然是不合格的，图标尺寸出现奇数，并且不是我们规范中的44*44的尺寸。接下来我们在原来图标图层的下方，分别创建两个44*44的正方形形状层。
6，分别各自选中上方图标，按住Ctrl载入选区的方式载入下方正方形选区并添加图层蒙版。原有的两个正方形最后可以删除或隐藏。
7，再次保存刷新，在输出位置可以看到输出的png尺寸，变成了规范要求的44*44，同时周围保持透明边距。
《Photoshop网店美工实例教程(第2版)》课程标准
《Photoshop网店美工实例教程》课程标准
课程编码 课程类别 专业基础课
学时 68 学 分 3
编写执笔人 审定负责人
适用专业 编写日期
一、课程性质
该课程是电子商务专业基础课程，同时也是电子商务专业的一门面向职业岗位（群）的综合性实训课程。本课程以Photoshop CS6为操作平台，依据Photoshop功能模块规划课程内容，以实例的形式全面介绍了Photoshop在网店美工设计中的实际应用，打破了以理论传授为主要特征的课程模式，转变为以工作任务为中心组织课程内容，并让学生在完成具体任务的过程中构建相关理论与实践知识，锻炼技能，发展职业能力。
通过本课程的讲解、演练与实践，能够促进学生更好地掌握网店美工实战技能，具备利用Photoshop进行网店美工设计的实操能力，设计出符合网店商品特性并能彰显卖家个性的视觉效果。
该课程的后续课程为《网店美工》《电子商务视觉设计》《电子商务视觉营销》等。
二、设计思路
本课程以网店美工实战案例为主导，涵盖商品主图、详情图、海报、优惠券、新品推荐区、主图视频、详情页视频等设计方法与技巧。本课程按照Photoshop功能模块安排学习内容，采用情境教学、理实一体的授课方法，通过“操作+报告”的考试方法，全面考核学生网店美工设计的实际能力。
1．遵循职业性。高职教育就是就业教育，是一种适应市场需求、培养高等技术应用人才的职业教育，所以高职电子商务专业的《Photoshop网店美工实例教程》就应该达到直接为提高学生专业操作技能服务，并最终为学生就业服务的教学效果。《Photoshop网店美工实例教程》课程的设计突出职业性，着力营造职业氛围，逐步提高学生网店视觉设计意识，培养学生网店美工设计能力。
2．坚持实践性。以就业为导向、以能力为本位的职业教育，必须突破传统的“教材导向”的书本型教学模式，建立适应时代需要“以就业导向”的技能型教学模式。“以就业导向”的技能型教学模式要求对网店美工课程进行技能定位，即打破原有的书本教学体系，将网店美工的静态知识点分拆为电子商务专业需要的动态技能点，并融汇到教学过程中，提高专业知识与技能紧密结合的力度。
PhotoshopCCUI设计案例教程(全彩慕课版)-教学大纲
1 《Photoshop CC UI设计案例教程（全彩慕课版）》教学大纲
课程介绍：
本书全面系统地介绍了UI设计的相关知识点和基本设计技巧，包括初识UI设计、图标设计、App界面设计、网页界面设计、软件界面设计和游戏界面设计等内容。
全书内容介绍均以知识点讲解加课堂案例为主线。每章的知识点讲解部分使学生能够系统的了解UI设计的各类规范，案例部分可以使学生快速掌握UI设计流程并能完成案例制作。主要章节的最后还安排了课堂练习和课后习题,可以拓展学生对UI设计的实际应用能力。
本书可作为高职高专院校数字媒体艺术类专业课程的教材，也可供初学者自学参考。
培训目标：
➢ 了解UI设计
➢ 了解图标设计并掌握其设计规范和设计方法
➢ 了解App界面设计并掌握其设计规范和设计方法
➢ 了解网页界面设计并掌握其设计规范和设计方法
➢ 了解软件界面设计并掌握其设计规范和设计方法
➢ 了解游戏界面设计并掌握其设计规范和设计方法
学习时间：
64学时。
培训内容：
一、初识UI设计
1、了解UI设计的相关概念。
2、了解UI设计项目流程。
3、了解UI设计的风格表现。
4、了解UI设计的行业发展。
5、了解UI设计的学习方法。
二、图标设计
1、了解图标的基础知识。
2、熟练掌握图标的设计规范。
3、了解图标的风格类型并熟练掌握其设计方法。
三、App界面设计
1、 了解App的基础知识。
2、 熟练掌握App设计的规范。
3、 了解App常用界面类型并熟练掌握其设计方法。
四、网页界面设计 2 1、 了解网页设计基础知识。
2、 熟练掌握网页设计的规范。
3、 了解网页常用界面类型并熟练掌握其设计方法。
五、软件界面设计
1、 了解软件界面设计基础知识。
2、 熟练掌握软件界面设计的规范。
3、 了解软件常用界面类型并熟练掌握其设计方法。
六、游戏界面设计
1、 了解游戏界面设计的基础知识。
2、 熟练掌握游戏界面设计的规范。
课堂案例——制作煮茶壶海报_Photoshop网店美工实例教程（全彩微课版）_[共3页]
37第3章 选区的创建与编辑
本章介绍：
选区是Photoshop中非常重要的概念，将图像中想要修改的部分创建为选区，这样在对
图像进行编辑操作时仅选区内的对象会发生变化，而选区外的对象不会受到影响。因此，熟
练运用选区是网店美工必须掌握的技能之一。
学习目标：
• 掌握选框工具、磁性套索工具和魔棒工具的使用方法。
• 掌握快速选择工具和调整边缘工具的使用方法。
• 掌握移动选区、羽化选区的方法。
• 掌握全选和反选选区的方法。
技能目标：
• 掌握“煮茶壶海报”的制作方法。
• 掌握“甜美公主童装海报”的制作方法。
• 掌握“真皮皮带海报”的制作方法。
3.1 选区工具的应用
在Photoshop CS6工具箱中提供了3个创建选区的工具组，不同的工具组中又包含多个创建
选区的工具。工具箱中的这些工具分别有自己不同的特点，适合创建不同类型的选区。
3.1.1 课堂案例——制作煮茶壶海报
【案例学习目标】学习使用不同的选择工具选取不同的商品图片，并应用移动工具移动图片。
【案例知识要点】使用磁性套索工具绘制选区，使用魔棒工具选取图像，使用矩形选框工具3
选区的创建与编辑Chapter
第3章