web UI课堂笔记汇总.docx

1、web UI课堂笔记汇总Ps的基本操作1布局2工作区设置（窗口-工作区-默认 复位工作区）3首选项设置（编辑-首选项-单位与标尺 改为像素）4视图 放大/缩小 ctrl +/- alt +鼠标滚轮 空格+鼠标左键拖动画布 适合屏幕 ctrl+0 实际像素 ctrl+15新建 ctrl+N 单位：像素 分辨率：72像素/英寸 颜色模式： RGB 8位6保存格式 psd(源文件格式)7历史记录 （后退 ctrl+alt+z 前进 ctrl+shift +z 还原 ctrl+z）8隐藏额外辅助线 ctrl+h9填充前景色 alt+del 填充背景色 ctrl+del 填充有透明区域的图层颜色 前景色

2、 alt+shift+del 背景色 ctrl+shift+del 10 扩展画布（图像- 画布大小）注意定位点的选择图层1理解图层-承载信息的容器 方便独立操作和修改2图层选择-(移动工具 按ctrl+鼠标左键点选；勾选移动工具选项栏中自动选择)3图层的复制 Ctrl+J alt+鼠标左键拖动(移动工具)4图层的顺序 上方图层遮挡下方图层Ctrl+左右中括号 向下移动/向上移动 ctrl+shift+ / 移动到最底层/最顶层5图层的多选 （移动工具 ctrl+shift+鼠标点选； 勾选自动选择shift+鼠标点选 ）6组的建立 ctrl+g (选中需要建组的图层) 删除组的结构 ctrl

3、+shift+g 注意：移动工具选项栏里组和图层的选择7网页的基本板块划分 头部区域 header 视觉区域 banner 主要内容 main 底部信息 footer8智能对象图层 a缩小后再放大不影响图片的清晰度， 选中图层右键选择栅格化图层 B 可以记录滤镜、变形参数 方便随时修改9图层的合并 选中需要合并的图层 ctrl+E标尺与辅助线1标尺(视图-标尺) ctrl+R2吸附作用（视图-对齐）3 标尺右键选择百分比 恢复到像素4隐藏辅助线 ctrl+;5锁定 ctrl+alt+;选区1选区选项栏 样式选择固定大小 恢复到正常2 查看单位（窗口-信息 f8）3 选区上右键选择变换选区4 取

4、消选区 ctrl+D5选区的布尔运算（shift 加选 alt 减选 shift+alt 相交）6载入选区，按住ctrl键点击图层的缩略图形状工具1搭建大区块（选项栏 选择形状）2直线 按住shift画直线3多边形工具 (选项栏 边数设置)4圆角矩形工具 (选项栏 半径设置 控制圆角弧度)5路径选择工具-小黑 选择整体路径6直接选择工具- 小白 选择独立锚点 按住shift加选锚点7 椭圆工具 按住shift 画正圆8隐藏路径线 ctrl+shift+h9布尔运算（shift 加选 alt 减选 shift+alt 相交）对齐与分布1对齐 选中两个或两个以上图层2分布 选中三个或三个以上图层字

5、符面板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颜色模式 RGB 8位3网页背景 A 纯色平铺 （自适应浏览器） B 渐变色或底纹平铺 （自适应浏览器） C通栏大图片 宽度 1920像素4屏幕

6、分辨 A 标准分辨率 1024px/768px 有效设计内容 宽度1000px 首屏高约700px B常用分辨率 1280px/800px 有效设计内容 宽度1200px 首屏高约750px5设计文档大小 A设计文档宽度只要大于有效设计内容宽（目的表现设计意图 展现背景效果 建议左右各宽出200px）B 针对通栏大图片 设计文档宽度1920pxPC平台字体使用规范1字体分类A图形化文字 b 像素字（系统字）2系统安全字 中文（宋体 微软雅黑 黑体 ） 西文（Arial Times）3字号 中文（12px-18px）针对正文内容 西文（12px-16px）针对正文内容 最小 10px渐变工具1类

7、型：线性 径向 角度 对称 菱形2渐变编辑器 下方色标控制颜色 上方色标控制透明度 菱形色标控制渐变中心点 点击添加色标 删除色标拖动到下方3渐变工具选项栏其他属性 A反向 b勾选仿色 渐变过渡更平滑 c勾选透明区域 支持渐变编辑器里的透明效果图层样式1添加方法：在选中图层右边空白处双击添加2复制图层：选中图层右键选中拷贝图层样式，需添加图层样式的图层上右键粘贴图层样式 鼠标指到效果或fx图标上 按alt复制3 上方图层样式会遮挡下方样式常用属性1渐变：可以拖动渐变效果，勾选与图层对齐2描边：一般为了避免虚边产生，选择内部描边 描边类型：颜色 渐变 图案3投影：角度（控制光源） 注意全局光的选

