wordpress CMS主题 微信
Home > wordpress CMS主题制作 > wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

高时银博客 wordpress CMS主题制作 点击: 472 次 0 1

本意接着上一章接着往下讲。要开发一个网站,首先要有一个效果图,也就是你要将你的网站开发成什么个样子。wordpress CMS主题开发也是一样。这里我直接从网上下载了一个网站的效果图(如下图)。我们要想让face主题效果跟效果图一样,我们要对它进行切图。那么,如何切图呢?

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

所谓切图,就是用html代码把效果图在浏览器中展现出来。切图有2个步骤,一起来看看。

第一步:通过PS软件(photoshop)给效果图切图。

意思就是说,把效果图中小图切出来。用PS打开效果图,右键点击左侧工具中的裁剪工具,再选择“切片工具”,如下图:

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

然后,在效果图中拖动鼠标,选择需要切片的小图片(如何使用切片工具,要以参照一下网上的教程,很简单)。如下图:

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

选好切图后,我们就要把这些切图保存下来,点击“文件”=>“存储为web和设备所用格式”,如下图:

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

选择切图格式,这里选择JPEG中,

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

点击“存储”按钮,弹出弹窗,可以选择“所有切片”,也可以选择“所有用户切片”,这个根据自己需求来选择,我这里选择“所有用户切片”,如下图:

wordpress CMS主题模板制作教程(04):face主题效果图切图(1)

记住切图保存的位置。我这里保存的位置是“我的文档”,切图会自动保存在“我的文档”目录下的images目录下。我这里保存的格式是“仅限图像”(上图所示),我们也可以保存为“html 和图像”,这样会把切图保存一个效果图html页面,可以在浏览器效果展示,但是,默认保存的代码是用table表格写的,不过,我们大多是用DIV来写代码。这就要对PS做一些设置,我们在下一章中再做介绍。

第二步是“html代码来实现效果图”,这个留到下一章来说,敬请期待。本章就介绍到这里。


文章作者:高时银博客
本文地址:http://wanlimm.com/77201707025414.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

目前还没有评论。赶快来坐沙发吧。

发表评论