小白切图

Posted 2020-10-08

切图工具Photoshop 
安装好PS之后，先要调整工作区域的布局。 
1.选择“窗口”——把“信息”，“属性”,”字符”，“段落”，“图层”，“历史记录”面板打开，其他的可以先关闭了，在切图的工作中其他的基本用不到。如下图所示： 
 
2.调整好面板之后，选择“窗口”——“工作区”——“新建工作区”，将当前的工作布局保存起来，并命个名，之后下次打开的时候就会直接出现你调整好的工作布局，而不会重置。就算有别人弄乱了你的面板也可以直接通过“窗口”——“工作区”——选择你之前保存的工作布局。

文字 
1.各方面字体颜色一定要通过PSD文件选中图层来确定，不能直接在图片上选取颜色。可以通过文字工具选中然后看信息板上的信息。或者直接双击文字图层前面的图标“T”，便能将文字全部选中，可以查看文字基本信息及复制粘贴文本内容。 
 
2.字体的加粗，要看三方面，看字符加粗，字体大小，字间距。浑厚要加粗，锐利不需要，字体大小一定要看清楚。

图片 
1.切图一定要拉参考线，计算精确的像素大小（现在发现一个快速测量的办法，因为设计师一般也是以整数为主，所以用矩形选框工具一拉，就能看到大小，误差几个像素一本都能猜到） 
2.小图标，如果有蒙版可以新建图层合并来处理，创建sprit图，可以拉好参考线，自己清楚像素大小，不要有白边。 
3.保存图片时，PNG用24，JPG用品质非常高（80）。 
4.文件中只有一个图层，（需要先复制图层新建文件）单独图层选择裁切就可以按图层实际大小来保存，主要在有阴影效果的图层实用。 
5.上面的情况也可以先将图层转化为智能对象然后选择整个图层，用选框工具选中图层，再新建文件（ctrl+n），这时可以看到新建的文件的大小是按该图层的实际大小的新建的，最后ctrl+v就可以将图层复制到新文件中，保存即可。 
6.如何知道矩形圆角半径（选中图层–选择圆角矩形工具–在工作区上方会有显示半径及具体的矩形大小，不用去猜了，不过经过实践，发现上面显示的半径会太大，不如猜的一般5px更符合实际大小）

快捷键 
1.选中图层用ctrl+鼠标左键，快捷键（文字T，移动V,吸管I，矩形选框M，），按住h，同时移动鼠标可以快速选择相应区域并局部放大。 
2.ctrl+ +放大 -缩小 
3.ctrl+r出现标尺 
4.ctrl+h隐藏所有的参考线 
5.v鼠标移动工具，h,鼠标移动文件，t文字工具，i吸管工具

其他 
1.自动化切图，文件–脚本–图层保存为文件（这个时候要注意之前的保存为web格式文件时是保存了所有切片，而不是仅用户切片，不然会导致一直搜索过滤图层，半天没反应，而且一直谭警告窗，要一直点）

一般网站文件目录 
PSD切图（项目文件目录） 
project： 
-admin(后台) 
-static（所有资源） 
-css（所有子文件都可以分子文件夹，方便管理，层级不建议太多）common.css/reset.css/yemian.css 
-images（可以按页面主题来） 
-js(预定义的，引入的，common.js) 
-font 
-pulgs 
-前台页面 
-其他单独文件