当前位置：首页 - 正文

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

发布网友发布时间：2022-04-21 20:38

共4个回答

热心网友时间：2022-04-20 14:07

一.想要将psd转为html，首先需要具备几个条件：

重点1就是会用切图工具，如果切图工具都不会用，那么就需要先学习制作图片的工具，例如photoshop，fireworks...等

重点2会用代码编写工具，有编写html,css,js等代码的工具

重点3会页面布局的基本代码，如果不会代码，需要先学习代码，会基本的html代码，css样式代码，如果页面稍微复杂点，还需要会javascript

二.切图以photoshop工具的切片工具切图为例，进行切图的展示（说明:切图的方法有很多，像选择选区然后ctrl+c然后ctrl+n然后ctrl+v，就可以开始保存，此为最简单的切图方法）

1.将所需的PSD文件打开

2.点击打开按钮，选择需要打开的文件

3.文件打开以后，选择工具栏的切片工具，根据需要进行图片的分割，选择切片工具，然后在psd页面上拉动选择位置，就可完成一张图的切片

4.将切图保存

5.选择保存的格式

三.根据psd设计图，进行html代码的书写

示例图：如

总结：按照步骤完成的话，最基本的简单页面，就可以实现出来了。

热心网友时间：2022-04-20 15:25

psd效果图变成html文件其实是网页设计到网页功能的具体化过程具体可以分为三个步骤：

确定思路：切图前要对psd有所了解，熟悉页面结构（上下结构、左右的结构等等），对页面有一个清晰的思路有利于切图和写代码。

切图：利用ps中的切片工具把psd图切成小的图标和图片（背景平铺的图标、banner图片、网站logo、幻灯片图片、特殊的图片和背景图片）保存到一个文件夹便于集中使用。

写代码（css+div）：写代码严格按照ps效果图去写，div要注意代码要简洁、css要注意浮动兼容问题，css+div总体要求是代码简洁、可兼容、代码命名标准结构化。最重要的最后的调试，如果一个小的细节出问题有可能导致你返工，要做到细心、细心、再细心。

热心网友时间：2022-04-20 16:59

先从HTML布局开始

布局好HTML后再开始写基础的代码，不使用图片的时候就用代码实现边框背景色等

遇到需要使用图片的时候再PSD上面切需要使用的图，其他图暂时不切

按2，3步骤写完整个HTML+CSS布局

热心网友时间：2022-04-20 18:51

切图你切不就完了。然后用img标签和div布局，浮动定位什么的

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com