PS網頁設計教程VIII——在Photoshop中設計不同尋常布局

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

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

約定：

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

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

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

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

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

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

 

In this tutorial I will show you how to manipulate some simple shapes, to obtain a wonderful layout. As you have seen I am trying to create unusual layouts. I want to show you that it is possible to create also another type of layouts (not usual ones).

在本教程中我將向您展示如何巧妙處理一些簡單的形狀，以擷取一個精彩的布局。您已經看到我試圖建立非同尋常的布局。我想要告訴你它是可能還建立另一種類型的布局 （不是通常的那種）。

 

Start by creating a new document (CTRL+N) with the following size: 960 x 900 pixels, and with the background color #5c7a02.

一開始建立新文檔（Ctrl+N），尺寸：960px*900px，背景顏色： #5c7a02

 

Select Rounded Rectangle Tool, and set your corner radius to 50 Pixels

選擇圓角矩形工具，設定半徑為50px

 

With this tool I will create a shape in the middle of my layout, then I will press on CTRL+T and while I am holding the Shift key down, I will rotate the shape.Right now it doesn’t matter what color you will choose. I will use different colors for each shape I make, because I want to show you where I will place the shapes.Now I will change the color for all this shapes to #3c3427.On the top of my layout I will add another shape, but this time I will use the Rectangle Tool.I will change the color for this shape to # 3c3427, and on the bottom right of this layout I will add another shape.

在頁面的中部建立一個圓角矩形，然後按Ctrl+T自由變換，按住Shift鍵，旋轉圓角矩形。現在還沒告訴你要用哪種顏色。我將用不同的顏色建立一些圓角矩形，因為我要展示給你我如何擺放這些圓角矩形。現在我要更改這些矩形顏色為#3c3427。在網頁的頂部我將添加一個矩形，這次用的是矩形工具。我給這個矩形還是用顏色#3c3427，在布局的右下角我將添加另一個圓角矩形

 

感覺原教程的操作比較繁瑣，於是自己更改了操作步驟，但是最終的效果是一樣的。

建立一個圓角矩形（432，29，480，644），顏色：#3c3427

建立一個圓角矩形（0，0，485，485），題外話，（644-50*2）/1.414+50*2≈485

按Ctrl+T，自由變換，旋轉45度，按斷行符號確定退出自由變換

再次按Ctrl+T，自由變換，調整參數為（153，29，644，644），按斷行符號確定退出自由變換

按Ctrl+G將兩個圓角矩形歸併為一組。

複製該組，順時針旋轉90度，調整組到合適的位置（-190，375）

在布局的右下角建立一個圓角矩形（457，677，450，500），顏色還是#3c3427

 

With Rounded Rectangle Tool, I will create another 2 shapes

Be sure you have selected both layers in your layer palette, then press on CTRL+T, and with your mouse pointer rotate the shape to the left. I will place my shapes like in the following image. Over this green shape I will have my text button.

用圓角矩形畫兩個圓角矩形

選中這兩個圖層，按Ctrl+T，用滑鼠旋轉你的矩形。按照布置矩形，在綠色的上方我將添加一些文本按鈕

 

還是按照自己的思路製作

首先設定圓角矩形的半徑為70，建立一個圓角矩形，寬970px，高154px，顏色： #c7da8b。按Ctrl+T，旋轉-45度，按斷行符號確定。再按Ctrl+T，調整到圓角矩形位置到（-428，59）

複製該圖層，按Ctrl+T，調整大小為原來的70%，位置在（-216，96）。顏色更改為#a8ca01

 

I will create a new layer above all layers, and with my Brush Tool, I will add some points with a big smooth round brush.

在所有的層上面建立一個層，用畫筆工具，調整畫筆為巨大的光滑的畫筆（顏色為白色，畫筆的大小為600px，硬度：10%），在圖層上添加一些點（三個點）。

 

Then I will change the blending mode for this layer to overlay

更改該圖層的混合模式為疊加

 

This is my result so far

這是我的結果

 

Now with Horizontal Type Tool I will write some text. The font I will choose is Bookman Old Style. Italic.

