UI设计——创意表达与实践全套配套课件肖文婷配套 教学课件2-5 写实图标的绘制.ppt

《UI设计——创意表达与实践全套配套课件肖文婷配套 教学课件2-5 写实图标的绘制.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、写实图标的绘制授课教师：肖文婷写实图标，以拟物为基础进行图形创意，强调图标极强的真实感与质感表现。拟物化设计是为了模拟真实的物理世界。通常，这需要设计的在线应用的形式看起来像真实世界的变体，比如像电子合成器软件，做的像键盘。这种界面的设计方式，在过去几年的界面设计风格中占据了主导的地位。但是写实图标并不是画得跟照片一样，而是让创造的图标比较逼真，又超越真实，比如圆形的蜡烛台、木质的便签条、发光质感的信封等。一组写实图标设计绘制立体写实图标主要包括以下8个要素：Perspective（透视）LightSource（光源）Shadow

2、s（阴影）Color&Saturation（颜色和饱和度）SizeRequirements（尺寸要求）Detail（细节-纹理质感）IconDevelopment（图标流程）UIContextExamples（用户界面）注意：一般绘制系统图标时，先画一个512px最大尺寸的，然后其他大于32px尺寸直接缩小。从大尺寸到小尺寸，图标要一样清楚。大尺寸图标意味着很多细节，绘制小图标时省略不需要的细节，在16px或12px等尺寸时使用正视，去掉复杂的细节，变得更简洁，只要能看出隐喻即可。【写实图标绘制要素】成套系统写实图标绘制写实图

3、标的流程大致如下：1、尽量找具有参考价值的照片和图片。2、归纳出造型重点、提炼颜色、纹理细节。3、有重点性的夸张造型和构图表现。4、概念草稿3-20张，各个角度，各种组合。5、勾轮廓线——填充固有色——暗部阴影——高光——叠纹理——扣细节——环境色添加。6、包装发布（加上漂亮的背景色）。【写实图标绘制注意事项】写实相机图标过程图【绘制写实皮包图标实例】自定义磨砂纹理图案绘制背景底图绘制皮包底面绘制皮包底面第二层绘制皮包中间矩形线绘制皮包中间矩形线绘制皮包中间线细节皮包中间线细节完成绘制皮包下部皮革形状添加皮包下部皮革机理添加皮包下部皮革

4、机理添加皮包下部皮革缝线效果细化皮包下部皮革部分皮包中间皮革部分绘制皮包盖形状绘制皮包盖形状绘制皮包盖缝线绘制皮包盖缝线绘制皮包盖细节绘制皮包带形状绘制皮包带缝线绘制皮包带上的圆孔绘制皮包带横扣形状绘制皮包带横扣皮质纹理绘制皮包带横扣上的圆扣绘制皮包带横扣上的圆扣完成圆扣及绘制皮包带横扣上的金属扣图层蒙版隐藏被遮挡部分金属扣部分完成写实皮包图标完成稿Thanks