资源简介

情境四 箱包店铺的网店美工
任务1 制定视觉设计方案教案
活动（1） 制定箱包店铺视觉设计方案
课题 制定视觉设计方案 课型 理论课
课时 1
教学目标 知识目标 理解箱包客户群体的特征和消费心理； 理解配色、字体、模特图对应的视觉传递效果。
技能目标 能够根据产品定位，分析顾客的特征和消费心理； 能够视觉设计目标选择配色、字体、模特图； 能够完成撰写箱包类网店的视觉设计方案。
情感目标 培养学生对美的追求以及审美能力； 鼓励学生对颜色的探索，提升学生学习兴趣。
教学重点 箱包客户特征分析和心理分析
教学难点 确定配色基调
教学内容 一、客户群体定位与风格 客户特征： 1.追求自我主张； 2.相对于价格，更注重质量和样式； 3.对时尚和流行有一定的敏感度； 4.对潮流辨识度很高。 二、客户群心理分析 客户心理特征： 1.高客流高品质消费心理 2.对于时尚和潮流很注重 3.对品牌创新有一定要求 三、配色基调 主色调：藏青色（包括深藏青和浅藏青），辅助色：金色、卡其色和淡灰色 四、字体选择 方正正大黑、微软雅黑以及方正兰亭黑简体（方正系列字体可能存在版权问题，可以换成近似字体） 五、模特形象选择 模特以欧美时尚年轻男女为主。模特形象方面，要求面貌阳光，姿势优雅，表情沉稳。
复习小结
任务2 设计首页
活动（1） 准备图片
课题 准备图片 课型 实操课
课时 2
教学目标 知识目标 了解首页图片选择要求； 了解旅行包精修图片的处理步骤。
技能目标 学会旅行包精修处理的基本操作：背景处理—绘制产品结构—质感处理—光影—提升质感层次—调色。
情感目标 培养学生耐心细致的做事态度； 培养学生对美的追求以及审美能力。
教学重点 旅行包精修图片的处理
教学难点 旅行包精修图片的处理
教学内容 一、图片选择 商品的图片要选择尽量能清晰展示商品特征的全图。 二、图片处理（讲练结合） 步骤一：背景处理 用使用Photoshop cc打开拉杆箱（铝框TC-424），可以看到产品左右两边的背景都有一些痕迹，不够光滑，需要处理质感，具体操作如下： 按Ctrl+J复制图层，使用快速选择工具选中，大致选中了拉杆箱； 2）先反选Shift+Ctrl+I，再点击调整边缘，选中视图中的黑底，适当调整智能半径的数值，勾选显示半径，添加平滑和羽化，再选择对比度和移动边缘，如图4-6。 3）这时产品大致已抠出，但是拉杆内没处理干净的背景部分，还需用黑画笔在蒙版中涂抹调整，最后转化为智能对象，完成。如图4-7。 步骤二：绘制产品结构。 绘制主要是对商品本身存在的一些缺陷进行精细修复。 具体操作如下： 复制图层留作备用，放大图片，看到需要修复的位置，使用污点修复画笔工具J，在需要修复的位置涂抹。 根据实际比例用钢笔工具P，先勾勒出箱体的前面，如图4-8； 填充绘制的前面颜色，再降低透明度，如图4-9； 步骤三：质感。 1）抠出凹槽部分，添加内阴影图层样式，如图4-10； 2）把前面每一块分别抠出新建图层，填充对应颜色； 3）对应色块转为智能对象，滤镜—其他—添加杂色，如图4-11； 步骤四：光影（高光、反光、明暗交界线、暗部、投影） 1）载入前面整体选区，给前身的所有图层建组Ctrl+G，并按Alt键添加剪切蒙版； 2）钢笔工具分别添加黑白描边，如图4-12。选中菜单栏的“选择—修改—羽化（快捷键是Shift + F6）；适当调整不透明度和细节，如图4-13。 3）分别添加斜面和浮雕、投影图层样式，如图4-14。 4）使用钢笔工具P，绘制出密码锁的形状，按Ctrl+Enter键确认选区，并填充灰色（ctrl+delete），如图4-15。 5）对密码锁的形状，添加斜面和浮雕、渐变叠加、投影图层样式，如图4-16。 步骤五：提升质感层次。 提升质感主要通过高反差保留操作，强化图片轮廓。 1）盖印处理（Ctrl+Shift+Alt+E） 2）复制图层，点击滤镜—其他—高反差保留，半径建议设置为1—10像素，如果后期觉得1像素不够，可再复制本图层来强化，如图4-17。 3）将高反差保留操作的图层混合样式设置为柔光，用过展现和隐藏图层的方式发现效果不明显，多复制几次，直到达到自己满意的效果，建议将高反差保留的多个图层全选，并建一个组（Ctrl+G）。 步骤六：调色 调色的方式有很多，这里推荐使用亮度对比度+曲线的方法，并利用调整图层实现调色，具体操作如下： 1）添加亮度/对比度调整图层，适当增加亮度和对比度； 2）添加曲线调整图层，适当调整即可，如图4-18。 三、实操练习（学生操作） 老师提供旅行箱图片，学生按照上述方法完成任务旅行箱精修处理。
复习小结
活动（2） 设计PC端首页
课题 设计PC端首页 课型 理实一体课
课时 3
教学目标 知识目标 了解首页大致内容和结构； 了解全屏首页的基本要求； 了解店招的主要内容
技能目标 学会图片合成时的光的调整； 学会规划箱包店铺的首页并完成制作。
情感目标 培养学生耐心细致的做事态度； 培养学生钉钉大局观和全局意识。
教学重点 1.首页的规划； 2.首页制作操作
教学难点 首页的制作
教学内容 首页规划 店铺首页的构成元素：店铺页头（店招+导航条）、活动促销（全屏海报+优惠券）、店铺产品（产品分类+主推产品） 二、店招设计（讲练结合） 步骤一：打开Photoshop，新建宽度为1920像素（全屏），图片名称为首页，填充背景色#dbdbdb。 步骤二：添加150像素的水平参考线，新建图层，将图片顶端150像素高度的区域全部填充为深灰色，颜色代码为：#636363,如果觉得颜色太深可以适当改变颜色代码，如#464646。 步骤三：划分导航栏区域。店招和导航栏一起设计完成，但在制作过程中还是要加以区分，新建120像素的水平参考线，两条参考线中间形成30像素的导航栏。在120像素和150像素的参考线上，各画一条2像素的纯黑（#000000）的线条，添加投影，图层混合模式设置为柔光，颜色设置为白色（#FFFFFF），不透明度30%，距离为1像素，扩展和大小为0。 步骤四：制作店招 1．放入LOGO 在偏左的位置放入外交官LOGO。 2．品牌定位文案 “安全感与时尚俱来，您一生的旅行管家”，字体为思源黑体 CN Normal，大小为17点左右。 3．促销信息 制作优惠券。 步骤五：完成导航栏制作。 三、海报制作（讲练结合） 步骤一：选定海报区。在导航条下方，选择一个1920×800像素的区域，填充灰色。 步骤二：抠图。为了给海报添加一个有质感的背景，所以要先对图片做抠图处理。本次抠图采用蒙版遮盖原来背景的方式完成。 1）首先打开产品图片，复制图层，使用钢笔工具精确抠出产品，箱体的投影需要扣除，重新制作一份新的投影。 2）抠除背景，也可以利用调整边缘（有的版本叫做选择并遮住），视图选择黑底，使用调整边缘画笔工具点击或涂抹箱体的边缘灰白色区域，直到灰白色区域全部消失，之后输出区域选择图层蒙版，单击确定，如果发现箱体边缘还有一些灰白色区域，可以在蒙版上使用加深工具适当涂抹。 3）完成上述操作之后，执行盖印（Ctrl+Shift+Alt+E），为提升质感，执行高反差保留操作（滤镜—其他—高反差保留），图层混合模式设置为柔光。 4）上述抠图还是会使白色背景锯齿减少，如果有画图板，可以用画笔工具手动画出一些箱体的反光，添加到对应位置。 步骤三：制作海报背景。 背景采用错落的台柱，方便呈现箱体的品质和质感，如图4-24 分析箱体和背景光源方向，箱体的主光应该来自左前方，背景光源应该来自顶端稍微靠后一点的位置，做到光源一致，整体视觉效果自然会和谐一些。 1）背影处理 在原背景元素图层添加蒙版，添加蒙版，用黑色硬度为0的画笔涂抹海报背景区上方和中间区域，在中间形成暗部，改变原来顶端光源的效果。 2）产品箱体处理 正前方的光线应该在箱体背面产生一个阴影，并且在箱体的下方也要制作一层投影体现立体感。 新建图层，制作暗部光影，使用深灰色（如#1E1E1E）硬度为0的画笔在箱体的左右一侧画出阴影作为箱体背影。除了投影外，箱体身上的明暗部位也需要做一些简单的调整（高光、暗部）。 新建图层，制作高光区域，用矩形工具框画出#fff8ef的浅白色方形，然后栅格化图层，并在菜单栏的滤镜，点击高斯模糊，最后将图层混合样式设置为柔光，不透明度为40%，这样高光就完成了。 也可以考虑方法二：光源在箱体表面投射出来的明暗区域，分别用加深工具（高光部位）和减淡工具（暗部区域）在蒙版在涂抹，直至达到满意的效果。最终效果图如图4-25。 步骤四：添加文案 这里的文案一级标题“轻奢玩味旅途”字体是思源黑体CN，字体大小为99.94 点，颜色#000000，其他的文字也均使用了方思源黑体CN，文字颜色为黑色和白色。价格部分，添加醒目的红色矩形框，文字用白色，提高辨识度。“不沉不费力 挤压立即回弹”是二级标题，简要说明了产品的优势特点，字体的粗细和大小，充分的体现了画面的层次感，如图4-26 步骤五：完成海报。 优惠券 优惠券的作用对于电商网站来说是不可或缺的，它是保持电商活跃度和转化率的手段。优惠券制作较为简单，这里不再赘述。 五、热卖推荐（讲练结合） 步骤一：制作背景 使用浅绿色纯色背景，加入几何图形。 步骤二：加入商品图片 热卖单品使用商品图，并且使用剪切蒙版控制显示区域，其他的图片使用形象图代替。 步骤三：添加文案 这里的文案会产生较多的图层，建议按照商品分类建立分组。 六、完成首页剩余内容。
复习小结
活动（3） 制作移动端首页
课题 制作移动端首页 课型 理实一体课
课时 1
教学目标 知识目标 了解移动端首页的基本要求； 了解移动端店招和导航栏的操作要求。
技能目标 学会制作移动端店招； 学会将PC端首页调整为移动端首页。
情感目标 培养学生举一反三的思维； 培养学生钉钉大局观和全局意识。
教学重点 1.移动端首页的规划； 2.PC端首页调整为移动端首页的操作。
教学难点 PC端首页调整为移动端首页的操作
教学内容 移动端首页规划 包括大致结构和具体内容 二、移动端首页制作（讲练结合） 1.移动端店招 移动端的LOGO是自己上传的，所以直接做成红色的PNG格式。店招较小，应尽量简约，把外交官的“安全感与时尚俱在，您的一生旅行管家”品牌宣传语做上去即可，但要注意文字的位置，不要被系统默认产生的内容遮挡。 2.移动端导航栏 导航区仅付费用户可更改底色，所以这里无法做任何处理，制作时可以直接留白。 3.将PC端首页调整为移动端首页 以PC端首页为基础进行调整，注意整体宽度，图片排列，文字大小要合适，不能影响阅读。
复习小结
任务3 设计详情页
活动（1） 规划详情页
课题 规划详情页 课型 理论课
课时 1
教学目标 知识目标 了解箱包类商品详情页的内容。
技能目标 规划详情页结构和内容。
情感目标 培养学生大局观和全局意识。
教学重点 规划详情页，确定详情页结构和内容。
教学难点 规划详情页，确定详情页结构和内容。
教学内容 详情页结构和内容： 第一部分：宝贝形象，为产品做特性定位。 第二部分：关联营销，提高流量的利用率，增加其他主打宝贝的成交机会。 第三部分：设计理念，向消费者传达产品的设计理念，并通过产品的部分细节信息，突出产品的设计亮点。 第四部分：产品信息，展示产品的型号、材质、尺寸等信息。 第五部分：颜色展示，分别从产品的正面、侧面和背面展示产品的两种颜色。 第六部分：细节展示，展示商品细节，增强消费者购买信心。 第七部分：密码锁设置教程，提示消费者如何设置不同类型的密码锁。
复习小结
活动（2） 制作详情页
课题 制作详情页 课型 操作课
课时 3
教学目标 知识目标 了解箱包相关商品知识。
技能目标 能够按详情页规划完成详情页制作。
情感目标 培养学生制定计划、落实计划的意识； 培养学生对美的追求以及审美能力。
教学重点 按详情页规划完成详情页制作。
教学难点 按详情页规划完成详情页制作。
教学内容 一、图片准备 准备详情页需要的商品图、场景图、图形符号等素材。 二、制作详情页（讲练结合） 步骤一：宝贝形象 主要操作： 1.新建图片，宽度750像素，高度可以设定在15000像素左右，背景色设置为白色。 2.导入模特图，通过剪贴蒙版控制显示区域。 3.添加文案。在右上方空白处添加英文“FASHION”，用于强化商品的时尚属性，使用比较随性、自由的字体Mistral，颜色则选择与所展示宝贝相近的颜色#ff8262。添加中文“去发现”、“更多未知的美好”，字体分别为黑体和幼圆，颜色分别为#1b1b1b和#5a5a5a（后面多处使用这两种颜色，将不作重复说明）。而在“去发现”后面加上由破折号引申来的两条短直线，颜色分别为#ff8262和#5a5a5a，代表此宝贝可选的两种颜色：金色和银色。至于在中文下方添加的三行很小的英文，主要用作装饰，并没有实际意义，可随意输入三行英文即可，颜色为#b5b5b5。 步骤二：关联营销 先绘制一个蓝色矩形，颜色代码为# 507891。再输入红色标题“爆款推荐”，并通过图层样式为其添加黄色描边。最后将本来已经制作好的三张商品图片导入，适当调整位置。 步骤三：设计理念 1.导入背景图片。分别导入设计理念背景图片1、2、3、4、5，背景图片之间略作分隔，使用剪贴蒙版控制显示区域，如图4-40。 2.添加设计亮点图片。将设计亮点图片摆放在合适的位置。 3.添加标号。参照效果图，在图片相应的位置添加标号及圆形图案。 4.添加文案。参照效果图，在图片生意人位置添加方案，对产品的设计理念及设计亮点进行阐述，加深消费者对产品的印象。 步骤四：产品信息 1.栏目标题。 2. 基本资料。先做一个灰色的背景，左右两边分别留白15像素，颜色代码为#e8f0f3，再把宝贝图片放进来，加上阴影，注意阴影的位置。然后，分别加上型号、材质、颜色等基本资料，注意前后文字的粗细和深浅对比。 3. 尺寸信息。尺寸信息以表格的形式展现。但是，为了让消费者对箱子的尺寸有一个更直观的了解，在尺寸信息表的上方，先加入模特身高对比图，以便消费者能够更好地作出选择。 步骤五：颜色展示 1.栏目标题。 2.完成颜色展示。导入颜色展示背景，调整位置，左右两边分别留白15像素。再导入宝贝正面、侧面和背面图片，适当调整大小和位置。绘制一个矩形的白色背景，将不透明度设置为80%，参照效果图在白色背景上输入文字内容，并加上表示宝贝颜色的短线。最后在宝贝侧面图和背景图下方绘制菱形并分别输入文字内容。 步骤六：细节展示 1.栏目标题。 2.完成细节展示。绘制一个灰色矩形，颜色代码为#f6f6f6，然后复制两次该图层，得到三个灰色矩形。调整位置，使第一和第三个灰色矩形左边留白20像素，第二个灰色矩形右边留白20像素。依次导入产品细节图LOGO、拉杆、脚珠，适当调整位置。参照效果图添加文字内容。序号01、02、03的制作方法并不难，只要将文字图层栅格化，用多边形套索工具选择序号的右下角，按Delete删除，再用直线工具贴着被删除的边绘制一条大小为1像素的直线即可。 步骤七：密码锁设置教程。在此处加入标题，但与前面的栏目标题不一样，制作时先用直线工具绘制一条大小为25像素的灰色横线，颜色代码为#adb9b9，然后用矩形选框工具在左侧选取一段删除，在此处添加标题文字。最后添加白色英文“THE PASSWORD LOCK”。完成后将这三个图层复制两次，调整好位置，再修改复制的标题文字内容即可完成三个标题的制作。 参照效果图，将三种密码锁的素材图片导入，并调整好位置。素材图片中已对关键部位作好标记，不用再花时间添加标记。分别在图片下方输入设置步骤，注意重点内容用红色的文字突出。 步骤八：整体检查，完成详情页 详整体浏览，确定详情页整体协调，没有瑕疵。
复习小结
任务4 上传商品
活动（1） 上传商品到电商平台
课题 上传商品到电商平台 课型 操作课
课时 1
教学目标 知识目标 了解电商平台主副图要求； 了解商品上传的基本内容。
技能目标 了解主副图的制作方法； 了解商品上传的基本操作。
情感目标 培养学生耐心细致的做事态度； 培养学生动手实践的意识。
教学重点 电商平台关于上传商品相关知识； 上传商品相关操作。
教学难点 上传商品相关操作。
教学内容 一、设计主副图（讲练结合） 1．设计主图 步骤一：新建图片，宽度和高度均为700像素。 步骤二：填充背景。将前景色设置为#172d5e，背景色设置为#acbcdf，再利用渐变工具中的径向渐变对背景进行填充。 步骤三：导入宝贝图片。将银色旅行箱的正面图导入，适当调整大小、位置和色调。 步骤四：添加LOGO。将店铺LOGO添加进来，放置在左上角，适当设置大小。 2.设计辅图 由于主图设计相对简洁，这里的辅图跟主图相比，仅少一个LOGO。 3.设计最后一张图 完整的商品图，换成白底。 二、上传商品（讲练结合） 将商品主副图和详情页切片图上传到图片空间，在系统的提示下，完成商品上传。如果详情页存在关联营销、领取优惠券、搭配销售等有超链接的内容，可以用Dreamweaver或者用购买模板的方式完成。
复习小结
任务5 上传首页
活动（1） 上传PC端首页
课题 上传PC端首页 课型 操作课
课时 2
教学目标 知识目标 了解淘宝网PC端首页装修的基本内容； 了解盛夏布局的基本功能；
技能目标 学会使用盛夏布局上传淘宝PC端首页。
情感目标 培养学生耐心细致的做事态度； 培养学生克服困难，解决问题的做事态度。
教学重点 使用盛夏布局上传PC端首页。
教学难点 使用盛夏布局上传PC端首页。
教学内容 1. 店招上传（讲练结合） 步骤一：在浏览器中输入http://www./2013/ p=tools，进入盛夏布局。 步骤二：在主配置界面输入相应内容。配置名称：店招，主尺寸自定义为1920×150，主背景图的地址为店招在图片空间地址，平铺方式为平铺。 步骤三：添加超链接。为导航栏的各个分类添加超链接。 步骤四：添加微淘关注。 步骤五：生成代码。 步骤六：植入代码。进入淘宝后台，点击店铺装修，在店招位置点击编辑，自定义招牌，点击源码按钮，粘贴上一步生成的代码，点击保存。 步骤七：设置页头。 2.上传轮播海报（讲练结合） 步骤一：进入盛夏布局，点击【全屏轮播】。 步骤二：在主配置界面输入相应内容。 步骤三：添加热点。分别为海报添加热点。 步骤四：生成代码。点击上方【生成代码】按钮，选择【生成即使店自定义代码】。 步骤五：制作轮播海报区。在店招下方，添加自定义区，点击【编辑】，在代码界面粘贴上述代码，确定，发布站点。 3.首页其他部分上传（讲练结合）
复习小结
活动（2） 上传移动端首页
课题 上传移动端首页 课型 操作课
课时 2
教学目标 知识目标 了解淘宝网移动端首页装修的基本内容； 了解码工助手插件的基本功能；
技能目标 学会使用码工助手上传淘宝PC端首页。
情感目标 培养学生耐心细致的做事态度； 培养学生克服困难，解决问题的做事态度。
教学重点 使用码工助手上传移动端首页。
教学难点 使用码工助手上传移动端首页。
教学内容 一.移动端首页（讲练结合） 步骤一：下载并安装码工在线辅助装修工具插件。建议使用谷歌浏览器、360浏览器或者UC浏览器。 步骤二：进入操作界面。 步骤三：导入图片。在模块设置中，将默认963像素的高度改成一个比第一张图片更高的像素，比如第一张图高800像素，可以将高度设置成1000像素。设置高度之后点击【添加选区】，把产生的热点选区拖动到左上角，并在图片的位置输入第一张图片的地址。 步骤四：添加热点。在下方空白区域拖动，即可产生热点框，将热点区域框拖动到图片对应位置即可，在【热点属性】的【链接】的位置输入商品移动端链接。 步骤五：生成代码。点击右上角生成代码按钮。 步骤六：上传到移动店铺。 进入移动端首页装修界面，清空首页原有内容。 步骤六：上传到移动店铺。 1.进入移动端首页装修界面，清空首页原有内容。 2.点击蓝色M图标，在弹出的工具界面中选择手机自定义安装。 3.在弹出的【自定义模块源码】框中粘贴从码工助手复制的代码，点击保存。 步骤八：完成首页上传。用上述方法，将剩余的首页上传到移动端。第一次上传的时候需要清空首页所有内容，用上述方法上传首页剩余部分的时候，不要再做清空首页的处理。码工助手一次只支持10个热点，热点数超过10需要重新划分切片。 这种上传方式不支持轮播，如果要上传轮播海报，可以先上传除轮播外的剩余部分，再在上方添加轮播模块。
复习小结

展开更多......

收起↑