約定：

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

2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖

3、原文中有些操作沒有給出引數。本人在反覆測試的情況下測定了一些引數，以紅色的文字顯示。有些錯誤的引數，直接以紅色文字顯示正確的引數

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

例如：（90，22），表示矩形的左上角的座標是（90，22），矩形的其他兩個引數教程裡已經指定

4、在教程的最後會附上本人的心得。有些是對教程中的一些步驟的優化等。

 

接下來，就是該教程。採用逐句翻譯。

 

Hello and welcome to another tutorial here on trendyTUTS.com. For today I will create a trendy and colorful wordpress layout in Photoshop. If you’re thinking to redesign your blog, you can follow this tutorial. I will try to explain step by step how you can create a similar wordpress layout in Photoshop.

大家好，歡迎來到trendyTUTS.com 訪問本教程。今天我將用Photoshop建立時尚多彩的wordpress佈局。如果您在想重新設計你的部落格，您可以按照本教程。我將在Photoshop中一步一步講解，您就可以據此建立一個類似的wordpress佈局。

 

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML.

請注意在本教程中，我只是講解在Photoshop中如何設計此佈局，但我不會講解如何將該PSD轉換為XHTML。

 

To create this tutorial I have used:

•The basic tools from Photoshop (Rectangle Tool – mostly)

•Some vector icons from our free pack

本教程我使用了：

Photoshop 的基本工具（大多是矩形工具）

我們的免費提供的一些向量圖示

 

Let’s start the tutorial. Open phootshop and create a new document. Dimensions: 1020 x 1710px

讓我們開始教程吧。開啟photoshop，並建立一個新文件。尺寸: 1020 x 1710px

 

Select paint Bucket Tool and fill your document with #d9cb9e.

選擇油漆桶工具並使用 #d9cb9e 填充您的文件。

 

Step1 – Creating the top area

Select rectangle tool create this 2 rectangles. For the rectangle on the back I have used this color: #d9b94c and for the top one I have used this color: #fed95d, then with Type Tool I will write “trendyTUTS” and I will apply this layer styles:

步驟一——建立頂部區域

選擇矩形工具建立2個矩形。後面的矩形（90，22，231，77），顏色： #d9b94c ；前面的矩形（74，38，231，77），顏色： #fed95d 。用文字工具寫"trendyTUTS"，然後應用如下圖層樣式：

 

Here’s my result for logo:

這是我做的logo的樣子：

 

Next on the right side I will create the search bar. Select Rectangle Tool and create 2 similar shapes. Dimensions 324x24px. For the back one I have used this color: #455352 and for the top one, this color: #738483.

下一步我將在右邊建立搜尋欄。選擇矩形工具，建立 2個矩形。尺寸 324x34px。後面的矩形（530，54），顏色： #455352 ；前面的矩形（526，60），顏色： #738483 。

 

Having Rectangle Tool selected I will create again 2 more shapes . Dimensions: 51x34px. For the back shape I have used this color: #962418 and for the top one, this color: #dc3522. With type tool I will add some text, and here is my result for the search bar

再用矩形工具建立2個矩形，尺寸：51x34px。後面的矩形（862，54），顏色： #962418 ；前面的矩形（856，60），顏色：#dc3522 。用文字工具新增一些文字，下面是我做的搜尋欄的樣子

 

Step 2 – Creating the navigation

First I select Rectangle Tool and I will create this 2 shapes. Dimensions: 949x54px. For the back shape I have used this color: #738483 and for the top one: #374140. For the top one I will apply this layer styles:

步驟 2——建立導航

首先我選擇矩形工具，建立2個矩形。尺寸： 949x54px。後面的矩形（43，155），顏色： #738483  ；前面的矩形（36，162），顏色： #374140 。前面的矩形應用如下圖層樣式：圖中的顏色： #858585 。

 

Next I will select Rectangle Tool and I will create this red shape: #dc3522

接下來我將選擇矩形工具，建立紅色的矩形（86，170，136，68），顏色：#dc3522。

 

Then I will select Pen Tool and I will create this triangle (in order to create a nice 3d effect for our red shape). Color use for this triangle: #962418

