ps网页设计实例 第1篇
确保勾选使用前一图层创建剪贴蒙版
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网页设计实例 第2篇
在右侧书写和左侧一样的标题和文字（试着书写点什么代表团队，举例来说，这儿写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网页设计实例 第3篇
在特色区域的右侧重复的添加另一张图片
We’ll make the center image a bit bigger, so make a selection of 340x200px, align it like the following, and fill it with any color.
We’ll also give it a Stroke. use the following image for reference
我们在中间添加一个大的图片，创建一个大的选区，尺寸：340px*200px，按照下图摆放，用任意颜色填充
给它按照下图添加一个描边。
用矩形工具创建一个矩形（340，270），颜色任意。并按照下图添加描边样式，替代本步骤
描边的颜色： #3d6013
给当中的图片块添加图片和阴影
And here’s what we’ve got!
这是目前的效果
Make sure to organize your layers and to group them. I personally have created three separate groups. here’s how they look
组织你的图层，并合理的归并为组。我把三张图片的各个图层分别归并为3个组
ps网页设计实例 第4篇
要创建滑动按钮！用椭圆选择工具创建一个椭圆选区，尺寸：50px*50px，用任意色填充
直接用椭圆工具创建一个椭圆（28，220），尺寸：50px*50px，颜色任意。
按照下图给该图层添加图层样式
描边的颜色： #6f9941
With the Custom Shape Tool (U) create an arrow and give it the following layer styles
用自定义形状工具创建一个箭头，并按照下图添加图层样式
内阴影的颜色： #3c3c3c
ps网页设计实例 第5篇
按照下图拖动两条新的水平参考线（一条在之前的参考线往下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网页设计实例 第6篇
创建水平分隔符
在之前的水平参考线下方50px处新建一条水平参考线
With the Elliptical Marquee Tool (M) create a selection like the one below.
Set your foreground color to black (#000000) then click Shift+Backspace to fill your selection. call this layer “separator_bg”.
如下图，用椭圆选择工具创建一个椭圆选区
设置你的前景色为黑色（#000000），然后按Shift+Backspace填充你的选区。命名此图层为separator_bg
建议：用椭圆工具创建一个椭圆（30，870，960，10），颜色： #000000
To make it looks blurry, go to Filter > Blur > Gaussian Blur – radius: 3px.
While selecting “separator_bg” layer selected, create a selection like the one below then hit delete.
当separator_bg层被选中的时候，按下图创建一个选区，并按delete。按Ctrl+D取消选区
Click on Add layer mask icon. and set your gradient editor to black, white, black.
ps网页设计实例 第7篇
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网页设计实例 第8篇
继续！只剩下页脚部分了。创建一个矩形选区，尺寸：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网页设计实例 第9篇
按照下面的设置，用文字工具添加网站的标题
Now add a Gradient Overlay to your text with the following settings:
现在按照下面的设置对你的文字添加渐变叠加
To align your Web site title with the header background; Select your title layer and “header_bg” layer then click on Align vertical centers.
ps网页设计实例 第10篇
用和前一步骤相同的恶设置添加另一个标题和文本。（如下图，先要在倒数第二根水平参考线的下方50px处新建一条水平参考线）
Type a quotation mark on your keyboard, with these character settings:
And reduce its layer’s Opacity to 50%
按键盘上的引号输入一个双引号，按照下面的设置：
调整该图层的不透明度为50%
Write a word of wise or quote of yours with these character settings:
输入一些心得或名言引用，按照下面的设置：
ps网页设计实例 第11篇
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网页设计实例 第12篇
现在要创建低位的内容区域，在之前参考线的下方50px处拖动一条新的水平参考线
Add a title with these character settings:
按照下面的设置添加标题：
Drag two new horizontal guides according to the following image.
按照下图新建两条水平参考线（一条下方20px处，另一条再下方70px处）
Write some text with these character settings:
按照下面的设置添加文字：
Drag a new guide after 160px as a lower border for the content area.
在之前下方的160px处新建一条水平参考线作为内容区域的底边
ps网页设计实例 第13篇
创建竖直分割线，用直线工具创建两条紧挨着的竖直直线（（270，600，1，200）和（271，600，1，200））。颜色分别是：#ffffff和#b3b3b3
Align your line like the following image
按下图排列你的直线
Don’t forget to organize your layers. take a look at mine!
别忘组织你的图层。就像我一样。
ps网页设计实例 第14篇
需要给图片添加一个说明文字。所以我们要创建一个选区，尺寸：240px*25px，用颜色： #1a1919填充，这作为说明文字的背景。
用矩形工具新建一个矩形（105，419）替代本步骤，颜色： #1a1919
Write some description with these character settings:
按照下面的设置添加说明文字：
Make sure to keep your document tidy!
请务必保持您的文档整洁 ！
ps网页设计实例 第15篇
该创建特色区域了。为了设置边框，在之前的水平参考线下方的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.
然后按照下图设置渐变叠加