《UI图标设计时钟ppt课件》由会员分享，可在线阅读，更多相关《UI图标设计时钟ppt课件（30页珍藏版）》请在金锄头文库上搜索。
1、图标设计时钟UI黄王龙HWLONGUI的概念的概念什么是UI什么是UI设计拟物设计扁平设计什么是UI?UI即UserInterface（用户界面）的简称是指用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等什么是UI设计?UI设计不是美工，也不是美术绘画，需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。对软件的人机交互、操作逻辑、界面美观的整体设计，UI设计主要分类有平面设计、WEB前端设计、移动端设计、交互设计，主要注重用户的交互体验。原则：1、置界面于用户的控制之下；2、减少用户的记忆负担；3、保持界面的一
2、致性。拟物设计模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可适当程度变形和夸张，界面模拟真实物体，拟物设计会让你第一眼就认出这是个什么东西。交互方式也模拟现实生活的交互方式。拟物化设计的优点：1、认知和学习成本低，外婆级的人也能看懂IOS里面几乎所有原生应用的图标；2、各种按钮的视觉质感和按下去之后的交互效果，养成用户对这类“东西”的统一认知和使用习惯；3、人性化的体贴：我相信有很多同学都非常喜欢ibooks的体验，用它来阅读确实是一种享受。拟物化设计的缺点：大多数拟物化界面并没有实现功能化，只有花费大量的时间在视觉的阴影和质感效果。扁平设计摒弃高光、阴影等
3、造成透视感的效果，通过抽象、简化、符号化的设计元素来表现。界面上极简抽象、矩形色块、大字体、光滑、现代感十足，让你去体会这是什么东西。其交互核心在于功能本身的使用，所以去掉了冗余的界面和交互。扁平化的优点：1、简约而不简单，搭配一流的网络、色彩设计，让看久了拟物化的用户感觉焕然一新；2、突出内容主题，减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰，让用户更加专注于内容本身，简单易用。3、设计更容易，优秀扁平的设计只需保证良好的架构、网络和排版布局，色彩的运用和高度一致性。扁平化设计的缺点需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。效果图重点绘图工具重点绘图工具形状工具：形状工
4、具：圆形工具，圆角工具，矩形工具PS图像处理应用A图层效果（难点）图层效果（难点）投影、渐变叠加、浮雕效果、内阴影，外发光、图层叠加等投影、渐变叠加、浮雕效果、内阴影，外发光、图层叠加等B滤镜功能（难点）滤镜功能（难点）添加杂色添加杂色 动感模糊动感模糊C效果图分解木纹底盘凹盘白盘刻度指针反光环境光绘制底盘一1.新建800X800像素的文档2.选择工具箱圆角矩形工具，属性栏上的半径改成50像素，绘制正圆角矩形,填充成黑色。绘制底盘一3.设置底盘图层样式效果：投影投影参数参数渐变渐变叠加叠加绘制底盘一4.设置底盘图层样式效果：浮雕浮雕参数参数设置投影、颜色叠加设置投影、颜色叠加浮雕后，得到如下效
5、果：浮雕后，得到如下效果：增加底盘木纹二5.通过滤镜增加木纹效果：新建图层，按住Ctrl键，点刚画出来的圆角矩形载入选区，填充深黄色，选择“滤镜杂色添加杂色”，然后锁定图层，点“滤镜模糊动感模糊”添加杂色添加杂色 动感模糊动感模糊 增加底盘木纹二6.把木纹图层的透明度改为“50%”，图层模式为“叠加”，效果如下：二绘制凹盘二1.用椭圆形状工具，按Shift，绘制一个正圆行，如图：（什么颜色都可以）三2.设置图层样式：外发光：外发光：绘制凹盘二三3.继续图层样式：渐变叠加：渐变叠加： 内阴影：内阴影： 效果如图：效果如图：绘制凹盘二三4.复制刚才做好的图层，按住“Ctrl+T”选中，再按“Shi
6、ft+Alt”往中间缩放，调整“内阴影”参数，如图：效果如图：效果如图： 图层图层绘制白盘二四1.再次复制一个上面做好的圆形图层，缩放一点，然后调整“渐变叠加渐变叠加”图层效果，如图： 绘制刻度二五1.新建图层，用“矩形矩形形形状工具状工具”绘制一个小长方形，填充红色，如图： 2.按住“Shift+Alt”复制一个，拉到下面，如图： 3.选中两个图层，按“Ctrl+E”，把它们合并成一个图层。如图： 绘制刻度二五4.复制一个刚才合并的刻度图层5.按”Ctrl+T” ，在属性栏上把旋转角度改为30度。 6.按回车键确定，然后按”Ctrl+Shift+Alt+T”连续按4次，如图： 绘制刻度二五7
7、.把斜角刻度填充成黑色，给刻度添加浮雕样式，如图：投影：投影：浮雕：浮雕： 绘制指针六1.用矩形工具绘制厂方形大小不同的指针，添加投影，如图：投影参数：投影参数： 绘制反光七1.利用白色盘载入选区，新建图层，填充白色，选中”选框工具选框工具”,移动选框，然后按“Delete”删除,如图： 利用白色盘载入选区新建图层，填白色移动选区，删除绘制反光七2. 前景色为黑色，添加图层蒙版，用画笔（画笔透明度为20%），轻轻的在蒙版上涂画，白边遮蒙掉，效果如图： 蒙版图层效果绘制环境光八1. 新建图层，画两个方形 2. Ctrl+t自由变形，按“Ctrl+Shift+Alt” ，用鼠标把两个方形拉成倒梯形，如图： 3. 右键，点“变形”，或者点属性栏上的“变形”图标，把上面拉弯，如图 绘制环境光八1. 把变形好的梯形移到合适的位置，图层透明度为图层透明度为50%，添加蒙版，用画笔（降低透明度）轻轻覆盖一点。如图： 根据以上分解，我们通过一层一层来做效果，最后加在一起就成了最后的效果。当大家掌握的这种方法当大家掌握的这种方法，我们就可以做出其他效果的时钟或者按钮等。
