1、打开Photoshop,然后点击切片工具。
2、点击切片工具后,把图片按要求切好。
3、把图片切好之后,按Ctrl+Alt+Shift+S进入保存web格式,保存格式设置为JPEG。
4、设置好保存格式后,点击底部的存储。
5、点击存储后,打开images文件就可以看到切好的图片了。
1:建立参考线,CTRO+R,出现标尺,将鼠标放在标尺上,按住左键像图片内拖动就形成参考线,这时可以兼顾参考线上的单位像素(或厘米等,如果是厘米等,请到首选项中设置为像素),拖拽参考线,包围需要切割成图片的区域。这个不是必要环节,但是参考线可以帮助你切割更准确,因为切到可以自动靠齐参考线。如果有必要也可以使用网格来帮助。
其实参考线和网格是在开始设计构图时候就应使用的,这样页面才会更规矩,布局才更精确。
2:使用切片工具,切片工具和裁剪工具共享工具箱位置,点击裁剪工具不放,就会出现切片工具了。使用切片工具在图片上沿参考线划分。这个和使用选取工具是一样的。切出一个图片后,会根据整个图片自动生成其它切片。这个由你创建的是主要切片,其它都是自动生成的,可以叫辅助切片。如果对主要切片不满意,使用切片选择工具将它选中,然后点击右键删除。如果一个主要切片被删除,由它而生成的辅助切片也会被删除。
3:文件-存储为WEB和设备所用格式
执行这个操作会将你的图片直接生成一个按照切片分割好的网页。
注意:默认是生成用表格的网页,如果需要生成CSS网页,在这个界面的最左上角,有一个“优化菜单”图标小小的下拉菜单。点开后选择“输出设置”,在上面第二个选项中,选择“切片”,可以看到默认是“生成表格”,改成“生成CSS”就可以了
4:至于其它设置,请自己试验吧。返回,存储就可以得到网页。
建议:最好只使用那些被切好的图片,自己重新编辑CSS,因为生成的css真是要多乱有多乱啊
手打的,希望能帮到你
选择切片工具,然后在图片上右键,会出现切片菜单,选择分割切片,定好高度及宽度方向上的分割分数,确定后就切好了,然后要保存为WEB所用格式,就会在我的文档里自动生成一个images文件夹,里面按次序存着分割好的图片。
UI切图一般都会用到专门的软件,比如我们用的摹客,Sketch、Adobe XD、PS的设计稿都支持,设计师只需在设计稿上进行切图标记,然后用摹客的插件上传到平台,就可以自由下载和使用切图了。摹客的PS插件主要是这样使用:
1.安装摹客的PS插件,安装好之后在PS的「窗口>扩展功能」找到摹客插件,选择并打开:
2.标记切图:在完成的设计稿上,选中需要切图的图层或编组,点击「标记切图」。当图层或编组的名称前增加了“-e-”,「标记切图」变为「取消切图标记」,就可以了。
3.标记切图后,点击插件的上传按钮,开发工程师就可以在摹客平台自主下载不同尺寸和平台的切图了。
摹客的这些切图和标注等功能都是免费的,可以使用。
现在还有人用PS切图吗,也太麻烦了
直接通过PS插件上传蓝湖,蓝湖直接切好了
甚至还有自动标注
不舒服么