图1
这是一种弹性发展的WordPress主题项目的特殊设计。在未来，我想看看我们如何把这个设计转化成编码过程，最后是如何使它们成为最终产品。
记住最初的概念设计草案，下面的教程将使这个过程一步一步地清晰，它是必不可少的，有一个好的设计，大量的实验和一些元素的重排，这将使我们能够理解为什么我们使用这些工具，为什么我们计划这样的布局来设计这样的产品。
以下开始：
1、打开PS，创建一个空白文档。我宁愿让它在一个更大的，宽屏文档。请记住，使用RGB色彩模式设定为72dpi是好的，因为我们用它紧紧地在屏幕上（注：一般印刷是300dpi，和屏幕只有72，CMYK是印刷颜色）。
图2
2。首先，让我们来处理一下页面的背景。这个地方没有什么特别有趣的地方。选择一个纯色作为背景，然后用从上到下的径向渐变。当然，你也可以选择你喜欢的颜色，在这里我选择蓝色和绿色渐变。
图3
三.打开牛皮纸材料，我们会用它在背景中添加一些有趣的材料。
图4
4，删除材料的颜色（Ctrl + Shift + U），然后选择高斯模糊使用较大的像素擦除牛皮纸上的一些细节。
图5
5。将修改后的牛皮纸置于渐变背景色上，然后选择混合模式的叠加选项，然后将透明度改为90%。
图6
6。在一个网页设计一个合理的用户显示范围的设计是一个网页的布局的重要一步。除非另有规定，通常我调整分辨率1024times；768，所以我将960px宽度的参考线在文件的中间部分，和20 px宽对空白的两侧，为了防止一些元素超过屏幕分辨率之前。
图7
7、用角矩形工具画一个内容区域如图所示，颜色为浅灰色（# eeeeee），和圆角半径为20px。注意，在这种情况下，角是不充分的两边，因为有一些东西加上底部的右侧。
图8
8、双击矩形层和添加8个白色的笔触，宽度为8px，混合模式为叠加，不透明度为30%，所以会有一个很酷的透明效果。
图9
9，再向圆形矩形添加一个内部发光，白色5像素，这将允许边界产生一个非常小的倾斜效果。
图10
10、在结束时，添加一个外部发光，黑色15%透明，这样一个光含量的阴影区域就会出现。
图11
11、创建一个新层，再画一个圆角矩形的宽度，但是10px的半径是足够的改变。一点梯度添加到下面的灰色区域，他有一种倾向。
图12
12，复制以前的内容区域，然后用橡胶工具从中间的边线上去掉一个渐变。（注意：最好选择一层面具，然后使用渐变，橡胶的透明度没有得到很好的控制。）
图13
13。用铅笔工具在整个边界绘制1px的垂直线。在这里您可以按住Shift保持角度和垂直。
图14
14，还是要逐渐地逐渐消除变化（其实这一步可以先做边线，然后再把图层蒙版做一个渐变）。
图15
15，这样一个巨大的灰色区域是如此的呈现，而下一部分的渐变是哦，回头看，上面的角比下面的角大，中间的边缘是透明的。
图16
16，用纸的材料覆盖内容区域的一部分，颜色/饱和度（Ctrl + U）可以用来调整它为蓝绿色。
图17
17、按住Ctrl键，然后图层的缩略图，正确的内容，你可以创建一个复选框，然后取消选择（按Ctrl + Alt +我）然后删除超过部分（注：这里推荐另一种方法，首先确定纸层和内容层和论文在内容层、层相邻，然后右击在。在纸层上创建一个图层蒙版，可以显示类似效果，后面比较容易），然后调整或擦掉一个渐变。
图18
18。使用铅笔工具头下画一条水平线像素。
图19
19，选择内容层，然后使用上面的方法设置一个选择，按住Alt键来缩小上面的选择，然后创建一个新层。填充白色区域和改变透明度90%在该选择区，然后做一个小小的改变，让你在头上一点光泽。
图20
20，继续用一个矩形框工具在内容区域画一个侧边栏。依然弥漫着灰色的背景（# eeeeee）
图21
21、用上述方法添加透明边框，几乎可以选择笔画选项。
图22
22，继续使用外部发光来添加一个浅灰色边缘，调整扩展到最大，这样我们就可以得到双边线效应。
图23
23。使用内部发光工具在侧边栏添加一个白色边框效果，这与上面的相同。
图24
24。最后，在侧边栏添加一个渐变，从白色到灰色添加一些细节和级别。
图25
25。剪切侧边栏，因为每个菜单目录以前都计划是一个单独的区域。
图26
26。博客日志区域的设计方法与前一个日志区域相似，每个日志都需要有一个封闭的区域，绘制一个矩形来模拟这些区域。
图27
27，填充白色，然后右击侧边栏复制他的图层样式并粘贴到日志区域。
图28
28，在这个阶段，框架已经基本完成。现在让我们在页面上做一些文字测试，看看我们的颜色和大小是否有问题。
图29
29、创建导航区域，注意渐变，参考头部的方法。输入导航文本。
图30
30，只需轻轻地一张纸，你要发表一份日志副本，调整颜色，大小和行距。标题是一个非常重要的元素，所以你必须使颜色引人注目。一些作者的信息，如时间和日期，并不重要，所以他们可以有点轻的颜色。
图31
31，在内容区域的底部绘制一个浅色矩形。
图32
32，使用一些看起来很棒的免费按钮来设置一些功能，添加一些次要信息，比如消息的数量，并继续阅读。这些信息对访问者非常有用，因此它们是开放到另一个地方的。
图33
33、最后，添加其它页面的原来的颜色，如订阅的RSS图标，等可以在本教程的许多地方发现，如教程和免费图标集。（在中国站酷）。
图34
34，终于有了一个博客界面设计，有一个漂亮的页面信息和一个清晰的框架结构。下面我们将解释如何把这个设计转换成一个真正的网页。
图35
