网页设计ps导航栏设计 第1篇
In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then go to the _Photoshop_ folder (inside _templates_). There you will find all the .PSD files. For this web design we will use the 12 columns grid.
在本教程中，我们将使用960网格系统。下载并解压缩文件。然后去Photoshop文件夹（里面的templates）。在那里，你会发现所有的PSD文件。此Web设计中，我们将使用的12列格。
After you open the .psd file in Photoshop you will see 12 red bars. That is the grid that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.
During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see its exact width and height in this panel.
在本教程中，我会要求您创建具有一定尺寸的形状。打开信息面板（窗口 > 信息），当你创建一个形状时，在此面板中，你会看到它的确切的宽度和高度。
The .PSD file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.
The grid will help us apply the alignment design principle, which states that every element of the design should be visually connected with another one and nothing should be placed randomly.
该网格将帮助我们走线设计原则，其中规定每一个元素的设计在视觉上与另一个连接的，并不是什么随机摆放的
Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. If you want to find out more about the 960 Grid System you can read a more comprehensive guide.
现在，我们讨论了使用960网格系统的基础知识，我们可以开始到创建实际的网络布局。如果你想了解更多有关960网格系统，你可以阅读更全面的指导。
网页设计ps导航栏设计 第2篇
The _Portfolio_ area will be linked to the services area. Since we are creating a one-page website, we need the functionality of selecting a portfolio category and get a list of the portfolio items from that category.
Portfolio区域从Services区域链接过来。自从我们要创建一个单页网页，我们需要的选择类别的功能和从该类别中获得项目的列表的功能。
We are going to use the three services as categories. In order to indicate which category is selected, we will use the same color scheme that we use for the _Services_ area.
我们打算使用3个服务的类别。为了表明所选择的类别，我们将使用相同和Services区域相同的配色方案。
When a user clicks on say, the _Branding_ service, the portfolio section underneath will have a red stroke, the highlight color and headline color will also be red and there will be a red bar connecting the _Branding_ column with the portfolio box. These three visual indicators will be enough for the user to quickly understand how the portfolio section works.
Let’s start designing the _Portfolio_ area. Create a new group and name it _Portfolio_. Create another group inside this one and name it _portfolio bg_.
让我们开始设计Portfolio区域。创建新组Portfolio。在其中创建另一个新组Portfolio bg
Select the Rectangle Tool (U) and create a rectangle with the dimensions 960px by 310px and the color #89b9ac. Name this layer _first border_ and set its opacity to 20%. Then select the Move Tool (V) and move this rectangle 60px underneath the _Services_ area.
选择矩形工具创建一个矩形（120，620），尺寸：960px*310px，颜色： #89b9ac。命名此图层为first border，设置不透明度为20%。然后选择移动工具，移动到Services区域下方60px处
Create a new rectangle with the dimensions 950px by 300px and the color #a7c5bd. Name this layer _second border_ and move it in the middle of the first rectangle. Double-click on this layer to open the Layer Style window and use the settings from the following image. The color that I used for the Inner Shadow and Stroke effects is #83a098.
创建新的矩形（125，625），尺寸：950px*300px，颜色： #a7c5bd。命名此图层为second border，并移动到第一个矩形的中间。双击该图层打开图层样式窗口按照下图设置样式。内阴影和描边的颜色： #83a098
Create a new rectangle with the dimensions 940px by 290px and the color #f5f2ea. Name this layer _portfolio bg_. Double-click on this layer to open the Layer Style window and use the settings from the following image. The Stroke color that I used is #f9f8f5.
创建新的矩形（130，630），尺寸：940px*290px，颜色： #f5f2ea。命名此图层为Portfolio bg。双击该图层打开图层样式窗口并按照下图进行设置。描边的颜色： #f9f8f5
The _Portfolio_ area will be dived into two columns. The left one will display a list of thumbnails. When a user clicks on a thumbnail, the right column will display more information about that portfolio item.
网页设计ps导航栏设计 第3篇
The _Contact_ area will have two columns: one for the contact form and the other one for the Twitter feed. We will apply the contrast design principle to differentiate the two columns.
Contact区域包含2列：一列是联系表单，另一列是Twitter feed。我们将利用对比的设计原则，区分这两个列。
The contact form will be wider that the Twitter feed column because it is more important and it needs to attract more attention. To accomplish this goal, we are also going to create a different background to the contact form. Let’s get to work now.
联系表单会比Twitter feed列宽一点，因为它是更重要的，它需要以吸引更多的关注。为了实现这一目标，我们还要创建一个不同背景的联系表单。让我们开始工作。
Create a new group and name it _Contact_. Create another group inside this one and name it _contact bg_. Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 620px by 360px and the color #d0cbc1. Name this layer _border_, right-click on it and select Convert to Smart Object.
新建组Contact。在其中创建另一个组Contact bg。选择圆角矩形工具，半径6px，创建一个圆角矩形（130，1210），尺寸：620px*360px，颜色： #d0cbc1。命名该图层为border，在该图层上右键选择转换为智能对象。
Go to Filter > Noise > Add Noise and use the settings from the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image. The Stroke color that I used is #958f82.
Select the Rounded Rectangle Tool (U) and set the Radius to 4px. Then create a rounded rectangle with the dimensions 610px by 350px and the color #f5f2ea. Move this layer in the middle of the dark rounded rectangle.
选择圆角矩形工具，设置半径为4px。然后创建圆角矩形（135，1215），尺寸：610px*350px，颜色： #f5f2ea。移动该图层到深色圆角矩形的中间
Name this layer _contact bg_, right-click on it and select Convert to Smart Object. Add a noise filter using the settings from the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image. The color that I used for the Stroke effect is #f9f8f5.
命名此图层为Contact bg，在图层上右键选择转换为智能对象。按照下图添加杂色滤镜。双击该图层打开图层样式窗口，并按照下图设置图层样式。描边样式的颜色： #f9f8f5
网页设计ps导航栏设计 第4篇
Select the Type Tool (T) and write the headline _Web Design_ using the font Muncie with the size 48px and the color #7b9d94. Then add a white Drop Shadow effect using the settings from the image below.
用文字工具书写标题Web Design，字体：Muncie，字号：48px，颜色： #7b9d94。然后按照下图设置白色的投影样式
Use the Type Tool (T) to create a text box 230px wide (you can see the width of your text box as you are creating it in the Info panel). Add a paragraph of text in this box using the font Open Sans Light with the color #5c574f and the size 15px.
用文字工具创建一个文本块，230px宽（在你创建文本块的时候，你可以在信息面板中看到文本块的宽度。）。在其中添加一段文字，字体：Open Sans Light，字号：15px，颜色： #5c574f
To make the text more legible we will set the line height to . Our font size is 15px. If we multiply 15 by we get 24. That is the pixel value of the line height. Go to the Character panel and set the leading to 24px.
Now we will add a _View Portfolio_ button for this column. Later on we will create the _portfolio_ area and we want the user to be able to select one of the services offered and get the portfolio items for that service right underneath this area.
现在我们要给该列添加View Portfolio按钮。后面我们会创建Portfolio区域，希望用户能够选择一个所提供的服务，并得到下面Portfolio方面的项目。
Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 120px by 30px and the color #a7c5bd. Name this layer _button_, right-click on it and select Convert to Smart Object.
选择圆角矩形工具创建一个圆角矩形（220，470），尺寸：120px*30px，颜色： #a7c5bd。命名该图层为button，在该图层上右键选择转换为智能对象
Go to Filter > Noise > Add Noise and use the settings from the image below (1). Then double-click on this layer to open the Layer Style window and use the settings from the following image (1).