黑马程序员技术交流社区
标题: 初识UI设计 [打印本页]
作者: Allrisk 时间: 2018-12-31 23:34
标题: 初识UI设计
今天是2018年12月30日，距离黑马UI基础班开班已经过去22天了，经过这段时间的学习，我渐渐熟知一些关于PS软件的强大功能。对于零基础的我来说，UI设计是一个全新的挑战。为了能够更好的的巩固和迎接新的知识，下面我将对最近的学习做一个总结并且写一些我自己运用到日常学习中的学习方法。
首先我想为大家简单的介绍一下什么是UI设计：UI全称User Interface（用户界面），包括用户的操作界面，包含APP，网页设计等UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。
UI可以让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。设计即创造，想法，思维，适用。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。能在虚拟网络上让人们体验舒适的称为“UI设计师”。
先总结一下最近学过的抠图方法：
快速选择工具组(快捷键：W)
[attach]265886[/attach]
[size=14.0000pt]1. 快速选择工具
功能：快速选择需要载入选区的部分
用法：单击鼠标左键拖动，向外拉扩展选区，在使用过程中根据需要不断调整笔触大小
笔触大小调整方法：“左括号”变小；“右括号”变大，注意调整为英文输入法
2.魔棒工具
功能：可以快速选择背景单一的色彩区域。
容差：选择的颜色范围
连续的注意事项：如果选择连续，那么不连续的颜色将不会被选中
3.钢笔工具
快捷键：P
一般情况下使用该工具多用于抠图，所以在选择这个工具时检查属性栏中应该选择“路径”使用方法
1.直线段绘制
首先选择钢笔工具，判断锚点与下一个描点间是直线还是曲线，如果是直线就点击松开鼠标，以此类推
2. 曲线段的绘制首先选择钢笔工具，判断锚点与下一个描点间是直线还是曲线，如果是曲线段，那么就左键不放拖动鼠标，拖动到路径吻合后松开鼠标，按ALT键在锚点处将多余的控制手柄打断。以此类推操作即可
在掌握三种不同抠图方式的同时，最好和反选功能一起记，这样可以加深记忆。
功能：反方向选择，选择当前选区之外的部分
快捷键：CTRL+SHIFT+I
钢笔工具抠图与选区抠图的区别选区工具
[size=14.0000pt]1.优点：选区抠图非常快，节约时间
[size=14.0000pt]2.缺点：抠出来的效果非常粗糙，不适合产品抠图
钢笔工具
[size=14.0000pt]1.优点：抠图边缘非常平顺，适合产品抠图
[size=14.0000pt]2.缺点：工具需要时间练习方能掌握，抠图较慢
总结完最近一段时间学的抠图方法，我再来归类一下最近学的两个我个人认为最神奇的PS工具：
渐变工具快捷键：G
阐述：渐变工具应用十分广泛，它可以填充到选区或者整个图层、蒙板、通道、叠加到图层，也可以填充形状或者描边渐变工具不能用于索引和位图模式。
渐变编辑器
1.预设区：软件自带的常用渐变库。
2.设置不透明度选择需要设置的不透明度色标，在下面不透明度框中输入数据即可，删除向下拉，添加是点击空白处。
3.设置色标
选择色标，双击或者单击点击颜色更改即可。
4.添加色标在色标轨道上任意位置点击即可添加色标。
5.删除色标选择要删除的色标，向下拖动即可删除。
6.色标的位置选择色标，拖动到合适的位置，也可以输入精确位置数据。
7.复制色标选中色标，点击空白处，也可以按ALT键拖动复制。
形状工具组快捷键：U
特点：在创建形状时，图层上会自动创建一个形状属性的图层
应用领域：网页设计、UI设计、创意插画、电商设计
使用方法：选择工具拖动绘制或者选择工具点击空白处自定义尺寸绘制
注意：通常情况下选择该组工具会选择形状属性
其他选项：[size=14.0000pt]1.形状：绘制一个形状属性的图层，既有颜色又包含路径属性
[size=14.0000pt]2.路径：绘制一个新路径，无色无图层
[size=14.0000pt]3.像素：绘制一个有颜色，无路径的像素层（需要手动新建图层）
形状工具组用的比较多的就是形状的布尔运算，形状的布尔运算在将来的工作中运用也是比较广泛的，例如我们所使用的APP软件图标，或是商业用的图标；
形状的布尔运算[size=14.0000pt]1.新建图层：每绘制一个形状就创建一个形状图层
[size=14.0000pt]2.合并形状：后面绘制的形状一直与前面绘制的形状在一个图层上（按SHIFT键）
[size=14.0000pt]3.减去顶层：用后面的绘制的形状将前面绘制的形状进行减去。（按ALT键）
[size=14.0000pt]4.形状相交：后面绘制的形状与前面绘制的形状重叠的部分保留下来（按ALT+SHFIT键）
[size=14.0000pt]5.排除重叠：后面绘制的形状与前面绘制的形状重叠的部分区域镂空
[size=14.0000pt]6.全并形状组件：将多个路径合并成一个路径，不能再单独修改
7.完成后一定要点击合并形状组件
由于刚入门，学习的进度不是很快，掌握的知识也不够充裕，在帖子的结尾为大家分享一些有关于UI设计的的网站，里面绝大部分的素材都是免费的，希望大家都能成为一名优秀的UI设计师：
优秀设计网站：站酷，ui中国，追波，behance，优设网，人人都是产品经理，大美工。
素材网站：觅元素，千库网，千图网，昵图网，包图网，90设计。
感谢您的阅读！
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
