PS網頁設計教程XXV——使用Photoshop設計的老式組合佈局

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

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

約定：

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

二、原教程的截圖是英文的，本人在從新制做的基礎上，從新截了中文版的圖

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

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

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

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

 

Welcome by this new Photoshop tutorial. During this tutorial will learn to create the Template of a website especially dedicated to the publication of Graphical works (portfolios for Web designers, graphic designers or photographs). For its design, I created a vintage design. I invite you to follow this tutorial because it is really easy to do, then go on!

歡迎來到這個新的 Photoshop 教程。在本教程中將學習如何建立網站的模版，尤爲是專用於圖形工做 （包括 Web 設計師、 平面設計師或照片） 的出版。其設計，我建立了一種復古的設計。我請你跟隨本教程，由於它是真的很容易作，讓咱們開始吧 ！

Before to start, please, watch the preview of the final result of this Photoshop tutorial: Preview

在開始以前，請預覽本教程的最終做品

STEP 1 Create a new document

步驟1：新建文檔

 

You are now< ready to open your Photoshop software (notice that I used CS6, but you can follow this tutorial using preview versions.)
Go now to the menu File>New. Enter the name, the width and height used for your future picture, then click on the OK key.

你已經準備好了打開你的Photoshop軟件（請注意的是，我用的是CS6，可是你能夠用之前的版原本學習本教程）。點擊：文件 > 新建。給你的圖片輸入名字、寬度、高度等，而後點擊肯定

 

You picture gets automatically open. Press the Ctrl/Tab + R keys to display the guides. Go now to the menu File>Save as, to save your file.

你的圖片會自動打開。按Ctrl/Tab + R鍵顯示網格。點擊：文件 > 另存爲，保存你的文件

STEP 2 Create the background and the top

步驟2：建立背景和頂部區域

 

Select the Paint Bucket tool (G) to change the foreground colour to #e3dfc6, and use the Paint Bucket tool (G) to fill the background.
Use the Rectangular Marquee tool (U) to create a grey bar #706d5c with a size of 1000x52px.

選擇油漆桶工具，更改前景色爲： #e3dfc6，並用油漆桶工具填充背景。用矩形工具建立一個灰色的橫幅（0，0），顏色： #706d5c，尺寸：1000*52px

 

 

Keep under this bar a free space of 117px, then create a second bar with a size of 1000x5px.

在這個橫幅下方保持117px的空間，而後建立第二個橫幅（169，0），尺寸：1000*5px

 

Notice: Do not hesitate to use the Photoshop guides to make your work easier. It is really easy to create a guide: click on the rule, then, move you cursor on your document and stop to keep the click button of your mouse, at the right place you need to create the guide.

注意：堅決果斷地使用 Photoshop 參考線來使您的工做更容易。很容易建立參考線： 點擊標尺，而後，按住鼠標移動您的文檔中合適的位置釋放你的鼠標，建立參考線。

STEP 3 Create the menu

步驟3：建立菜單

 

To create the menu, create first a new group you name « the links」. Use now the Text tool (T) to create the links of the menu (see picture below). Font used Helvetica Neue LT std, with the following colour #706d5c, and a size of 20px.

爲了建立菜單，建立一個新組the links。如今用文字工具建立菜單的文字連接（參照下面的圖片）。字體用Helvetica Neue LT std，顏色： #706d5c，字號：20px。視狀況而定，我水平縮放70%。

 

To simulate the hover/active of the links, I created a red rectangle #d7281e just under of one of the links (but you can apply the colour of your choice).

爲了模擬懸停/活躍的連接，我要在一個連接下面建立一個紅色（#d7281e）的矩形（你也能夠添加你本身的顏色）

Use the Rectangular marquee tool (U) to create the rectangle.

用矩形工具建立一個矩形（162，93，91，35）

Change the colour of the k=link located under the red rectangle, using the colour of the background # e3dfc6.

更改紅色矩形下的活動連接顏色，選擇背景色： #e3dfc6

