Photoshop切图----学习笔记

只是个人学习过程中的一些小笔记，不具备完整性，旨在发布到博客的同时能进达到复习的目的！

一、PS设置：

1、编辑》首选项》单位与标尺：将标尺、文字的单位设置为像素（px）；

2、调出与切图相关的窗口：工具/选项/信息（F8）/图层（F7）/历史记录；

3、主要使用的工具：移动工具、矩形选框工具（查看尺寸）、魔棒、裁剪与切片、缩放（ctrl+加号/减号，alt+滑轮）、取色器

4、移动工具：在选项栏选择 自动选择 图层；

5、撤销：ctrl+z ；连续撤销：ctrl+alt+z（也可直接从历史记录面板退回）；

6、开启辅助视图：视图》对齐/标尺（ctrl+R）/ 显示》参考线（Ctrl+ ；）/显示额外内容；

二、获取信息：

1、测量：测量宽度/高度/内外边距/边框/定位/文字大小/行高/背景图位置（矩形选框工具+信息面板）；

2、取色：边框色/背景色/文字颜色（拾色器+吸管工具）

三、切图：

1、隐藏文字只留背景：

• 若文字为独立图层，则直接隐藏图层；

• 若文字和背景合并，则平铺背景覆盖文字：

1、矩形选框 --》ctrl+T --》 拉伸覆盖；（可平铺）

2、矩形选框 --》alt+移动工具 --》移动覆盖； （不可平铺）

2、切图内容：图标/Logo/按钮/效果文字/非纯色背景 （存为PNG24/8）

Banner/广告/配图（存为JPG）

3、切图保存：

1、复制Ctrl+C/新建Ctrl+N/粘贴Ctrl+V；

2、存储为web所用格式（Alt + Shift + Ctrl + S）；

图片格式简解：

色彩丰富且无透明 --》 JPG/JPEG；

色彩不太丰富 --》 PNG8 颜色：256、杂边：无、无仿色；

有半透明要求 --》 PNG24

修改与维护：

精灵图添加图表、图片：图像 》画布大小（Alt + Ctrl + C）、定位：左上角

分离图层：矩形选框选中 --》Ctrl+X --》 Ctrl+V

图片的优化与合并：

使用背景图代码：

.u-btn{background:url(images/btn.png) no-repeat 0 0;}

图片合并方案：（压缩工具：minimage(无损压缩)/TinyPng(有损压缩)）

1、图片之间保留空隙；

2、排列方式：横向排列/纵向排列；

• 1、同模块合并；/2、大小相近的合并；/3、色彩相近的合并；/ 4、3种综合；
• 1、同页面图片合并/ 2、有状态的图表合并

图片兼容方案：1、两份存档：png24与png8；

2、高级浏览器 --》 CSS3 / 低级浏览器 --》 Png8;

3、高级有效果 --》 低级无效果；