第5章立体图标的绘制案例1-资料
教学课件2-5 写实图标的绘制
写实相机图标过程图
【绘制写实皮包图标实例】
自定义磨砂纹理图案
绘制背景底图
绘制皮包底面
绘制皮包底面第二层
绘制皮包中间矩形线
绘制皮包中间矩形线
绘制皮包中间线细节
皮包中间线细节完成
绘制皮包下部皮革形状
添加皮包下部皮革机理
添加皮包下部皮革机理
添加皮包下部皮革缝线效果
细化皮包下部皮革部分
Hale Waihona Puke 皮包中间皮革部分绘制皮包盖形状
绘制皮包盖形状
绘制皮包盖缝线
绘制皮包盖缝线
绘制皮包盖细节
绘制皮包带形状
绘制皮包带缝线
绘制皮包带上的圆孔
绘制皮包带横扣形状
绘制皮包带横扣皮质纹理
绘制皮包带横扣上的圆扣
绘制皮包带横扣上的圆扣
完成圆扣及绘制皮包带横 扣上的金属扣
图层蒙版隐藏被遮挡部分
金属扣部分完成
写实皮包图标完成稿
Thanks
成套系统写实图标
注意：一般绘制系统图标时，先画一个512px最大尺寸的，然后其他大于32px尺寸
直接缩小。从大尺寸到小尺寸，图标要一样清楚。大尺寸图标意味着很多细节，绘 制小图标时省略不需要的细节，在16px或12px等尺寸时使用正视，去掉复杂的细 节，变得更简洁，只要能看出隐喻即可。
【写实图标绘制注意事项】
一组写实图标设计
【写实图标绘制要素】
绘制立体写实图标主要包括以下8个要素： • • • • • • • • Perspective（透视） Light Source（光源） Shadows（阴影） Color & Saturation（颜色和饱和度） Size Requirements（尺寸要求） Detail（细节-纹理质感） Icon Development（图标流程） UI Context Examples（用户界面）
Photoshop经典应用实例0149：立体勾选框图标制作
Photoshop经典应用实例0149：立体勾选框图标制作设计关键词：图标立体软件功能提要：图层样式、钢笔工具立体勾选框图标是手机上经常使用的工具图案，该类图标的设计要求干净利落的线条和形状，以便让用户看到图标能感知、想象、理解图标的含义。
Step01：执行【文件】→【打开】命令，或按下【Ctrl+O】快捷键，在弹出的“打开”对话框中选择“素材文件01.jpg”文件，单击“确定”按钮打开，如图5-30所示。
图5-30 打开素材文件Step02：单击工具栏中的“钢笔工具”按钮，在工具选项栏中选择工具的模式为“形状”，设置设置填充颜色为蓝色，其RGB 值为：110、235、235，绘制形状，如图5-31所示。
图5-31 绘制形状Step03：单击工具栏中的“钢笔工具”按钮，在工具选项栏中选择“减去顶层形状”，绘制形状，得到“形状1”图层，如图5-32所示。
图5-32 绘制形状Step04：双击新生成的“形状1”图层，在弹出的“图层样式”对话框中勾选“斜面和浮雕”、“内阴影”和“渐变叠加”复选框，并进行如图5-33所示的参数设置，编辑的图像效果如图5-34所示。
（a）设置“斜面和浮雕”（b）设置“内阴影”（c）设置“渐变叠加”图5-33 设置图层样式参数图5-34 设置图层样式Step05：新建一个图层，单击工具栏中的“钢笔工具”按钮，在工具选项栏中选择工具的模式为“形状”，设置设置填充颜色为黑色，其RGB值为：0、0、0，绘制形状，得到“形状2”图层，将“形状2”图层移动到“形状1”图层下方，如图5-35所示。
图5-35 绘制形状Step06：双击新生成的“形状2”图层，在弹出的“图层样式”对话框中勾选“斜面和浮雕”和“渐变叠加”复选框，并进行如图5-36所示的参数设置，编辑的图像效果如图5-37所示。
（a）设置“斜面和浮雕”（b）设置“渐变叠加”图5-36 设置图层样式参数图5-37 设置图层样式Step07：新建一个图层，单击工具栏中的“钢笔工具”按钮，在工具选项栏中选择工具的模式为“形状”，设置设置填充颜色为黑色，其RGB值为：0、0、0，绘制形状，得到“形状3”图层，将“形状3”图层移动到“形状2”图层下方，如图5-38所示。
ProE4.0标准实例教程第5章
第5章基础特征的创建本章将介绍的内容如下：(1)创建拉伸特征的方法和步骤(2)创建旋转特征的方法和步骤(3)创建扫描特征的方法和步骤(4)创建混合特征的方法和步骤5.1 拉伸特征的创建拉伸特征是将二维特征截面沿垂直于草绘平面的方向拉伸而生成的特征。
调用命令的方式如下：菜单：执行“插入”|“拉伸”命令。
图标：单击“基础特征”工具栏中的图标按钮。
5.1.1 创建增加材料拉伸特征操作步骤如下：第1步，在零件模式中，单击图标按钮，打开“拉伸特征”操控板，如图5-1所示。
图5-1 ”拉伸特征“操控板第2步，在该操控板中，单击“拉伸为实体”图标按钮（此为默认设置）。
第3步，单击“放置”按钮，在弹出的上滑面板中，单击“定义”按钮，如图5-2所示，弹出“草绘”对话框。
第4步，选择TOP基准平面为草绘平面，RIGHT基准平面为参照平面，参照平面方向为向右（此为默认设置），如图5-3所示，单击“草绘”按钮，进入草绘模式。
图5-2 “放置”上滑面板图5-3 设置草绘平面和参照平面第5步，草绘二维特征截面并修改草绘尺寸值，如图5-4所示，待重生成草绘截面后，单击图标按钮，回到零件模式，如图5-5所示。
第6步，在“拉伸特征”操控板中，指定拉伸特征深度的方法为“盲孔”（此为默认设置），输入“深度值”为100，如图5-6所示，单击图标按钮。
图5-4 二维草绘截面图5-5 创建拉伸特征图5-6 输入拉伸深度值5.1.2 创建去除材料拉伸特征操作步骤如下：第1步～第３步，同本书第5.1.1小节第1步～第３步。
第4步，选择零件上表面为草绘平面，RIGHT基准平面为参照平面，参照平面方向为向右（此为默认设置），如图5-7所示，单击“草绘”按钮，进行草绘模式。
第5步，草绘二维特征截面并修改草绘尺寸值，如图5-8所示，待重生成草绘截面后，单击图标按钮，回到零件模式。
草绘平面参照平面图5-7 选择草绘平面和参照平面图5-8 二维特征截面第6步，在“拉伸特征”操控板中，单击“去除材料”图标按钮。
第五章_用例图
5.2.1 参与者
❖ 参与者有三大类：
第一类参与者是真实的人，即用户，是最常见的 参与者，几乎存在于每一个系统中。
用例执行期间可能发生的各种情况。 用例是一个完整的描述。若其被分解成多个小用
例，则仅当所有的小用例完成后才代表整个用例的 完成。
2. 用例的识别
❖ 任何用例都不能在缺少参与者的情况下独立存在。 同样，任何参与者也必须要有与之关联的用例。 所以识别用例的最好方法就是从分析系统参与者 开始，在这个过程中往往会发现新的参与者。
❖ 用例图只是从总体上大致描述了系统所提供的各 种服务，让用户对系统有一个总体的认识。
❖ 对于每一个用例，我们还需要有详细的描述信息， 以便让别人对于整个系统有一个更加详细的了解， 这些信息包含在用例规约之中。
3. 用例规约
❖ 每一个用例的用例规约都应该包含以下内容： (1)简要说明：对用例作用和目的的简要描述。 (2)事件流：事件流包括基本流和备选流。基本流 描述的是用例的基本流程，是指用例“正常”运 行时的场景。备选流描述的是用例执行过程中可 能发生的异常和偶尔发生的情况。
第二类参与者是其他的系统。这类位于程序边界 之外的系统也是参与者。
第三类参与者是一些可以运行的进程。如时间， 当经过一定的时间触发系统中的某个事件时，时间 就成了参与者。
5.2.1 参与者
❖ 参与者虽然代表人或事物，但参与者不是指人或 事物本身，而是表示人或事物当时所扮演的角色。
❖ 一个用例的参与者可以划分为发起参与者和参加 参与者。发起参与者发起了用例的执行过程，一 个用例只有一个发起参与者，但可以有若干个参 加参与者。
第五章 绘图和编辑工具的使用
第五章 绘图和图像的修整Photoshop 有两大功能，绘制图像和处理图像。
要实现这两大功能，就需要学习绘制和处理图像工具的使用。
第一节 绘图和处理图像的基础知识一、 设置前景色和背景色选取颜色是绘制图像关键，只有选取了合适颜色，才能达到理想效果。
选取颜色进行绘图需要借助于吸管工具、前景色和背景色以及颜色和色板控制面板配合使用。
Photoshop 使用前景色绘画、填充和描边选区，使用背景色生成渐变填充。
默认前景色是黑色，背景色是白色。
工具箱中的“前景色”框和“背景色”框当前前景色显示在上部颜色框中，背景色显示在下部框中。
要更改前/背景色，单击上/下部颜色选区框会弹出拾色器，在该对话框这设置前景色或背景色的颜色。
恢复默认的前景色和背景色，单击工具箱中的“默认颜色”图标。
反转前景色和背景色：单击 “切换颜色”图标 。
二、 颜色面板颜色面板显示当前前景色或背景色的颜色值。
使用“颜色”调板中的滑块，可以根据几种不同的颜色模型编辑前景色和背景色。
也可以从显示在调板底部的四色曲线图中的色谱中选取前景色或背景色。
三、 调色面板A. 前景色框B.默认颜色图标C. 切换颜色图标D.背景色框提供Windows 256色彩模式的色样。
把鼠标移至调色板时，鼠标显示为吸管形状，单击会选定此颜色为当前的前景色。
将颜色添加到“色板”调板，用吸管从一幅图像中选择颜色，当鼠标移至面板空白处，鼠标变为油漆桶，单击鼠标，前景色存入面板中。
“色板”调板中删除颜色，将色板拖移到“回收站”按钮。
按住 Alt 键将指针放置在色板上（指针变成剪刀状）并单击。
四、样式面板新建一幅图像，选择“自定义图形”按钮，绘制圆形，选择属性面板的形状图形，单击样式按钮，选择不同的样式以显示出不同效果。
新建样式：用鼠标单击样式面板空白处，鼠标变成油漆桶后单击可将当前新样式存入样式面板中，在弹出对话框进行命名。
删除预设样式：将样式拖移到样式调板的“回收站”。
制作3D立体图标的方法
制作3D立体图标的方法Photoshop是一款功能强大的图像处理软件，它不仅可以进行图像编辑和美化，还可以制作出令人惊艳的3D立体图标。
下面，我将介绍一些制作3D立体图标的简单方法。
首先，打开Photoshop软件并创建一个新的文档。
选择合适的画布大小，一般建议选择300像素/英寸的分辨率，以确保图标的清晰度。
接下来，选择一个合适的背景颜色或添加背景图像。
可以使用渐变工具或填充工具来添加背景。
考虑到3D效果的突出，建议选择亮鲜的颜色或渐变色。
现在，我们将制作图标的底座。
选择矩形工具，并在画布上创建一个矩形。
确保底座足够大，以容纳图标的其他元素。
接着，选择“图层样式”选项，单击“生成效果”旁边的“+”按钮。
选择“斜面”选项，并根据自己的需求调整斜面的颜色、角度和高度。
使用阴影和高光的组合，可以增加图标的立体感。
接下来，我们制作图标的主体。
选择合适的形状工具，如圆形工具、矩形工具或多边形工具。
在画布上绘制所需的形状，并使用填充工具或渐变工具来添加颜色。
然后，选择图标的效果。
在“图层样式”选项中，单击“生成效果”旁边的“+”按钮，选择合适的效果，如内发光、倒角、描边等。
调整效果的参数，使其符合预期的效果。
现在，我们将添加图标的细节。
可以使用文本工具添加文字或数字，也可以使用笔刷工具在图标上绘制图案或纹理。
考虑到3D效果，建议选择合适的字体和图案，以突出立体感。
最后，我们将添加阴影效果。
选择相应的图层，并在“图层样式”选项中选择“阴影”。
调整阴影的参数，使其看起来自然且符合3D效果。
如果需要，可以添加多个阴影效果，以使图标看起来更加逼真。
完成以上步骤后，可以对图标进行进一步的调整和优化。
可以使用各种工具和滤镜进行颜色调整、边缘增强、锐化等处理，以使图标看起来更加生动和精致。
最后，保存图标为所需的格式，如PNG、JPEG或ICO等。
可以选择透明背景或不同尺寸的图标，以适应不同平台和设备的需求。
制作3D立体图标是一项需要一定技巧和耐心的工作。
立体图标制作方法
查看文章制作立体效果的软件图标2008-07-04 14:29制作工具：Fireworks MX 20041、用"钢笔"工具配合其他矢量工具画出图标轮廓路径2、菜单：编辑->克隆、修改->变形->垂直翻转，将变形后的路径移动到原始路径下方，全部选中，菜单：修改->组合3、选择"倾斜"工具，按住右上的控制点往下拖动，然后按住右中的控制点往上拖动，大概是往下拖动距离的一半4、鼠标在画布空白的地方点一下，再选中组合路径，选择"缩放"工具，按住左中的控制点往右拖动5、菜单：编辑->克隆、选中下面的组合路径，选择"缩放"工具，按住上中的控制点往下拖动，再按住左中的控制点往右移动，大概和往下拖动的距离一样，然后将组合路径向左上移动到适当位置6、选中所有组合路径，菜单：修改->取消组合，现在图标和倒影的前后两面就做好了，下面做侧面7、侧面要用到前后两面的部分边角，可以先用菜单：编辑->克隆前后面，再使用"部分选定"工具进行变形配合菜单：修改->组合路径->打孔得到侧面，对于有圆弧的地方，可以先用"钢笔"工具在公切线切点位置增加一个辅助点8、上色9、倒影制作方法相同，不过只需要制作与图标接近部分，选中倒影部分，菜单：修改->平面化所选，命令->创意->图像渐隐，鼠标按住渐进线下端移动，使渐进线大致于图标底部垂直，然后按住上端将渐进线向上移，使倒影部分只显示上面一点就可以了10、阴影是用后面使用"倾斜"工具和"缩放"工具变形产生，阴影填充选黑色（#000000），边缘：羽化15，不透明度70%，笔尖大小：0小弟第一次写教程，语言组织能力不强，如果有不懂的地方可以下载下面这个源文件研究：。
图标绘制
实例五：绘制线状图标（书签）（1）“CTRL+K”打开首选项对话框，选择“参考线、网格和切片”，将网格线间隔设为25像素，点击“确定”按钮，如图所示。
点击菜单“视图> 显示> 网格”，在画布上显示网格。
（2）点击菜单“文件> 新建”或者快捷键“CTRL+N”，打开一个新建画布对话框，大小设为200像素×200像素，分辨率是72像素/英寸。
（3）鼠标左键点击工具箱上的“圆角矩形工具”，在如图所示的位置上画一个圆角矩形，圆角的大小是10像素。
（4）和前面的例子一样，使用“路径选择工具（黑箭头）”选择该圆角矩形，“工具选项栏上”的“填充”设定为“无颜色”，描边设定为“纯色”，粗细为3点。
（5）使用“直接选择工具（白箭头）”选择该圆角矩形右下角的一个锚点，向下拖到下方对称的位置，如图所示。
（6）使用“路径选择工具（黑箭头）”选择变形后的圆角矩形，快捷键“CTRL+ALT+T”复制图形并且进入自由变换状态，鼠标左键点击菜单“编辑>变换路径>水平翻转”,再将变换后的图形，向右拖到适当的位置，结果如图所示。
实例六：绘制线状图标（购物车）（1）“CTRL+K”打开首选项对话框，选择“参考线、网格和切片”，将网格线间隔设为25像素，点击“确定”按钮，如图所示。
点击菜单“视图> 显示> 网格”，在画布上显示网格。
（2）点击菜单“文件> 新建”或者快捷键“CTRL+N”，打开一个新建画布对话框，大小设为200像素×200像素，分辨率是72像素/英寸。
（3）鼠标左键点击工具箱上的“矩形工具”，在如图所示的位置上画一个矩形。
（4）和前面的例子类似，使用“路径选择工具（黑箭头）”选择该矩形，“工具选项栏上”的“填充”设定为“无颜色”，描边设定为“纯色”，粗细为8点。
（5）使用“直接选择工具（白箭头）”选择该矩形右上角的锚点，向右拖到合适的位置，如图所示。
必要的时候可以使用“方向键”微调。
第5章 绘图设置
图形界限设置好后，只能在已经定义好的界限区 域内绘图
二、设置图层
1、图层的功能
图层类似于完全重合在一起的多张透明纸。利用 AutoCAD软件绘图时，可将不同组成部分按照相同的坐 标系和比例画在不同的透明纸上，这样如果某部分图形 出现错误，可以将图形所在的透明纸（图层）置为当前， 进行相应的编辑和修改，而位于其他图层中的图形则不 会受到影响
二、设置图层
2 命令调用方式
1 工具栏 2 菜单：格式——图层 3 命令行：Layer/LA
3 图层特性管理器
1 新建图层 2 重命名图层 3 删除图层 4 设置图层
二、设置图层
2、设置图层颜色
在“图层特性管理器”对话 框中单击“颜色”特性图标， 在打开的如图所示“选择颜 色”对话框，在该对话框中 选中相应的颜色图标后，单 击按钮即可。
为图层设置了所需的特性后，就可在相应的图层上 绘制图形，但首先应将相应的图层置为当前图层才能在 该层上绘制具有图层特性的实体。在“图层特性管理器” 对话框中选中需置为当前的图层，单击“当前”按钮。 在“图层”工具栏的图层下拉列表框中用户不再使用某些图层，可以将其删除掉。在“图 层特性管理器”对话框中选中要删除的图层，单击按钮即 可将其删除。
三、控制图层状态
3、冻结或解冻图层
图层冻结后，该层上的所有实体将不再显示在屏幕 上，也不能被编辑，不能被打印输出。要对冻结的图层 进行编辑，可将冻结的图层进行解冻，以恢复到图层原 来的状态。冻结图层与关闭图层的区别在于，冻结图层 可以减少系统重生成图形的计算时间。
三、控制图层状态
4、设置当前图层
三、控制图层状态
6、修改实体颜色
《图形界面设计教学资料》第五章 手绘工具2-25页PPT资料
中国职业教育联盟课程体系
20
作业
课后作业
1.太极图形制作。 2.螺旋削皮制作。
2020/10/25
中国职业教育联盟课程体系
21
作业
3.恐龙制作。
2020/10/25
中国职业教育联盟课程体系
22
中国职业教育联盟课程体系 成就百万精英
IT之行，始于足下 感谢观映
2020/10/25
中国职业教育联盟课程体系
2020/10/25
中国职业教育联盟课程体系
9
度量工具
2020/10/25
中国职业教育联盟课程体系
10
常用命令
1、 结合：Ctrl+L把不同的对联象合并在一起，完全变为一个新对象，若有填充，结合后的 对象将显示最后选定的对象属性若框选以最底层的属性一致，且重叠部分为镂空。
2020/10/25
中国职业教育联盟课程体系
2020/10/25
中国职业教育联盟课程体系
2
艺术笔工具
分类：预设、笔刷、喷罐、书法、压力 1、预设
2020/10/25
中国职业教育联盟课程体系
3
艺术笔工具
2、画笔笔触
2020/10/25
中国职业教育联盟课程体系
4
艺术笔工具
3、喷罐
2020/10/25
中国职业教育联盟课程体系
5
艺术笔工具
4、书法
常用命令
4、 相交：在两个或两个以上图形交叠处产生一个新的对象
2020/10/25
中国职业教育联盟课程体系
14
常用命令
5、 简化：可减去后面图形对象中与前面图形对象的重叠部分，并保留前面和后面的图形对 象