作為編碼者，美工基礎(chǔ)是偏弱的。我們可以參考一些成熟的網(wǎng)頁(yè)P(yáng)S教程，提高自身的設(shè)計(jì)能力。套用一句話，“熟讀唐詩(shī)三百首，不會(huì)作詩(shī)也會(huì)吟”。

本系列的教程來(lái)源于網(wǎng)上的PS教程，都是國(guó)外的，全英文的。本人嘗試翻譯這些優(yōu)秀的教程。因?yàn)榉g能力有限，翻譯的細(xì)節(jié)上還有待推敲，希望廣大網(wǎng)友不吝賜教。

約定：

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

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

3、原文中有些操作沒(méi)有給出參數(shù)。本人在反復(fù)測(cè)試的情況下測(cè)定了一些參數(shù)，以紅色的文字顯示。有些錯(cuò)誤的參數(shù)，直接以紅色文字顯示正確的參數(shù)

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

例如：（90，22），表示矩形的左上角的坐標(biāo)是（90，22），矩形的其他兩個(gè)參數(shù)教程里已經(jīng)指定

4、在教程的最后會(huì)附上本人的心得。有些是對(duì)教程中的一些步驟的優(yōu)化等。

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 management or marketing layouts. This layout can be transformed also in a WordPress theme.

致力于教學(xué)和學(xué)習(xí)，此布局使能您將能夠輕松地構(gòu)建 web 站點(diǎn)，或業(yè)務(wù)布局，以及管理或市場(chǎng)營(yíng)銷(xiāo)布局。這種布局可以轉(zhuǎn)換成一個(gè) WordPress 主題。

I will use my default document size: 960 x 900 pixels.
我將新建一個(gè)文檔，文檔默認(rèn)大小為：960*900px

Feel free to use any size 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.
設(shè)置前景色為 #1f0f0e，用油漆桶工具在你的畫(huà)布上噴涂一下。這是我們的咨詢頁(yè)面的背景。

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

選擇水平文字工具，輸入一個(gè)大括號(hào)，我將如下圖設(shè)置字體、尺寸等

注：關(guān)于字體的方式是“銳利”還是“柔和”，要親自實(shí)驗(yàn)才行，筆者做了兩次，分別得用不同的方式，才有本教程下面的樣子，也不知為何。

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

在圖層面板上右鍵文字圖層，選擇轉(zhuǎn)換為形狀

Rotate this shape until you have something like this. 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….

旋轉(zhuǎn)該形狀如下圖。旋轉(zhuǎn)該形狀，你可以選擇該形狀，然后按Ctrl+T，用鼠標(biāo)去旋轉(zhuǎn)該形狀。另一個(gè)辦法是，點(diǎn)擊：編輯 > 變換 > 旋轉(zhuǎn)...

經(jīng)測(cè)算，該形狀的位置點(diǎn)為（43，296，260，84）

Duplicate the shape a few times and with Move Tool, place them like in the following image

復(fù)制該形狀多次（三次），用移動(dòng)工具，擺放如下圖所示：

自下而上的四個(gè)形狀分別為

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

（43，285），顏色： #ff2609

（43，275），顏色： #ffffff

（43，265），顏色： #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.

將前景色更改為 #3d302f，用圓角矩形工具創(chuàng)建一個(gè)圓角矩形（43，225，260，650），將該圖層移到剛剛四個(gè)形狀的下方

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

用矩形工具在頂部創(chuàng)建一個(gè)新的矩形。該矩形的顏色為： #ded3d1

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

On top of the layout I will add another shape

在頁(yè)面的頂部，還是要新建另一個(gè)矩形

注：為了后續(xù)的操作方便，在此步的矩形的高度調(diào)的大一點(diǎn)，矩形為（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 Horizontal. 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. This is my result.

用鋼筆工具創(chuàng)建如下圖所示的形狀。我創(chuàng)建了一個(gè)圓角

復(fù)制這個(gè)形狀（按Ctrl+J），移動(dòng)該形狀到頁(yè)面的另一邊

點(diǎn)擊：編輯 > 變形 > 水平翻轉(zhuǎn)。如果該選項(xiàng)沒(méi)有激活，你需要在圖層面板選中該圖層，接下來(lái)就是對(duì)齊該圖層

