web工程师需要具备的基础PS功能

• 注:PS版本2019

PS快捷键

• Crtl + ；隐藏/显示参考线
• alt + 滚轮放大/缩小
• 空格 + 鼠标拖到 显示设计图的其他区域
• tab 隐藏/显示周边窗口
• F7 隐藏/显示图层窗口
• Ctrl + r 隐藏/显示标尺

PS重要概念

图层：Layer

• 英文Layer ,设计师会把不同内容元素放置到不同的完全透明的"煎饼"称为图层,便于后期的编辑和维护.

图层组：Layer Group

• 英文Layer Group,为了便于同操作几个相关的图层,可以将它们放置在,一个“文件夹"中称为图层组.

切图

• 把一张设计图转化为HTML页面操作，转换原则：文字/规则的图像都用代码实现，图片/非规则图形需要总原图中切在代码中使用。
• 步骤
  • 找到目标图像所在的图层
    • 移动工具->勾选“自动选择”/图层>点击目标
  • 把图层里的内容单独存储起来

PS工具栏中的常用的工具

移动工具

• 图样
  

• 本来的用途：移动内容的位置

• 程序员的用途：辅助定位目标内容所在的图层

矩形选择工具

• 图样
  

• 本来用途：选中一块区域，进行删除或者复制操作

• web开发中的用途：测量一块区域的宽度和高度

文本工具

• 图样
  

• 本来用途:在设计图中添加新文字

• WEB开发中的用途:拾取一段文字的字体信息

前/背景色选取器

• 图样
  

• 本来用途:选择一个颜色用于填充一块区域

• WEB开发中的用途:拾取任一点的颜色,获取RGB配比

其他技巧和功能

智能对象不能编辑

• 右键栅格化图层

ps中制作GIF动画图片

1. 制作出每一帧必需的静态图片，如：png或jpg
2. 打开第一帧所需的图片
3. 把PS界面切换为“动感”界面，点击“创建视频时间轴”
4. 指定当前图片的播放时长，点击后面的+号添加更多图片
5. “文件”>“导出”>“存储为web所用格式”>选择gif

调节字体变像素

• 编辑->首选项->单位于标尺