PS網頁設計教程IX－巧用大括號設計驚豔的諮詢頁面

作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提升自身的設計能力。套用一句話，「熟讀唐詩三百首，不會作詩也會吟」。

本系列的教程來自網路上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教學。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。

約定：

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

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

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

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

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

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

 

With this layout you will be able to easily build a web site dedicated to teaching and learning, or a business layout, as well as manage or marketing outs.於教學與學習，此佈局可讓您輕鬆建立web 站點，或業務佈局，以及管理或行銷佈局。這種佈局可以轉換成一個 WordPress 主題。

 

I will use my default document size: 960 x 900 pixels.    

我將新建一個文檔，文檔預設為：960*900px

you want.

你也可以使用其他的尺寸

Set your foreground color to #1f0f0e and then with Paint Bucket Tool press one time on your canvas. This will be the background of our consulting layout. vas. This will be the background of our consulting layout.  桶子工具在你的畫布上噴塗一下。這是我們的諮詢頁面的背景。

 

Select you Horizo​​ntal Type Tool, and type a brace. I have used the following font, and size:

選擇水平文字工具，輸入一個大號括

註：關於字體的方式是“銳利”還是“柔和”，要親自實驗才行，筆者做了兩次，分別得用不同的方式，才有本教程下面的樣子，也不知為何。

 

Right click on the layer in your layer palette, and choose Convert to shape

在圖層板上右鍵文字To rotate a shape you can select the shape, then press on CTRL+T, and then with mouse too rotate the shape. Another way to rotate a shape is to go to Edit > transform > rotate….

旋轉該形狀如下圖。旋轉該形狀，你可以選擇該形狀，然後按Ctrl+T，用滑鼠去旋轉該形狀。另一個辦法是，點選：編輯> 變換> 旋轉...

經測算，該形狀的位置點為（43，296，260，84）

  times

and with Move Tool, place them like in the following image

複製該形狀多次（三次），用移動工具，擺放如下圖所示：

自下而上的四個形狀分別為

自下而上的四個形狀分別為

（43，296），顏色： #483d3c

（43，285），顏色： #ff2609

（43，275），顏色：#ffg ： #ded3d1

 

I will change the foreground color to #3d302f, and I will create a rectangle with Rounded Rectangle Tool. I will place this layer under the previous ones.2🜎矩形工具創建一個圓角矩形

（43，225，260，650）

，將該圖層移到剛剛四個形狀的下方

 

With Rectangle Tool I will create another shape on the top. The color used to create this shape is: #ded3d1

用矩形工具在頂部建立一個新的矩形。此長方形的顏色為： #ded3d1

建議是圓角矩形，半徑為50px，位置（43，-50，250，400）

willŠ

will

ape top the heavle top .

在頁面的頂部，還是要新建另一個矩形

註：為了後續的操作方便，在此步的矩形的高度調的大一點，矩形為（0，0，960，90）

 

With Pen Tool I will create a shape like in the following image. I want to create a round corner.

I will duplicate this shape (press CTRL+J), and I will place it on the other side of the layout.

I will go to Edit > Transform > Flip Horizo​​​​ntal. If this option is not enabled, then you need to select the layer in your layer palette. The next step is to align this layer .

用鋼筆工具建立如下圖所示的形狀。我創建了一個圓角

複製這個形狀（按Ctrl+J），移動該形狀到頁面的另一邊

點擊：編輯 > 變形 > 水平翻轉。如果該選項沒有激活，你需要在圖層面板選中該圖層，接下來就是對齊該圖層

 

還是不擅長鋼筆工具的使用，於是換了一個思路，選中圓角矩形工具，半徑設定為10px，新建一個圓角矩形（-37，72，80，40），顏色為： #1f0f0e

再用同樣的顏色新建另一個圓角矩形（303，72，700， 40）

 

On the right side I will create 2 shapes with Rounded Rectangle Tool.

在右側用圓角矩形工具建立兩個圓角矩形。

分別是（328，96，593，242），顏色： #ded3d1;和（328，370，593，500），顏色： #aea2a2

