ps网页效果图设计 第1篇
To make the active tab more obvious, we’re going to give it a faded white background. To do this first select the whole object and then subtract from the selection to get only the first tab selected.
为了使活动的切换页更加明显，我们将给它添加渐白的背景。为了达到这样的效果我们把整个对象选中然后裁切选区，最终使选中的范围只有第一个按钮。
This is what your selection should look like.
你的选区如下图所示
With a smaller soft brush, paint in a white background.
新建图层，用一个小的软刷，用白色涂抹背景
ps网页效果图设计 第2篇
Create a new layer and draw in a big rectangle about 400px high. This one is used for our header. Fill it with a nice blue gradient from #2787b7 to #258fcd.
See how subtle the color change is?
新建一个图层并画一个大的高400px的矩形（0，130，1200，410）。这个将用于我们的页头。用一个漂亮的蓝色渐变去填充它，颜色从 #2787b7到 #258fcd
以下展示颜色的微妙变化：
ps网页效果图设计 第3篇
The designs I create are nearly all based on the 960 Grid System. So, before we begin we need to download the grid system Photoshop templates. You can find them on the official website. Simply unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col. The difference between these two are, as the name suggests, one is made with 12 columns and the other one with 16 columns. To explain it a bit more, if you have 3 boxes in your design you would choose the 12_col grid, because 12 is divisable by 3; or if you have 4 boxes in your design, you would choose either 12_col or 16_col grid because 12 and 16 are divisable by 4. If you follow this tutorial, you will see this in action.
我的设计几乎都是基于960网格系统。所以，在我们开始之前，我们需要下载960网格系统的PS模板。你可以在官方网站上找到他们。解压zip文件，找到PSD模板。你会看到两种不同类型的模板：一个是12_col的，另一种是16_col的。这两者之间的差异，正如其名所示，一个是12列而另一个16列的。为了更好解释这一点，如果在你的设计中有3个方块，你会选择12_col的，因为12能被3整除的，或者如果你的设计有4个方块，你会选择12_col或16_col的，因为12和16都能被4整除。如果按照本教程中，您将看到这个动作。
ps网页效果图设计 第4篇
Before we open our PSD grid template and begin drawing, we first need to define the structure of our site. This is a bit more of a complicated structure because we have a layout inside a layout. You can see this exemplified in the image above.
在我们打开PSD网格模板并开始绘制前，我们首先需要定义我们的网站的布局结构。你可以看到上面的图片显示的例子。这是一个比较复杂的结构，是因为我们每一个布局都还有各自的布局。
ps网页效果图设计 第5篇
If you look at the final image preview, you can see that we have nice tabs in the content area. In order to create these tabs we’ll need to perform a few extra steps, but it’s definitely worth it. First, create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of 10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it down while holding the Shift key until it reaches the same level with the horizontal axis. So far so good but it’s still deformed. You see the little handle. Click on it and move it upwards to the point of the path.
如果你看最终效果图，你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要一些额外操作，但这是很有必要的。首先用圆角矩形工具创建一个高70px圆角半径为10px的圆角矩形（128，589，944，70），颜色： #e1e1e1。现在我们不要底部圆角，使它形成一个完美的角。用直接选择工具单击这个图形的路径，单击垂直方向的点然后按住shift键往下拉到水平坐标轴的高度。现在看起来不错了，但是还是比较简陋。然后你看见一个小的控制点。单击它并移动到路径上的点。
Now we have created a perfect corner. This is how it should look. Repeat this step for the right bottom corner.
现在我们创建一个完美的角。就像图中所示。在右下角也重复该步骤，并给它添加一个1px的描边，描边的颜色： #b0b0b0
ps网页效果图设计 第6篇
2、首先我们打开ps任意版本进入 建立图层10*10像素大小的图片，这个大小决定网格的大小，10像素不够就20依次递增或递减，自己测试自己需要的大小。
3、首先你要明白网页制作的流程：网页设计师(主要是用PS)先将网页设计出来。进行网页制作，就是切片，div+css布局，将图片变成网页。后台制作。可以自己开发，也可以套用cms，如dedecms，phpcms。等 具体步骤就是这样。
4、首先，我们需要先确定一个网站的类型和类型。如果是企业网站，我们就需要将网站的内容编写成标题、副标题和正文，然后根据内容的主题来设计网站的页面，同时也要注意网站中的字体的统一性。
小伙伴们，上文介绍PS如何做网页,用ps做网页效果图教程的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
ps网页效果图设计 第7篇
It’s time to design the content for our first tab. We need a featured design image, a nice heading and some text. First we will create the featured image. I thought that it would be nice to break the edginess of the design by creating a nice stacked photos effect for our featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very subtle drop shadow effect.
是时候设计第一个切换页的内容了。我们需要一个有特色的设计图像，有好看的标题和一些文字内容。首先我们得创建这个有特色的图片。我想，这将是很好的打破尖锐棱角的设计的时候，我们为特色设计图像的创造一个好看的叠照片的效果。要做到这一点，绘制一个1px浅灰色（颜色： #b0b0b0）边框的白色矩形（136，714，404，224），和一个非常微妙的阴影效果。
Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.
复制这一层并用自由变形工具稍微旋转。重复这个操作几次（3次比较好）
Import your featured image and place it over the white rectangles. Don’t worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle, go to Select > Modify > Contract and insert 5px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image here.
This is how your layer order should look like.
你现在的图层顺序看起来如下所示
ps网页效果图设计 第8篇
Now we’re coming back to our layer organization mentioned a few steps earlier. Create a new empty layer folder and name it “top_bar”. Move all graphics from the top of the layout inside this folder (logo, tagline, search field, sign up button, navigation and backgrounds).
现在回到我们之前一些步骤提到的图层结构。创建一个新组top_bar。移动所有的图层到这个组里面（包括LOGO，说明文字，搜索框，SIGN UP按钮，导航栏和背景）。
Create another empty layer folder and name it “header”. This is where we will put our header graphics. This is how it should look.
创建另外一个组并命名为header。这里用于放置头部图层。如图所示
ps网页效果图设计 第9篇
Create the very bottom part where the repeated navigation will be placed. You can copy the rectangle from the top where the navigation is placed, move it down and make it about 40px high. Place it at the very bottom of your canvas. Please note that you may need to expand your canvas at this point so that all your graphics fit. If you need to do that, then go to Image > Canvas size and set the height to fit the entire layout.
ps网页效果图设计 第10篇
Now create a new layer and draw a “Sign Up” button the same way we created the search field – just half the width. Place it under the search field in the middle of the navigation stripe.
新建图层，用创建搜索框同样的方法画一个Sign Up按钮（998，91，73，30），颜色： #258dca——只有一半的宽度。把它摆放在搜索框的下面的导航区域的中部。
用PS新建文档，尺寸：4px*4px，背景透明，用画笔从左上角到右下角点4个白点
然后定义图案，关闭新建的文档。回到主文档，给该按钮添加图案叠加的样式
添加和搜索框一样的描边样式，并按照下图添加内阴影样式
在按钮上添加SIGN UP文字，文字颜色白色。在按钮的左侧添加Login（黑色） or（灰色）的文字
Again we’re creating the effect from Step 5.
我们再次创建步骤5中的特效
Use a smaller soft brush size. In this case it was 45px.
用一个小尺寸的软刷。在这里用的是45px
ps网页效果图设计 第11篇
Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.
添加投影。在切换页的背后创建一个深灰色的矩形（78，609，1044，50），颜色： #303030，如图所示
Add a vector mask by clicking the little icon in the bottom of the layer palette.
Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we get a nice fake shadow effect behind our tabs.
设置颜色为黑色，选区一个大的软刷，然后开始删除矩形的部分。结果，我们创建了一个比较好看的阴影效果
也可以用渐变工具在蒙版内添加一个黑色到透明的渐变，如下图所示
Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again like described earlier and with a big soft brush delete the left and right end of the line. Now we get a nicely faded line that follows our shadow behind the tabs.
最后我们加点细节。在切换页下方画一个1px的灰线（78，659，1044，1），颜色： #b0b0b0。然后如上一步一样的方式使左右两端产生渐变，也可以用上面所讲的用渐变来实现。现在我们就在切换页的后方紧挨着阴影的地方得到一条比较时尚好看的线。
This is how our tabs should look. 这就是我们切换页看起来的样子。