PS網頁設計教程XXVIII——如何在PS中建立一個乾淨的網頁佈局

萬倉一黍發表於2013-10-13

原文網址 : https://www.cnblogs.com/grenet/p/3357844.html

網頁

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

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

約定：

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

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

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

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

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

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

This is an intermediate level tutorial and some may seem to be tricky, but why not have a try? Let's get the ball rolling

這是一箇中級水平的教程和看起來可能是棘手的，但為什麼不試試呢？讓我們滾動我們的滑鼠滾輪

Step 1

步驟1

Let's start at the beginning. Just fire up your Photoshop and create a new document (CTRL+N). See the parameters below.

讓我麼開始教程。開啟你的PS並按照下圖的引數建立新文件（Ctrl + N）

Step 2

步驟2

Now you should add some pattern to your background.

現在給你的背景新增一些圖案

新建4px*4px的文件，如下圖所示

按照下圖用鉛筆工具著色，左上到右下的對角線的顏色： #efeeef；右上到左下對角線的顏色，上： #dfdddf，下： #e7e6e7

點選：編輯 > 定義圖案，定義成圖案

用矩形工具新建一個矩形（0，0，1000，1170）

Layer Style -> Blending options-> Pattern Overlay. Look at the screenshots below:

點選：圖層 > 圖層樣式 > 混合選項 > 圖案疊加。按照下面的截圖設定

Step 3

步驟3

We want to create an awesome design, yeah? That's why we should use a grid system for designing. You can easily create a solid visual and structural balance of websites with grid-based designs.

我們將建立一個很棒的設計，不是嗎？這就是為什麼我們要使用網格系統設計。您可以輕鬆地建立基於網格的設計的結構平衡和實在的視角的網站。

Put some grids to your design with intervals of 60px and 20px.

在你的設計中新增一些參考線，間隔60px和20px

垂直參考線的座標分別是20、30、90、110、170、190、250、270、330、350、410、430、490、500、510、570、590、650、670、730、750、810、830、890、910、970、980

Step 4

步驟4

So... now it is time to design the menu of your future website. Use the Rounded Rectangle tool to create it (radius - 3px). The width of your menu is 940px, the height is 34px.

那麼……現在是設計你的未來的網頁的選單的時候了。用圓角矩形工具建立一個圓角矩形（30，53，940，34）（半徑—3px）。你的選單的寬度是940px，高度34px

I think that it is an easy task to create a website's menu. To be sure, look at the images below:

我想這是非常簡單的過程去建立一個網頁的選單。請相信，參看下圖：

To make this menu more eye-candy, go to the Blending Options -> Drop Shadow. Use the settings that you can see on the screenshots:

讓我們的選單看起來更養眼，點選：混合選項 > 投影。按照下面的截圖設定引數，投影的顏色： #47493c

Blending options-> Inner Shadow

混合選項 > 內陰影

I chose the #6bafff color for this menu bar.

我給這個選單選擇的顏色： #6bafff

Step 5

步驟5

Let's add some text to our menu. Use the Horizontal Type Tool for it.

讓我們用水平文字工具新增選單上的文字（分別是HOME、ABOUT、CONTACT、BLOG、PORTFOLIO）

You can create your design with any font you like. I used the Aller [bold] font. The size is 14px.

你可以在你的設計中使用任何你喜歡的字型。這兒我用的是字型是Aller、粗體。字號：14px

給選單文字新增如下的圖層樣式，投影的顏色： #010101

Step 6

步驟6

All the menu buttons are links and the designer should show how their hover state looks like. So, create are rectangle (the color that I've used for it is #5a90e5).

所有的選單按鈕都是連結，設計者要展示選單懸浮狀態的樣子。所以，建立矩形（281，53，68，34）（我用的顏色： #5a90e5）

並新增如下的圖層樣式，內陰影的顏色： #312d20

Our result:

我們的成果：

Step 7

步驟7

Every decent website has a search form. Let's create it too :)

每個得體的網頁都有一個搜尋表單。我們也建立一個

Use the Rounded Rectangle tool (radius - 3px) to create a search form with the following dimensions: 124px and 26px

用圓角矩形工具（半徑：3px）建立一個搜尋表單（808，17，124，26），尺寸：124px*26px

新增投影的圖層樣式

Add some inner shadow: Blending Options-> Inner Shadow

新增一些內陰影：混合選項 > 內陰影

Blending Options-> Color Overlay, color- #5a90e5

混合選項 > 顏色疊加，顏色： #5a90e5

Use our favorite Photoshop tool one more time :) Create one rectangle with dimensions 41px and 32px

再次使用PS中的歷史工具，建立一個圓角矩形（929，14，41，32），尺寸：41px*32px

Blending Options -> Drop Shadow

混合選項 > 投影，顏色： #47493c

Blending Options -> Inner Shadow

混合選項 > 內陰影