STEP 4 Add the logo

步驟4：添加LOGO

 

For the logo, I used a resource available on the website of our partnership Shutterstock. Go to this page to download the vector file. Open the file using Illustrator.

做爲標誌，我用咱們的合做夥伴Shutterstock網站上的資源。到這個頁面下載矢量文件。使用Illustrator中打開的文件。

 

To create a copy of the red logo, select it and press the Ctrl/Tab + C keys. Go back to your document under Photoshop, then on Ctrl/Tab + V to insert the logo. Depending of the main colour of the Template, you can choice another logo regarding this colour.

爲了建立一個紅色LOGO的副本，選擇它按Ctrl + C鍵，回到你的PS文檔，而後按Ctrl + V插入這個LOGO。根據模板中的主色，你能夠給這個LOGO選擇這種顏色。

 

Use the Elipse tool (U) to create a round with same size of your logo and use same colour than the one used for the background #e3dfc6.

使用橢圓工具（U）建立一個和您的LOGO一樣大小的圓（416，30，168，168），並使用相同的顏色做爲背景，顏色： #e3dfc6。

 

Put the layer of the round under the red logo, then press on Ctrl/Tab + T to activate the free transform. In the bar of options (horizontal bar on the top of your screen) change the 100% value by the 110% value. Press on ENTER.

把這個圓的圖層放在紅色LOGO的下方，而後按Ctrl + T自由變換。在上方的選項欄裏（在屏幕的上方的水平欄中）把100%改爲110%，把寬和高改爲185。按ENTER肯定

 

Go to the menu Layer>Layer Style>Stroke, then increase the stroke size to 5px and update the colour with this value #706d5c.

點擊菜單：圖層 > 圖層樣式 > 描邊，而後調整描邊的尺寸爲5px，更改顏色爲： #706d5c

 

To finish the logo, create a new layer. Using now the Rectangular Marquee tool (M), create a rectangle under the logo with a height of 117px. Fill the selection using the Paint bucket tool (G) and the background colour #e3dfc6.

爲了完成LOGO，建立新的圖層。如今用矩形選框工具，在LOGO的下方建立一個矩形（400，52，200，117），高度爲117px。用油漆桶工具給選區填充背景色： #e3dfc6

也能夠用矩形工具畫一個矩形（400，52，200，117），顏色： #e3dfc6

 

See below the final result of header and logo.

下面是最終的頭部區域和LOGO

STEP 5 Contents of the left part

步驟5：左邊部分的內容

 

It’s easier to create the contents, use the Text tool (T) to create the title. I used the two following colours: the grey #706d5c and the red #d7281e and the same font than the one used for the menu but with a size of 90px.

內容部分是很是容易建立的，用文字工具建立標題。我用後面的兩種顏色，灰色： #706d5c，紅色： #d7281e，字體和菜單欄上的字體同樣，可是字號改成90px

 

Use same method to create the paragraphs, with the fonts Times New Roman et Tahoma and a size of 12px.

用一樣的方法建立段落，字體用Times New Roman ，字號：20px；另外一段字體用Tahoma，字號11px

 

STEP 6 Contents of the right part

步驟6：右邊部分的內容

 

I used one more time a resource downloaded from our website partnership Shutterstock. Download the vector file, and then open it under Illustrator. Copy and paste it into your Photoshop document. Change the height size regarding the number of text lines.

我屢次從咱們的網站合做夥伴關係的Shutterstock上下載資源。下載矢量文件，而後在Illustrator中打開它。複製並粘貼到你的Photoshop文件。調整和文本行數的高度相同的尺寸。

The result below must be what you get under Photoshop.

你所獲得的Photoshop中的結果一定和下面同樣的吧

 

STEP 7 The divider

步驟7：分割器

 

I created a sharing bar under the content; it helps to come back to the top of the page (if you want to create a landing page, check further in this tutorial).

