制作网页，很多的时候，首先要用处理软件制作出网页的效果图。效果图做好是一幅完整的，不可能把这一整张的都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程就是切图。（当然是用剪切、选择工具也可以，但是用切片工具处理更精确。）
切图的目的就是更加精确的进行网页布局。
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 640960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧)；
2 6401136 5/5S/5C，IPhone更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了；
3 7501334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。
问题六：网页切图是不是一般只切按钮部分？别的比如背景都用CSS实现？ 一般来说，比如网站logo、网站相关的(例如产品,不规则的形状等)、渐变、特殊字体(宋体、黑体、微软雅黑以外的字体)，几乎都是要切成来做的。切成又分为2胆，一种通过设置css背景，另外一种是直接标签加路径调用。
其他的全部用css来实现。
问题七：ps如何切图成HTML页面 希望给一个详细流程 *** 作 修改好相应的文字与图象之后，我们就将PSD文件输出(X)HTML文件。
首先得先对PSD文件做切片，有两种方法：
①使用工具栏上的“切片工具”，
然后在图象上划出一块一块的区域。
②使用基于参考线的切片，按ctrl+R调出标尺栏，
把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图
将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面
选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。
接下来就可以输出了:
①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。
②接下来就会d出一个“将优化结果存储为”的窗口，如图
在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML和图象( html)”，再选择“保存”就可以输出憨个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。
③如果我们需要输出“div+css的网页”我们还可以这么做：
在“设置”处的下拉列框，选择“其他”
就会d出一个“输出设置”的窗口
在第2个下拉列框处选择“切片”
选择“生成CSS”
单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。
问题八：网页美工是怎样进行切图的 步骤如下：
1首先我们需要用到的文件就是psd的文件了，一般都是由设计师来完成的，我们切图也就是切psd文件，因为psd文件是分层的，所以想切哪里切哪里。
2之后用Photoshop软件打开psd文件，这里小鱼用CC版本演示，其他版本大同小异。我们打开之后可以双击左侧的放大镜工具，将缩放到原图大小。
3我们要切图，当然用到的就是“切片”工具了，可以点击左边的切片工具，也可以右击这个图标选择更多的相关工具。切图都是用切片工具。
4选择好切片工具之后，想要切哪里就直接拖动鼠标就可以了，然后会出现切线，在切线框内右击还可以d出菜单。
5点击菜单的编辑切片选项还可以对切片进行编辑，可以编辑大小等项目。
6但是如果我们只想要字怎么办，不要底层背景，那么可以用“移动”工具。选择移动工具，在不要的背景上单击，这时候在“图层”面板里面就会选中这个图层。注意勾选上面的“自动选择图层”。
7把选中的不需要的背景前面的小眼睛去掉，最后只剩我们想要的部分。
8然后点击左上角菜单栏的“文件”，选择“存储为web所用格式”选项。
9如果要透明的，那么一般选择png格式，如果要非透明的，那么哪个格式存储的文件小就选择哪个，这样能保证网页加载速度快。然后点击下面的“存储”按钮。
10然后给命名，选择一个保存地址，最后选择“选中的切片”，不然好多没用的都会保存下来。
11最后找到保存好的打开，已经是一个我们想要的了。
问题九：如何把切成HTML页面 用 ImageReady
其次打开你想做切片的
在英文输入法下，在程序界面中按 K 切换到切片工具
在上随意进行切片
按CTRL+ALT+SHIFT+S 将优化结果存储为
保存类型下拉框拉下来选择“HTML和图像”
进行保存
或者使用photoshop的 切片工具 *** 作！
这是教程
wenkubaidu/a
wenkubaidu/6
希望帮到你
问题十：网页切图什么意思，怎么切法 如果你登着QQ
同时按下Ctrl+Alt+A这三个键就可以切图了。
如果没登QQ，系统也有自带的截图功能，就是键盘上的PrtScrSysRq，不过这是全屏截图
然后在开始~所有程序~附件中打开“截图工具”，然后再按下ctrl+print（键盘上的PrtScrSysRq键）即可
切的图可以保存在自己电脑，也可以发给自己的朋友。
谢谢！ps做出来的生成html代码方法
工具/原料
ps工具
方法/步骤
打开ps软件，选中要转换成html静态页的，这边就以百度经验的页面为例！
1、打开百度经验页面的保存为一张；看清楚是是jpg的；用ps打开这张，如图；
2、下面就开始 *** 作；html静态网页一般都是、文字和效果组成的，这边主要是教用ps生成html静态页，就是把转换成静态页；因为网页为了保证网速都不会把裁减的太大，所以这边就按照正常的切；
3、首页选择“切片工具”，如果没有就右击工具那边的右下角箭头，选择切片工具；
4、选好工具就可以开始切图，切图就是把一张大的切成小的，记住一定要保证小图拼起来和原图一样，这就要求切图的时候线最好对其，不然会看的错位；先把切割成几条长条图；
5、切完，右击菜单栏“文件——选择存储为web和设备所用格式”；d出“存储页面”；点击“存储”；
6、接下来才是重点，切记不要按步就直接保存；点击下面的“格式”，选择“html和图像”；然后保存；
7、保存以后就生成了image文件和html页面两个文件夹，然后点html那个页面；
8、打开以后是不是发现和一样，而且是代码格式的静态页；
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）