現在用水平文字工具添加一些文本，字型用Bookman Old Style. Italic。

頂部的文字Welcome to our web site和底部的文字Services用如下的字型設定

 

左側綠色塊裡的標題文字Grafpedia，用如下的字型設定，並添加圖層樣式

 

左側的綠色塊裡的菜單文字Home、Products、Portfolio、Contact，用如下的文字設定：

 

兩個欄目傾斜的文字Portfolio、Latest News，用如下的文字設定：

 

右側的功能表列的文字，Company、Products、Program、Contact Us，顏色：黑色。文字設定如下：

 

Welcome to our web site下的一段文字的文字設定如下：

 

其餘的段落文字，文字設定如下：

 

最終的結果如下：

 

Now I will add some images from my last tutorials in the middle part of my layout. I will cut some round images from my previous tutorials.

我將在頁面配置的中部添加一些之前的教程的圖片，我將從之前的教程中切一些圓的圖片

 

On the top of the website I will add another rounded shape.

在網站的頂部，添加另一個圓角矩形（361，142，524，40），半徑為20px，顏色為白色

 

I will select Line Tool, and with a thin line (1 pixel) I will create two lines between my text buttons

選擇直線工具設定粗細為1px，在文本按鈕之間建立兩條直線（一條黑色、一條白色）

 

I will select both line layers in my layer palette, and then I will press on CTRL+E (to merge the layers into a single one). I will select Eraser Tool, and I will use a Soft Mechanical brush with a size between 200 and 300 pixels. Then I will delete the right part of the line.

我將選擇這兩條直線的圖層，按Ctrl+E（合并圖層），選擇橡皮擦工具，選擇一個柔邊圓，尺寸在200到300px之間（選擇250比較合適），我將刪除直線的右半部

 

I will delete also the left part, and I will make some duplicates after this layer. With Move Tool or with your arrow key I will move the duplicated layers to the bottom.

我同樣的要刪除左半部分，然後複製該圖層。用移動工具移動這些圖層到合適的位置

 

With the same technique as above I will add some lines also on other parts of the layout. You can change the blending mode for this layer to overlay.

用同樣的技術在布局的其他部分添加直線。更改這些直線圖層的混合模式為疊加

 

I will create a new layer right under my round images. I will select Brush Tool, and with a round soft brush, I will make a point over my layout in the following spot. Please set your foreground color to black.

建立一個圖層在圓的圖片的下方。選擇畫筆工具，選擇一個柔邊圓工具，按照添加一個大點（半徑設定為360px，硬度20%）。前景色彩選擇黑色。

 

Select Rectangular Marquee Tool, and create a selection like mine.

選取矩形選擇工具，建立如下的一個矩形選框

 

Your selection should be right between the horizontal lines you have placed a few steps ago. Now be sure you have the right layer selected (with the black brush drawing), and now press on CTRL+I, or go to Image > Adjustments > Invert. Your layout will look like this one.

你的選擇地區在之前做好的兩條水平線之間，選擇之前的黑色的大點圖層，按Ctrl+I，或點擊：映像 > 調整 > 反相，你的布局看起來像如下：

 

Press on CTRL+D if you have the selection still active, and now change the blending mode for this layer to Overlay, and you can also lower the opacity value to 40 %.

按Ctrl+D取消選擇，更改該圖層的混合模式為疊加，不透明度為40%

 

 

This is how my simple slideshow will look like

這是我的圖片滑動欄的效果

 

Now I will add some round buttons

我將在左右兩邊添加圓按鈕（左側的按鈕添加內發光的圖層樣式，右側的按鈕添加內發光和描邊的圖層樣式）

描邊的顏色： #4e4c48

 

In the middle of my layout I will add also a round shape

在布局的中部，添加一個圓（帶描邊，填充顏色：#5a4d3a，描邊顏色： #b9f308）

 

 

This is my final layout

這是我最終的結果

 

後記：

這樣的布局的確是不常見的

本教程的亮點有：

1、利用橡皮擦的工具實現漸層效果

2、利用圖層混合選項為疊加實現高光

3、尤其是教程中的反相的效果，令人叫絕。