学习笔记2：前端PS切图

前端PS切图

一、Photoshop的界面设置

二、Photoshop的基本操作

三、Photoshop的传统切图

四、Photoshop的精准切图

五、Photoshop的扩展知识

视频学习：http://www.imooc.com/learn/506

--------------------------------------------------------------------------------------------------------------------

一、Photoshop的界面设置

（1）新建设置

预设-->自定   宽：1920px  高：2000px  分辨率72px  颜色模式：RGB颜色8位  背景内容：透明

（2）移动工具设置<V>

在移动工具的属性栏上将“组”改为“图层”后， Ctrl+鼠标左键选中PSD图片中的小物件进行所需要要的位置移动

（3）视图设置

勾选两个东西：视图—>显示—>智能参考线、视图—>标尺

关闭不需要的窗口：窗口—>库、颜色、路径、通道、属性

移动/打开的窗口：历史记录与图层同栏，窗口—>信息、字符

信息面板初始化设置：RGB颜色、RGB颜色、像素；勾选文档尺寸

首选项设置：文件—>首选项—>单位与标尺：单位上的标尺与文字都改为“像素”

（4）最后为避免丢失做好的设置，可以在窗口处新建一个工作区，命名为“Web切图”，捕捉键盘快捷键、菜单，进行存储即可。

--------------------------------------------------------------------------------------------------------------------

二、Photoshop的基本操作

♦ 简单工具操作

（1）选择工具<V>

在移动工具的属性栏上将“组”改为“图层”后， Ctrl+鼠标左键选中PSD图片中的小物件进行所需要要的位置移动

（2）框形选区工具<M>

属性栏上有：单选、+选< shift>、-选<alt>、*选

长方形<M>变正方形、椭圆< shift+M>变圆：shift+鼠标左键画选区

圆选定圆心：shift+alt+左键选区

Ctrl+D 取消选区

（3）套索、多边形套索、磁性套索选区<L>

　　 魔棒工具选区<W>

相关操作类似框形选区工具

（4）裁剪工具<C>

选区+裁剪：精确裁剪

*

*

*

*******************************************************************************************

♦ 图层的原理及其操作

复制一个图层：Alt+鼠标左键拖动<ps界面>

图层选区：Alt+鼠标左键按图层的矩形区

*******************************************************************************************

♦  参考线及其辅助

窗口—>新建参考线（单位是像素）<Alt—>V—>Z>

标尺快捷键：Ctrl+R 后，从左或从上拖动参考线

删除参考线：只需将参考线拉回标尺处

关闭/隐藏参考线：Alt +‘；’（分号） 再按一次打开

--------------------------------------------------------------------------------------------------------------------

三、Photoshop的传统切图

♦ 切图与切片

选择裁剪工具下的“切片工具”，在所需要的地方进行切片，切完后导出（复杂度较大）

*******************************************************************************************

♦ 切片的基本操作及其技巧

简单：先裁剪大部分，然后在需要的图层上（Ctrl+鼠标左键）拉参考线作矩形围住需要的图形，而后选择“裁剪—>切片工具（基于参考线的切片）”

*******************************************************************************************

♦  导出操作

文件—>存储为web所用格式—>格式：PNG-24，存储

--------------------------------------------------------------------------------------------------------------------

四、Photoshop的精准切图

• 介绍如何利用Photoshop的脚本，进行一种更加快捷精准的切图方法

打开PSD文件

文件—>脚本—>将图层导出到文件（文件类型：PNG-24  勾选：裁剪图层、透明区域  选好导出目标以及修改好文件名前缀—>运行）

--------------------------------------------------------------------------------------------------------------------

五、Photoshop的扩展知识

♦ 整个图层组/精准图片导出：新功能实现自动切图

1）编辑—>首选项—>增效工具（勾选：启用生成器）

文件—>生成—>图像资源（在文件夹***-asset中）

2）给图层组重命名，在名后+“.png/.jpg” ，改成图片格式都行

*******************************************************************************************

♦ 自动生成CSS的方法

1）选中图层的非智能对象—>图层—>复制CSS—>在写前端代码的记事本上“粘贴”即可（记得样式的对应的名称）

*******************************************************************************************

♦ 如何对psd中的大量图层进行分类管理

在图层面板下的类型对图层进行筛选，即可将类型相同的图层快速找出