在本Photoshop网站设计教程中，我们将创建一个干净和现代外观的网站模型。这是系列教程的第1部分，将向您展示如何创建设计，然后将其转换为HTML/CSS模板。
最小和现代作品集布局教程系列
预览
这是我们将一起创造的预览。点击图片放大。
新建一个Photoshop文档
1在Photoshop中创建一个新文档(Ctrl + N);使文档1200 * 1200px具有透明的背景。
创建头部的背景
2在工具面板中选择矩形选框工具(M)，然后创建一个矩形选区横跨画布的宽度;这个矩形的高度应该是120 px．
3.使用油漆桶工具(G)填充选区任何颜色。双击图层面板中的图层打开图层样式对话框，然后使用下面的设置添加渐变叠加。
你应该有这样的东西。
创建Content Area背景
4现在我们要为布局的内容区域创建背景的下半部分。首先将前景色设置为# 00315 c和背景颜色# 001 b32在工具面板。选择矩形选框工具(M)，在剩下的透明区域周围做一个选区;一旦你做了选择，选择渐变工具(G)，并设置渐变类型在选项栏径向梯度．
5一旦你设置了渐变工具(G)，将它拖到我们创建的选框选区上，并开始从选区的顶部中间拖到Photoshop画布的四分之一处。
设置指南
6我们现在要设置一些参考线，使网站布局在整个设计过程中保持850px宽。要创建您的第一个指南，请转查看>新指南。在“新建指南”对话框中，输入175 px并确保方向设置设置为垂直．
这将创建一个距离1,200px画布左边缘175px的参考线。
7重复前面的步骤并创建另一个垂直参考线，只是这次输入1025 px(175px + 850px = 1025px)。这将给我们一个850px宽的布局，并以1200px宽的画布为中心。
标题部分的设计
8选择水平文字工具(T)，然后添加你的布局标题和标语文本在顶部相对于左侧参考线。
9在你的布局标题文字下面创建一个新层，然后用矩形选框工具(M)准备好。在你的头部区域上做一个选区;选区应该是整个宽度，但只有头文件高度的一半(约60像素在高度)。
10用白色填充选区(G)# FFFFFF)然后设置图层的不透明度为25％在图层面板。你应该有这样的东西。
创建导航
11选择水平文字工具(T)，字体大小约为11-12px．将虚拟导航文本添加到布局标题和标语的右侧;在每个虚拟链接之间留出空白。
12在每个虚拟链路之间，添加一个1 px使用矩形选框工具(M)绘制直线;这一行应该从标题/导航的顶部到底部。
用颜色填充(G) 1px的线# CECECE．你应该有这样的东西。
13现在，让我们为一个虚拟链接添加一个简单的悬停状态。
我已经将其中一个链接用深蓝色表示悬停状态。选择多边形套索工具(L)创建一个三角形-按住Shift键同时制作三角形将确保每边都是完美的直线。
14用颜色填充三角形选区# 00315 c．
创建欢迎区
15选择水平文字工具(T)，然后添加一些虚拟的欢迎文字;再次将文本放在左侧参考线上，并在标题/导航和欢迎文本之间留出足够的空间。在欢迎文本的底部，我为一个小列表添加了4个要点。项目符号是来自功能图标集(文件名为circle_blue.png）.
16现在我们要在欢迎文本的右侧添加一个欢迎图像;我用的是《Six Revisions》的截图。裁剪你的图像，删除任何不必要的部分。一旦你准备好了你的图像，通过编辑>转换>视角来改变视角。
17选择椭圆选框工具，然后在欢迎图像的底部做一个椭圆选区。
18用黑色填充选区(G)# 000000)放在欢迎图片下面的图层上。19一旦你填充了选区，设置图层的不透明度(你在图层面板中这样做)35%．
20.然后点击滤镜>模糊>高斯模糊，模糊椭圆约1到2 px．
21复制你的欢迎图像和阴影层，然后把它们拖到原始的下面。移动复制的图像和阴影，使它看起来像站在第一个的后面。
22一旦你把它移动到合适的位置，点击滤镜>模糊>高斯模糊和模糊第二个截图通过1 px．
创建水平3D分割线
23用矩形选框工具(M)创建两个1 px线:彼此上方的线;从左到右的直线宽度应该是850像素。你可以在同一个图层上创建两条线。24用颜色填充最上面一行# 000 d19底线是# 003461．
25用椭圆选框工具(M)在分隔线上画一个选区。
26矩形(G)填充黑色(# 000000)然后申请2到3 px高斯模糊。一旦你模糊了椭圆，用矩形选框工具将分割器的上半部分切掉，并删除它下面的区域，这样你就只剩下半个椭圆了。
27合并两个图层(Ctrl + E，在图层面板中选择最上面的图层)，然后添加一个图层蒙版(点击图层面板底部的添加图层蒙版图标)到合并的图层。28选择渐变工具(G)，渐变类型为反映梯度，然后将前景色设置为白色(# FFFFFF)和背景颜色为黑色(# 000000）.
29从分隔器的中间拖动反射渐变到左边缘或右边缘-左右两边都应该慢慢地淡出背景。
设计内容区
30.选择水平文字工具(T)，然后添加一个虚拟的标题和段落在3D分割线下面的层的右侧。
31在布局的左侧虚拟段落旁边，用圆角矩形工具创建一个圆角矩形(U);确保它有一个半径选项设置为10 px(半径默认设置为10px)。
32一旦你拖出了你的路径，选择钢笔工具(P)，在矩形内右键单击，然后选择做出选择．
33设置前景色为# 00315 c和背景# 001 b32并选择渐变工具(G)，渐变类型选项设置为径向梯度．34从选区顶部向下拖动渐变到中间，就像我们对背景所做的一样。一旦完成，你应该得到这样的东西。
35现在为圆角矩形图层添加投影、内阴影和描边图层样式(双击图层面板中的图层打开图层样式对话框)。使用如下图所示的设置。
36选择多边形套索工具(L)，然后在矩形的底角周围创建一个三角形选区。
37剪切并粘贴选区到一个新图层。一旦你重新粘贴你切断的角落到一个新图层，你将失去它的图层样式。所以在我们继续之前，重新应用图层样式从上面的角层。
38一旦你重新应用图层样式，旋转角180度，点击编辑>变换>旋转180度;把角放回矩形的底部。
39要完成内容框，添加虚拟内容。
创建Footer区域
40选择圆角矩形工具，然后拖出你的页脚大小的矩形。
41填充矩形的任何颜色，然后添加一个渐变叠加与以下设置。
42最后，将页脚信息添加到页脚中，就完成了!
完成了!
本教程到此结束，感谢阅读。在下一篇教程中，我将向您展示如何将其编码到一个工作的投资组合模板中。
在Flickr上分享你的作品
如果你跟随本教程，为什么不把它展示给其他的Six revision社区，把它放在Flickr组的六个修订?
下载
如果您想下载本教程的PSD文件，可以将其作为ZIP归档文件获取。
- minimal-mordern-layout.zip(ZIP, 1.5 mb)