還是不擅長(zhǎng)鋼筆工具的使用，于是換了一個(gè)思路，選中圓角矩形工具，半徑設(shè)置為10px，新建一個(gè)圓角矩形（-37，72，80，40），顏色為： #1f0f0e

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

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

在右側(cè)用圓角矩形工具創(chuàng)建兩個(gè)圓角矩形。分別是（328，96，593，242），顏色： #ded3d1；和（328，370，593，500），顏色： #aea2a2

For both layer I will add the following layer styles

對(duì)這兩個(gè)圖層添加如下的圖層樣式：

This is my result

這是我的結(jié)果

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

在頂部用圓角矩形工具創(chuàng)建一個(gè)按鈕（325，35，118，118），由于后面還要切除按鈕的一部分，所以制作正方形的按鈕比較容易

I will right click on the layer in my layer palette, and I will choose rasterize layer. With Rectangular Marquee Tool, draw a selection on the bottom of the shape

在圖層面板上右鍵，選擇柵格化圖層。用矩形選擇工具，在按鈕的底部畫(huà)一個(gè)選區(qū)。

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 apply a nice gradient from this set: 27.000 Photoshop gradients my button looks like this:

保證按鈕的圖層被選中，然后按鍵盤(pán)上的delete鍵，然后按Ctrl+D取消選擇。接下來(lái)我要從27.000 Photoshop gradients添加一個(gè)漂亮的漸變，我的按鈕如下圖所示：由于沒(méi)有注冊(cè)為會(huì)員，故手動(dòng)添加漸變，如下圖所示，

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

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

復(fù)制該按鈕，用移動(dòng)工具移到合適的位置

對(duì)第二個(gè)的按鈕添加合適的漸變，如下圖所示：

左邊的顏色： #ff4a2b，右邊的顏色： #ff2000

對(duì)五個(gè)按鈕分別添加文字：ABOUT US、SERVICES、PORTFOLIO、BLOG、CONTACT。文字的式樣設(shè)置如下：

You will notice a red button. I have used another gradient from our huge gradient set.

你注意到那個(gè)紅色的按鈕。我從our huge gradient set添加另一個(gè)漸變。（還是自己設(shè)置漸變，設(shè)置如上）

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

在我的商業(yè)咨詢布局的中間，我要?jiǎng)?chuàng)建三個(gè)圓角矩形，和三個(gè)大括號(hào)

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. This is my result so far.

將圓角矩形的顏色改為白色。選擇這6個(gè)圖層。然后按Ctrl+E合并圖層到一個(gè)圖層。用畫(huà)筆工具填充空白部分。這是我的結(jié)果

我的做法是：

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

2、用文字工具輸入右大括號(hào)，字號(hào)為194，字體為Book Antiqua，旋轉(zhuǎn)90度。然后移到合適的位置

3、再用矩形工具填充空白部分

4、合并剛才的三個(gè)圖層，然后復(fù)制兩次，移到合適的位置

For this layer I will add the following layer styles.

對(duì)這些圖層添加如下的圖層樣式

After I will add some icons this is my result

接下來(lái)添加一些圖標(biāo)，和一些文字

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

用矩形工具，在布局的底部添加一個(gè)白色的矩形（324，696，600，144）

It is time to add some text with Horizontal Type Tool. Please click on the image to see how I placed the text.

用文字工具添加一些文字。對(duì)照?qǐng)D片擺放文字,并且添加一張圖片

Right under the logo I will create some shapes with Rounded Rectangle Tool. I will use a white color for all these shapes, and I will lover the fill value for each layer to 40 %.

在LOGO的下方添加一些圓角矩形。顏色：白色。對(duì)這些圖層設(shè)置填充為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 me know. I really want to see how it looks.

這是我最終的咨詢布局。我希望你會(huì)喜歡它，并且讓我知道你會(huì)用在你的網(wǎng)站布局中。我真的想知道你的作品。

后記：

利用大括號(hào)巧妙的實(shí)現(xiàn)布局。有時(shí)候看起來(lái)驚艷的效果，其實(shí)也就是一些小小的技巧。

更多PS網(wǎng)頁(yè)設(shè)計(jì)教程IX——巧用大括號(hào)設(shè)計(jì)驚艷的咨詢頁(yè)面 相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！

總結(jié)

以上是生活随笔為你收集整理的PS网页设计教程IX——巧用大括号设计惊艳的咨询页面(Macmillan)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。