然後，選擇鋼筆工具用顏色： #962418 建立直角三角形 （以便使我們紅色的矩形有好的 3d 效果）。

如下圖所示：

 

With type tool I will add the links for navigation. Here is my final result:

用文字工具新增導航連結的文字。下圖是最後的結果：

 

Step 3 - Creating the featured area

First I will select Rectangle Tool and I will create this 2 shapes. The first one (the bluish one) it will be used for Featured Area and the second one (white one) will be used later for the content area.

步驟 3-建立特色的區域

首先我將選擇矩形工具，將建立2個矩形。第一個 （淺藍（#3e5662）的那個） 將用於特色區（60，260，925，328），第二個（白色的（#dfdccd）那個） 稍後將用於內容區域（60，588，925，973）。

 

Next on the top of our bluish shape I will create another one. Dimensions 925×328, color: #567989, I will apply this layer styles, also:

接下來，在頂部的淺藍色的矩形上，我要建立另一個矩形（37，283），尺寸為925×328，顏色： #567989 ，我將新增如下的圖層混合樣式

 

You should have something like this:

你應該完成如下的樣子：

 

Next on the left side I will add an image and with Ellipse Tool I will create 3 circles at the bottom. Basically we will integrate a jquery slideshow when we will code this template in XHTML. I remember you that you can download this template and you will be able to acces the PSD to XHTML tutorial only if you will become a premium member.

接下來在左側新增影象並使用橢圓工具在底部建立3個圈。基本上，當我們編碼此模板到XHTML時，我們將使用jquery進行幻燈片放映。我允許你下載此模板，當你將成為高階成員時，您能夠獲得該PSD模版轉換到XHTML的教程。

 

Because this will be a wordpress blog, we will need to create a sidebar also. We will create them as usual, on the right side. Select Rectangle Tool and create a similar shape. Dimensions: 275x400px, color: # b1ac2a, then apply this layer styles:

因為這是一個 wordpress 部落格，我們需要建立一個側邊欄。我們將在右側和往常一樣建立它們。選擇矩形工具，建立一個矩形（665，226），尺寸： 275x400px，顏色： #b1ac2a 。然後應用此圖層樣式，圖中的顏色： #e4e041 。

 

My result so far:

到目前為止的結果：

 

Next with Pen Tool I will create a triangle to have a nice 3d look. I have used this color: # 726f1b

下一步使用鋼筆工具繪製一個三角形，為了有好的 3d 外觀。顏色： #726f1b

 

I will select Rectangle Tool and I will create a yellow rectangle. Color: # fed95d

我用矩形工具，建立一個黃色的矩形（650，244，283，45），顏色： # fed95d

 

And again with Pen Tool I will make a triangle to create a nice 3d look. Color used: # 9d873e

並再次使用鋼筆工具的繪製三角形，達到好的3d外觀。用顏色： # 9d873e

 

With Type Tool I will add the text and some banner ads (because this area is for advertisment)

My final result for featured area:

用文字工具新增文字和一些橫幅廣告（因為這個區域是為廣告）

最終的特色區域如下：

 

Step 4 – Creating the content area

First I will select Rectangle Tool and I will create this shape. Dimensions: 925X417px, color: # ece9df

步驟 4 – 建立內容區域

首先我將選擇矩形工具，建立矩形（37，626）。尺寸： 925X417px、 顏色： # ece9df

 

With Rectangle Tool I will create this red shape. Dimensions: 606x45px, color: #dc3522

使用矩形工具建立紅色的矩形（17，654）。尺寸： 606x45px、 顏色： # dc3522

 

As usual, I will select Pen Tool and I will create again a nice 3d look. Color used for this shape: # 9a291c, then with Type Tool I will add the title:

和剛才一樣，我用鋼筆工具再次建立好的 3d 外觀。顏色： # 9a291c，然後用文字工具新增標題：

 

With Rectangle Tool I will create another one rectangle over the red shape. Dimension: 178x39px, color: # 374140

用矩形工具在紅色的矩形前建立另一個矩形（426，669）。外形尺寸： 178x39px，顏色： #374140 。並新增相應的文字。

 

