web切图教程

A. web网页界面如何给前端标注，切图

一键标记切图，操作更快捷安装蓝湖插件之后，即可一键标记切图，明樱方便快捷。
一键上传蓝湖，自动共享给同事
将标记好切图的设计图一键上传到蓝湖，即可将设计图跟切图共享给你的同事，管理更科学。
无须逐一发送，你的同事就能在线查看、在线评审设计图，还能自动标注和下载切图。
一键下载切图，支持多种设备
设计图上传到蓝湖后，可以一键下载多页面切图，也可以下载单张设计图内的切图文件；
而且蓝湖的切图下载支持多种设备，
开发常用的 PNG、SVG、JPG、PDF、WebP 格式都有哦~
一键压缩切图，告别旁纤二次加工
蓝湖支持一键压缩切图，能有效地缩小应用和网站的图像大小，从而让网站加载更快，用户体验更佳！
设计师和开发工程师从此告别切图文件二次加工，再运槐仿也不用一张张地压缩切图文件了。

B. 急急急~~~在PS切图储存为Web格式的时候我选择的是jpeg的格式。但是保存好了是gif的格式，怎么都改不过来。

你只是设置了第一张图片为JPEG，而其它的图片则全部是默认的GIF格式，下面给出详细的设置步骤：

准备的材料：PS CS6示例。

1、首先，打开PS软碰搏件并创建条件以保存Web格式，将图片进行切片，见下图。

C. 网页如何切图

问题一：网页切图怎么做? 网页设计切图 网页切图怎么做？网页设计切图
制作网页，很多的时候，首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片，不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程就是切图。（当然是用剪切、选择工具也可以，但是用切片工具处理更精确。）
切图的目的就是更加精确的进行网页布局。
photoshop、fireworks等软件都带有切片工具。

问题二：页面设计页面制作 这种背景的页面怎么切图的啊。。。主要是背景怎么整的。。。 目前我无法判断你那些图片带链接，所以只能大概的给你讲一下（目前文字部分我先不管），具体我拿第三张来讲给你吧。
首先，把所有要做链接的图层都隐藏掉，剩下的层，就可以用来切图，整知竖宽体背景纤山是蓝色，所以css搞定就行。
其次，背景有一张整体的背景图，这个需要全部单独切下来，图片上面不要带任何其他元素，就只是这张单独的图片就好，布局的时候引用为背景！
然后，剩下的就是主体部分，上面的播放视频和文字我就不讲了，简单，底部的汽车促销图片也切一张大图就好，也简单。
最后，就剩下最难搞的中间部分，大概想了一下，2种方法实现，如下：
1、切成整张大图，需要做链接的地方，画上不规则热区就好了！这种比较简单些。
2、图片什么样，就切成什么样，每张小图都单独切出来（注意：要做成png格式保存，背景设置为透明），然后写html的时候，用css画出等大的不规则图形，吧图片当做背景加进去，然后用css绝对定位一下，如有链接加链接，完美实现！
备注：css画不规则图形，网上可以搜到教程，看一看就差不多，不难！
至于其他几张图，比较简单，简单说一下第二张，第二张的其实如果想简单实现，那就除文字和纯背景色外，整张切，然后有链接的地方加热点就好，想做复杂一点，就可以用到我所说的css画不规则图形，纯色的三个纵横条，不用切，css画出来，添加背景色，然后绝对定位就好，其他的该切多大就切多大，然后用css绝对定位，设置好z-index的关系，就ok了！
之前做过很多这样的网站，这都是经验之谈，完全能实现，要有问题再问我！完全纯手打啊~~

