ui视觉设计教案.ppt

《ui视觉设计教案.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、教学对象：ui视觉设计班学员授课内容：详细讲解icon、pc端移动端界面设计、原型图绘制计划学时：100课时UI视觉设计班教案本章导读第一章（3天）本章主要授课内容·本章主要学习如何绘制扁平风格图标（icon）·icon是什么，设计icon的目的以及规范要求·简单介绍现今主流的三大风格icon·绘制一套（8~12个）完整的扁平风格图标，技巧手法注意事项·评讲学生作业并辅导学生完成修改本章导读第一章（2~3天）本章主要授课内容·本章主要学习如何绘制扁平风格图标（icon）·icon是什么，设计icon的目的以及规范要求·简单介绍现今主流的三大风格icon·绘制一

2、套（8~12个）完整的扁平风格图标，技巧手法注意事项·评讲学生作业并辅导学生完成修改·教学生如何绘制一组扁平化图标·在PS里，灵活针对○□-△等图形进行布尔运算（相交、相减、相加等）以实现上面的图标效果；·临摹时，需要临摹一套风格的图标，且不少于8个·绘制时，所有元素的边界都必须干净利落，没有任何羽化、模糊、纹理等能做出3d效果的元素·确保图标可读性，认知度要强，相应的图标配对相应的功能第一章（2~3天）第一章（2~3天）手把手教你绘制酷炫有型的火箭图标·绘制机体（布尔运算）·绘制机翼（注意切换点）·长投影绘制，以及细节修饰布尔运算临摹以下的一套风格的图标本章

3、导读第二章（1~2天）本章主要授课内容·本章主要学习如何绘制单色矢量图标（icon）·单色适量图标制作的规范要求·教学生绘制一套（不少于15个）单色矢量图标，方法技巧及注意事项·评讲学生作业并辅导学生完成修改第二章（1~2天）·教学生如何绘制一组单色适量图标（线形）+（单色扁平）·在PS里，灵活针对○□-△等图形进行布尔运算（相交、相减、相加等）以实现上面的图标效果；·钢笔工具——绘制路径、路径选择工具——调整路径大小使用直接矛点选择工具——调整矛点位置、转角工具——调整路径圆角和角度使用·记住三点：一是形状工具及填充，二是描边效果，三是用钢笔锚点工具删除无用

4、路径轻松画线形图标之——wifi图标第二章（1~2天）画七个圆平均分布居中对齐形状拼合并做布尔运算将一个正方形翻转45°后对齐圆形中心并做布尔运算完成布尔运算根据上一页讲的方法绘制以下图标第三章（4~5天）本章导读本章主要授课内容·本章主要学习如何绘制拟物风格图标（icon）·拟物图标制作的规范要求·教学生绘制一套（不少于6个）拟物图标，方法技巧及注意事项·重点在于细节、明暗对比、透视关系上·评讲学生作业并辅导学生完成修改第三章（4~5天）·教学生如何绘制一组拟物风格图标·通过绘制拟物风格图标，了解图层样式的各种表现方式·临摹一款拟物风格图标，学会进行图层拆解

5、，然后分步绘制，提高绘图效率·拟物风格的图标最能够锻炼设计师的艺术造型能力，对质感的表现要求较高·可用ps或是ai进行绘制第三章（4~5天）绘制写实的质感收音机①图层分解外框扬声器频道音量/指示灯第三章（4~5天）绘制写实的质感收音机①制作木头纹理：创建新新图层，填充木头色。工具栏选择“滤镜>渲染>纤维”，调整合适的差异及强度；并绘制边框→②完善边框②分步绘制-外边框③分步绘制-扬声器②绘制扬声器，设置图层样式并下载扬声器网格的图案（MetalMeshPatterns-Pack）进行图案叠加→第三章（4~5天）绘制写实的质感收音机五个不同大小且不同图层样式的圆

6、一层一层叠加起来，实现频道的效果，此处注意渐变、阴影、斜面和浮雕、描边等效果的配合使用④分步绘制-频道⑤分步绘制-音量、指示灯、标志音量和标志的绘制手法跟频道类似指示灯用到外发光效果最后收尾进行细节完善第三章（4~5天）绘制药片①图层分解药板底壳药丸第三章（4~5天）②分步制作-药板绘制药片图层样式：渐变、内投影不同大小及不同图层样式的圆角矩形叠加了解如何使用“羽化”功能用到渐变叠加、投影、外发光等图层样式③分步制作-底壳第三章（4~5天）绘制药片完成最上一层的药丸绘制，重点表现光的质感，高光跟阴影需要对应，要让药丸显得更加真实细腻有质感④分步制作-药丸第四章

7、（4~5天）本章导读本章主要授课内容·本章主要学习如何进行PC端界面设计·网页设计的类别，以及不同风格网页设计的规范·优秀网页设计的配色方案·版式设计：讲解网页设计构图原则·浅谈响应式网页设计·学生临摹网页设计，并指导其完成网页配色方案：依次提取的三个颜色组成版面再次进行练习。首先是红砖和天空。天空蓝因为蓝色自身冷色的隐退性被作为了底色。砖红色以暖色鲜亮的特征被用在蓝色的上层。最后，碳黑色的标题在底色的强烈对比下使信息更为明显。F模式·用户极少逐字阅读文字。·每个段落的开始两个字最为重要，这将决定内容是否能留住用户。·初始段落，副标题和要点都要保持醒目。Z模式

8、Z模式几乎可以适用到任何的网页交互，Z