如何创建的WordPress主题从无到有-白手起家(1)
[url=http://www.jinghua8.com/wp-content/uploads/2008/08/large1.jpg][img=300,225]http://www.jinghua8.com/wp-content/uploads/2008/08/large1.jpg[/img][/url]精华之家要告诉您如何建立一个在[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]主题从无到有，这个教程系列由于编写很麻烦，我是根据国外一个论坛提供的教程稍微翻译一下而已，由于我也不会网页编程，不过好在我的PS比较不错，至少这个方面不成问题，因此看到这个教程想自学[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]wordpress[/color][/url]的模板制作。这个系列共有3个部分，以后我3天时间内我会放出的，今天分享第一部分的制作教程，教程涵盖从[url=http://www.jinghua8.com/?tag=photoshop][color=#2c78b9]Photoshop[/color][/url]结构设计，即第一部分的PS切片，第二部分的编码到最后的[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]的执行情况。[b][color=#ff0000]1第一部分：整体结构设计，在[url=http://www.jinghua8.com/?tag=photoshop][color=#2c78b9]Photoshop[/color][/url]中（近日内容）[/color][/b][b][color=#ff0000]
2.第二部分：切片和编码
3.在[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]执行（整体文件合成），[/color][/b]文件包括以下内容：
[list=1][*][list=1][*][color=#a3b94c]header.php[/color][*][color=#a3b94c]sidebar.php[/color][*][color=#a3b94c]about.php[/color][*][color=#a3b94c]footer.php[/color][*][color=#a3b94c]index.php[/color][*][color=#a3b94c]featured-post.php[/color][*][color=#a3b94c]page.php[/color][*][color=#a3b94c]single.php[/color][*][color=#a3b94c]comments.php[/color][*][color=#a3b94c]archives.php, links.php[/color][*][color=#a3b94c]search.php, searchform.php[/color][*][color=#a3b94c]function.php[/color][*][color=#a3b94c]image.php[/color][/list][/list]框架的构建
这是一个非常重要的一部分，在设计网页布局。我们需要在PS中构建我们的结构布局之。第一件事的目的就是布局。本文模板构建的布局包括以下内容：<[list=1][*]Header[*]Posting area[*]Sidebar[*]Single page[*]Comment[*]Feedback[*]Searching field[*]Page menu[*]RSS[*]Archives, Links and About Page[/list]我们需要紧记，我们不能把所有的东西都放在一个篮子里。因此，我们需要记住：
1.不要展示的东西太多了，在一单页。
2.不要使用太多的颜色和字体类型。
在此示例中，我也尝试作出尽可能的简单，这里只是举一个例子，就如何建立一个[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]的主题。。下面是制作出的最后形象，。最终的结果
[url=http://www.jinghua8.com/wp-content/uploads/2008/08/large.jpg][img=488,350]http://www.jinghua8.com/wp-content/uploads/2008/08/final.jpg[/img][/url]
[url=http://www.jinghua8.com/?tag=photoshop][color=#2c78b9]Photoshop[/color][/url]制作教程部分Step 1[color=#cccccc][color=#000000]创建一个新文档[/color][b]1024px X 768px[/b][/color] ，因为我们构建的是一个在[color=#cccccc][b]1024px[/b][color=#000000]可以正常显示的主题[/color][/color]. 填充背景色为[b][color=#cccccc]#eae8c6[/color][/b]. 显示标尺，以便整体尺寸的定位。，本文主题整体结构如下：
[url=http://www.jinghua8.com/wp-content/uploads/2008/08/f757e331dfa06f821ad9946512a27d52.jpg][img]http://www.jinghua8.com/wp-content/uploads/2008/08/f757e331dfa06f821ad9946512a27d52.jpg[/img][/url]
Step 2选取矩形工具，抓取你要的位置并以此为标题。高度你必须自己估计。平衡整体结构是主要的事，是你需要关注的问题。然后，如下所示，先填充一个渐变色，之后在下面填充一个1PX的区域，这样可以加深地方分解的地方，使整体看起来明亮有层次。
[url=http://www.jinghua8.com/wp-content/uploads/2008/08/fe41fe6c6db44afe26b6572e5b9fb4d5.jpg][img]http://www.jinghua8.com/wp-content/uploads/2008/08/fe41fe6c6db44afe26b6572e5b9fb4d5.jpg[/img][/url]
Step 3这里的主题文字特性制作如下，大家可以根据自己的需求制作。这里的教程是选用阴影设置，如下图所示。然后选择渐变12 ％的不透明，由黑变白。之后只需按住Ctrl，点击文字层，以获取选择。去选择>修改>缩缩> 1px 。之后创建一个新层。内描边 1px ，白色。
[url=http://www.jinghua8.com/wp-content/uploads/2008/08/1cda50cfa35a26c5bec4fd0406546b8c.jpg][img]http://www.jinghua8.com/wp-content/uploads/2008/08/1cda50cfa35a26c5bec4fd0406546b8c.jpg[/img][/url]
Step 4画矩形，请记住，最大宽度为您可以使用的是600px 。之后描取一个1px内的白色边框。如下所示。渐变区设置如下：
[url=http://www.jinghua8.com/wp-content/uploads/2008/08/5ce1d1ae09d16399385639e6c3da9219.jpg][img]http://www.jinghua8.com/wp-content/uploads/2008/08/5ce1d1ae09d16399385639e6c3da9219.jpg[/img][/url]
Step 5网络上有很多的按钮制作教程，大家可以看看区，其实是使用相同的技术，我们使用的按钮。整体制作方法与第三步相同。
[img=496,361]http://www.jinghua8.com/wp-content/uploads/2008/08/5.jpg[/img]
Step 6加上一些虚拟的文本和照片。[url=http://www.jinghua8.com/wp-content/uploads/2008/08/db285cf8ddf0d74755fe38dd26ffb0ed.jpg][img]http://www.jinghua8.com/wp-content/uploads/2008/08/db285cf8ddf0d74755fe38dd26ffb0ed.jpg[/img][/url]
Step 7再添加在一些虚拟的文本。尝试使用常见的字体进行测试。不要忘记[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]文章需要标题，标签，发布日期，评论人数，我补充一句本主题，作者照片也作为一部分以显示在每篇文章[img=504,368]http://www.jinghua8.com/wp-content/uploads/2008/08/7.jpg[/img]
Step 8制作一个RSS图标。我忘记了我下载的网站，…，搜索范围需要建立一矩形。还有，它的最大宽度将330px 。填补它为黑色的颜色，并将它混合模式，设置为柔和光线。创建另一个矩形。这将是我们的输入栏。填补它为白色。之后选取1px颜色-＃d 0ceae内描边。如下图所示。
[img=495,361]http://www.jinghua8.com/wp-content/uploads/2008/08/8.jpg[/img]Step 9使用矩形工具来创建的类别和内容的链接框。最大宽度将160px 。我们需要一个10px空间，在它们之间。
[img=499,370]http://www.jinghua8.com/wp-content/uploads/2008/08/9.jpg[/img]
Step 10底部制作的效果和顶部相同。
[img=495,354]http://www.jinghua8.com/wp-content/uploads/2008/08/10.jpg[/img]
本文总结：您可能会发现，我不提有关页面导航的。我认为这是过于简单。试试吧。如果真的不能，我也提供源文件。整体而言，有几件事，我们需要考虑，创造一个[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]的主题，在这个例子中，我们是构建一个博客主题为目的。因此，主要将，分类，标记，作者照片，评论和RSS元素考虑进去。所以，你可以发现在我的PSD的文件所有层中，以及名称和每个区段，。这是为今后修改的目的，也为我亲爱的读者修改它很容易。
Single Page作为[url=http://www.jinghua8.com/?tag=wordpress][color=#2c78b9]WordPress[/color][/url]主题 ，必须有一个单一网页上显示文章和评论部分。这里是最后的输出效果。
[img=486,360]http://www.jinghua8.com/wp-content/uploads/2008/08/single.jpg[/img]
[b][color=#ff0000]今天就先写到这里了，剩余的部分明天接着补上，本文素材下载：[/color][/b]
[b][color=#ff0000][url=http://www.rayfile.com/files/f2c7a06e-74f6-11dd-853a-0014221b798a/][color=#2c78b9]下载地址[/color][/url][/color][/b] 太好了
下星期可有得玩了
等楼主这样的大餐好久了 谢谢啦 额，挺不错的。 UP! :) 谢谢啦 太不错了，等有时间也搞一下。
[url]http://www.bologj.cn/[/url] 先顶,再看!~:loveliness: 看完再顶!:victory:
十分似的发
**** 作者被禁止或删除 内容自动屏蔽 **** 楼主辛苦了! 期待啊！！！！！！！！！！！！！！！！！！ 呵呵，以后有机会可以学一下。 支持:victory: 不错 十分不错 很好， 有的东西还是自己动手好点。 不错，等有时间也搞一下 图片失效了 怎么图片都无法显示呢？正想学习呢。[url]www.nowhither.cn/blog[/url]
页:
[1]
2