UI设计-【第1节】UI设计，了解一下

一、实例 苹果手机天气界面
1、状态栏高度：40px（750*1334：苹果6、7、8的尺寸）；
用矩形工具绘制高度40px的矩形，全选界面获得选区-选中矩形工具所在图层点击顶部对齐和居中对齐；将状态栏置入，按住Ctrl点击矩形工具所在图层获得选区，点击状态栏所在图层点击居中水平、垂直居中对齐；
2、背景：渐变
Ctrl+？ ：锁定图层，防止拖动
3、流星雨：透明渐变（填充：0）
绘制圆角矩形-图层样式-渐变叠加-色标吸取相同的颜色，第二个色标的不透明度降为0，调整缩放可控制圆角矩形透明渐变的大小，点击绘制圆角矩形所在图层，填充降为0；点击属性-调整羽化，可改变流星雨的模糊程度
4、闪电：钢笔勾勒
5、雨滴：椭圆+转换点工具
绘制正圆-选择小白工具-拖拽上面锚点-选择钢笔工具下的转换点工具-点击拖拽的锚点，更改描边线条的格式使得锚点更圆润，复制，删除部分锚点

6、波纹（3层）：上面2层（勾勒+填充白色+降低不透明度）

7、下雨：圆形+圆角矩形
绘制圆形和圆角矩形，Ctrl+E 合并

8、太阳：旋转复制：alt+ctrl+shift+t
绘制正圆-绘制圆角矩形 按Ctrl+T 变形 移动中心点至正圆的中心点 旋转45°，再按 alt+ctrl+shift+t 旋转复制

9、剪切蒙版：ctrl+alt+g /ALT+鼠标左键点击
红色选项卡：
绘制矩形添加渐变叠加和内阴影的图层样式
复制闪电 - ALT+鼠标左键点击创建剪贴蒙版 因为矩形有渐变叠加 会保持在矩形最上方 所以闪电不显示
右击矩形所在图层缩略图的 fx, 创建图层，会将矩形的两个图层样式创建两个单独的图层，这样闪电置于上方就会显示

二、实例 蓝牙
1、绘制同心圆，再绘制正圆，其中四分之一置顶于同心圆，将同心圆打组，给正圆创建剪贴蒙版，可以隐藏多余部分只显示四分之一；正圆填充颜色之后创建图层蒙版，用画笔工具在蒙版上涂抹，前景色调为黑色，调整不透明度可以涂抹掉颜色；前景色调为白色，可以将颜色复原；调整羽化值可以增加模糊