在本教程中，我们将在Photoshop中创建一个简单，易于使用和色彩丰富的网页设计布局，主要针对儿童。简单的导航，明亮的颜色和有限的内容是真正吸引年轻人的东西。我们将在本教程中使用大量的工具，如圆角矩形工具，变形工具，笔刷工具，内置的描边工具和大量的渐变。
我们很想看到你的结果，所以一定要和我们分享!
最终结果
点击图片预览查看全尺寸的版本．
草图
1在开始网页设计之前，我至少也会勾勒出一个想法。对于这个教程，我有一个我想要创建的主题的很好的图像，所以我只粗略地画了一个草图。带着事先准备好的草图和你想要创建的设计的粗略图像进入Photoshop会让事情变得更容易，主要是因为当事情变得棘手时，你可以参考一些东西。
设置Photoshop文档
2转到Photoshop创建一个新文档。确保您的文档使用RGB颜色模式在8位，而决议是72像素/英寸．输入1280进入Width和Height字段。
虽然画布的宽度并不需要这么大，但这是一个很好的尺寸，因为它可以让我们看到设计在更大的显示器上是什么样子的。单击OK创建文档。
3.现在是时候设置一些指导方针了，这在网页设计中总是非常重要的。
转到查看>新指南和垂直选中时,输入160 px点击确定。重复此步骤，但这次插入1120 px到田野。
这就是为网络设置画布的全部内容．
我们将在整个教程中添加更多的指南，但目前没有必要!
创建初始结构
4建立好文档和指南之后，就可以开始设计主要结构了。使用油漆桶工具(G)，用白色以外的颜色填充背景。你不会坚持这种颜色，但它只是让事情更容易，而我们正在设计我们的主题的其余部分!
我用的是深棕色。
5选择圆角矩形工具(U)。使用半径为10 px然后拖出一个新形状。
确保你在上一步设置的参考线边缘之间来回拖动!将新形状的颜色更改为白色(如果还没有更改的话)。将新形状图层的名称改为'主体”。
6点选图层>光栅化>形状。这将把你的形状从一个矢量图像变成像素，使它更容易在接下来的步骤中工作。
7放大到你主要体型底部的一个角落。
用矩形选框工具，在矩形的角上做一个选区。
8用笔刷工具(B)将选区填充为白色。对你的另一个角重复这个过程。
9取消选区，用单行选框工具，在你的主体形状的正下方做一个选区。选择浅灰色(我用的是# e8e8e8)并填充你的选区，确保你仍然在主体形状图层上。
10你现在可能会注意到你有一条1px的直线完全穿过我们的画布。
为了解决这个问题，我们只需要用矩形选框工具(M)删除多余的线条。在你想删除的区域上做一个选区，然后按删除或退格键。重复上述步骤，删除文档另一侧多余的线条。
11复制主体图层，点击图层>复制图层，或者向下拖动图层到图层面板底部的新建图层符号处。你可以将新图层重命名为主体背景．选择新图层，点击编辑>自由变换，并向下拖动底部点。
12移动图层(主体背景)到我们的主体背景下，并改变颜色:我将使用# 262 d35．
这几乎是我们身体的主要结构。显然，我们将在整个教程的剩余部分添加更多的元素!
添加一些吸引人的元素!
13选择主体图层，用矩形选框工具(M)在右下角画一个选区，同时按住Shift保持它的比例。当你有一个合适的大小选择，去编辑>转换>扭曲。
将右下角拖到选区的中心，使其看起来像一个弯曲的角。
14选择钢笔工具(P)和缩放到你的右下角。做一个选择来代表“纸”的另一面——这可能需要几次尝试才能做对!
一旦你有了一个合适的选择，在一个新图层上用中灰色填充路径。
15你可能已经注意到，要得到和我们需要的完全相同的形状是非常困难的。我设法让它非常接近，但在一些地方，你仍然可以看到不必要的白色像素。
为了解决这个问题，缩放到你的画布上，用铅笔工具(B)将它们替换为我们的灰色。
16命名为“新图层”页面旋度”。选择页面卷曲图层，点击图层>图层样式>混合选项。
添加一个渐变叠加使用可以在下面的截图中找到的设置。
17在我们的页面卷曲下面新建一个图层，并调用它“页面旋度的影子”。选择笔刷工具(B)，选择一个软的，中等大小的笔刷。
确保你选择了黑色，并在你的画布上画一个黑色的区域。点击滤镜>模糊>高斯模糊并模糊选区3 px．设置图层的不透明度为大约3%．
18我们的页面卷曲现在有点难以看到。为了解决这个问题，我们要加入a1 px中风。重新打开页面卷曲图层的图层样式，然后点击中风．
使用下面截图中的选项。
专注于导航!
19选择多边形套索工具(L)，放大到我们的设计在100%。在除背景以外的所有图层下面新建一个图层，命名为'导航背景”。
随机选择并填充蓝色。
重复该步骤几次，每次用不同的颜色填充形状。
20.打开导航背景图层的图层样式窗口。
添加以下阴影，内阴影而且渐变叠加．
21按住Cmd(或Ctrl)并在图层面板中单击导航背景图层的缩略图。这样就可以选择所有的按钮。
在你的导航背景层上面新建一个图层，点击编辑>描边，添加白色2 px中风。再做一次，但这次是黑的1 px中风。设置描边图层混合模式为覆盖不透明度设置为50％．
22用文字工具，字体:Helvetica Neue选中后，在导航按钮上创建一些虚拟文本。确保你的文字是笔直的，这样在设计编码时，我们就可以使用实际的文字而不是图像，更友好的浏览器和搜索引擎!当你的虚拟文本完成后，打开你的类型层的图层样式，并使用下面的样式阴影设置。
专注于主要内容!
23现在是时候开始关注主题的主要内容区域了。找到你的第一个图层(主体)，再次复制它。
点击编辑>自由变换，在顶部设置栏更改宽度和高度为95％．这将缩小图层，使其适合我们的主要内容主体。应用更改。
24你可能会注意到1 px在复制层上的直线和弯角-我们不想要这个，所以我们需要删除它。用矩形选框工具(M)在层的底部做一个选区，按删除或退格键。
25打开新复制图层的图层样式，选择渐变叠加。
选择白色透明的渐变，并将白色更改为# 262 d36与我们在页脚中使用的颜色相同。将渐变叠加的不透明度设置为10％．你可以在下面的截图中看到设置。
26进入“查看>新指南”。选择垂直后，输入640 px；这将找到画布的中心。用水平文字工具(T)输入几行文字，例如'大多数玩游戏”和“大多数认为程序”。
文字保持白色。
27打开你的新类型图层的图层样式，并应用一个阴影使用以下设置。
28选择矩形选框工具(M)。
然后，在选项栏中，更改样式为固定，并设置宽度和高度为125 px．
29新建一个图层，命名为'占位符的拇指”。在这一层中，我们将为最多人玩的游戏和最多人观看的节目创造一些占位者。
这个想法是这样的，当设计编码时，占位符可以替换为游戏和电视节目的缩略图。在屏幕上单击产生一个选择125 px x 125 px．使用鼠标或光标键将所选内容移动到正确的位置。
填充选区，然后使用Shift +光标键，向右移动选区，填充选区，然后再次重复。当你完成了一行，复制图层并用移动工具(V)向下移动它。当它到位时，你可以按Cmd + E(或在Windows上按Ctrl + E)合并两个图层。
30.在占位符下面创建更多的虚拟文本。试着让这里的气氛活跃一点，增加一些趣味;我在前两行按了几次Tab键，输入了一个漂亮的字母。
31再次重复上述步骤，这次在设计的页脚添加两段虚拟文本。
专注于背景!
32正如我之前提到的，我们的背景并不是一直保持深棕色，这只是一个临时的修复!改变我们的背景层的颜色为# ebebeb．
在背景上方新建一个图层，命名为'背景梯度”。选择矩形选框工具(M)并选择我们设计的上半部分。用黑色填充选区-确保你的新图层被选中!
33打开图层的图层样式窗口，点击渐变叠加．将渐变的底部合并成与背景其他部分相同的颜色，并在渐变的顶部选择一种颜色。我使用# c6f4ff．
34新建一个图层，命名为背景噪音，用白色填充图层。进入滤镜>噪声>添加噪声。选择高斯和单色，输入10％输入金额，单击“确定”。
改变图层的混合模式为乘不透明度设置为35%．
35把所有的主体图层和虚拟图层放入文件夹中。找到主体层和页脚层，使用Cmd +点击(或Ctrl +点击)技巧，使层的内容的选择。
你可以通过Cmd +点击第一个图层，然后Cmd + Shift +点击第二个图层来做到这一点。选择完成后，在图层面板中取消文件夹缩略图旁边的眼睛来隐藏主体内容文件夹。在选区仍然激活的情况下，新建一个图层并命名为'背景的影子”。
用黑色填充选区，然后点击滤镜>模糊高斯模糊。输入25输入，然后单击OK。将新图层的不透明度降低到大约30%，然后使所有其他文件夹再次可见。
36最后，我补充道2%通过>噪声>添加噪声到页脚。
全部完成!