Then I will add an image and with type tool I will add some text

然後我將新增影象和用文字工具新增文字

 

At the bottom of the article with Rectangle Tool I will create a shape and with Pen Tool I will create again a nice 3d look. Over this button with Type Tool I will write “See more”

在該區域的底部中，建立一個矩形（530，988，78，37），顏色： # dc3523 ，並使用鋼筆工具繪製陰影，顏色： # 9a231b，達到好的3d外觀。在此按鈕上，用文字工具寫"See more"

 

On the right side I will create a sidebar again. I will use the same steps used to create the sidebar on featured area. I will use again Rectangle Tool (to create the horizontal and vertical rectangles) and with Pen Tool I will create again a nice 3d look.

在右邊將重新建立一個側邊欄。將使用和建立特色區域上的側邊欄相同的步驟。再次使用矩形工具 （以建立垂直矩形（665，626，275，440），顏色： #d9b94c ，描邊： #e4e041 ；和水平矩形（650，654，283，45），顏色： #918d22 。） 並使用鋼筆工具建立好的 3d 外觀，顏色： #5e5a1a。

 

With some image and Type Tool I will add the content for the sidebar.

一些影象和文字將新增到內容區域的側邊欄。

 

In the same way I will create another post on our wordpress layout and at the bottom I will create a pagination

Here is my final result for the content area:

用相同的方式在佈局上建立另一塊內容區域和在底部建立分頁（分頁的顏色： # d9b94c ， # 374140）。在右邊的側邊欄的左側新增三角形的陰影，顏色：# 737029 。

這裡是我的內容區域的最終結果：

 

Step 4 – Creating the footer

Well to create the footer it’s quite easy. First I will add the logo (I have duplicated it) then on the right side, using Rectangle Tool I will create 2 shapes and using some icons from the free pack I will add a twitter and an rss icon.

Here is my final result for Footer

步驟 4 – 建立頁尾

建立頁尾很容易。首先我會新增的logo（之前在上方做的logo）、 在右側使用矩形工具建立2個矩形（直接複製logo區域的兩個矩形，然後移到右側的合適位置，修改寬度為原來的250%，後面的矩形顏色： # 3e5662 ；前面的矩形顏色： # 557989 。）和從免費包使用一些圖示，我新增一個 twitter 和 rss 圖示。

這裡是我最終頁尾

 

最終的佈局如下：

 

心得：

1、在PS中精確調整矩形的大小與位置。

這是一個容易讓人困惑的地方。貌似PS中不能精確調整矩形的大小，在自由變形工具中，寬度和高度的調整都是以百分比的形式出現。其實，這是讓它給唬住了，在寬度和高度的文字框裡直接輸入精確的值就可以了，只不過要帶上單位px。如果只有數字，沒有單位，預設的單位是百分比，這個就悲劇了。

例如：我要精確調整矩形（40，40，120，50），則如下顯示調整即可。

 

2、該教程的logo的簡化製作

在該教程中，logo的製作是兩個矩形（在本教程中，類似的兩個矩形還有好幾個地方）。其實，只要一個矩形，然後新增投影就能達到同樣的效果。

a、用矩形工具新增一個矩形，（74，38，231，77），顏色： #fed95d

b、對該矩形新增如下樣式，投影的顏色： #d9b94c

完成後的成品如下：加上文字後是不是和教程裡的logo一模一樣。

 

3、三角陰影的製作

在教程裡多次提到製作三角形的陰影，以達到好的3d效果。在教程裡三角形陰影的製作，基本上都是利用鋼筆工具。這是一個仁者見仁智者見智的問題。有些人鋼筆工具用的很純熟，絲毫不感覺困難。有些人（筆者也是）用不好鋼筆工具，自己就再摸索了一個比較方便的三角形陰影的製作。

a、如下圖，先用矩形工具建好兩個矩形

b、點中前面紅色的圖層，CTRL+J，複製該圖層

c、對複製好的圖層自由變換，如下圖所示：

d、對變換好的圖層移到黑色的圖層的後面，並修改成深紅色。如下圖所示：

和教程中的陰影效果不相上下吧。