8、择 扩展（投影的虚化效果） 大小 距离自由变换工具1编辑-自由变换 ctrl+T 按住shift等比例缩放 2 按住ctrl 可以调节图像的形状 （斜切 扭曲的功能）3 shift+alt 沿中心点等比例缩放4 ctrl+shift+alt 调节透视功能5 ctrl+T 右键选择变形图案的定义与填充1定义(编辑-定义图案)找到适合重复的图形，用选区选中图案范围定义, 一般情况透明底色2填充(编辑-填充-图案)基本抠图工具1魔棒工具(针对纯色背景) 容差值越高，相近颜色的容忍范围越大，反之，越小2钢笔工具（精确造型） A在抠图选项栏选择路径 B单击产生起始锚点 C左键点住拖动产生贝塞尔曲线 D取

9、消贝塞尔曲线一侧滑竿 在锚点上按住alt键点击 E 路径转换选区 ctrl+回车 F 在路径面板中找钢笔路径 G 在钢笔工具下按住alt键切换到转换点工具基本的调色工具(图像-调整)1色阶 ctrl+L 调整图片明暗对比关系 暗部滑块向右拖动暗部变暗 亮部滑块向左拖动亮部变亮 灰度滑块向左拖动变亮向右拖动变暗2曲线 ctrl+M 精细调色 点击增加锚点 ，按del删除锚点3色相/饱和度 ctrl+U 可以单独调整图像中某个指定的颜色4色彩平衡 ctrl+B 原理：在图像中增加某个特定颜色的比重 注意：阴影 中间调 高光的选择剪切蒙版1添加方法：在两个图层的中间按住alt点击2原理：通过下方图层

10、的显示范围控制上方图层的显示3一个下方图层可以剪切多个上方图层 滤镜1高斯模糊（滤镜-模糊-高斯模糊）半径值越大越模糊，反之越清晰图层蒙版1添加方法：点击图层蒙版小图标2原理：与图层捆绑在一起， 用图层蒙版控制原图层的显示范围 白色 100%显示图层 黑色100%隐藏图层 灰色 控制透明度3主要用画笔工具配合使用 笔触大小 左右中括号键 /(在英文输入法状态) 4 回到默认前景色背景色 D 切换 x线框图1内容大纲（有什么）2信息架构（在哪里）3层级关系（内容的主次）4一般单色（黑白灰）图层调整层1添加方法：点击调整图层图标2优点：a调色参数保留 方便随时修改B 针对下方所有可见图层统一调色C

11、 不破坏原图的色彩信息全屏展示类网站1应用领域：汽车、地产、美妆、影视、游戏、个人、活动2尺寸：宽度：1920px 高度：1000px 有效设计内容：宽度1200px3设计特点：一屏显示 以图为主 布局灵活4必要设计元素Loading 音乐开关 全屏按钮 内页关闭按钮5优缺点优点：画面展示感强 缺点：加载速度慢 不适合响应式设计画笔工具1 大小调整 左右中括号键 (英文输入法)2 大小锁定键 控制笔触轮廓显示形态3画笔面板 （f5） A 画笔预设（选择适合画笔） B 间距调整 间距大小控制画线还是点 形状动态-大小抖动 （随机产生不同大小点） 散布 -勾选双轴 随机分散大小点画笔描边A 新建图

12、层 B调试画笔（选择适合画笔 调节大小粗细 笔刷形态）C 用钢笔工具勾选适合路径 路径面板里工作路径右键选择描边路径（选择画笔 勾选模拟压力） D 默认在钢笔工具下 按ctrl 临时切换到小白 按alt 切换转换点工具 ctrl+alt 可复制 E快速填充：在画笔工具下 点回车 按ctrl 临时切换到小白 按ctrl+shift 可多选 ctrl+alt 可复制 图层的混合模式1 用于两个或两个以上图层的混合2常用混合模式A正片叠底 图片暗部色彩信息混合 使图片更暗B 滤色 图片亮部色彩信息混合 使图片更亮C 叠加 图片中间调混合 D 柔光 图片中间调混合 使混合更柔和通道1通道类型： 原色通

13、道 原色合成通道 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用调整半径工具

14、 涂抹发丝 可去掉背景色4输出选择：输出带有图层蒙版的图层响应式设计(iphone 45)1分辨率： 72像素/英寸 颜色模式：RGB 8位2尺寸A整体尺寸： 4: 640px/960px 5:640px/1136px 注意文档大小宽度：640pxB按钮尺寸:最小：40px/40px 常规按钮: 80px/pxC 字体大小：最小 24px(中文) 22px(西文) 最大 34px 系统安全字：中文：苹果丽黑 微软雅黑（锐利） 西文：arialD 输入框：最小高：62pxE 偶数原则3设计注意事项： A导航：导航图标化 左右滑动 多行显示（偶数） B图片布局：一行最多2到3张图片 c设计风格: 板块简洁 具有拓展性4 视图技巧 Ctrl 加减号 减三次GUI展示1作用：a 规范化、标准化设计元素 b展示整体效果2内部区块（参考）A效果图展示 b 按钮和控件 c icon图标D 标准色和标准字Web UI 美术字体设计1字体设计 A 字库设计 b 商业标示字体 c 环境用字2 banner字体设计方法 A 选择适合字体 B调节整体透视变化 C 统一笔画特点（在字体图层右键选择转换为形状） D 统一笔画的粗细比例 倾斜度 （钢笔工具 按ctrl 切换小白 按alt 切换转换点） E 突出重点字字体变形的常见方法1横细竖粗法2 尖角字法3柔美曲线法4书法体法