PSD模版如何变成网页模版 (转载)

时间:2024-01-29 22:37:48

转自:http://chunfeng1124.blog.163.com/blog/static/86086251200947111858410/

PSD格式的模板,怎样弄到Dreamweaver 中去编辑??

1.psd源文件一般都是不能直接放到DW里的~一般都是用PS打开,然后用PS的切片工具切好图,存为gif或者jpeg格式再插入到DW里面的

 

2.要实在想偷懒也只能用很简单的图直接导,用切片划好,存成web所用格式的时候选择图像和html,出来就是表格上加图了,把你要加内容的地方把图片改成背景。

 

PSD模版如何变成网页模版2007年03月17日 星期六 下午 10:16现在想做一个出色的页面还真不容易,除了需要 HTML 知识,了解相关的网页设计工具.更主要的是需要有一定的设计能力.

 

那么有没有一个省事的办法?

回答显然是肯定的。网络上有很多公司提供各种风格和用途的 HTML 商业模扳。这些摸版一般进行简单修改后就完全可以加以利用。而且制作精良。

比较著名的专业模版制作公司包裹:

 

Boxedart ; Dymamicfactory 等等.大多数模板是有版权的,也有一些公司提供一些免费模板,大家可以利用互联网资源搜索一下.

 

先解释一下什么是模板. 其实模板就是一个由大型设计公司设计的非常专业的网页筐架.当你拿到模版后,只需要按部就班的将你自己的内容填入相应的区域就可以制作出看上午非常专业的页面.

 

一般摸版是由PSD 件,通过PHOTOSHOP 和 IMAGEREADY 进行编辑。编辑完成后由 Photoshop 生成页面文件,再载入到 DREAMWEAVER 等网页制作工具中完成细加工.

 

本次讨论着重介绍网页 部分.Photoshop 大家应该都有所了解,对于它的基本应用,就不在本讲座中详细叙述.我们来看一个简单的模版实例,首先我们来看一个模版文件.打开一个 PSD 文件.

 

大家可以看到,这个文件其实包含了大部分的页面内容.大家可以看到,文件是 PSD 格式的,也就是说资料都是可更改的,并且以分层的形式来存储.我们可以像平时使用Photoshop 一样对它进行文字排版编辑。可以增加或者更改自己的 LOGO ,自己的标语以及自己的修改成自己的商品图片。将页面元素完全转化成自己的产品。

 

二.神奇的切片工具

 

接下来我可以用 Photoshop 平时被大家忽略的切片功能,来对图片进行一些裁减和分割.这个工具有点像我们上讲讲过的热点工具。

不过他们有一个不同。就是热点工具不会对图片进行裁减,而切片会把图片本身分割成小块,来增加显示速度。

 

 

我们可以在 PS中 为切片填加链接.来看一下

 

 

 

三.保存并输出成网页

 

模板基本设置完成.我们把它输出成网页吧.看看有什么值得我们注意的.先选择文件中的保存为 WEB 所用格式.我们来看看这个对画筐.

 

 

 

在调整好相关设置后,我们选择 SAVE ,来到下一个对话筐.

 

 

 

这里我们选择保存类型为 HTML 和 图象. 保存后,我们得到一个 HTML 文件以及一个 IMAGES 文件夹,里面有根据我们刚刚划分好的切片.我们现在打开HTML 文件,可以看到这个页面,如果你刚才有设置过链接,这里也可以看到相应的链接咯.

 

最后,我们需要在 Dreamweaver 中打开这个 HTML 文件,做一下地址转换,然后把这个文件夹以及里面的图片上传到你的网络空间,把源代码复制到 淘宝上进行页面发布.这些在上一讲中已经讲到过.这里就不再重复了. 如果大家没有明白,可以看下中级的帖子哦. 

这里特别提醒大家,使用切片的方法无疑是把页面全部图形化了。虽然比较美观,但最大的缺点就是页面太大了。所以,大家一定要学会控制图片大小的技巧。试想一下。如果打开一个页面需要1分钟,谁会愿意看呢?所以需要大家自己掌握好这个尺度。  

×××不能直接导入DW,先在PS中切片,存为WEB所用格式,在DW中再导入××× 

PSD是Photoshop的文件格式,不能直接在Dreamweaver中应用。你按照以下步骤来做:1、用Photoshop打开PSD文件,进行编辑修改(PSD文件中的图层、文字等可以比较方便的修改);2、把修改满意后的PSD文件,另存为JPG格式或者GIF格式的图片;3、按照你的页面规划,用PHOTOSHOP把图片切成一块一块的小切片,然后输出HTML+图片的形式,这样,你可以得到一个HTM文件和一个装有N个切片的文件夹;4、在Dreamweaver中打开HTM文件,对HTML网页进行编辑。