ps网页布局设计 第1篇
按照下图拖动两条新的水平参考线（一条在之前的参考线往下50px，另一条再往下50px）
Write a title with these character settings:
按照下面的设置添加标题：
Write a sub-title with these character settings:
按照下面的设置添加子标题文字：
Using the Line Tool (U) create two horizontal lines on top of each other, and fill them with these color values: #151515 – #2f2f2f.
用直线工具在创建两条彼此挨着的水平直线，分别用颜色： #151515（上）和#2f2f2f（下）
ps网页布局设计 第2篇
确保勾选使用前一图层创建剪贴蒙版
Type the same text, social media letters we’ve written before using the same character settings, but give them all this color value: #505150.
输入相同的文字，用之前的设置配置社会媒体图标的文字设置，只是给他们相同的颜色： #505150
So obviously the member will look gray when it’s not hovered!
Make two copies and align them this way
很明显的，当鼠标没有移到成员上方时灰色的
用同样的方法创建另两个副本
To make sure they’re well-aligned, make four separate groups each one of them contains a member’s content, and click on Distribute left edges in the control bar while having the four groups selected.
若要确保他们是定向的，使用四个单独的组，每一个组都包含成员的内容，单击图层组的左边的控制按钮选定的每个组。
I’ve organized my layers, you?
我是这样组织图层的，你呢？
ps网页布局设计 第3篇
我们需要设置内容区域的边界。我们要在之前的水平参考线之下50px拖动一个新的水平参考线
下载图标：Basic Set – Pixel Mixer，并按下图摆放
Drag a new horizontal guide at the bottom of the icon, leave 20px then drag a new one.
在图标的底部拖动一条水平的参考线，往下20px再拖动一条水平参考线
Now Write some heading with these settings:
按照下面的设置添加头部文字：
Drag yet another two guides according to the following image
按照下图拖动另两条新的水平参考线（一条在文字的底部，一条再往下20px）
Write some text with these settings:
按照下面的设置添加文字：
Drag more three guides according to the following image
按照下图拖动3条水平参考线（一条在文字的底部，一条往下20px，一条再往下30px）
ps网页布局设计 第4篇
在右侧书写和左侧一样的标题和文字（试着书写点什么代表团队，举例来说，这儿写Our Team）
Using the Rectangle Tool (U) create a 90x90px rectangle, and fill it with any color. call this layer “photo1_holder” This will work as a holder for a photo of a team member. Now give it a Stroke. Use the image below for reference.
用矩形工具创建一个90px*90px的矩形（546，1011），颜色任意。命名此图层为photo1_holder
这将是团队成员照片的图片块。现在按照下图给它添加描边图层样式
Place a photo of a member and call its layer “photo1″. Make sure that the layer “photo1″ is right above “photo1_holder” layer. then right-click on “photo1″ layer and choose Create clipping mask. You should come up with something like below!
置入一张成员的照片，命名此图层为photo1。确保photo1图层在photo1_holder图层的正上方。在photo1图层上右键选择创建剪贴蒙版。你的作品就应该如下所示
ps网页布局设计 第5篇
该创建特色区域了。为了设置边框，在之前的水平参考线下方的430px处添加一条水平参考线。
Create a selection of 1020x430px as a background for the featured designs area. and fill it with any color.
给特色区域添加背景，创建一个1020px*430px的选区。用任意颜色填充。
建议：用矩形工具新建一个矩形（0，100，1020，430）
Then give it a Gradient Overlay with the following settings:
然后按照下图设置渐变叠加：
Now let’s create the glaze effect! create a selection of 1020x120px, fill it with any color.
现在创建亮釉效果！创建一个选区1020px*120px，用任意颜色填充。
建议：用矩形工具新建矩形（0，410，1020，120）
And then add a Gradient Overlay. use the image below for reference.
然后按照下图设置渐变叠加
ps网页布局设计 第6篇
接下来要创建内容区域。首先创建一个选区，尺寸：1020*815
按Click+Backspace用颜色#e8e8e8填充选区
经后面的步骤测算，此处应该是1020*810
建议：直接用矩形工具创建一个矩形（0，530，1020，810），颜色： #e8e8e8
With the Single Row Marquee Tool (M) create a 1px selection, place it like the following image, and fill it with white (#ffffff).
Now you’re having perfect pixel details!
用单行选择工具创建一个1px的选区，按照下图摆放，用白色填充
现在你获得完美的单像素元件
建议：用直线工具画一条水平直线（0，530，1020，1）比较简单，颜色： #ffffff
ps网页布局设计 第7篇
重复步骤27创建如下的图形。并创建一个矩形，颜色：#334814，并设置不透明度为40%
先用矩形工具新建一个矩形（701，1213，46，46），然后建立右侧的三角阴影（方法有很多，这里就不列举了），再新建一个矩形（710，1220，42，44），颜色： #334814，不透明度改为40%，合理的调整图层顺序，效果如下
Give the big rectangle some layer styles according to the following image
给大的矩形按照下图添加图层样式
颜色叠加的颜色： #5296b9
Now fill the skewed rectangle with a darker color of this value: #2a6788
给斜切的矩形（三角形阴影）一个深色的颜色： #2a6788
Write “t” letter with these character settings:
And give it a Stroke. use the image below for reference.
按照下面的设置输入t字母：
然后按照下图给它添加描边
ps网页布局设计 第8篇
To create our shadow, we’ll start by duplicating the two layers “pic” and “pic_holder”.
While having the two duplicated layers selected, go to Edit > Free Transform, and adjust the height to:
ps网页布局设计 第9篇
按照下图拖动两条新的水平参考线（一条在之前的参考线往下25px，另一条再往下230px）
With the Rounded Rectangle Tool (U) create two rectangles of 210x25px – 5px radius, fill them with: #141313 and give them an Inner Shadow.
用圆角矩形工具创建两个圆角矩形（分别是（37，1460）和（37，1496）），尺寸：210px*25px，半径为5px，颜色： #141313，并按照下图添加内投影的样式
Write some text inside the two rectangles with these character settings:
按照下面的设置添加两个圆角矩形内的文字：
Create another rectangle like the ones above, but this time its height will be: 110px. Also write some text inside it with the same character settings above. Make a copy of the button we’ve created in step 17. and align it like the following image
创建和上面一样的另一个圆角矩形（37，1533），高度为：110px。并且用同样的文字设置在里面添加文本
复制步骤17中创建的按钮。按照下图摆放到合适的位置
ps网页布局设计 第10篇
为了更精确的定位！如下图拖动两条参考线（分别在之前的两条参考线的内侧50px处）
Write some welcoming words with these settings:
按照下面的设置添加欢迎文字：
I personally have written: “Here’s our brand new work. Oops Welcome!” ;) but we need to emphasize the word “Welcome!” in somehow. so basically we’ll give it a Gradient Overlay. follow up with the image
我们写好：Here’s our brand new work. Oops Welcome!。;)。 但我们需要以某种方式强调Welcome一词。因此，我们会按照下图给它添加渐变叠加。
为了完美的解决此步，用文字工具分别写出Here’s our brand new work.和Oops和Welcome!，然后对Welcome!添加渐变叠加的图层样式
Now drag two new horizontal guides according to the following image
现在按照下图拖动两条新的水平参考线（一条和文字的底部对齐，另一条在之前的参考线下方50px处），通过计算两条参考线的位置大致是220px和270px
Before we say goodbye to this step, just make sure to organize your text layers.
在和本步骤说拜拜之前，组织你的文字图层（归并到一组）
ps网页布局设计 第11篇
继续！只剩下页脚部分了。创建一个矩形选区，尺寸：1020px*460px，并用任意色填充
建议：用矩形工具创建一个矩形（0，1340，1020，460），用任意色填充
Apply a Gradient Overlay to it. use the image below for reference.
给它按照下图添加渐变叠加
You should have a nice shadow!
你将获得一个漂亮的投影
with the Single Row Marquee Tool (M) create a 1px selection and fill it with white (#ffffff).
用单行选择工具创建1px的选区，然后用白色填充
建议：用直线工具创建一条白色水平直线（0，1340，1020，1）
ps网页布局设计 第12篇
We need to set upper borders to our content area. therefore we’re going to drag a new horizontal guide after 50px. Download this Icon set: Basic Set – Pixel Mixer and place of them like the following.
ps网页布局设计 第13篇
要创建滑动按钮！用椭圆选择工具创建一个椭圆选区，尺寸：50px*50px，用任意色填充
直接用椭圆工具创建一个椭圆（28，220），尺寸：50px*50px，颜色任意。
按照下图给该图层添加图层样式
描边的颜色： #6f9941
With the Custom Shape Tool (U) create an arrow and give it the following layer styles
用自定义形状工具创建一个箭头，并按照下图添加图层样式
内阴影的颜色： #3c3c3c