前端 ~ PS切图工具

*** 工具准备 ***

1、PS（photoshop）

【注意】：安装时，需要先选择“试用”，之后通过注册机进行注册，直接重新打开ps应用即可（应该会无需登录）

2、更改：缓存盘路径、默认单位

【注意】：ps安装时默认缓存盘是系统盘，默认单位是cm；

• 【编辑->首选项->暂存盘】，选择除了C盘以外的盘符，确定即可；
• 【编辑->首选项->单位与标尺】，标尺/文字修改为“像素”，确定即可；

 

*** 操作 ***

【注意】：常用的工具在【视图】、【窗口】中都可以找到，具体可参考《ps快捷键.pdf》（ps中默认文件格式为.psd格式）

1、切图

（1）选用切图工具，【文件->导出->存储为web格式】（png-8即可）（会自动生成一个images文件夹）；

（2）将图层移动到新建的图层中，【图像->裁剪->确定】（可保存为一个独立的图标）；

切图保存格式：

• gif：动图&背景透明颜色单一的小图标；
• jpeg：不能处理背景颜色为透明的图片；（品质越高，图片清晰度越高）
• png-8：
• png-24：ie浏览器低版本不支持
• wbmp：

2、文字

（1）选择【T】，直接选中图片中文字，即可查看文字的样式；（或者是直接打开【字符工具】）

（2）导航栏中红色背景可以通过切图运用，但是写网页时应该越少使用图片越好，图片越多网页加载速度越慢，所以需要设置【图像->画布大小】“宽度”设置为1，再【文件->导出->存储为web格式】（jpg格式即可）；

 

3、雪碧图

【注意】：因为网页中尽量少加载多个图片，则可以将所需要的图片都保存到一张图上，使用时通过位置判断使用哪张图片

 

4、搜索图标

（1）直接使用【裁切工具】，直接切图，保存；

（2）在【图层】中，选中放大镜和背景ctrl+E合并；

 

5、切图优化

• 颜色代替图片
• 雪碧图
• 字体图标

 

6、快捷键

• 撤销裁切（Ctrl+Alt+Z）
• 裁切（enter）
• 删除图层：enter
• 合并图层：Ctrl+E
• 移动：v
• 裁切：c

 

7、切图辅助

• Markman：国内，快速测量图中颜色，字体大小，字体和文件之间的间距
• TinyPNG：压缩图片
• 前端自动化：一键生成雪碧图等

 

【ps】：新手接触，仅仅记录下目前所学内容，后续涉及及时补充