web UI课堂笔记汇总Word格式.docx
《web UI课堂笔记汇总Word格式.docx》由会员分享，可在线阅读，更多相关《web UI课堂笔记汇总Word格式.docx（12页珍藏版）》请在冰点文库上搜索。
6组的建立ctrl+g（选中需要建组的图层）
删除组的结构ctrl+shift+g
注意：
移动工具选项栏里组和图层的选择
7网页的基本板块划分
头部区域header视觉区域banner主要内容main底部信息footer
8智能对象图层
a缩小后再放大不影响图片的清晰度，选中图层右键选择栅格化图层
B可以记录滤镜、变形参数方便随时修改
9图层的合并选中需要合并的图层ctrl+E
标尺与辅助线
1标尺（视图--标尺）ctrl+R
2吸附作用（视图--对齐）
3标尺右键选择百分比恢复到像素
4隐藏辅助线ctrl+;
5锁定ctrl+alt+;
选区
1选区选项栏样式选择固定大小恢复到正常
2查看单位（窗口--信息f8）
3选区上右键选择变换选区
4取消选区ctrl+D
5选区的布尔运算（shift加选alt减选shift+alt相交）
6载入选区，按住ctrl键点击图层的缩略图
形状工具
1搭建大区块（选项栏选择形状）
2直线按住shift画直线
3多边形工具（选项栏边数设置）
4圆角矩形工具（选项栏半径设置控制圆角弧度）
5路径选择工具-------小黑选择整体路径
6直接选择工具------小白选择独立锚点按住shift加选锚点
7椭圆工具按住shift画正圆
8隐藏路径线ctrl+shift+h
9布尔运算（shift加选alt减选shift+alt相交）
对齐与分布
1对齐选中两个或两个以上图层
2分布选中三个或三个以上图层
字符面板
1文本的创建
A点文本b段落文本
2退出文本编辑状态ctrl+回车
3字号大小ctrl+shift+<
/>
4字行距（大段文本字号1.5到2倍）
Alt+上下方向键
5字间距（大段文本间距为0）
Alt+左右方向键
6像素字在字符面板右下角选择“无”
7中英文混排（先设置中文再设置英文）
段落面板
1避头尾法则：
严格
2首行缩进（字号的两倍）
3段后空格（字号的两倍）
4最后一行左对齐（强制两端对齐）
PC平台网页设计规范
1分辨率72像素/英寸
2颜色模式RGB8位
3网页背景
A纯色平铺（自适应浏览器）
B渐变色或底纹平铺（自适应浏览器）
C通栏大图片宽度1920像素
4屏幕分辨
A标准分辨率1024px/768px有效设计内容宽度1000px首屏高约700px
B常用分辨率1280px/800px有效设计内容宽度1200px首屏高约750px
5设计文档大小
A设计文档宽度只要大于有效设计内容宽（目的表现设计意图展现背景效果建议左右各宽出200px）
B针对通栏大图片设计文档宽度1920px
PC平台字体使用规范
1字体分类
A图形化文字b像素字（系统字）
2系统安全字
中文（宋体微软雅黑黑体）
西文（ArialTimes）
3字号
中文（12px--18px）针对正文内容
西文（12px--16px）针对正文内容最小10px
渐变工具
1类型：
线性径向角度对称菱形
2渐变编辑器
下方色标控制颜色上方色标控制透明度
菱形色标控制渐变中心点
点击添加色标删除色标拖动到下方
3渐变工具选项栏其他属性
A反向b勾选仿色渐变过渡更平滑c勾选透明区域支持渐变编辑器里的透明效果
图层样式
1添加方法：
在选中图层右边空白处双击添加
2复制图层：
选中图层右键选中拷贝图层样式，需添加图层样式的图层上右键粘贴图层样式
鼠标指到效果或fx图标上按alt复制
3上方图层样式会遮挡下方样式
常用属性
1渐变：
可以拖动渐变效果，勾选与图层对齐
2描边：
一般为了避免虚边产生，选择内部描边描边类型：
颜色渐变图案
3投影：
角度（控制光源）注意全局光的选择
扩展（投影的虚化效果）
大小距离
自由变换工具
1编辑--自由变换ctrl+T按住shift等比例缩放
2按住ctrl可以调节图像的形状（斜切扭曲的功能）
3shift+alt沿中心点等比例缩放
4ctrl+shift+alt调节透视功能
5ctrl+T右键选择变形
图案的定义与填充
1定义（编辑--定义图案）
找到适合重复的图形，用选区选中图案范围定义,一般情况透明底色
2填充（编辑--填充--图案）
基本抠图工具
1魔棒工具（针对纯色背景）
容差值越高，相近颜色的容忍范围越大，反之，越小
2钢笔工具（精确造型）
A在抠图选项栏选择路径
B单击产生起始锚点
C左键点住拖动产生贝塞尔曲线
D取消贝塞尔曲线一侧滑竿在锚点上按住alt键点击
E路径转换选区ctrl+回车
F在路径面板中找钢笔路径
G在钢笔工具下按住alt键切换到转换点工具
基本的调色工具（图像---调整）
1色阶ctrl+L调整图片明暗对比关系
暗部滑块向右拖动暗部变暗
亮部滑块向左拖动亮部变亮
灰度滑块向左拖动变亮向右拖动变暗
2曲线ctrl+M精细调色
点击增加锚点，按del删除锚点
3色相/饱和度ctrl+U
可以单独调整图像中某个指定的颜色
4色彩平衡ctrl+B
原理：
在图像中增加某个特定颜色的比重
阴影中间调高光的选择
剪切蒙版
在两个图层的中间按住alt点击
2原理：
通过下方图层的显示范围控制上方图层的显示
3一个下方图层可以剪切多个上方图层
滤镜
1高斯模糊（滤镜--模糊--高斯模糊）
半径值越大越模糊，反之越清晰
图层蒙版
点击图层蒙版小图标
与图层捆绑在一起，用图层蒙版控制原图层的显示范围
白色100%显示图层黑色100%隐藏图层灰色控制透明度
3主要用画笔工具配合使用笔触大小左右中括号键[/]（在英文输入法状态）
4回到默认前景色背景色D切换x
线框图
1内容大纲（有什么）
2信息架构（在哪里）
3层级关系（内容的主次）
4一般单色（黑白灰）
图层调整层
点击调整图层图标
2优点：
a调色参数保留方便随时修改
B针对下方所有可见图层统一调色
C不破坏原图的色彩信息
全屏展示类网站
1应用领域：
汽车、地产、美妆、影视、游戏、个人、活动
2尺寸：
宽度：
1920px高度：
1000px有效设计内容：
宽度1200px
3设计特点：
一屏显示以图为主布局灵活
4必要设计元素
Loading音乐开关全屏按钮内页关闭按钮
5优缺点
优点：
画面展示感强
缺点：
加载速度慢不适合响应式设计
画笔工具
1大小调整左右中括号键（英文输入法）
2大小锁定键控制笔触轮廓显示形态
3画笔面板（f5）
A画笔预设（选择适合画笔）
B间距调整间距大小控制画线还是点
形状动态---大小抖动（随机产生不同大小点）
散布-------勾选双轴随机分散大小点
画笔描边
A新建图层
B调试画笔（选择适合画笔调节大小粗细笔刷形态）
C用钢笔工具勾选适合路径路径面板里工作路径右键选择描边路径（选择画笔勾选模拟压力）
D默认在钢笔工具下按ctrl临时切换到小白按alt切换转换点工具ctrl+alt可复制
E快速填充：
在画笔工具下点回车按ctrl临时切换到小白按ctrl+shift可多选ctrl+alt可复制
图层的混合模式
1用于两个或两个以上图层的混合
2常用混合模式
A正片叠底图片暗部色彩信息混合使图片更暗
B滤色图片亮部色彩信息混合使图片更亮
C叠加图片中间调混合
D柔光图片中间调混合使混合更柔和
通道
1通道类型：
原色通道原色合成通道alpha通道（非色彩通道）
2概念：
通过灰阶的多少显示此种颜色的比重
白色100%显示黑色100%隐藏灰色：
透明度
3载入选区按ctrl点击通道缩略图
4半透明图像抠图
A选择适合通道
B载入所选通道选区
C回到原合成图层ctrl+J复制图层
5复杂轮廓抠图
A选择边缘反差最大通道
B复制通道，通过色阶、曲线进一步加大反差
C用画笔、钢笔工具涂抹图像，得到黑白剪影
D在通道载入选区
E回到图层面板，反选选区ctrl+shift+I复制图层ctrl+J
调整边缘（针对选区边缘调整）
1视图：
选择背景图层（透明底色图层）
2半径---选区宽度
羽化---选区虚化值
3用调整半径工具涂抹发丝可去掉背景色
4输出选择：
输出带有图层蒙版的图层
响应式设计（iphone4\5）
1分辨率：
72像素/英寸颜色模式：
RGB8位
2尺寸
A整体尺寸：
4:
640px/960px5:
640px/1136px注意文档大小宽度：
640px
B按钮尺寸:
最小：
40px/40px常规按钮:
80px/px
C字体大小：
最小24px（中文）22px（西文）最大34px
系统安全字：
中文：
苹果丽黑微软雅黑（锐利）西文：
arial
D输入框：
最小高：
62px
E偶数原则
3设计注意事项：
A导航：
导航图标化左右滑动多行显示（偶数）
B图片布局：
一行最多2到3张图片
c设计风格:
板块简洁具有拓展性
4视图技巧
Ctrl加减号减三次
GUI展示
1作用：
a规范化、标准化设计元素b展示整体效果
2内部区块（参考）
A效果图展示b按钮和控件cicon图标
D标准色和标准字
WebUI美术字体设计
1字体设计
A字库设计b商业标示字体c环境用字
2banner字体设计方法
A选择适合字体
B调节整体透视变化
C统一笔画特点（在字体图层右键选择转换为形状）
D统一笔画的粗细比例倾斜度（钢笔工具按ctrl切换小白按alt切换转换点）
E突出重点字
字体变形的常见方法
1横细竖粗法
2尖角字法
3柔美曲线法
4书法体法
升级会员 