切图生成html（h5切图）

本篇文章给大家谈谈切图生成html，以及h5切图对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、如何将psd文件切图并布局html
• 2、切图注意什么?把图片转化成div+css的html文件。切图时,有什么原则?
• 3、如何将psd网页切图转换成html
• 4、ps切图后web保存为html格式怎么跟屏幕尺寸自适应?
• 5、PS切图出来以后存储为web,导出html的问题

如何将psd文件切图并布局html

建议LZ先用DIV+CSS写出网页大致框架，然后再把切出的图片填进去。具体的转换步骤是：切片工具切图---文件---储存为web和设备所用格式--- 点击储存后在格式化一栏选择HTML和图像 搞定~，很简单的。

首先我们需要用到的文件就是psd的文件了，一般都是由设计师来完成的，我们切图也就是切psd文件，因为psd文件是分层的，所以想切哪里切哪里。 之后用Photoshop软件打开psd文件，这里小鱼用CC版本演示，其他版本大同小异。

在电脑上打开PS软件，在软件的菜单栏中找到文件，点击后选择打开按钮。选中需要处理的PSD文件，点击打开。在软件的导航栏中选择切片工具。用切片工具在图片上进行所需要的分割，如本例中分为上下两块。

没什么流程、我是做asp的，工作闲暇之余也自己经常切页面玩，不难的。分清楚div、分清楚层，一步一步写就好了。

切图注意什么?把图片转化成div+css的html文件。切图时,有什么原则?

1、不要合层，尽量保持每个文字图标图片都有独立图层，这样在DIV CSS切图时方便隐藏显示切图。

2、命名的准确性，也是应该注意的问题，切图后把个元素放到相应的文件夹后，图片等相关元素命名要符合div+css的命名规范，以备后边程序在后台看代码的时候有较高的效率，及代码的规范程度。

3、首先，把所有要做链接的图层都隐藏掉，剩下的层，就可以用来切图，整体背景是蓝色，所以css搞定就行。

4、这需要在切片的时候注意到背景图片的最小单元，在css中手动添加背景平铺。网站前端旨在缩小前端图片“体积”，所以大部分切片转div和css都是需要手工编写代码，目前没有完美理想的软件生成。

5、首先要先切出你网页的布局，比如头部，主体等，因为一般是不会只做一个网页的，这样你可以先看看网页中有没有什么相同的地方，把这些地方切成一个整体。以后做框架的话会方便很多。

6、使用ps切片，切好了保持为 web存储格式 弹出的窗口可以设置保持的类型的，可以设置成div加css的 如下图：切好片以后，文件保存为web存储文件，就会弹出下面的图片。点击红框的箭头。点击输出设置。

如何将psd网页切图转换成html

1、首先，在ps中打开一张要处理的图片。然后，在左侧的工具栏中点击切片工具。接着，用切片工具把图片分成4份。之后，再依次点击左上角的文件——存储为web所用格式。在弹出的窗口中点击存储的按钮。

2、具体的转换步骤是：切片工具切图---文件---储存为web和设备所用格式--- 点击储存后在格式化一栏选择HTML和图像 搞定~，很简单的。LZ只需要了解切图工具的用法就可以了。PS：图片一般储存为PNG格式。

3、你用ps左边的切片工具切好后，然后保存为web所用格式，然后在弹出窗口中的文件类型选择 保存为 图片和html就可以了。

4、你是想在ps里面制作吗？你psd制作好后，用ps里的切片工具(工具栏里像把刀子的)划分你的图片—就是说把每个按钮、超链接、可以删掉的地方一一分割好，然后点文件—导出为web文档(还是导出为html，忘了)差不多是这样。

5、另存为jpg或png格式，再用选择工具来切图，用哪块选哪块。

6、先合并图层，再用Photoshop CS中的切片功能，把需要添加文字的部分切割出来，再生成HTM文件即可。

ps切图后web保存为html格式怎么跟屏幕尺寸自适应?

ctrl+ALt + I 更改图像大小 先把图像划分为两个或多个 高度小于8192的图片， 然后再进行裁切 欢迎补充。

自然拉伸 如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。

现在不用手动切图了，你可以用蓝湖切图，一键切图之后，就会生成多格式的切图，也没有这些乱七八糟的问题出现，开发可以选择下载需要格式的切图进行开发。

你用ps切图制作的网页，那个整张图的大小确定了网页的宽度和长度，你把表格改为100%，也不能改变图片的大小。因此在小的屏幕里还是很宽。

PS切图出来以后存储为web,导出html的问题

打开安装好的ps软件。打开一张图片。将图片切片。找到图片，将图片储存为。进入储存图片界面，设置好之后点击储存。选择格式，图像跟HTML。

选择菜单【文件】存储为web格式，调出web格式窗口 点击【存储】按钮，进入存储窗口 存储窗口中格式选择Html和图像，所有切片；然后保存 自动生成网页代码文件和图像；如图示：图片文件夹images和html代码文件。

打开后，编辑修改部分图片或文字，符合自己需要后，点菜单上的》文件》存储为web所用格式，输出就是现成网页。不然怎么叫模板呢？正常用法就是这样的。

图片需要上传到网站的图片空间的，不然是绝对显示不了图的，我是做淘宝的，经常做这个，图片上传到淘宝的图片空间，或者上传到其它空间，然后复制上代码，才会显示图片呢。

首先，在PS中完成切片后，依次单击“文件”--“存储为Web和设备所用格式”，如下图所示。其次，在弹出窗口中，单击右上角的“存储”按钮，如下图所示。

关于切图生成html和h5切图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。