我在內容下建立了一個共享欄，它有助於回來頁面頂部（若是你想建立一個登錄頁面，請查看本教程中後半部分）。

Duplicate the bar (the one with the size of 1000x5px we previously created), then place it under the contents.

複製橫欄（咱們以前建立的1000px*5px的矩形），而後把它擺放到內容的下方（0，716）

 

 

Go back to your first vector document under Illustrator, then select and copy the small round including the rocket. Copy the small logo into your Photoshop document. Put the round in the center of your picture (see the picture below).

回到你第一個Illustrator中的矢量文檔，而後選擇並複製包括火箭的小圓。複製小的LOGO到你的PS文檔。擺放到你的圖片中的圓的中心（參看下圖）

 

Remember the method to place an element in the middle of your picture. Press on Cltr/Tab + A to create an active selection around aall your document. Select now the Move tool (V) and click on icon 「Align the centres on the horizontal direction」 (located in the options bar, on the top of your screen).

記住如何把一個元素放置在您的圖片中的方法。按CLTR+ A全選您的文件。如今選擇移動工具（V），點擊圖標「的中心對齊在水平方向」（位於屏幕頂部的選項欄中）。

 

Add two layer styles on your logo: a colour overlay and a stroke of 5px (use for both style, the colour #e3dfc6).

給你的LOGO添加兩個圖層樣式：一個顏色疊加和5px的描邊（描邊樣式的顏色： #e3dfc6），

 

See the result of the divider rocket.

查看分割火箭的結果

STEP 8 Create the footer

步驟8：建立頁腳

 

Regarding the footer, duplicate the first grey bar created in the first step. Use the Move tool (V) to move the copy at the bottom of your document.

關於頁腳，重複第一步驟中建立的第一個灰色橫欄。使用移動工具（V）將它移動在文檔底部的（0，853）。

Duplicate the red logo and place the copy at the bottom of your document.

複製紅色的LOGO並擺放到你的文檔的底部

 

Add a stroke of 5px using the layer styles (colour #e3dfc6).

添加一個5px的描邊的圖層樣式（顏色： #e3dfc6）

 

Use the Text tool (T) to create the Copyright of your website, on the left side of your logo. (I used the grey #706d5c and the red #d7281e as well as the fonts Times and Myriad).

用文字工具在你的LOGO的左邊建立你的網頁的版權信息。（我用的顏色，灰色： #706d5c，紅色： #d7281e，字體最好選擇Times和Myriad）

紅色的字體：Times New Roman；字號：15px，加粗；顏色： #d7281e

灰色的字體：Myriad Pro；字號：12px；顏色： #706d5c

 

Same thing regarding the links to the social networks and the reminde of the top menu. Reserve place for free spaces between each social network links, to insert the regarding icons.

和有關的社會網絡和reminde的頂部的菜單作一樣的事情。準備空間爲社會媒體連接的，插入有關圖標。

兩行文字和左邊的兩行文字字體相同，顏色：#d7281e和 #706d5c

 

Go to these pages to download the Twitter, Facebook, and Dribbble icons.

到這些頁面下載Twitter, Facebook, 和 Dribbble 圖標。

 

Reduce the icons sizes regarding the texts sizes.

調整圖標的尺寸和文字的尺寸同樣

 

On each icon, add a colour overlay #706d5c (menu layer> layer style> colour overlay).

給每一個圖標，添加顏色疊加樣式，顏色： #706d5c（點擊： 圖層 > 圖層樣式 > 顏色疊加）

 

We are already finished with The Template! As I told you at beginning of this tutorial, it was really easy.
Here are some ideas to create the other pages.

咱們已經完成了模版！就像我以前告訴你的，它是很是容易的

 

 

這兒有一些建立另一些頁面的設計，能夠參考一下

或

或

或

 

後記：這篇教程簡潔明瞭，比較簡單，總體頁面風格清新樸素。尤爲是利用描邊的顏色（和背景色顏色一致）來實現圖片和其餘元素之間的分割的技術讓人眼前一亮。