设计师如何给网页切图

1、UI 中网页设计切图怎么切

PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。
切图工具：
Cutterman 一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最近才开始接触这款插件。
Part 2 Photoshop
现在常用的几种设计尺寸
1. 640*960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧)；
2. 640*1136 5/5S/5C，IPhone更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了；
3. 750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。

2、网页美工是怎样进行图片切图的

步骤如下：
1.首先我们需要用到的文件就是psd的文件了，一般都是由设计师来完成的，我们切图也就是切psd文件，因为psd文件是分层的，所以想切哪里切哪里。
2.之后用Photoshop软件打开psd文件，这里小鱼用CC版本演示，其他版本大同小异。我们打开之后可以双击左侧的放大镜工具，将图片缩放到原图大小。
3.我们要切图，当然用到的就是“切片”工具了，可以点击左边的切片工具，也可以右击这个图标选择更多的相关工具。切图都是用切片工具。
4.选择好切片工具之后，想要切哪里就直接拖动鼠标就可以了，然后会出现切线，在切线框内右击还可以弹出菜单。
5.点击菜单的编辑切片选项还可以对切片进行编辑，可以编辑大小等项目。
6.但是如果我们只想要字怎么办，不要底层背景，那么可以用“移动”工具。选择移动工具，在不要的背景上单击，这时候在“图层”面板里面就会选中这个图层。注意勾选上面的“自动选择图层”。
7.把选中的不需要的背景前面的小眼睛去掉，最后只剩我们想要的部分。
8.然后点击左上角菜单栏的“文件”，选择“存储为web所用格式”选项。
9.如果要透明的，那么一般选择png格式，如果要非透明的，那么哪个格式存储的文件小就选择哪个，这样能保证网页加载速度快。然后点击下面的“存储”按钮。
10.然后给图片命名，选择一个保存地址，最后选择“选中的切片”，不然好多没用的图片都会保存下来。
11.最后找到保存好的图片打开，已经是一个我们想要的图片了。

3、在网页设计中如何用PS切图

1、在Photoshop中打开设计稿，如下图：

2、选择工具板上的slice切片工具，大面积的色块单独切成一块，尽可能的保持在水平线上的整齐，切好的图如下所示：

3、在PhotoShop中选择file-save for web...来输出，这里要注意一些参数的选择：

4、接下来在Dreamweaver里建立站点：

5、在图示左边的site name中为站点起一个名字，如example然后在下面的local root folder中选择刚才导出的站点的文件夹：

6、重新制作页面表格，通常在photoshop中直接导出的htm文件是不可以直接使用的，因为有些地方在实际运用时要作调整：

7、根据这个页面表格所示，在新的页面中建立一个三行一列的表格，把cellpadding,cellspacing,border三项值设为0，不然会有空隙，最后选择表格，背景添加图片即可。

4、网页切图怎么做? 网页设计切图

网页切图怎么做，网页设计切图的方法。

如下参考：

1.打开PS，点击切片工具，如下图所示。

2.点击切片工具，可以将图片切割成所需的大小，如下图所示。

3.剪切图片后，点击导出特殊网页使用的格式，如下图所示。

4.输入属导出web的格式页面，并按住shift键选择所有部分。

5.导出格式设置为JPEG，如下所示。

6.最后，单击save存储，如下图所示。

5、UI设计师如何进行切图

切图资源尺寸必须为双数

2.图标切图输出应根据标准尺寸输出并且考虑到手机适配内（主要是iPhone 6plus的适配）容

3.降低图片大小：在切图资源输出中图标切图输出是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小、

4.可点击部件应当注意其点击区域不小于88px

5.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。

以上是部分切图规范

6、UI设计中的切图是怎么切

UI切图一般都会用到专门的软件，比如我们用的摹客，Sketch、Adobe XD、PS的设计稿都支持，设计师只需在设计稿上进行切图标记，然后用摹客的插件上传到平台，就可以自由下载和使用切图了。以PS的插件为例：
1.安装摹客的PS插件，安装好之后在PS的「窗口>扩展功能」找到摹客插件，选择并打开：
2.标记切图：在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。当图层或编组的名称前增加了“-e-”，「标记切图」变为「取消切图标记」，就可以了。
3.标记切图后，点击插件的上传按钮，开发工程师就可以在摹客平台自主下载不同尺寸和平台的切图了。
摹客的这些切图和标注等功能都是免费的，可以使用。

7、web网页界面如何给前端标注，切图

公司团队现在用的是摹客idoc，我们把设计稿上传到摹客后，可以自动生成标注，前端可以直接查看，针对大多数工具存在的标注误差的情况，摹客也支持手动进行修改；设计规范等信息，摹客也支持手动标注在设计稿上面。
切图的话，我们是用摹客的PS插件先在设计稿里面标记切图然后上传到idoc，前端小姐姐就可以去直接下载，同时还支持切图压缩和自定义切图尺寸，还是比较方便的推荐使用。

8、网页设计怎么切图

你用什么软件设计的就用什么软件来裁切图，我用的是photoshop进行设计，也是用这个来进行的切图；
切图保存格式最好、最常用的是gif和jpg。色彩要求不多的情况下，比如说小图标，就用gif。如果色彩比较丰富，gif就不够用了，就要保存成jpg。至于png，一般情况下不要用，一个是占用空间大，再是在不同的浏览器下浏览，会出现灰色背景，祝你好运！

9、ps如何切图成HTML页面 希望给一个详细流程操作

1、在Adobe Photoshop CC中打开设计好的PS图片文件

2、按键盘快捷键Ctrl+R调出参考线功能

3、在标版尺上按住鼠标左键拉出权辅助线到相应位置

4、选择切片工具，或键盘快捷键C ，激活切片功能；点击基于参考线的切片，软件自动将辅助线条之间分割成若干切片（注：放大检查辅助线位置会更精准）

5、选择菜单【文件】>存储为web格式，调出web格式窗口

6、点击【存储】按钮，进入存储窗口

7、存储窗口中格式选择Html和图像，所有切片；然后保存

8、自动生成网页代码文件和图像；如图示：图片文件夹images和html代码文件。