1

切图:从UI给的PSD文件中切出前端可以用的图片。

常用知识点

  • 网页常用尺寸:1920px*1080px

  • 快速使用工具栏工具的快捷键:先按Alt,菜单栏下部会出现短横线,然后按后面括号对应字母,会出现该菜单栏下拉菜单

  • Ctrl+Tab:切换文件

Web界面设置

新建文件的设置:

clipboard.png

红色方框中设置为Web常用设置。

移动设置:

clipboard.png

不要勾选自动选择,后面选择图层,不要选择组。
上述设置好后,按住Ctrl在单击图层及能选中图层中的图像进行移动。

视图设置:

点击:视图-显示-智能参考线。

窗口设置:

点击:窗口,然后在需要的项目中点击,前面显示√号。
常用的可以设置在右边:
clipboard.png

最常用的四个为:字符,信息,图层,历史记录。

编辑设置:

点击:编辑,首选项,单位与标尺。
将其中的单位栏中标尺和文字的单位改为像素。

工作区设置:

通过设置工作区,能将前述的设置保存下来,方便以后使用。
clipboard.png

点击:窗口-工作区-新建工作区,即可设置为自己的工作区。

PS图层原理

一个图层相当于一个透明玻璃,在每个透明玻璃上绘图,然后从上往下看。

  • 移动+复制图层:ALT+选中图层中图像+拖动图层;产生新的图层,新图层中有原先的图像

  • 选中图层中图标:Ctrl+单击图层缩略图

  • 填充选中图标颜色:Alt+Dele

  • 取消选区:Ctrl+D

  • 按住Ctrl在点击图像,即会选中该图像所在图层。

  • Alt+选区工具:去掉选区的内容

参考线操作

  • Ctrl+R:打开/关闭标尺

  • 产生参考线:在标尺处单击然后拖动可出现参考线,水平或者垂直都可以。
    拉出参考线后按住Alt可切换水平竖直参考线。

  • 删除参考线:选择移动工具,然后选择参考线,拖动回标尺处,即可删除参考线。

  • 关闭打开参考线:Ctrl+;,不是删除,只是短时间关闭(隐藏)参考线。

传统切图

  • 采用裁剪工具里面的切片工具,

clipboard.png

其中蓝色的表示是主动的切片,灰色表示为被动的切片。
可基于参考线进行切图。
可先裁剪一个部分,再对该部分进行切图,对每个部分分别切图。

图片格式导出

  • 点击:文件-储存为Web所用格式-储存。

精准切图

点击:文件-脚本-将图层导出到文件。
能将PSD中所有的图层全部切出来,输出到一个文件夹中。
优点:减少手动操作,解放双手,提高切图精确度。
缺点:耗时,脚本会将PSD文件中所有的图层切出来,许多不需要的图层也会切出来,时间较长。
为了避免切出不必要的图,以及加快切图速度,可先新建一个文件,将原文件中需要切的图层复制到新文件,然后对新文件进行精准切图。


Healy
204 声望0 粉丝

前端新人学习ing!


« 上一篇
HTTP协议概要
下一篇 »
Git基础学习

引用和评论

0 条评论