怎么把ps转化成html,【论文】浅谈Photoshop转化成Html的方法.pdf

科技信息 计算机与网络

浅谈Photoshop 转化成Html 的方法

江苏经贸职业技术学院信息系 马 涛

［摘 要］Photoshop 是公认最出色的图像处理软件之一，与平面设计或者广告设计一样，网页设计也可以在Photoshop 上进行，这样

可以让界面设计工作从Dreamweaver 的排版中脱离出来，而且效果更加专业漂亮。但是用Photoshop 设计出来的网页是psd 格式，

必须进一步转化为html 格式。本文通过一个具体案例详细介绍了这个转化过程，希望能对学习网页制作的人员有一定的启示。

［关键词］Photoshop Html Web 网页制作 网页设计

Photoshop 转化成html 是商业级网站开发的一个重要环节，每个设 点击click ，已浏览visited 。如:搜索按钮: btn- search、btn- search- hover 、

计师进行网页设计的时候，最开始都是用Photoshop ，而最终成形的却是 btn- search- visited 。

html 网页，其中关键部分就是如何将psd 文件转换成html 网页。这需要 (4)具体案例

大家不仅熟悉Html/Css/Javascript ，能制作各式各样的网页元素，还要熟 给网页psd 文件划分区域，给每个区域命名，请看表2 和图 1 所

悉Photoshop 截图/ 切图的技巧和方法。本文将重点介绍这一过程的方 示：

法技巧。 表2 网页布局详细说明

一般情况下，不同的网页设计师在拿到美工的psd 图时会有不同 图层名称 图层内容

的做法：第一类是打开fireworks 将图片切割导出为html 。第二类是直接

在dreamweaver 之类的工具去拖拉布局，导入相关的图片，flash 资源。第 wrap 网页的最外层，包含一切内容

三类先在ps 中完成切图后，在文本编辑器中看着效果图一步步的制 header 包含logo

作。

nav 导航条

以上是大多被采用的方法，但都不好：第一种方法最为不好，这样

的代码根本不具维护性和可读性。第二种方法也不好，代码难免会有冗 main- content 主体部分主要文字

余，做出来的东西基本需要排查一遍。第三种方法也不好，因为你需要 sidebar 主体部分右边红色图片

看效果图一点点的拼，也就是说写html 标签的时候，你在不断的假设这

footer 网页底部信息

块要怎么去显示。那么正确的做法是什么？

1、网页布局

(1)为什么要进行网页布局

此处的网页布局是针对成型的网页设计稿psd 文件，形成一个直

观的执行线索。具体点就是明确几个问题，版面可以分成哪几大区域？

哪些部分先做？制作的顺序是什么？自上而下还是从左到右？这样操作

的好处在于网页局部出现问题不会影响全局，总的区块划分好后便逐

个添加细节元素，在添加的过程中难免会出现一些问题，但是有总的框

架在，你会思路清晰地在局部将问题解决掉。

(2)如何进行网页布局

采用DIV+CSS 方式进行网页布局，这种方法是一种比传统采用表

格嵌套内容的方式来制作网站更好的网站设计方法。如今仍有部分网 图1 网页布局

站采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比 2 、搭建网页框架

较熟悉、比较上手，但是，它却阻碍了一种更好的、更有亲和力的、更灵