在Photoshop中創立一個光質感網頁規劃

作為編碼者，美工基礎是偏弱的。咱們能夠參閱一些成熟的網頁PS教程，提高本身的規劃才能。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。

本系列的教程來源于網上的PS教程，都是國外的，全英文的。自己測驗翻譯這些優秀的教程。由于翻譯才能有限，翻譯的細節上還有待推敲，希望廣闊網友不吝賜教。

約好：

1、本文的軟件是Photoshop CS5版本

2、原教程的截圖是英文的，自己在從頭制造的基礎上，從頭截了中文版的圖

3、原文中有些操作沒有給出參數。自己在反復測驗的情況下測定了一些參數，以赤色的文字顯現。有些錯誤的參數，直接以赤色文字顯現正確的參數

例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77

例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里現已指定

4、在教程的最后會附上自己的心得。有些是對教程中的一些過程的優化等。

In this web design tutorial, we’ll be creating a light textured web page layout. I will show you how apply subtle textures in web layouts, how to create a seamless diagonal mosaic pattern and how to create a tabbed content area design for the “Services” section. 
在本網頁規劃教程中，咱們將創立一個光質感的網頁布局。我會告知你怎么在網頁布局中增加奇妙的紋理，怎么創立一個無縫的對角拼接模式，以及怎么創立一個“服務”部分的選項卡的內容區。

In this tutorial, we will use the 960 Grid System to organize and arrange the elements of our web layout. Before we begin, download it to your computer.

在本教程中，咱們將運用960網格體系，來組織和組織咱們的網頁布局的元素。在開始之前，將其下載到您的計算機。

Unzip the archived file you downloaded, go to the “templates” folder and then go to the “photoshop” folder. You will find three .PSD files. Each of these files contains a grid with 12, 16 and 24 columns. In this tutorial we will be using the 12 columns grid.

解壓下載好的文件，點到templates文件夾下的photoshop文件夾。你會發現有3個.PSD文件。它們別離包含了12列、16列、24列網格。在本教程中，咱們運用12列網格

The .PSD files have some guides already set up, which will be very useful. To activate the guides, go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;.

.PSD文件現已包含了一些設置好的網格，這會對錯常有用。為了激活網格點擊：視圖 > 顯現 > 網格，或許用快捷鍵，Ctrl/Cmd + ;

During this tutorial you will need to create shapes with specific dimensions. To see the exact size of a shape or selection while you are creating it, open the Info Panel by going to Window > Info. The width and the height of your shapes and selections will be displayed in this panel.

在本教程中，您將需要創立具有特定尺度的形狀。當你在創立過程中要查看確切的大小，點擊：窗口 > 信息，翻開信息面板。你的形狀或挑選的寬度和高度的將被顯現在此面板中。

Now that we covered the basics of using the 960 Grid System, we can move on to creating the web layout. Let’s get started!

現在，咱們評論了運用960網格體系的基礎知識，咱們能夠繼續創立的網絡布局。讓咱們開始吧！

Step 1: Creating the Background of the Web Layout

過程1：創立網頁布局的布景

Open the "960_grid_12_col.psd" file in Photoshop. Then go to Edit > Canvas Size and set the width to 1200px and the height to 1900px. You can adjust the height later on if you need more space for the web layout.

在PS中翻開960_grid_12_col.psd文件。然后點擊：修改（應該是圖像） > 畫布尺度，然后設置寬度為1200px，高度為1900px。如果網頁布局需要更多的空間，你能夠在后面調整網頁高度。

由于翻譯教程不運用960布局體系，故本步改為，新建文檔，尺度：1200px*1900px

Now we will change the color of the background from white to a light gray. With the "Background" layer selected, click on the little black lock icon from the top of the Layers panel to unlock this layer. Then change the color of the background layer to #ededed.

現在，咱們要把布景色從白色改為亮灰色。當Background圖層選中的時分，單擊圖層面板上方的小黑鎖的圖標去解鎖該圖層。然后把布景圖層的色彩改為： #ededed

由于是新建文檔，故改為雙擊布景圖層，去解鎖它

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and set the Amount to 1%, the Distribution to Gaussian and tick the Monochromatic box.

在該圖層上右鍵，挑選轉換為智能目標。然后點擊：濾鏡 > 雜色 > 增加雜色。設置數量為1%，設置為高斯分布，勾選上“單色”。

Step 2: Creating the Header

過程2：創立頭部區域

We will create a simple header with the name of the web layout and some social media icons. Create a new group and name it "Header". Then select the Type Tool (T) and write the name of your layout. I used the font Gotham Bold with the size 42pt and the color #707679. Align this layer with the grid, as you see in the image below.

咱們將用網站的姓名和一些社會媒體圖標創立普通的頭部區域。創立新組Header。然后用文字東西書寫你的布局的姓名。我用的字體：Gotham Bold，字號：42pt，色彩： #707679。依照下圖對齊你的布局

Double-click on your text layer to open the Layer Style window and use the settings from the following image.

雙擊你的文字圖層翻開圖層樣式窗口，依照下圖設置圖層樣式