切图:从UI给的PSD文件中切出前端可以用的图片。
常用知识点
网页常用尺寸:1920px*1080px
快速使用工具栏工具的快捷键:先按Alt,菜单栏下部会出现短横线,然后按后面括号对应字母,会出现该菜单栏下拉菜单
Ctrl+Tab:切换文件
Web界面设置
新建文件的设置:
红色方框中设置为Web常用设置。
移动设置:
不要勾选自动选择,后面选择图层,不要选择组。
上述设置好后,按住Ctrl在单击图层及能选中图层中的图像进行移动。
视图设置:
点击:视图-显示-智能参考线。
窗口设置:
点击:窗口,然后在需要的项目中点击,前面显示√号。
常用的可以设置在右边:
最常用的四个为:字符,信息,图层,历史记录。
编辑设置:
点击:编辑,首选项,单位与标尺。
将其中的单位栏中标尺和文字的单位改为像素。
工作区设置:
通过设置工作区,能将前述的设置保存下来,方便以后使用。
点击:窗口-工作区-新建工作区,即可设置为自己的工作区。
PS图层原理
一个图层相当于一个透明玻璃,在每个透明玻璃上绘图,然后从上往下看。
移动+复制图层:ALT+选中图层中图像+拖动图层;产生新的图层,新图层中有原先的图像
选中图层中图标:Ctrl+单击图层缩略图
填充选中图标颜色:Alt+Dele
取消选区:Ctrl+D
按住Ctrl在点击图像,即会选中该图像所在图层。
Alt+选区工具:去掉选区的内容
参考线操作
Ctrl+R:打开/关闭标尺
产生参考线:在标尺处单击然后拖动可出现参考线,水平或者垂直都可以。
拉出参考线后按住Alt可切换水平竖直参考线。删除参考线:选择移动工具,然后选择参考线,拖动回标尺处,即可删除参考线。
关闭打开参考线:Ctrl+;,不是删除,只是短时间关闭(隐藏)参考线。
传统切图
采用裁剪工具里面的切片工具,
其中蓝色的表示是主动的切片,灰色表示为被动的切片。
可基于参考线进行切图。
可先裁剪一个部分,再对该部分进行切图,对每个部分分别切图。
图片格式导出
点击:文件-储存为Web所用格式-储存。
精准切图
点击:文件-脚本-将图层导出到文件。
能将PSD中所有的图层全部切出来,输出到一个文件夹中。
优点:减少手动操作,解放双手,提高切图精确度。
缺点:耗时,脚本会将PSD文件中所有的图层切出来,许多不需要的图层也会切出来,时间较长。
为了避免切出不必要的图,以及加快切图速度,可先新建一个文件,将原文件中需要切的图层复制到新文件,然后对新文件进行精准切图。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。