PS切图笔记

Dear 丶 2021-08-24 17:22 561阅读 0赞

## PS切图 ##

切图 设计稿中切出网页素材  
给网页提供图片素材

## 使用PS工具 ##

编辑>首选项>单位与标尺-像素  
需要用到的面板  
工具 -列出了ps提供的工具  
选项 -  
信息 -显示颜色 位置 尺寸信息  
图层 -当前打开的文件图层  
历史记录-记录了当前文件的所有历史操作 可以回提到任意历史操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwMzYzMg_size_16_color_FFFFFF_t_70]  
**工具**  
切图常用工具：

*  移动工具
 *  矩形选框工具
    
     *  添加到选区：按住Shift
     *  从选区减去：按住Alt
     *  与选区交叉：按住Shift+Alt
 *  魔棒工具
 *  裁剪工具+切片工具
 *  缩放工具
    
     *  放大：Ctrl+加号
     *  缩小：Ctrl+减号
 *  取色器  
    **辅助视图**  
    "视图"菜单下开启：
 *  对齐
 *  标尺 Ctrl+R
 *  显示>参考线Ctrl+；  
    **测量**  
    矩形选框工具&信息面板
 *  宽度、高度
 *  内边框、外边框
 *  边框
 *  定位
 *  文字大小
 *  行高
 *  背景图位置

**取色**

*  边框色
 *  背景色
 *  文字色

**切图准备工作**  
确定哪些是需要切出来的  
修饰性的（一般用在background属性）

*  图标、logo
 *  有特殊效果的按钮、文字等
 *  非纯色的背景  
    一般存为PNG24 PNG8  
    内容性的（一般用在 img 标签）
 *  Banner、广告图片
 *  文章的配图…  
    一般存为JPG  
    **切图第一步**  
    隐藏文字只留背景  
    若文字为独立图层，隐藏文字图层
 *  找到文字图层
 *  去掉眼镜图标  
    若文字和背景合并，平铺背景覆盖文字
 *  矩形选工具
 *  自由变换（Ctrl+T）  
    使用移动工具+Alt  
    按住shift水平移动

**切图**  
PNG24

*  移动工具选中所需图层（按住Crtl多选）
 *  右键合并图层（Ctrl+E）
 *  再右键复制图层到新文件  
    或直接拖到已有文件（新建：Ctrl+N）  
    PNG8

带背景切

*  合并（可见）图层（Shift+Ctrl+E）
 *  矩形选框工具选择内容
 *  魔棒工具去除多余部分  
    \-从选区中减去：按住Alt

可平铺背景的切图

*  用矩形选框工具选取一块区域
 *  复制粘贴到新文件  
    平铺内容充满文件的宽（x轴）或高（y轴）

**切片工具**  
适用于可以一刀切的活动页

*  拉参考线
 *  选择切片工具
 *  点击"基于参考线的切片"按钮
 *  保存（全选切片，统一设置存储格式）

**保存**  
存储所需内容

*  复制、新建、粘贴  
    Ctlr+C Ctrl+N Ctrl+V  
    （拖动内容到新文件）  
    格式选择  
    当图片色彩丰富且无透明要求时  
    建议保存为JPG格式并选择合适的品质

当图片色彩不太丰富时无论有无透明要求  
请保存为PNG8格式

当图片有半透明要求  
请保存PNG24格式

为保证图片质量  
保留一份PSD，在PSD上进行修改

## 图片修改与维护 ##

**更改画布大小**  
图像-画布大小-  
（定位需要选在左上角）  
**减小画布到指定区域**  
选定区域-裁剪  
**移动图标**

*  若图标为独立图标，则用移动工具拖动即可
 *  若图标为非独立图层
    
     *  用选区工具选中图标区域
     *  用移动工具拖动图标

**修改PNG8的图片**  
需要改颜色模式为：PGB颜色

## 使用背景图 ##

HTML <button class="u-btn">1</button> CSS .u-btn{ background:url(images/btn.png)no=repeat 0 0;}

## 图片合并方案 ##

**Sprite拼图**  
好处：减少网络请求，提升网页加载速度  
**大小与质量**  
**合并**  
图片之间必须保留空隙  
排列方式  
横向 纵向

合并-分类

*  把同属于一个模块的图片进行合并
 *  把大小相近的图片进行合并
 *  把色彩相近的图片进行合并
 *  综合以上方式合并  
    推荐
 *  只本页用到的图片合并
 *  有状态的图标合并

## 浏览器兼容 ##

IE6不支持PNG24半透明  
CSS3&切图

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwMzYzMg_size_16_color_FFFFFF_t_70]: /images/20210813/214f3ddacabf4389bfc72f79dfdebfcb.png