Blending Options -> Color Overlay (color - #6bafff)

混合選項 > 顏色疊加（顏色： #6bafff）

Now it is time to use icons that we've downloaded at the beginning of this tutorial. Open the "Linecons Free - Vector Icons Pack and find the search icon there. Just apply some bells and whistles to it.

現在是用之前下載的圖示了。開啟Linecons Free - Vector Icons Pack，找到search圖示並新增一些花裡胡哨的樣式

Here is our final result for the search form:

這是搜尋表單的最終結果：

Step 8

步驟8

Social media connections are very useful and important for every website. That's why today we'll also learn how to create a simple Facebook button. Again with the help of the Rounded Rectangle tool (radius - 3px), we'll create a button

對於每一個網站來說，社會媒體連結是非常有用和重要的。這就是為什麼今天我們還將學習如何建立一個簡單的 Facebook 按鈕。再次用圓角矩形工具（半徑：3px），建立一個按鈕（40，16，86，26）

Then use the Rectangle tool (rounded) to create a square (holding the Shift button) with the following size – 16px

然後用矩形工具（或者是圓角矩形工具）建立一個正方形（按住Shift鍵），尺寸：16px

Choose the Pen Tool and cut off half of this square.

選擇鋼筆工具然後切掉這個正方形的一半。注：這一步用直接選擇工具比較簡單，用直接選擇工具選擇正方形的右下角的點，按Delete鍵刪除，就得到一個三角形

Edit-> Transform->Rotate to move this triangle and place it on the left side of the rectangle

點選：編輯 > 變換 > 旋轉，旋轉這個三角形，並移動它到矩形的左側

Select all your "Facebook" layers and merge them (Ctrl+E).

選擇所有的Facebook圖層，併合並它們（Ctrl + E）

給它新增投影的圖層樣式

Blending Options-> Inner Shadow:

混合選項 > 內陰影

Blending Options-> Color Overlay (#c1cac5 )

混合選項 > 顏色疊加（#c1cac5）

Now add the "follow" text to our Facebook button and play with its blending options.

現在在Facebook按鈕上新增follow文字，並新增如下的圖層樣式。字型：Aller 粗體，字號：14px

Try to create your Facebook logo for this button. For example, you can create the "F" letter, decorate it with a blue color (#5a90e5).

給你的按鈕新增Facebook LOGO。舉例來說，你可以建立字母F，給它上一個藍色（#5a90e5）

Play with Blending options (add a white shadow)

新增如下的圖層樣式（新增一個白色的陰影）

WOW! We did it :) Look at the final result of our menu bar:

喔！我們做完了。看看我們最終完成的按鈕欄

Step 9

步驟9

Create a new shape: width 940px, height 372px

建立一個新的形狀（圓角矩形，半徑：3px，（30，102，940，372））：寬940px，高372px

As always, add some shadow:

同樣，新增一些投影，投影的顏色： #47493c

And a border: Blending Options-> Stroke (20px, color- #6bafff)

並新增一個邊：混合選項 > 描邊（20px，顏色： #6bafff）

Step 10

步驟10

To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.

為了建立漂亮的滑動欄，我們要新增一些圖片。用快捷鍵Ctrl + Alt + G，我們建立一個剪貼蒙版

Step 11

步驟11

Use a bunch of free icons again. I've selected the following icons: "settings","bubble", "photo","world"

再次使用那一堆的免費圖示。我選擇的是下面這些圖示：settings，bubble，photo，world

Add them to our design (don't forget to use the grid), distance – 180px

把他們新增到我們的設計中（別忘了用參考線），距離：180px

Step 12

步驟12

Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px.

新增一些文字。你可以使用和選單欄同樣的字型。設定字號為30px

Play with Blending Options: add a white shadow, color overlay ( #6aaefd) and an inner shadow.

給它新增混合選項：新增白色的投影，顏色疊加（ #6aaefd）和一個內陰影

Copy the styles of this layer and add it to all your icons:

複製該圖層樣式並新增到所有的圖示和文字

WOW! Look at this amazing result!

喔！看看這個瘋狂的結果

Step 13

步驟13

Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.

給這些四列（每列寬240px）新增一些loremipsum文字。最好每列的文字都不一樣。文字的顏色： #4c1b33，並新增投影的圖層樣式

Step 14

步驟14

Create a Read More button with the help of the tools that we've used before.

用之前使用過的工具（圓角矩形工具）建立一個Read More按鈕（30，692，125，35）

Blending options-> Inner Shadow, Drop Shadow, Color Overlay (#919392).

混合選項 > 內陰影，投影，顏色疊加（#919392）

同樣的，新增另三個按鈕，分別是（240，692，125，35）、（510，692，125，35）、（750，692，125，35）

Step 15

步驟15

Add the "Read more" text to our button.

給我們的按鈕新增Read more文字，並新增投影和顏色疊加的圖層樣式

Step 16

步驟16

Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.

現在我們應該把我們未來的網站的主要內容分開。建立一個 1px 的直線（30，747，940，1），並將您的Read more圖層的圖層樣式新增到它（貼上圖層樣式）。

為了讓分割線更加明顯一點，還要新增內陰影的圖層樣式

Step 17

步驟17

Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts.

你下一個部分可以是一段題為Partners的內容或可能想要展示的最新的部落格文章。

Use the Rounded Rectangle tool to create a square (hold down the Shift button).

用圓角矩形工具建立一個正方形（按住Shift鍵）（30，768）

Radius - 3px, width and height - 138px.

半徑：3px，寬和高：138px

Go to Blending options -> Stroke to create a border with the settings below: Size- 20px, color #919392

點選：混合選項 > 描邊，按照後面的引數設定描邊：尺寸：20px，顏色： #919392。再新增投影樣式。

Copy and paste this element 5 times :) Place these squares with the interval of 20px.

複製貼上這個物件5次，利用間隔20px的參考線擺放這些正方形

Step 18

步驟18

With the help of a clipping mask, insert the image into the square.

為了建立剪貼蒙版，把圖片插入到正方形的地方

As you can see, you really can use this block for all sorts of purposes. Result:

如你所見，你可以盡情的使用這個區塊。結果：

Step 19

步驟19

The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.

網頁的頁尾和頭部區域同樣重要，就是如此。問問自己，“你希望當你的訪問者到達頁面的底部的時候做什麼？”。你的答案就是你設計頁尾的偉大起點。

Now it is time to design a cool footer for our cute website layout. Let's make it bright :)

是時候來設計我們可愛的網站佈局的很酷的頁尾。讓我們使它明亮。