[教学设计]计算机平面设计项目案例

[ 教学设计 散步教学设计免费下载洗衣歌教学设计免费下载汽车材料教学设计下载爱护水资源教学设计下载一师一优课教学设计下载 ]计算机平面设计项目 案例 全员育人导师制案例信息技术应用案例心得信息技术教学案例综合实践活动案例我余额宝案例 卷内目录 项目课程页码案例 2案例一:修整不完整纹样 《纺织品图案设计案 10案例二:修地毯纹样图 例教程》 22案例三:地毯传统纹样修图 30案例一:flash 简单片头制作 33案例二:flash 角色的绘制 36《FLASH 项目课程》案例三:flash 场景的绘制 39案例四:flash 角色行走 42案例五:flash 角色跑步 45案例一:彩色贝壳 52案例二:PS 滤镜制作轻纱飘扬效果 《Photoshop 案例教 程》 58案例三:PS 滤镜图层混合模式实例:把 MM 印在 T 恤上 68案例四:PHOTOSHOP 滤镜使用—打造绚目花朵 1 《纺织品图案设计案例教程》 案例一:修整不完整纹样 【效果展示】 【技能目标】 根据客户提供的样图，通过 Photoshop、TOP 软件来完成修图操作。通过练习让学生掌握 TOP 软件修图的方法。 【案例 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 】 在 ps 中打开图，找出一个循环，将需要的部分拉正，如图所示: 2 拉正后，将需要的部分裁剪下来，并保存为.bmp 格式，在 top 中处理，如图所示: 进行分色 调整大小，用剪刀工具将不要的部分切掉，只剩下一个循环 3 改变大小 ，改为 200*200，先不考虑生产的机器属性(可以看出这个图是一个正方形的) 用曲线工具将图案勾勒出来 4 换个颜色勾勒浅色的图案 5 增加一个套色 6 单击蓝色，红色的小方块，使其凸起来，处于保护状态，选择橘色，用橡皮擦将背景擦掉 单击蓝色，红色的小方块，使其凹下去，使其可以编辑 用油漆桶将色块填充起来 7 这是其中一小部分，没有修过 将修好的部分，与其对比一下 8 将边缘部分修光滑，弧度流畅，其他部分都是这样修改，那么这张图就算完成了。 9 案例二:修地毯纹样图 【效果展示】 【技能目标】 根据客户提供的样图，通过 Photoshop、TOP 软件来完成修图操作。通过练习让学生掌握 TOP 软件修图的方法。 【 案例分析 安全事故典型案例分析生活中谈判案例分析管理沟通的案例分析股改案例分析刑法学案例分析 】 这个实例步骤简单，效果也比较可爱，适合初学者练习。 【案例详解】 这是一张客户发来的场景图 我们的任务，就是做出与场景图基本相似的地毯纹样 10 首先，用 PS 将图案打开。将平铺着的图案拉起 然后，借助辅助线(图中蓝线)，将纹样中横竖相同的部分拉到同一直线上 辅助线尽量多拉几条，保证图案的横平竖直 11 地毯纹样大多是由一个循环连晒组成的，现在找到这个循环，并剪切下来 第一部分就完成了。 现在，调整一下循环的高度，让它看起来不至于太瘦或者太胖 12 这是最重要的一步。 首先，将图片改为索引模式。颜色可以多设置一些，比较不会失真 分辨率能且只能被设置为 16，宽度要能被 4 米整除 根据场景图的大致尺寸，我们将花距定为 100 至于 100 后面的 0.17，则是为了上机制图而特意设定的缩率，这有另外规定 接下来我们要开始钩线，这在 ATCarpet 中会方便很多 13 在如上工具栏中，点击两个按钮，就会发现图片如下图自动连晒开来 14 点击图像，选择色块分色，自动选色，并确定 接下来，选择左边工具栏的线条工具， 并设置一个色系完全不同的颜色开始勾勒 15 ATCarpet 的优势就体现在:你在一个循环勾勒的同时， 其他连晒开的循环也会同步进行 这样就不用担心循环的上下左右预接问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 了 勾出的线条必须注意流畅，无间断 16 保存后，再将图片在 PS 中打开，选出你勾勒的颜色，其他纹样删除。 再次打开 ATCarpet，选择油漆桶工具 17 第二部分就这样完成了 18 打开原图和我们的印花色板 选择图像-模式-颜色表 将蓝色和白色变为与原图接近的 K 色系 一个循环的纹样就出来，下面我们要连晒以及标上色标 19 打开 TOP 软件，工艺处理-连晒 垂直里的循环数我们只需要 1 个，水平需连晒到 4 米，花距是 1 米，所以选择 5 个 保存。 20 在 PS 中打开，选择画布大小，宽度为 402 厘米，注意定位的方向。 完成图。 21 案例三:地毯传统纹样修图 【效果展示】 【技能目标】 根据客户提供的样图，通过 Photoshop、TOP 软件来完成修图操作。通过练习让学生掌握 TOP 软件修图的方法。 【案例分析】 这个实例步骤简单，效果也比较可爱，适合初学者练习。 【案例详解】 完成地毯纹样制作 首先，要按客户要求设定纹样的大小。注意分辨率为 16。 22 然后，转换为索引模式。并在 ATCarpet 中打开。 点击回位显示图标，将纹样模拟连晒开来 将图片进行初步分色处理。 23 点击软件下方的红色框选出的按钮，进行颜色保护。 保护的作用是使你选定的颜色不会被覆盖。 24 将原图的颜色每种对应设定一个鲜亮的颜色， 这是全部勾勒出的纹样。 25 在 PS 中打开，选中杂色部分，全部填充为底色 26 纹样基本已经完成，下面就是将颜色恢复成原来的版本 打开一张原图，将修改过的图的颜色表打开，进行换色处理。 27 颜色更换后，要放大纹样，处理细节部分 红色框出部分就是杂色部分，需要 PS 的画笔工具进行修补 28 图案完成。进行对比，我们要做的 就是把原图重新勾勒，让边缘变成一针的锯齿。 29 《FLASH 项目》 案例一:flash 简单片头制作 【效果展示】 【技能目标】 1、熟悉按钮的制作。 2、掌握影片剪辑的使用方法、功能 3、掌握几个基本术语:AS 脚本语言、DIY 按钮 【案例分析】 本案例为 flashMV 动画的一个简单片头播放控制 学生需要掌握按钮的制作和简单代码的控制 【案例详解】 1 添加图层在 21 桢插入关键桢，制作按钮。 30 2 制作按钮内部特效影片剪辑 3 在 21 桢处和按钮表面添加代码 21 桢处代码为 stop();按钮表面代码是 on (release) {play();} 三、动手做一下 1、使用工具制作一个圆形转动的按钮 四、学生课堂练习题:自创按钮 五、课后作业 ,、自行设计一个片头播放控制，可配合图片声音等效果。 31 32 案例二:flash 角色的绘制 【效果展示】 【技能目标】 1、熟悉椭圆和方形工具绘画的功能。 2、掌握角色构成的基本方法 3、掌握几个基本术语:角色正面侧面图 【案例分析】 本案例为 flashMV 动画的角色制作 学生需要掌握基本的绘画技巧和动画元件的结构 【案例详解】 1 使用椭圆构建角色轮廓并删除多余的线条 — 2 绘制眼球鼻子，黑白 2 色椭圆叠加而成 33 -- 3 绘制身体，同样使用椭圆工具，注意椭圆边缘调整功能(按住 CTRL 键把光标移动到 椭圆边缘，鼠标出现弧线就可拖动如下图效果) 4 手和脚的绘画，同样是圆和椭圆的组合，很简单 5 将头、身体、左手、右手、左脚、右脚分别按 CTRL+G 组合，全部选中，按 F8 转换成 图形元件，再分散到图层，调整身体个部分的层次关系。 34 三、动手做一下 1、使用椭圆工具制作上面的图形 四、学生课堂练习题: 五、课后作业 ,、自行设计一个角色形象。 35 案例三:flash 场景的绘制 【效果展示】 【技能目标】 1、熟悉椭圆和方形工具绘画的功能。 2、掌握色彩搭配基本方法 3、掌握几个基本术语:透视 【案例分析】 本案例为 flashMV 动画的场景制作 学生需要掌握基本的绘画技巧和场景元素的层次关系 【案例详解】 1 绘画部分可参考角色绘画，下面我们来介绍下场景的视角 制作方法:马路是梯形，树和汽车由上到下是放大的，这就使人感觉由远到近，着就是 透视。 36 2 车内 车内是一个特写视角，难度比较大，要考虑的东西也比较多 注意点:图层间的关系特别要注意，树木要被汽车遮挡， 3 平面场景也是最简单的，适合制作普通的 MV 动画，但要注意远处的事物要模糊处理， 这也是透视原理的一种。 5 镜头的特写变换是最奇妙，也最需要创意的，下图中就是车内到车外反光镜的一个镜 头推移。这也是场景里面最复杂的。 37 三、动手做一下 1、使用已备素材绘制上面的图形 四、学生课堂练习题: 38 案例四:flash 角色行走 【效果展示】 【技能目标】 1、熟悉元件的中心点调整。 3、掌握角色走路的基本规律 4、完成角色走路的动画 【案例分析】 本案例为 flashMV 动画的角色行走动画的制作 学生需要掌握基本角色行走细节的制作 【案例详解】 1 双击角色，进入图形元件，调整手脚的中心点到骨骼关节转动部位。 2 在第 5 桢和第 10 桢分别插入关键桢，每个图层都要，并选中中间部分如图，点右键创 建补间动画。 39 3 把光标定在第 5 桢，然后将双手双脚饶各自中心旋转互换位置 4 点场景，回到主时间轴，延长图形元件在主时间轴上的桢，至少大于图形元件内部的 桢数，在 50 桢左右处插入关键桢，创建补间动画，把 50 桢内的角色移动到右边。按 CTRL+ENTER 就可以看到角色从左向右走的过程了～ 注意:若要使角色停止走路，只要在该处插入关键桢，并将其打碎。 40 三、动手做一下 1、使用已备素材制作角色行走动画 四、学生课堂练习题: 制作人物走路的特写:人在画面中间走，背景向左移动，类似摄影机跟踪拍摄的效果。 五、课后作业 ,、自行设计一个场景和角色行走，要求面对观众行走 41 案例五:flash 角色跑步 【效果展示】 【技能目标】 1、熟悉元件的中心点调整。 3、掌握角色跑步的基本规律 4、完成角色跑步的动画 【案例分析】 本案例为 flashMV 动画的角色跑步动画的制作 学生需要掌握基本角色跑步细节的制作 【案例详解】 1 双击角色，进入图形元件，调整手脚的中心点到骨骼关节转动部位。 2 在第 5 桢和第 10 桢分别插入关键桢，每个图层都要，并选中中间部分如图，点右键创 建补间动画。把光标定在第 5 桢，然后将双手双脚饶各自中心旋转互换位置同时将第 5 桢的图形整体上移，并将上半身倾斜，形成跑动的姿势。 42 3 将第 5 桢的图形复制到第 15 桢，调整形成跑动的姿，将第 10 桢的图形复制到 第 20 桢，调整使动画流畅。 4 点场景，回到主时间轴，延长图形元件在主时间轴上的桢，至少大于图形元件内部的 桢数，在 50 桢左右处插入关键桢，创建补间动画，把 50 桢内的角色移动到右边。按 CTRL+ENTER 就可以看到角色从左向右跑动的过程了～ 注意:若要使角色停止跑步，只要在该处插入关键桢，并将其打碎。 三、动手做一下 1、使用已备素材制作角色跑步动画 四、学生课堂练习题: 制作人物在马路上跑步的过程，(绘制蓝天、白云、建筑)要求背景移动，有镜头跟随 效果。 43 五、课后作业 ,、自行设计一个场景和角色跑步过程。 44 PHOTOSHOP 案例 案例一:彩色贝壳 【效果展示】 【技能目标】 这个实例也是用 Photoshop 从无到有的素材创作，主要用到扭曲滤镜、液化膨胀滤镜，钢笔造 型、以及图层样式特效等。 【案例分析】 这个实例步骤简单，效果也比较可爱，适合初学者练习。 【案例详解】 一、在 Photoshop 中新建 10*10 厘米，分辨率为 300dpi，背景色为白色的画布。 二、新建图层一，用矩形选框工具拉出 0.25*10 的竖条选区，填充 R:212G:204B:129,用方 向键将该矩形选区右移 15 个像素，继续填充，以此类推，填满画布。(用图章工具或图层渐变也可 达到这种效果，大家可以试试)(图一) 图一 45 三、将图层一用自由变换略微缩小一点(ctrl+T)，在菜单栏上点滤镜—扭曲—球面化，数量值 设为 100%。(图二) 图二 四、用圆形选框工作拉出一个正圆框住图中心形成的圆，在菜单栏上点选择—反选(ctrl+shift+I)， 按 delete 键删除多余部分。复制此图层，得到图层一复本，将复本前的小“眼睛”关闭，暂时不用此 图层。(图三) 图三 五、将图层一用自由变换(shift+T)缩小至四分之一画布大小，放置在画布中心，不要取消自由变 换的选框，在菜单栏上点编辑—变换—透视，在选框上部的两个控制点中任选一点向外拉，下部的 两个控制点中任选一个向内拉，直至重叠。(图四) 46 图四 六、保持图层一为当前图层，点击菜单栏中滤镜—液化，弹出新窗口，选则左侧的“膨胀工具“， 画笔大小设成 250，画笔压力设成 50，模式为“平滑的”在扇形底部点按 5—6 次(也可点压住不动， 停留时间不要太长)，使其具有膨胀效果。确认此窗口。(图五) 图五 七、新建图层二，将其放置在图层一的下面，用钢笔工具，将整个扇形勾画出来，用直接选择 工具调整好路径。按住 ctrl 不放，用鼠标左键点击路径面板上的路径，将路径转换成选区(也可按 面版底部的“将径作为选区载入”图标)，填充 R:242G:230B:112(图六) 图六 八、将图层一应用图层样式—投影，不透明度设置为 53%，角度设置为 148 度，距离 12 像素， 扩展 4%，大小 16 像素，其余设置不变。(图七) 47 图七 九、将图层一与图层二链接，在菜单栏上选择图层—合并链接图层(ctrl+E)将此两图层合并为 图层一。 十、新建图层二，填充白色 R:255G:255B:255，应用图层样式—渐变叠加，将渐变编辑器设置 成透明条纹，并将颜色改为 R:242G:230B:112，将样式设置为“径向”，其余不变，得到同心圆。 新建图层三，与图层二链接后合并，使图层二变为普通图层。 将最里层的白圈填充 R:242G:230B:112，然后在菜单栏上点击选择—色彩范围，弹出对话 框，用变为吸管工具的指针引取画面上白色部分，色彩容差调整为 100%，确定对话框后，按 Delete 删除全部白色部分。(图八) 图八 十一、将图层二用自由变换工具压成椭圆形，在菜单栏上选择滤镜—扭曲—球面化，数量为 100%，并重复球面化动作 2 次(ctrl+F)(图九) 48 图九 十一、用自由变换(ctrl+T)将图层二放至合适大小，保持当前图层为图层二，按住 ctrl 键不放， 用鼠标左键在图层面板上点按图层一，再在菜单栏上点击选择—反选(ctrl+shift+I)，按 Delete 键 删除多余部分。(图十) 图十 十二、保持图层二为当前图层，在菜单栏上选择滤镜—纹理——纹理化，在弹出的对话框中选 择沙岩，缩放 126%，凸现 10。确定对话框后，在图层面板上将图层二模式设为“正片叠底”，不透 明度设为 58%。(图十一) 图十一 十三、链接图层一与图层二，将两图层合并(ctrl+E)。用多边形选择工具，在贝壳边沿勾出齿 状，按 Delete 删除多余部分。(图十二) 49 图十二 十四、打开我们做图一开始隐藏的图层一副本，并将此层放置于最底层，在菜单栏上选择编辑—变 换—旋转九十度，并用自由变换工具将其压扁成椭圆形。(图十三) 图十三 十五、将图层一副本将图层一应用图层样式—投影，不透明度设置为 53%，角度设置为 148 度， 距离 12 像素，扩展 4%，大小 16 像素，其余设置不变。 十六、新建图层三，用圆形选框工作拉出一个与图层一副本一样大小的椭圆来，填充 R:242G: 230B:112，并链接图层一副本与图层三，再合并(ctrl+E)(图十四) 图十四 十七、保持合并后的图层一副本为当前层，在菜单栏上选择滤镜—扭曲—球面化，数量为 100%。 在菜单栏中选择编辑—变换—旋转 180 度，确定后用多边形选择工具切出贝壳下部的棱角。(图十 五) 50 图十五 十八、合并图层一副本与图层二。用大小 60，强度为 50%的模糊工具对贝壳边缘，以及底部进 行模糊。用大小 67，不透明度 52%的橡皮工具将贝壳边缘擦出半透明效果。用大小 70，曝光度为 46%的减淡工作，对贝壳底部凸出的部分进行减淡。用大小 250，曝光度为 25%的加深工具对贝壳 底部与扇面部进行加深。(图十六) 图十六 最后我们可以把做好的贝壳调整颜色，任意组合。 51 案例二:PS 滤镜制作轻纱飘扬效果 【效果展示】 【技能目标】 用扭曲滤镜来模拟一下轻纱飘扬效果，其实制作步骤并不是很麻烦，关键是我们不仅仅要知 道滤镜能够做什么，还要清楚我们能用滤镜做什么。 【案例分析】 初学者往往都不能够完全地领悟到滤镜的妙处，Photoshop 强大的滤镜能帮助我们实现各种奇 妙的质感，有时候只需稍稍改变一下参数，我们就会得到令人意想不到的效果。 【案例详解】 1(首先新建一张空白的纸，按 D 恢复默认的前景色和背景色，以前景色填充，我们就以这张 黑色的纸作为背景(图 1 略); 2(新建一层，选择画笔工具，将笔触的硬度调到最低，大小大约是 200，当然你也可以跟据自 己纸张的大小来调整，然后在这一层上随意地点一三四笔，但是注意，笔触之间要有一定的间距， 不能够做得混沌一片，如下图(图 2): 52 3(接下来这一步就很重要了，我们就要通过这一步来奠定纱质感的基础了，在这一层上执行滤 镜下面的波浪，这里我用的参数如下:生成器数 6;类型:方形;波 长:29/52;波幅:10/34;未 定义区域选择重复边缘象素。做完后模糊工具稍做模糊，效果大致如下(图 3): 4(仍然在这一层上，我们继续为我们的纱增加纹理，选择滤镜下面的极坐标，方式为极坐标到平面 坐标，我们的大致效果应该如下所示:(图 4) 53 (图片较大，请拉动滚动条观看) 5(然后执行 CTRL+T，单击右键，在弹出的快捷菜单中选择透视，可以适当的把图像向上移动 一些，这样可以方便我们来操作，拖动右下角的控制点，向左边拖拉，一直拉过中心点，使图像出 现交叉，交叉的幅度不要太大，也不要太小，基准是上半部分的纹路出现模糊，接着再单击左键， 选择垂直翻转，这时候，你的图像看起来大致应当是这个样子吧(图 5):(要注意的是，由于在 第二步时每个人的效果都会有所不同，所以建议多试几次，直到满意为止) 54 6(大家一定会说不像了吧，呵呵，真正的飞扬的纱可不会这么生硬的啊，别记了了我们还有一 个强大的工具——液化～按 SHIFY+CTUL+X 执行液化，用适当大小的涂抹工具在先在边缘轻涂， 便边缘出现波浪感，再在图像内部进行涂抹，尽量顺着边缘的纹理涂抹，手不要抖动，以便做出最 自然的效果，我做的效果如下图(图 6): 7(这样只是做出了自然一些的纹理，但是还没有飞起来，这就用到了我们的滤镜当中的又一种扭曲 工具——切变。选择切变，可根据自己的爱好添加锚点，做成自己喜欢的样子出来，我做的如下图 (图 7): 55 (图片较大，请拉动滚动条观看) 8(当然我们还可以通过编辑下面的调整命令(色相饱合度)来给我们的轻纱染上各种颜色，白 色的轻纱只要将其着色后的明度调整到最大就可以啦～注意调颜色时切不可使用获取选区再填充颜 色的方法，这样很容易破坏掉原来自然的纹理(图 8)。 ( 好了，很简单，我们可以复制出多层轻纱，运用切变或液化工具为它们做出各种优美的形态，给它 们穿上不同的颜色，看到了吗，不用调节层的不透明度，我们就能轻松地获得这种朦胧的通透感啦～ (图 9) 56 滤镜的功能有时候真的是我们意想不到的，就仅以滤镜下面的波浪为例吧，通常我们会由于它 制造的波浪太过破碎而忽略了它，其实我们通过小小的调整会获得很多的效果，下图是我运用了波 浪和极坐标做出效果，其实也很简单，但也经过你的一番创意，也许就会变成一个不错的背景噢～ (图 10) 57 案例三:PS 滤镜图层混合模式实例:把 MM 印在 T 恤上 【效果展示】 【技能目标】 滤镜/模糊/高斯模糊，一边移动设定值滑块一边查看画面效果，确认一最靠近素描效果的值。 把刚刚做好的人物图片用拖动工具拉进 T 恤文件中，图层混合模式设置成正片叠底，图片的白色背 景就会主动消失，免去了扣图的麻烦。 【案例分析】 本篇 Photoshop 实例主要是运用 PS 滤镜和图层混合模式，先把 MM 照片处理成个性的图案， 再将照片和图案进行合成处理，印在 T 恤上。方法简单实用，适合各位 PSer 学习借鉴。 【案例详解】 58 一，打开一幅靓女陈慧琳的照片，运行图象/拷贝，拷贝一份备用。 二，Ctr+Shif+U 去色，Ctrl+J 拷贝一层。 59 三，对拷贝出的图层执行 Ctrl+I 反相。 四，把图层混合模式改成“色彩减淡”。 60 五，运行滤镜/模糊/高斯模糊，一边移动设定值滑块一边查看画面效果，确认一最靠近素描效果的 值。 61 六，Ctrl+Shif+Alt+E 把所有层拼合备用。 62 七，打开一幅纯白的 T 恤照片。 八，把刚刚做好的人物图片用拖动工具拉进 T 恤文件中，图层混合模式设置成正片叠底，图片的白 色背景就会主动消失，免去了扣图的麻烦。 63 九，Ctrl+T 调节到适合的大小与地方。 64 十，选取橡皮工具，设定大一些，边上软一些的笔触，把图片多余的部分擦除。 十一，选取文字工具，设定一随便一些的字体，打上个人喜爱的文字。 十二，在图层面版右键点击文字层，选取“文字变形”，给文字加上变形效果。 65 十三，在文字样式下拖列表中选取旗帜，设定如下，使文字看上去更活跃随意。 66 十四，把文字的图层透明度改成 60%，使文字看上去不那么突兀，从而更好地融入图片背景。 十五，如此一件印着个性图片的 T 恤文化衫就成形了，假如有设备的话，是可印出来的喔。 67 案例四:PHOTOSHOP 滤镜使用—打造绚目花朵 【效果展示】 【技能目标】 滤镜---扭曲----波浪、滤镜----扭曲----极坐标、滤镜----素描-----铬黄等设置打造绚丽缤 纷的效果。 【案例分析】 本篇 Photoshop 实例主要是运用 PS 滤镜和颜色填充，实现绚烂的色彩效果，别认为漂亮的 效果就一定要用复杂的设置来完成，我们要研究用最简单的设置去设置最绚烂的效果。 【案例详解】 1、新建文件 2、填充渐变色(黑白) 68 3、执行滤镜---扭曲----波浪 4、滤镜----扭曲----极坐标 69 5、滤镜----素描-----铬黄 70 6、新建图层，填充渐变,模式变为颜色 71