博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

photoshop输出html网页方法

Posted on 2012-05-04 22:37  乌雲安全  阅读(331)  评论(0编辑  收藏  举报

photoshop输出html网页方法

photoshop输出html网页方法,
下载后解压,打开PSD文件。

在修改好相应的文字与图象之后,我们就将PSD文件输出(X)HTML文件。

首先得先对PSD文件做切片,有两种方法:

使用工具栏上的切片工具

然后在图象上划出一块一块的区域。

使用基于参考线的切片,按ctrl+R调出标尺栏,

把鼠标移动到标尺上,按住鼠标左键,移动到图象上,将会看到一条绿色的参考线,如图
将参考线;排好,然后点一下工具栏上的切片工具图表,然后点上面

选项栏里的基于参考线的切片。于是在原来的参考线上就变成了一块一块的切片了。

接下来就可以输出了:
依次选择菜单栏上的文件”→“存储为Web所用格式”→“存储

接下来就会弹出一个将优化结果存储为的窗口,如图

保存类型处有个下拉列框可以选择,因为我们要存储为网页的格式,所以选择“HTML和图象(* html)”,再选择保存就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。

 

如果我们需要输出“div+css的网页我们还可以这么做:
设置处的下拉列框,选择其他
 

 

 

就会弹出一个输出设置的窗口


在第2个下拉列框处选择切片

 

 

选择生成CSS”



单击”→“保存就可以输出一个目前流行的“div+css”HTML网页。