Photoshop专用格式PSD网页切图制作HTML全过程教程

  首先看看效果 下面的图片就是效果图,切割出来后,可能头部和底部会宽点.....

  开始时,在您的计算机中创建一个文件夹。我把它命名为zmool。再在文 件夹中创建新文件夹images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver),并在根目录下创建一个HTML文件名为 index.html,这是我们的主页模板。现在创建一个新的CSS文件,并将其命名为style.css文件。如下图:

  打开index.html文件。在head标签顶部,添加链接到您的样式 表(style.css)。你可以使用下面的代码。

  现在,我们将设置HTML文件结构。设置3个部分(标题,内容,页脚)像 下面一样:

  我们的PSD文件包含了很多纹理效果,我们要把这些全部切出来,然后,用 代码添加到网页上面,使div页面效果和设计的效果达到一致。

  现在在photoshop里面打开原先设计好的, 隐藏所以的图层,除背景层外.

  现在采取的切片工具,选择背景,保存网页web格式按(ALT +shift+Ctrl + S)。然后保存的图像文件夹文件名为background.jpg。

  打开style.css文件,设置基本样式,还有背景样以及主体部分的宽 度,如下代码:

  返回photoshop,隐藏所以图层,除头部背景外,并用同样的方法, 把头部背景图片切割保存为web格式,保存文件名为head.jpg。

  在这时,切割logo层,隐藏所有图层,包括背景层,如上同样方法切割 logo层保存为logo.png,注意:保存为png格式图片

  在PSD文件里,隐藏其他所以图层,只留下按钮图层部分,切下按钮部分, 保存png格式,命名为button.png.

  现在我们把这些图片添加到页面中去,切换到css文件页面,添加如下代 码,这里包括背景样式,和按钮的样式.

  首先,在你的PSD文件中,隐藏除页脚和页脚纹理层外的其他层,然后把页 脚文件夹的东西切片并保存为footer.jpg.

  然后再切一遍,把按钮和鸟的图形切下来.分别取名为follow.png和bird.jpg.

  到现在就算是结束了,不知道大家有没有看懂,不懂的就留言,什么地方不 懂,我再添加修改下,哈哈~

相关阅读