如何运用ps切片,然后div+css布局的技巧!

html-css04

如何运用ps切片,然后div+css布局的技巧!,第1张

ps切片之后可以直接生成页面和图片块,页面代码都是table表格形式的,然后我们对生成的页面进行修改,将table表格用div替换掉,包括里面的tr、td等,当然你的切片一定要切的好,替换起来就方便一些,如果说你切得不够流畅或者不规则,那么替换起来就需要花更多的时间,主要还是遵从以大包小,该断则断

如果是直接用photoshop切图的话,比较麻烦。如果是交付UI设计稿,可以借助摹客这样专业的免费在线切图工具,自动生成不同尺寸不同分辨率的切图,也支持切换不同的平台。

1.在摹客官网下载安装摹客 PS插件,插件安装好后打开PS,在「窗口>扩展功能」找到摹客插件,选择并打开。

2.登录后选择项目和分组。

选中需要切图的画板、图层或编组,点击「标记切图」。

选中目标名称前出现“-e-”,「标记切图」选项变为「取消切图标记」,此时切图操作便完成了回。

(注意:标记切图只需标记需要切图的图层,标记无用的切图过多可能会导致上传失败。)

3.点击倍率下拉框,根据设计稿的画板大小,选择设计稿对应的倍率。例:750px*1334px的设计稿对应 @2× 。

点击「上传所选画板」或「上传全部画板」,一键将设计稿上传至云端项目中答。

4.点击「查看项目」打开设计稿,在“开发”模式中,即可一键下载选中切图或所有切图。

5.使用摹客切图,可快速切换平台(iOS、Android、Web)和选择倍率,支持自定切图尺寸和切图压缩,非常方便。

1、首先打开电脑上的PS 软件,双击打开,进入操作页面。

2、然后打开或者拖入要切的图片。

3、接着选用工具栏里的-切图工具,根据自己喜好进行切图。

4、切完之后,ctrl+shift+alt+s 一起按。保存切图弹出窗口在最左上角“预设”。

5、单击打开可以选择自己要的格式。

6、之后就可以直接保存了,下面的格式都变成了预设的格式了。