问题三：photoshop网页切图怎么用 1、首先需要用photoshop把psd源文件打开，看看源文件的整体布局。源文件是分层的，方便切图的层次。
2、切图的工具叫做“切片”，在左侧面板可以看到。右击可以看到“切片工具”和“切片选择工具”按钮。
3、用放大镜将所要切的图片部分放大，可以用参考线确定大小，切图是可以沿参考线切。
4、切换到切片工具，沿参考线划出切片，右击可以看到有可以编辑切片的选项，可以设置切片像素大小。
5、切好后就可以单击菜单栏“文件”，选择“存储为web所用格式”选项。
6、选择要存储的切片，然后右上角可以设置图片的格式、质量大小，设置好以后就可以单击保存了。
7、保存需要保存的切片，选择好路径即可，单击保存即完成。打开保存好的图片，如图。
注意事项
注意保存时最好自己设置路径，settings选项。

问题四：怎么用ps做html切图 ，详细！ 10分 先切小片然后写代码 不是一句话两句话能说清楚的

问题五：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了，改一改上下都能照顾到。

问题六：网页切图是不是一般只切按钮部分？别的比如背景都用CSS实现？ 一般来说，比如网站logo、网站相关的图片(例如产品图片,不规则的形状图片等)、渐变、特殊字体(宋体、黑体、微软雅黑以外的字体)，几乎都是要切成图片来做的。切成图片又分为2胆，一种通过设置css背景，另外一种是直接标签加路径调用。
其他的全部用css来实现。

问题七：ps如何切图成HTML页面 希望给一个详细流程操作 修改好相应的文字与图象之后，我们就将PSD文件输出(X)HTML文件。
首先得先对PSD文件做切片，有两种方法：
①使用工具栏上的“切片工具”，
然后在图象上划出一块一块的区域。
②使用基于参考线的切片，按ctrl+R调出标尺栏，
把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图
将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面
选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。
接下来就可以输出了:
①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。
②接下来就会弹出一个“将优化结果存储为”的窗口，如图
在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML和图象(* html)”，再选择“保存”就可以输出憨个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。
③如果我们需要输出“div+css的网页”我们还可以这么做：
在“设置”处的下拉列框，选择“其他”
就会弹出一个“输出设置”的窗口
在第2个下拉列框处选择“切片”
选择“生成CSS”
单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。

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

问题九：如何把图片切成HTML页面 用 ImageReady
其次打开你想做切片的图片
在英文输入法下，在程序界面中按 K 切换到切片工具
在图片上随意进行切片
按CTRL+ALT+SHIFT+S 将优化结果存储为
保存类型下拉框拉下来选择“HTML和图像”
进行保存
或者使用photoshop的 切片工具 操作！
这是教程
wenku./...a
wenku./...6
希望帮到你

问题十：网页切图什么意思，怎么切法 如果你登着qq
同时按下Ctrl+Alt+A这三个键就可以切图了。
如果没登QQ，系统也有自带的截图功能，就是键盘上的PrtScrSysRq，不过这是全屏截图
然后在开始~所有程序~附件中打开“截图工具”，然后再按下ctrl+print（键盘上的PrtScrSysRq键）即可
切的图可以保存在自己电脑，也可以发给自己的朋友。
谢谢！

D. photoshop网页切图怎么用

Photoshop软件“切片工具”是制作网页切图的常用工具，利用切片工具把一张大图切片成需要的小图片，便于制作成网页页面，以Photoshop cc2014软件为例，切片工具的使用方法是：

1、打开ps软件，“文件--打开”，打开一张要处理的图片；

E. ps切图 web保存多个jpg的图片为什么只有第一个是jpg其他是png

一、切图完成后，按Ctrl+Shift+Alt+S键（存储为web所用格式）。
二、点击左下角的缩放按钮，缩放至能看全图片中的所有切片即可。
三、鼠标从图片左上角拖动到右下角，或者按住键盘shift，框选需要输出统一格式的切片（被选中的切片周围呈现橙黄色线框）。
四、点击右上角的“预设”，选择需要输出的格式碧伏，如jpg格州慧轮式。
五、点击下方的册信“存储”，在弹出的保存窗口下方切片选项中选择“所有用户切片”，点击保存即可。

F. photoshop网页切图怎么用

