移动UI设计与制作 第2篇 项目3 质感图标设计.pptxVIP

第2篇 图标设计篇项目3 质感图标设计任务1 微质感—塑料质感图标设计项目3 质感图标设计 质感是指人的感觉系统由于视觉刺激对材料做出的反应，是人对材料的生理和心理活动，是人们感觉器官对材料的综合印象。质感在现代设计中的作用越来越大，它不仅丰富了设计内容的视觉形态语言，也提升了设计内容的视觉传达性。质感图标的设计就是通过人为表现的视觉效果，来唤起贮存于人们脑际中的对已往生活体验的联想，产生丰富的审美感受，这也是质感被应用于设计中的魅力所在。案例展示：任务1 微质感—塑料质感图标设计任务1 微质感—塑料质感图标设计1.设计要点（1）设计思路：制作插座效果，灵感来自家用插座，整体方形，色彩用的灰色渐变，加上蓝色光带装饰，增加了作品的科技感。任务1 微质感—塑料质感图标设计（2）表现技巧：塑料质感的表现，着光面有块状高光，对应的有反光，整体有清晰的边缘，颜色有明暗变化，加上浮雕、投影效果增加立体感，细节部分用到了内阴影、内发光等技法。（3）技能提炼: ·使用矢量形状工具绘制基本图形·使用图层样式对图层调节任务1 微质感—塑料质感图标设计2.操作步骤步骤01：打开photoshop软件，单击【文件】菜单【新建】命令，新建一个800x600像素、分辨率为72像素/英寸的画布，背景色填充为白色（#ffffff），设置如图3-1-3所示。步骤02：选择【圆角矩形工具】工具，单击画布，创建一个圆角矩形，尺寸为290x290像素，圆角半径为50像素，如图3-1-4所示。任务1 微质感—塑料质感图标设计设置圆角矩形填充色为#d8d8d8，如图3-1-5所示。任务1 微质感—塑料质感图标设计步骤03：在图层面板为圆角矩形添加斜面和浮雕效果、渐变叠加效果,如图3-1-6所示。任务1 微质感—塑料质感图标设计斜面和浮雕效果参数设置如图3-1-7所示。任务1 微质感—塑料质感图标设计渐变叠加效果参数设置如图3-1-8所示，设置完成如图3-1-9所示。任务1 微质感—塑料质感图标设计步骤04：选择【椭圆工具】创建一个新的形状图层，绘制出210x210像素的圆形，在图层面板添加渐变叠加效果，渐变色值为#ffffff到#d4d4d4，如图3-1-10所示，完成效果如图3-1-11所示。任务1 微质感—塑料质感图标设计步骤05：选择【椭圆工具】创建一个新的图层，绘制出196x196像素的圆形，填充颜色值#2ebefa。复制该图层，使用自由变换工具（组合键Ctrl+T）缩放圆形大小为190x190像素，中心对齐两个圆形图层，如图3-1-12所示，按组合键ctrl+e合并两个图层，再把合并后的图层与下一图层也做中心对齐处理。任务1 微质感—塑料质感图标设计步骤06：选择【路径选择工具】单击选择小圆路径，在属性栏单击【路径操作】按钮，选择【减去顶层形状】选项，效果如图3-1-14所示。任务1 微质感—塑料质感图标设计选择该图层，打开属性面板，在实时形状属性里调节填充色为#28c5ff，在蒙版属性中调节羽化值为2.5像素，如图3-1-15所示。样式效果如图3-1-16所示。任务1 微质感—塑料质感图标设计步骤07：选择【椭圆工具】创建一个新的图层，绘制出190x190像素的圆形，填充颜色值值为#e6e6e6，中心对齐所有图层。为新建图层添加斜面和浮雕、渐变叠加、投影图层样式，参数设置如图3-1-17、3-1-18、3-1-19所示。任务1 微质感—塑料质感图标设计任务1 微质感—塑料质感图标设计图层样式参数设置完成效果图，如图3-1-20所示。任务1 微质感—塑料质感图标设计步骤08：选择【椭圆工具】创建一个新的图层，绘制出54x54像素的圆形，填充颜色值值为#d8d8d8，添加图层样式渐变叠加，颜色由#f6f6f6至#c2c2c2，凹坑效果如图3-1-21所示。任务1 微质感—塑料质感图标设计再选择【矩形工具】创建一个新的图层，绘制出宽度为8像素，高度42像素的矩形，填充颜色值值为#313131，添加图层样式渐变叠加，颜色由#373737至#141414，颜色渐变作为插座上插孔，图层不透明度调节成70%，再复制出两个矩形，调整位置，插孔效果如图3-1-22所示。任务1 微质感—塑料质感图标设计步骤09：选择【椭圆工具】，创建一个新的图层，绘制14x14像素的圆形，填充色设置为无，描边颜色值为#28c5ff，描边宽度为2像素，制作蓝色指示灯效果如图3-1-23所示。任务1 微质感—塑料质感图标设计添加文字图层，输入文字“stuefim”，字体为方正粗宋简体，字号为18像素，文字效果如图3-1-24所示。任务1 微质感—塑料质感图标设计添加图层样式内阴影、渐变叠加和投影，参数设置如图3-1-25、3-1-26、3-1-27所示。任务1 微质感—塑料质感图标设计选择【圆角矩