For both layer I will add the follo兩個圖層加上以下的圖層樣式：

 

This is my result🎜🎜這是我的結果🎜

 

On the top I will create a button with Rounded Rectangle Tool.

在頂部用圓角矩形工具創建一個按鈕（325，35，118，118），由於後面必須切除的一部分，所以製作方形的按鈕比較容易

 

I will right click on the layer in my layer palette, and I will choose rasterize layer. With Rectangular Marquee Tapette, and I will choose rasterize layer。

在圖層面板上右鍵，選擇柵格化圖層。用矩形選取工具，在按鈕的​​底部畫一個選取範圍。

 

Be sure you have the layer with the button selected, then hit delete key from your keyboard and press on CTRL+D to deselect. After I will appyour key片 0 on CTRL+D to deselect. After I will app looks like this:

保證按鈕的圖層被選中，然後按鍵盤上的delete鍵，然後按Ctrl+D取消選擇。接下來要從27.000 Photoshop gradients加入一個漂亮的漸變，我的按鈕如下圖：

由於沒有註冊為會員，故手動添加漸變，如下圖所示，

左

左邊的顏色： #5a4f4d，右邊的顏色： #3e3331

 

I will duplicate this button and with Move Tool I will place it near this one.it near this one.位置

對第二個的按鈕添加適當的漸變，如下圖所示：

左邊的顏色： #ff4a2b，右邊的顏色：#20005按鈕分別新增文字：ABOUT US、SERVICES、PORTFOLIO、BLOG、CONTACT。文字的式樣設定如下：

 You will notice a red button. I have used

You will notice a red button. I have used

You will notice a red button. I have used meother hadiian grouran 的紅色按鈕。我從our huge gradient set添加另一個漸變。 （還是自己設定漸變，設定如上

）

 

In the middle of my business consulting layout I will create three shapes, and three brace.

在我的商業諮詢佈局的中間，我要創建三個圓角矩形，和三個大括號

I will change the color of the round shapes to white, and I will select all 6 layers in my layer palette. Then I will press on CTRL+E to merge all the layers into a single one.  With Brush Tool I will draw over the empty spot. Thi Brush Tool I will draw over the empty spot. Thi Brush Tool I will draw over the empty . is my result so far.

將圓角矩形的顏色改為白色。選擇這6個圖層。然後按Ctrl+E合併圖層到一個圖層。用畫筆工具填滿空白部分。這是我的結果

 

我的做法是：

1、新建一個圓角矩形（338，377，184，159），顏色為白色

大括號，字號為194，字體為Book Antiqua，旋轉90度。然後移到適當的位置

3、再用長方形工具填滿空白部分

4、合併剛才的三個圖層，然後複製兩次，移到適當的位置

For this layer I will add the following layer styles.

對這些圖層加上以下的圖層樣式

After

is my result

接下來添加一些圖標，和一些文字

 With Rectangle Tool, I will create a shape on the bottom of the layout

（324，696，600，144）

 

It is time to add some text with Horizo​​ntal Type Tool. Please click on the time to add some text with Horizo​​ntal Type Tool. Please click on the image to s 。對照圖片擺放文字,

並且添加一張圖片

 

Right under the logo I will create some shapes with Rounded the Isgle Tool。 fill value for each layer to 40 %.

在LOGO的下方添加一些圓角矩形。顏色：白色。將這些圖層設定填入40%

 

I will place some text over the buttons.

我要在按鈕上加上一些文字

 

This is my final consulting layout. I hope you like it, and if you want to use it for your website please let menow. I really wper it for your website please let menow. I really wook it 的最終。諮詢佈局。我希望你會喜歡它，並讓我知道你會用在你的網站佈局中。我真的很想知道你的作品。

 

後記：

利用大括號巧妙的實作版面​​。有時候看起來驚豔的效果，其實也就是一些小小的技巧。

更多PS網頁設計教學IX－巧用大括號設計驚豔的諮詢頁面 相關文章請關注PHP中文網！