在photoshop的工具栏中找到切片工具，就可以在图片内按照网页设计的要求进行切片了，如同使用框选工具一样拉出一个方形区域，这就是一个切片；也可以利用切片选择工具对切片进行调整。切片制作好以后选择储存为web所用格式，在保存对指蔽话备返框内内根据需要选择“HTML和图像”或“仅限图像”等选唯滚州项······

G. 做好的网页平面图用Photoshop怎么正确切图

Photoshop软件，简称“PS”，是由Adobe Systems开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像，其众多的编修与绘图工具，可以有效地进行图片编辑工作。用Photoshop cc2014软件将做好的网页平面图切图的详细制作方法是：

1、打开ps软件，“文件--打开”做好的网页平面图；

H. 前端如何切图（超详细，超小白）

        身为一名前端开发者，$\color{red}{ 切图 } $虽然可以被UI或者蓝湖等工具解决，但是这也是属于前端er的必修课。因此，我也是把切图分享作为我第一篇博客的分享内容。

        下面是直接操作的步骤，如何打开psd图等操作应该也不用我肢宽废话了。

        1.第一步就是找到你需要的图或者icon的图层，并选中它（如果有叠加需要多选就按住ctrl进行多选）。

2.选择上方工具栏，选择 图层—>复制图层，

    然后会弹出一个编辑框，重点：文档一定要选择 新建 ,名称可以填写自己需要的，然后点击确定，就会有新的图了。

3.因为画片大小可能不太符合自己的预期，可以选择上方工具栏 图像—>裁切，会自动切成历郑亮合丛激适的大小。

4.到这一步基本上就已经成功了，最后就是保存了。依然是上方工具栏，左上角，文件--->导出--->存储为web所用格式--->选择四联--->选择PNG-24格式（根据自己需要，我一般使用这个），最后点击 存储 就可以了。

I. 网页美工是怎样进行图片切图的

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

J. PS-前端切图教程（切jpg图和切png图）

转发自： PS-前端切图教程（切jpg图和切png图） - xing.org1^ - 博客园 (cnblogs.com)

———————-------------------------------------------------------------------- PS切图步骤说明 ————————————————————————————————

一共分两大项：切jpg图、切png图。

我用的是PS CC 版本，教程中用到的除了界面和摆放位置不一样外，其他应该和低版本的都一样了。

一、 切JPG图

1．打开ps导入图片的步骤是铁定的了

2．选择左边工具栏里的“切片工具”

事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标

你可以鼠标左键点住“裁剪工具”不松手，他会在右边展开（我这是工具栏在ps界面左侧的情况下）这一组的所有工具，在里边选择“切片工具”即可

我图中之所以框选了两个工具，是因为后期还要用到“切片选择工具”，这里先认识一下他的位置在哪。

3．用“切片工具”切出想要的范围，框选范围就像平时用qq的截图工具一样。

如下，我需要这个小图标，我就框选了他。

框选中：

框选后：

如果你框选好了松开了鼠标，他还是这种黄色的边线，你把“切片工具”移到附近，他还能调整框的大小范围。

但是如果你框选了好几个了，想改前边已经框选好的：

像如上这样，要知道，ps切片工具最近一个选区的切片是用黄色框包裹的，其他前边切得都是蓝色边线，这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。

这就要用上“切片选择工具”了

4．“切片选择工具”调整范围：

切片选择工具就在“切片工具”的下边，寻找方法见上解。点击选择要调整的切片蓝线，待其变成黄色后，调整范围。

切片选择工具只能选择并调节范围，不能切片。

5．切好后保存

保存方法：文件——存储为web所用格式【快捷键ctrl+shift+alt+s】

在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式

按需求更改质量（低、中、高、非常高、最佳。这五个模式）

点击存储后弹出【将优化结果存储为】的对话框

选择存放位置、设置文件信息——

一般存储时，ps会自动建立一个images文件夹，你要找到刚才自己设定的位置中，找images文件夹，在她里边才有你刚才切好的图。

命名文件名

“格式“——仅限图像

在“切片”那里，可以选择是存储全部切片还是只存储选中的切片，

