ps 个人网页设计理念 第1篇
选择直线工具（U）创建的粗细1px的线，分隔你在上一步中创建的矩形。颜色： #d9d6c9。然后选中所有这些层归并到一组（按Ctrl / Cmd+ G），并将其命名为separators。
这五条直线分别是（40，689，180，1）和（40，731，180，1）和（40，773，180，1）和（40，815，180，1）和（219，648，1，168）
ps 个人网页设计理念 第2篇
Now we will add a representative image for each service listed. Create a new group and name it “images“. Then add an image cropped to the dimensions 160px by 210px. Copy the layer style from one of the images from the featured content area and paste it to this image to get the same double stroke effect.
Use the Rounded Rectangle Tool (U) to create a white rounded rectangle at the bottom of this image.
Then add a 1px #999381 stroke to this layer.
Select the Type Tool (T) and write the name of the first service from your list inside this rectangle using the font Verdana and the color #38352c.
ps 个人网页设计理念 第3篇
Create a new group beneath the “header” group and name it “navigation bar“.
Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 40px and the color #c0e332. Name this layer “navigation bar bg“, double-click on it and use the settings from the following image.
ps 个人网页设计理念 第4篇
Create a new group and name it “navigation“.
Select the Rectangle Tool (U) and create a rectangle beneath the blue one using the color #edeadf.
Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.
Duplicate this rectangle three times and arrange all of them using the Move Tool (V).
ps 个人网页设计理念 第5篇
Create a new layer, select the Pen Tool (P) and create a small triangle beneath the lower left corner of the rectangle to make the blue bar look like it’s 3D.
Name this layer “triangle“, double-click on it and use the settings from the following image for Gradient Overlay.
ps 个人网页设计理念 第6篇
I used Adobe Illustrator (yeah, I cheated just a tad bit, but you can use Photoshop for this too – it just won’t be as easy) to create a dashed line behind the plane. If you don’t have Illustrator, you can download and use my dashed line PNG image called (tips for Windows users: right-click on one of the links and select Save As). Open it in Photoshop and position it on your canvas using the Move Tool (V).
If you do have Adobe Illustrator and know how to use it, you can follow the next steps. Open a new document (Ctrl/Cmd + N) and use the Rectangle Tool (M) to create a big gray rectangle. Then select the Pen Tool (P) and create a path like the one from the following image. Use a 1pt white (#ffffff) stroke and no fill. Then open the Stroke Panel (Window > Stroke) and use the settings from the following image.
Select your dashed line using the Selection Tool (V), copy it (Ctrl/Cmd + C), go back to Photoshop, and paste it as a smart object (Ctrl/Cmd + V).
Name this layer “line” and put it beneath the “paper airplane” layer. Use Free Transform (Ctrl/Cmd + T) to rotate this line the way you want.
ps 个人网页设计理念 第7篇
Now I will show you how to create a bended corner effect in Photoshop. First, click on the vector mask of the “paper” layer to make it active.
Then select the Pen Tool (P), make sure that the “Shape layers” button is activated and select the Subtract from shape area button from the Options bar.
Now use the Pen Tool (P) to create a triangle over the upper right corner of the yellow rectangle as you see in the following image.
ps 个人网页设计理念 第8篇
Now we will add some noise to the background of the featured content area just like we did with the paper. Ctrl/Cmd-click on the vector mask of the “featured area bg” layer to select the yellow rectangle. Then create a new layer and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).
Convert this layer into a smart object.
Then go to Filter > Noise > Add Noise and use the settings from the following image.
Set the blend mode of this layer to Multiply, lower the layer opacity to 25%, and name it “noise“.
ps 个人网页设计理念 第9篇
现在我们将给每个服务添加代表图像。创建一个新组images。然后添加一个图像（240，606），裁剪的尺寸160px*210px。复制特色内容区域的图像的图层样式，并将其粘贴到该图像获得相同的双描边效果。
使用圆角矩形工具（U）在图片的底部创建一个白色圆角矩形。
对这一层添加1px的描边，颜色：#999381
用文字工具在矩形中书写服务列表中的第一个服务的名字，字体：Verdana，颜色： #38352c
ps 个人网页设计理念 第10篇
创建一个新组iamges
然后在Photoshop打开你喜欢的图像，每一个都是260px*290px的尺寸。我只是用了一些随机图像和从Six Revisions上的screengrabs，和从我的网站PSDBURN。
在你的画布上使用移动工具（V），排列他们，就像你看到下面的图像。经测算，这3图片的位置分别是（80，207）、（380，207），（680，207）
每个图像按照下图添加内发光和描边的设置，创建一个双描边效果。
描边的颜色： #5d5643
ps 个人网页设计理念 第11篇
Download the 960 Grid and unzip the archive. Inside the Photoshop template folder, you will find three .PSD files. Each one has a grid with certain number of columns (12, 16, and 24). For this layout, we will use the 16-column grid. So, open the file file in Photoshop. As you can see, you have 16 red (almost pinkish) vertical stripes inside your document. We will create the layout within these red vertical stripes.
In the Layers Panel you have two groups: “16 Col Grid” (which contains all the red vertical stripes) and “Layer 1″ (we don’t need this layer, so you can delete it).
To show or hide the grid, click on the eye icon of the “16 Col Grid” group in the Layers Panel to toggle its visibility. All the elements of the layout should be created beneath this group, so it has to be on top all the time. The .PSD file contains guidelines as well, which will be very helpful. To show or hide the guidelines go to View > Show > Guides (or press Ctrl/Cmd + ;).
This is pretty much everything you need to know about the grid.
Before we begin, make sure that your Info Panel is opened (Window > Info). During the tutorial, I will ask you to create shapes with a certain size and you will be able to see the exact width and height of your shapes in the Info panel while you are creating them.
ps 个人网页设计理念 第12篇
Select the Rectangle Tool (U) and create a white rectangle with the size 940px by 1920px. Make sure that Photoshop’s Guides are activated (Ctrl/Cmd + ;) so that you can create the rectangle easily. Name this layer “bg“, double-click on it to open the Layer Style window and use the settings from the following image to apply an Outer Glow and Stroke layer style.
ps 个人网页设计理念 第13篇
Select the Custom Shape Tool (U) and create two arrows on your circle using the color #fbf2db. The custom shape used below is called Arrow 2 (it comes as a default shape in Photoshop as part of the Arrows custom shape group). I chose this shape because it most resembles the arrows in the “Featured” blue bar text, giving us some repeating design elements in the layout.
ps 个人网页设计理念 第14篇
创建一个新组blue bar。
然后选择矩形工具（U）创建一个矩形（30，156，190，42），颜色： #1e92e4，像下图一样。
命名此层为blue bar，双击打开图层样式窗口，并按照下图添加一个渐变叠加和描边图层样式。
然后选择移动工具（V）和移动的矩形到超出的左边缘10px，距上方导航栏的距离为20px。
描边的颜色： #3a77be
ps 个人网页设计理念 第15篇
用矩形工具创建一个白色的矩形（40，0），尺寸：940px*1920px。确信PS的参考线是激活的（Ctrl/Cmd + ;），这样你创建这样的矩形是很简单的。命名图层为bg，双击打开图层样式窗口，按照下图的设置给它添加外发光和描边的图层样式
描边的颜色： #1f1907
ps 个人网页设计理念 第16篇
没有灯泡的灯怎么能算灯呢？ 在shade层下方创建一个新层，选择椭圆工具（U）创建一个圆（按住Shift键，以创建一个完美的圆圈），颜色： #f6f3a2。
命名此层为light bulb，双击它按照下图设置内发光、渐变叠加、描边的图层样式。
描边的颜色： #8cc93d
ps 个人网页设计理念 第17篇
我们本教程的最后一步，坚持下去！创建一个新组footer。然后使用矩形工具（U）创建一个矩形（40，1888，940，32），颜色： #e6e2d5。
命名此层为“footer bg”和设置其不透明度为25％。
在页脚的顶部添加两条1px的水平线（可以复制博客区域底部的两条分隔符）。
然后选择文字工具（T），写一个版权声明。
使用字体：Verdana字体，颜色： #595753。
最终的结果：
后记：
这也是一篇非常详尽的教程，一共有60步。本片教程的亮点有，通过“从形状区域减去”达到某些特殊的效果，例如纸的折角效果，灯罩的效果等。二是大量的运用了渐变叠加的效果，来达到美观的效果。教程中的灯的制作也是一个亮点，就是这几步单独拿出来也是一篇不错的教程。
ps 个人网页设计理念 第18篇
Select the Line Tool (U) and create lines with the weight 1px to separate the rectangles which you have created at the previous step. Use the color #d9d6c9. Then group all these layers (Ctrl/Cmd + G) and name the group “separators“.
ps 个人网页设计理念 第19篇
Duplicate the “circle” layer (Ctrl/Cmd + J) and put the new one beneath it.
Double-click on this layer and use the settings from the following image to add an Outer Glow and a Stroke layer style.
Then add a mask to this layer (Layer > Layer Mask > Reveal All).
Select the Gradient Tool (G) and drag a horizontal black to transparent gradient from the left side of the circle to the right side. Take a look at the following image for reference.
Name this layer “stroke“.
ps 个人网页设计理念 第20篇
在about组下面创建一个新组contact。
使用矩形工具（U）创建一个矩形（40，1271，940，449），颜色：#f8f5ec。命名此层为contact bg，并设置其不透明度为25％。
复制你在前面的步骤中创建的蓝条复制你在前面的步骤中创建的蓝条。
将这个新的蓝条放联系区域的左上角，并使用文字工具（T）更改文本为Contact。
ps 个人网页设计理念 第21篇
Duplicate the layer which you have created at the Step 29 (“Shape 1″) and put it above the “noise” layer.
Clear the layer style and change the color of this shape to #eef8e2.
Go to Edit > Free Transform (Ctrl/Cmd + T) and decrease the width of the shape as you see in the image below.
Add a mask to this layer (Layer > Layer Mask > Reveal All), select the Gradient Tool (G) and drag a black to transparent gradient from the bottom to the middle of this shape.
Name this layer “highlight” and set its blend mode to Overlay and layer opacity to 20%.
ps 个人网页设计理念 第22篇
Now we are going to add a little bit of noise to the paper to make it look more realistic. Ctrl/Cmd-click on the vector mask of the “paper” layer to make a selection of the paper. Create a new layer above all the other ones from this group and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).
Convert this layer into a smart object, then go to Filter > Noise > Add Noise and use the settings from the following image.
Name this layer “noise” and set its blending mode to Multiply and layer opacity to 15%.
In the following steps, we will add noise to other elements of the layout as well and I will refer to this step, so you might want to keep in mind this method.
ps 个人网页设计理念 第23篇
Create a new group beneath the “services” group and name it “blog“. This will feature excerpts from blog posts, which many portfolios nowadays have.
Select the Rectangle Tool (U) and create a rectangle with the height 345px using the color #f8f5ec.
Name this layer “blog bg” and set its opacity to 25%.
ps 个人网页设计理念 第24篇
在corner层的下方，创建一个新的图层。
选择钢笔工具（P），创建一个黑色三角形，就像下图一样。这一步还是用复制conner层比较好
右键单击新图层，选择“转换为智能对象”。可能由于PS版本的原因，在CS5版本中，为了完成后面的步骤，这一步应该是栅格化图层。
这一层（图层 > 图层蒙版 > 显示全部）添加蒙版，选择一个黑色的小笔尖（B）和涂抹它的右侧的纸护角的影子，将其擦除。
命名此层为shadow，并设置其不透明度为15%
ps 个人网页设计理念 第25篇
Create a new group and name it “blue bar“.
Then select the Rectangle Tool (U) and create a rectangle like the one you see in the following image using the color #1e92e4.
Name this layer “blue bar” as well, double-click on it to open the Layer Style window and use the settings from the following image to add a Gradient Overlay and Stroke layer style to it.
Then select the Move Tool (V) and move your rectangle 10px beyond the left edge of the layout and at a distance of 20px from the navigation bar.
ps 个人网页设计理念 第26篇
Add three more images and repeat the previous step for each one.
Then move the second and the fourth images 20px down (select the images, chose the Move Tool (V), hold down the Shift key and hit the down arrow key twice). This looks a little bit more interesting than having every image aligned the same way.
ps 个人网页设计理念 第27篇
Create a new layer beneath the “corner” layer.
Select the Pen Tool (P) and create a black triangle like the one from the following image.
Right-click on the new layer and select Convert to Smart Object.
Then go to Filter > Blur > Gaussian Blur and use a 2px radius.
Add a mask to this layer (Layer > Layer Mask > Reveal All), select a small black brush tip (B) and paint with it over the shadow from the right side of the paper corner to erase it.
Name this layer “shadow” and set its opacity to 15%.
ps 个人网页设计理念 第28篇
创建一个新组navigation
选择矩形工具（U）在蓝条的下方创建一个矩形（40，648，180，42），颜色： #edeadf。
双击打开图层样式窗口，按照下图设置渐变叠加。
复制这个矩形三次，使用移动工具（V）移动到合适的位置。
ps 个人网页设计理念 第29篇
我用了Adobe Illustrator中（是的，我只是一个稍微有点被骗，但可以使用Photoshop解决这件事 - 它是不会那么容易）创建一个飞机后面的虚线。如果你没有Illustrator中，你可以下载和使用我的虚线（提示Windows用户：右键单击的链接，选择“另存为”）的PNG图像。在Photoshop中打开它，和它放置在你的画布，使用移动工具（V）。
可选：Adobe Illustrator的用户
使用选择工具（V）选择您的虚线，将它复制（按Ctrl / Cmd+ C），返回到Photoshop中，作为一个智能对象（按Ctrl / Cmd+ V），并将其粘贴。
命名此层为line，并把它放在的paper airplane层的下方。使用自由变换（Ctrl / Cmd+ T），把这条虚线的移动到你想要的位置。
ps 个人网页设计理念 第30篇
Create a new group, name it “about” and move it beneath the “blog” group.
Select the Rectangle Tool (U) and create a rectangle with the height 200px and the color #e6e2d5. Name this layer “about bg” and set its opacity to 25%.
Duplicate a blue bar group which you have created at the previous steps, move it in the upper left corner of this area and change the text into “About me”.
Write a couple of sentences beneath the blue bar using the Type Tool (T). Then you can add some social icons beneath this text. The ones which I have used are from Function and you can download them for free.
Finally, add two lines with the weight 1px at the bottom of this area.
ps 个人网页设计理念 第31篇
Duplicate the “right arrow” group (right-click on it and select Duplicate Group).
Go to Edit > Transform > Flip Horizontal and use the Move Tool (V) to move it in the left side of the layout.
Name this group “left arrow“.
ps 个人网页设计理念 第32篇
Create a new group and name it “image names“.
Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a white (#ffffff) rounded rectangle at the bottom of each image from the featured content area.
Add a Stroke layer style to each of these rectangles using the settings from the following image.
Then select the Type Tool (T) and write the name of your images inside these rectangles using the font Verdana and the color #38352c.
ps 个人网页设计理念 第33篇
Create two lines with the weight of 1px at the bottom of the services area. Use the color #c0bcb1 for the first line and #ffffff for the second one.
ps 个人网页设计理念 第34篇
Duplicate the layer which you have created at the previous step (Ctrl/Cmd + J) and set its fill to 0%. Right-click on this layer and select Clear Layer Style.
Then double-click on it and use the settings from the following image for Gradient Overlay.
ps 个人网页设计理念 第35篇
复制circle图层（Ctrl / Cmd+ J），并把新的图层放到circle图层的下方。
双击图层，按照下图设置外发光和描边图层样式。
选择渐变工具（G），并拖动水平的黑色到透明的渐变，从圆的左侧拖动到右侧（实际应该是圆的中左侧拖到右侧）。来看看下面的图片，以供参考。
命名此层为stroke。
ps 个人网页设计理念 第36篇
Select the Line Tool (U), set the weight to 1px and create a horizontal line at the top of the navigation bar using the color #7e961d. Name this layer “1px dark line“.
Hit Ctrl/Cmd + J to duplicate this layer and move the new line at the bottom of the navigation bar.
ps 个人网页设计理念 第37篇
从互联网上下载一个纸飞机图像，在Photoshop中打开它。然后使用移动工具（V）移动飞机到您的文档中。我使用的图像是从GraphicRiver的，它的成本为3美元（或1美元，如果你有一个预付订金）。
然后将此图层命名为paper airline，双击它打开图层样式窗口，按照下图设置的投影的图层样式。
ps 个人网页设计理念 第38篇
Create a new group beneath the “about” group and name it “contact“.
Use the Rectangle Tool (U) to create a rectangle with the height 450px and the color #f8f5ec. Name this layer “contact bg” and set its opacity to 25%.
Duplicate a blue bar group which you have previously created.
Move this new blue bar in the upper left corner of the contact area and use the Type Tool (T) to change the text into “Contact“.
ps 个人网页设计理念 第39篇
创建一个新图层，使用钢笔工具（P）创建一个三角形，颜色： #f1e9d3，就像下面的图片中看到的一个三角形。
命名此层为“corner”，双击图层并按照下图设置渐变叠加。
对于不善于使用钢笔工具的，可以用矩形工具加直接选择工具选择一个控制点后删除的方法来实现三角形
ps 个人网页设计理念 第40篇
Create a new group and name it “right arrow”. Select the Ellipse Tool (U) and create a circle in the middle of the right edge of the featured content area. Use the color #e6b633. Name this layer “circle“.
ps 个人网页设计理念 第41篇
创建一个新组hire me。然后选择矩形工具（U），在头部区域的右侧创建一个小的矩形（795，15，145，81），颜色： #f7efda。
命名此图层为paper，双击打开图层样式窗口，并按照下图设置样式。
ps 个人网页设计理念 第42篇
Create a new group and name it “cloud“.
Then select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a few white circles with different sizes.
Then arrange all these circles using the Move Tool (V) to form a cloud. Set the opacity of the “cloud” group to 80%.
ps 个人网页设计理念 第43篇
Create a new group and name it “images“.
Then open three images that you like in Photoshop and crop each one to the dimensions 290px by 260px. I just used some random images and screengrabs from Six Revisions and from my site PSDBURN.
Move each image in your canvas using the Move Tool (V), arranging them like you see below.
Add an Inner Glow and a Stroke to each image using the settings from the following image to create a double stroke effect.