web UI课堂笔记汇总Word格式.docx
- 文档编号:1478256
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:12
- 大小:20.84KB
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书法体法
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web UI课堂笔记汇总 UI 课堂 笔记 汇总