前端的phtoshop

                             前端必备技能--------切图

在窗口上选择有用的工具：

1.图层

2.历史记录

3.信息

4.字符
信息：选项设置中改为像素，选中文档大小
编辑--首选项--改为像素

步骤：1.视图/显示/智能参考线以及视图/字符，这两个都要选上；
2.窗口/信息；窗口/字符，两个打开，其他的多余的可不需要，将前面的勾取消；
3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定；
4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】
这样的做的好处：在PS里打开一个网页，随便点击哪个图片或者某个字符，就可以知道详细的信息。
5.窗口/工作区/新建工作区/名称：web切除，后两个选上，然后点击存储，这样就可以保存下来，防止丢失了。





1.选取区域
选取之后可以进行填充
选取有几种方式

1.选取一个区域

2.选取多个区域(可重叠+)

3.选取减去部分(-)

4.选取交叉部分
右下角左击扩展区域;可选椭圆,一列,一行,都为一个像素！
shift+选中 变成圆形,一定要先放开鼠标才有效！alt+选中定位中心点
shift相当于+ alt相当于-


2.套索工具
可以选择不规则的区域
shift相当于+ alt相当于-
多边形套索，双击可闭合



小技巧的运用：

用选区工具选择某部分内容，然后单击裁剪工具
（先点击要选的区域，继而在图层哪里ctrl+点击再用裁剪工具就可以了）
，这样所选择的内容就已经被裁剪好了，再按下回车键就可以！
如果想要更精细的选区，上面部分完成后，单独对所选的内容进行修改，除了上面老师所讲的，
放大功能：按住H键不放，点击鼠标，有一个小的方框，


填充选取：alt + del
自由变换----alt + shift得到小一点的选区del删除选区
ctrl + T 自由变换，shift+拖动变小
alt+拖动 ---- （复制一个图层）建立图层
ctrl+单击缩略图，即选中图层所在区域

alt+裁剪定义中心线，再alt拖动至想要的大小
在一个图层选中区域，然后再另外的一个图层选中区域，只会对相交的部分操作(删除)

参考线：ctrl+R出现标尺，从标尺的地方拖动即可拖出参考线，删除就是回到原来的位置即可！
拖出参考线以后，alt+拖动==改变方向
新建参考线---方向+位置

alt聚焦区域就变成了菜单栏，再按相对应的字母即可！alt+V+E新建参考线的快捷键
ctrl+''网格    ctrl+;参考线



1.传统切图：切片工具1.一张一张切图2.利用参考线切
2.精准切图：利用脚本切图



3.集成功能的切图：启动生成器，生成图片资源，改一下文件夹的名字，*.png
还可以通过名字改为200% *** .png
文件夹中不想要了的图片就把名字改了一下就可以了

***.png8 ----***.png24改格式

4.svg导出技巧
将文件夹名字改为*.svg

5.图层：复制css效果如下：
.蓝色背景 {
  background-image: url("蓝色背景.png");
  position: absolute;
  left: 0px;
  top: 31px;
  width: 1600px;
  height: 85px;
  z-index: 127;
}


6.搜索图层
类型：名称搜索
       颜色搜索
       等等

慕课网：
选中区域,1.转换为智能对象---ctrl+c  ctrl+n  ctrl+v
         2.直接裁剪：完了以后ctrl+alt+z还原
存储为web格式

下面是关于ps的一些快捷键：