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

11111111111111111111111111111111111111111111111111

本系列的教程來源于網上的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:

喔！我們做完了?？纯次覀冏罱K完成的按鈕欄

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 :)

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

?

Add some gradient, for example #3a8df1 - #6bafff, and inner shadow

添加一些漸變，例如： #3a8df1 - #6bafff，和內陰影

?

Step 20

步驟20

We'll add three blocks into our footer: Quick links, About Us and Follow Us

我們將要在頁腳添加三個區塊：Quick links，About Us和Follow Us

?

Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:

給標題用Arial Regular字體（字號：30px），并按照截屏添加圖層樣式（顏色：白色）

?

Use the Arial Regular font for the text in the About Us section (12px).

給About Us部分用Arial Regular字體（字號：12px）添加文字

?

The text for the Quick Links section - 22px.

Quick Links部分的文字（字號：22px）

?

Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter

在Follow部分添加一些標準圖標：RSS、Google Plus+和Twitter

?

Woohoo! We did it! The final result of our tutorial:

喔！我們完成啦！這是我們教程的最終效果

?

后記：

這個網頁的風格是清爽，沒有采用什么特殊的技術，僅僅是用了一些基本的技術（圖層樣式、剪貼蒙版等）。但就是這些簡單的搭配，搭出了不一樣的清爽。在翻譯的過程中，對某些參數也進行了一些的修正，使其看起來更加合適整體風格。

總結

以上是生活随笔為你收集整理的PS学习记录111111--如何在PS中创建一个干净的网页布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。