一般默认就存储全部切片就好了，有时候只需要一小块切片时，可以选择存储选中的切片，他会只保存一张你当前切得图，这样省的自己去一大堆切片中捡出来自己要用的了。

二、 切PNG图

切透明图的核心理念是，你要把不需要的背景图给隐藏掉，只让需要的留下来，底部背景变成像马赛克那样的样式。

1．打开ps拖进来你要切的psd或者tif文件，

一定得是带图层的。

2．先选择移动工具

3．并在顶部选项栏里勾选自动选择，

4．下拉框里选择图层

若没有选项栏或者图层栏的：

在菜单栏点击窗口——选项。打了对勾后就能调出工具对应的选项面板了。

5．然后用“移动工具”点击你不需要的背景图，ps会自动选中该背景所在的图层，

6．你在图层面板中，把对应这层的左边小眼睛关掉就好了，让背景图先隐藏起来。

有时候设计会有好几层，他为了光效或者其他效果做了好几层不同透明度的背景叠加在你要切的东西后边，

你就用移动工具（快捷键v【英文输入法下按v就可以锁定移动工具】）点击它然后关掉它，有几层就多做几步，直到你不需要的背景全部隐藏掉。

但是良心的设计一般会把背景都放到一个图层中，你找到一层背景，所有的都和他在一个组里边，你把组的小眼睛关掉即可

7．然后切片工具切出你要的那个图标

8．保存：文件-存储为web所用格式(ctrl+shift+alt+s)

9．选择png-8/png-24格式，看你对图标的要求了

PNG8”是指8位索引色位图，“PNG24”是24位索引色位图；

png8：

每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，

例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；

png24：

每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；

所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，

所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；

这是二者的区别，根据自己的需求选择吧。

10．然后就是一定要勾选透明度，其他默认设置就好。

Png-8的透明度位置

Png-24的透明度位置

11．”保存全部切片“或者“保存选中切片”

这里还要说明一个问题，有时候一个页面中，我用切片工具选出好几张png图标准备切，然后保存的时候也选择png格式都没问题，

但是到了选择保存位置这个对话框里，选择的是“保存所有切片“，

最后保存出来的图片，只有最后切得那张或者说切片工具选中的那张是png的，其他就都存成jpg格式了，背景是白色底

！！所以切png的图，还是建议，一张一张“保存选中切片”比较好。

或者你的图标与白色底差别大的话，你也可以不计较，让他保存成jpg后再去ps中魔棒抠图也好，不过这样比较麻烦不是。

有的说，背景图和图标每分图层咋办？那咋办？找设计吧。要不你自己选取工具扣吧，扣好了另存为png也是一种办法

三、 其他技巧 ：

1．Ctrl+ +号放大图片，

2．ctrl-缩小

3．按住空格，鼠标图标变成抓手工具，移动页面

四、重磅彩蛋！！！还有一个吊炸天的方法——针对单一小icon切成png的

“移动工具”点击图标，选中图标所在的图层；

右击该图层，选择“转换为智能对象”；（ps这时候没反应，不要大惊小怪，是你看不到而已）

接着再次在这个图层上，右击——“编辑内容”

对话框点击确定

ps就自动生成一个新的文件，只有那个icon，而且是透明的哦！

很神奇有么有！

很省力有么有！

1秒搞定有没有！

以下是图解：

这是点击一个小图标

选中图标后的图层面板

右键点击该图层选择“转换为智能对象”

没转换前的图层样式：

转换后的图层样式：

所以别说“我转换了ps没反应”这样的话了，是有的，你不仔细看看不到

接着再右击——“编辑内容”

点击“确定”

看，他就新建了一个“形状8”的页面，放的是我的png的小图标，

 最后你保存为png也好，“存储为web所有格式”也好，自由发挥吧。

 这个方法可能只能保存一个图标，

有的人说我好几个图：例如文字+图片都有咋弄？

那就切图呗！

那还要纠结的话那就合并图层吧！