前端--切图

[转]来自于慕课网学习整理。

一、PS界面设置

打开psd

1、选中图层：

通过右侧选中图层，可隐藏某图层文件

通过右侧选中图层，可移动图层文件

选中“自动选择”，图层，点击某图层，右侧会相应对应此图层，可以隐藏和移动

平时可不选中“自动选择”，选择图层，按住Ctrl,点击想要选择的图层，右侧会对应选中图层，可隐藏或移动图层。

2.视图设置：

  

3、窗口设置

四大面板：信息，字符，图层，历史记录。通过菜单中的“窗口”调出四大面板。

并且设置信息面板选项如下：

  

可以把此工作区存储下来，以防丢失之后可以找回，

4、编辑设置：

 

二、PS基本操作

1、一些简单工具（1）：

选择工具：快捷键V  

选区工具：快捷键M ，Shift+M,切换选区工具的形状。

删除选区：快捷键 ctrl+D

 四个重要的属性。

按住shift,拉第二个选区，是与第一个选区合并；按住alt，拉第二个选区，是在第一个选区基础上去掉选区。

套索工具：画不规则选区 

快速选择工具：  /魔棒工具：，画选区。

如何对某个图层的一部分，画出选区？

按住ctrl点击某图层，右侧图层显示相应部分，按住ctrl,点击右侧图层部分图片，出现选区。

    

裁剪工具：快捷键C：裁出需要的一部分：；一般先选出选区，再点击裁剪工具。裁剪出来。

应用? 选出选区->点击裁剪->回车裁剪完毕->按住ctrl，点击此图，找到右侧图层部分，按住alt，点击眼睛，隐藏其他图层，用于导出png图片。

     

  

放大：Ctrl++ ;缩小：ctrl+- 

按住空格，变成拖动小手 

2.简单工具（2）

污点修复画笔工具：抹去不想要的东西，   

修复画笔工具：

按住alt键，单击某处，形成一个圆框选某处；可把此圆内部分拖动到任意位置。画笔放到并拖动时，可显示其他部分。

  

手抓工具：快捷键H

放大镜：按住alt键从放大和缩小之间转换。

ctrl+;关闭参考线。

三、切图

1、传统切图

切图->存储为web所用格式

切图：用切片工具一个一个切。或者用参考线，切出所有图片。

例子：选择要截取的图片，在选取工具下，按住ctrl,点击图片，在右侧图层找出相应的，选择此图层。

转化为智能对象。

用选区工具框住图片，ctrl+c,ctrl+n,ctrl+v,粘贴到新的文件

按住alt,点击此图层前面的眼睛，隐藏其他图层

存储为Web所用格式，保存为Png-24.

 

2、精准切图

步骤：

PS自动切图.

3、Ps扩展

（1）自动单个切图

步骤：先设置好

勾选之后，在psd所在路径下多出文件夹的命名与psd名字一致。

    

在图层位置，重命名文件为***.png或***.jpg或***.svg(生成的是svg画的图)

   

 

命名技巧：200% *** @2x.jpg;  切出的图片是原来的200%大小。

（2）抽出资源

  

（3）复制CSS

步骤：

点击可复制CSS的图层，点击图层->复制CSS

新建sublime，单击右键：粘贴：

 

（4）图层管理

 

 

转载于:https://my.oschina.net/u/3176241/blog/842446