PS網頁設計教程XIX——在Photoshop中創建一個優雅的作品集的網頁佈局

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

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

約定：

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

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

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

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

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

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

 

In this Photoshop web design tutorial, I would like to show you how to create a clean and elegant portfolio web layout that has numerous areas for common content types such as an area that displays a blog post excerpt, a nice image slider for featured works, social media information, and a thumbnail gallery. We will cover plenty of professional-grade web designing techniques in this Photoshop tutorial.

在本Photoshop網頁設計教程中，我想向您展示瞭如何創建一個乾淨，優雅的作品集佈局。有許多領域常見的內容區域，如顯示博客文章摘錄特色的作品，一個漂亮的圖像滑塊，社會化媒體的信息，和縮略圖畫廊。在這個Photoshop教程中，我們將涉及大量的專業級的網頁設計技術。

 

Step 1: Create a New Document

步驟1：新建文檔

 

Start by creating a new document (Ctrl/Cmd + N) in Photoshop. Make the document 1000px by 1000px and with a White background.

先在PS中新建一個文檔（Ctrl/Cmd + N）。文檔的尺寸：1000px*1000px，用白色的背景

 

Step 2: Add Photoshop Guides

步驟2：添加PS的參考線

 

Now add guides on the canvas in order to ensure proper alignment of the various web layout components. You can create guides accurately by going to View > New Guide.

現在在畫布上添加參考線，以確保正確對齊的各種網頁佈局的組件。您可以精確的創建參考線，點擊：查看 > 新建參考線。

 

Create vertical guides at 50px, 500px and 950px.

你可以在50px、500px、950px處創建垂直參考線

 

Create horizontal guides at 75px, 467px, 651px and 943px.

你可以在75px、467px、651px、943px處創建水平參考線

 

Step 3: Creating the Background

步驟3：創建背景

 

Double-click on the default Background layer, which will be locked and uneditable; the New Layer dialog window will open. I renamed the layer to "BG" and then pressed OK. Doing this also unlocks the Background layer, making it editable.

雙擊默認的背景圖層，原本是鎖定的和不能編輯的；新建圖層的窗口會被打開。我重命名該圖層爲BG，並按確定。做這些是爲了解鎖背景圖層，使得其能編輯。

 

Let’s create a new group called "Background" (Layer > New > Group) that will contain all layers associated with our layout’s background. Move the "BG" layer into this group.

新建組Background（圖層 > 新建 > 組），將會包含所有佈局的背景。移動BG層到該組中

 

Now, set your foreground color to teal (#547980) and fill your "BG" layer with the foreground color by pressing Alt/Option + Backspace.

現在，設置你的前景色爲藍綠色（#547980），並按Alt/Option + Backspace用前景色填充BG圖層

 

Now add some noise to our background by going to Filter > Noise > Add Noise. In the Add Noise dialog window, set the Amount to 1%, Distribution to Uniform and check the Monochromatic option. Click OK to apply the filter.

現在給背景添加一些雜色，點擊：濾鏡 > 雜色 > 添加雜色。在添加雜色的窗口裏，設置數量爲1%，分佈選擇平均分佈，並勾選上單色

Now set your foreground color to black (#000000), create a new layer (Shift + Ctrl/Cmd + N) and name it "Dark sections".

設置前景色爲黑色（#000000），創建一個新圖層（Shift + Ctrl/Cmd + N），並命名爲Dark sections

 

Reach for the Rectangular Marquee Tool (M), select the top part of the canvas (use our guides to make the proper selection), and press Alt/Option + Backspace to fill the selected area with our black foreground color.

用矩形選框工具（M），在畫布上選擇最上面的部分（使用我們的參考線做出正確的選擇），按Alt / Option + Backspace鍵用黑色前景色填充所選的區域。

 

Repeat the process for the middle section and bottom section so that you end up with three horizontal bars running across the canvas.

重複同樣的過程在中部的選區和底部的選區，在結束的時候你有3個水平的區塊穿越整個畫布

 

Now reduce the "Dark sections" layer’s Opacity to 15%.

現在調整Dark sections圖層的不透明度爲15%

 

Step 4: Creating Inset Divider Lines

步驟4：創建內陷分隔線

 

Now create a new group inside the "Background" layer group, above the "BG" and "Dark sections" layers. Let us call this group "Lines".

在Background組中創建新組，在BG和Drak sections圖層的上方。讓我們命名它爲Line

 

Create a new layer inside the group called "Dark". Make sure that your foreground color is still set to black (#000000) and, with the Pencil Tool (B) set at 1px Master Diameter, draw a solid horizontal line above the first guide at the top.

在組中創建新的圖層，命名爲Dark。確保你的前景色仍然是黑色（#000000），用主直徑爲1px鉛筆工具在頂部的第一條水平參考線的上面畫一條水平線（下圖是放大到800%的圖）

也可以用直線工具畫一條水平線（0，74，1000，1），顏色： #000000

Create another layer inside the "Line" group named "Bright". Change your foreground color to white (#FFFFFF) and use the Pencil Tool again to draw a line right below the black one.

在Line組中創建另一個圖層命名爲Bright。改變你的前景色爲白色（#FFFFFF），用鉛筆工具在黑色的直線的下方畫一條水平線（下圖是放大到800%的圖）

也可以用直線工具畫一條水平線（0，75，1000，1），顏色： #FFFFFF

Collapse the "Line" group by clicking on the small triangle next to the group’s name so that we’re keeping our Layers Panel manageable. Reduce the group’s Opacity to 12%.

點擊組名前面的小三角收起Line組，保持我們的圖層面板可管理的。調整組的不透明度爲12%（下圖是放大到800%的圖）

Now duplicate the "Line" group (right-click on it in the Layers Panel and choose Duplicate Group from the contextual menu that appears) and rename the duplicate to "Line 2".

複製Line組（在圖層面板上右鍵在出現的菜單中選擇複製組），然後命名複製的組爲Line 2

Move "Line 2" on our second horizontal guide using the Move Tool (V).

用移動工具移動Line 2到第二條水平參考線

 

Repeat the above method for creating two more inset divider lines on the 3rd and 4th horizontal guides.

重複上面的方法創建2條內陷分割線在第3條和第4條的水平參考線

 

Step 5: Create the Layout’s Header

步驟5：創建佈局的頭部區域

 

Before we go on, I would like to note that in this layout, we will be working with plenty of layers, which is good so that our work is flexible. However, this also leads to a Layers Panel that can become quite large and unwieldy. Therefore, whenever we are finished with a component of our web design, we should collapse its layer group as well as ensure that we are naming our layers and layer groups intuitively. So let’s go ahead and collapse the "Background" group since we are now done with that component.

在我們繼續之前，我想請注意，在這種佈局中，我們將使用大量的層，使我們的工作是靈活的，這是很好的。然而，這也導致到圖層面板中可能會變得非常龐大和笨重。因此，每當我們完成了我們的網頁設計的一個組成部分，我們應該摺疊組以確保我們能直觀地命名圖層和組。所以，讓我們繼續前進，因爲我們現在完成了背景和摺疊Background組。

 

Create a new layer group called "Header" on top of the "Background" group.

在Background組的上方創建新組Header

 

Let us make the site’s logo — it will simply be a text-based logo that has a slick and stylish layer style. To begin, choose the Horizontal Type Tool (T) and set it to Lobster font at 36pt. Set the text color to light green (#E5FCC2) then write your site name. In this instance I wrote, "Instruct portfolio".

讓我們創建網站的LOGO——這是非常簡單的文字LOGO，擁有光滑的和時尚的圖層樣式。一開始，選擇水平文字工具（T），設置字體爲Lobster，36pt。設置文字的顏色爲亮綠色（#E5FCC2），然後書寫你的網站的名字。在本實例中，我寫Instruct portfolio

With the text layer selected in the Layers Panel, go to Layer > Layer Style > Blending Options. We will give our logo a Drop Shadow, Gradient Overlay, and Stroke.

在圖層面板裏選擇文字圖層，點擊：圖層 > 圖層樣式 > 混合選項。我們要給我們的LOGO添加投影、漸變疊加、和描邊的圖層樣式

漸變編輯器，黑白的分界線爲53%的位置

The following image shows the result of our layer style. Quick and simple, but beautiful, don’t you think?

下面的圖像顯示了添加圖層樣式後的結果。快速簡單，但是美麗，你不這樣認爲麼？

Use the Horizontal Type Tool again for writing out the main navigation menu items. This time, set your text color to a light green color (#E5FCC2) and font size at 18pt. I wrote "Home", "About", "Blog", "Work", and "Contact" — but of course, you should feel free to write out other links.

再次用水平文字工具書寫主導航菜單的文字。這次，設置你的文字的顏色爲亮綠色（#E5FCC2），字號18pt。我寫Home、About、Blog、Work、Contact——當然，你可以自由的寫一些其他的鏈接

 

Once done, use the Move Tool (V) to place the navigation menu text at the top right side of the header area.

當做完的時候，用移動工具擺放導航菜單到頂部頭部區域的右邊

We will copy the layer style we applied to the logo to the navigation menu text. Right-click on the "Instruct portfolio" layer in the Layers Panel and choose Copy Layer Style from the menu that appears. Next, right-click on the navigation menu text layer and choose Paste Layer Style.

我們要複製LOGO的圖層樣式到導航菜單。在圖層面板中的Instruct portfolio圖層上右鍵，在出現的菜單中選擇拷貝圖層樣式。接下來，在導航菜單文本的圖層上右鍵選擇粘貼圖層樣式

Now we will create the active link’s background to indicate what page the user is on. It can also serve as our hover state (i.e. we display it when the user mouses over an inactive link).

現在要創建活動鏈接的背景來顯示用戶在哪個頁面上。他也能表示頁面的懸停狀態（即我們鼠標移到非活動鏈接上的時候顯示）

 

Create a new layer called "Button" (because the active link item’s background looks like a UI button). This layer should be beneath the navigation menu text layer because it will act as its background.

創建新的圖層Button（因爲是活動鏈接的背景看起來像是一個UI按鈕）。該圖層在導航菜單文字的下方，因爲它像是鏈接的背景。

 

Select the Rounded Rectangle Tool (U), set the Radius to 5px and draw the button behind your text. Shown below is the active link’s background shape drawn behind the "Home" navigation menu text.

選擇圓角矩形工具（U），設置半徑爲5px，並在文字的後面繪製按鈕。如下所示，活動鏈接的背景繪製在Home導航菜單文本的後面。

Double-click on the "Button" layer in the Layers Panel to access the Layer Style dialog window. Let’s give our active link’s background shape a Drop Shadow, Gradient Overlay and Stroke.

雙擊圖層面板中的Button的圖層打開圖層樣式窗口。給活動鏈接的背景添加投影、漸變疊加和描邊的樣式

漸變疊加的分界的位置是50%

After applying the layer style, simply lower the "Button" layer’s Opacity to 10%.

在添加完圖層樣式後，調低Button圖層的不透明度爲10%

 

Step 6: Create the "Featured Work" Area

步驟6：創建Featured Work區域

 

Time to move on to another component of our layout. Remember: Collapse the "Header" layer group in the Layers Panel so that it’s out of our way.

是時候移到另一個佈局的組件。記住：收起圖層面板中的Header圖層組，表示已經離開我們的流程

 

Next, create a new layer group called "Work". This group will contain the featured works in a 3D image slider.

接下來，新建組Work。該組將包含一個3D圖像滑動欄的Featured Work

 

What we want to do first is locate three images (look through your work and pick ones you like) and open them in Photoshop. For this tutorial, what I did was simply use the final results from several Web Design tutorials here on Design Instruct, namely:

首先確定要擺放的3張圖片（看看你過去的工作，挑選中意的圖片），並在PS中打開。在本教程，我最後要擺放的從Web Design上的教程的圖片

 

Place your selected images inside the "Work" group as separate layers. Use Free Transform (Ctrl/Cmd + T) to resize the images as needed.

擺放你選中的圖片在Work組中的單獨的圖層。用自由變形工具（Ctrl/Cmd + T）調整你的圖片到合適的大小

 

Here is the first image placed at the middle of the canvas:

這是我的第一張圖片擺放在畫布的中央：（圖片的大小爲400px*300px，位置在（300，127））

Place the other two images below the middle image and at either sides of it.

擺放其他兩張圖片在中間的圖片的下方的左右兩側

注：教程中沒有交代兩側圖片的擺放過程，這裏補充完整

用矩形工具新建一個矩形（130，127，400，300），矩形在中間圖片的下方

 

在PS中置入另一張圖片，鎖定縱橫比，調整寬度爲400px，圖片的位置在（300，127）

 

在圖片的圖層上右鍵選擇創建剪貼蒙版

 

選中矩形圖層和圖片圖層，右鍵選擇轉換爲智能對象，並在新的圖層上右鍵選擇柵格化圖層，新的圖層命名爲Left Picture

用同樣的方法在右側擺放一張圖片，矩形爲（470，127，400，300），圖片的位置爲（470，127）

 

Click on the "Right picture" layer in the Layers Panel to make it our active layer. Go to Edit > Transform > Perspective and transform the image (as shown below) so that it looks as if it is 3-dimensional.

點擊圖層面板中的Right Picture的圖層，保證激活圖層。點擊：編輯 > 變換 > 透視，變換圖片（按照下圖所示），看起來就像是3D效果

 

Do the same for the left image but this time angle it to face towards the right.

對左側的圖片執行同樣的步驟，只是這時面朝右邊罷了

When complete, this is how the featured images should look:

當做完的時候，這就是特色圖片看起來的樣子：

 

Let us give the featured images a bit of style as well as further support the 3D look. Click the "Left picture" layer in the Layers Panel to make it the active layer. Use the Blur Tool (R) with a soft round 100px brush to blur the sides of the image closest to the main picture.

讓我們給特色圖片一點風格，看起來更好的3D外觀。在圖層面板中點擊Left Picture層，使其保持激活。使用模糊工具（R）用100px的柔邊圓畫刷去模糊最接近的主圖像的那一邊。

注：效果不明顯的話，可以反覆塗抹。另，沿着主圖像的左邊沿效果最好

Do the same thing with the featured image on the right.

對右邊的特色圖像做同樣的操作。

We will now create a shadow being cast by the main image using a quick and easy technique. To start, create a new layer under the "Main picture" layer.

現在，我們將創建主圖像的投影，使用一個快速和簡單的技術。首先，在Main Picture下方創建一個新的圖層。

 

Choose the Ellipse Tool (U) from the Tools Panel and then draw a black (#000000) thin vertical ellipse towards the left. If done right, you should only see the left half of the ellipse. Now go to Filter > Blur > Gaussian Blur, set the Radius option to 5px and then press OK to apply the filter.

從工具面板中選擇橢圓工具（U），然後在緊貼左邊的地方繪製一個黑色（＃000000）橢圓（294，297，12，300）。如果做得正確，你應該只看到橢圓形的左半部分。現在點擊：濾鏡 > 模糊 > 高斯模糊，設置半徑爲5px，然後按確定應用添加濾鏡。

 

Lower the layer’s Opacity to 40%.

設置圖層的不透明度爲40%

 

To create the shadow on the right of the main featured image, just duplicate the left shadow layer (Ctrl/Cmd + J) and then use the Move Tool (V) to move it on the right.

要創建的主圖像在右邊的陰影，只是重複的左邊陰影層（按Ctrl / Cmd+ J），然後使用移動工具（V）將它放在右邊。

Now I want to create a slick reflective effect on the main image — it’s really simple to do. Start by duplicating the "Main picture" layer (Ctrl/Cmd + J). Then press Ctrl/Cmd + T to enter Free Transform mode and set the Height option in the Options Bar to -100%. This flips the image vertically (you could also use Transform > Flip Vertical as an alternative).

現在我想創建主圖像的一個漂亮的倒影效果 - 這是很簡單的事情。複製Main Picture層（按Ctrl / Cmd + J）。然後按Ctrl/ Cmd + T進入自由變換模式，並設置高度選項，在選項欄裏填上：-100%，以達到垂直翻轉圖像（你也可以使用：編輯 > 變換 > 垂直翻轉作爲替代）。

Switch to the Move Tool (V) so that you can move the duplicated image down below the original image. Leave a 1px gap between the original image and the flipped duplicated image.

切換到移動工具（V），這樣您就可以將複製的圖像移動到低於原始圖像的位置。在原始圖像和翻轉複製的圖像之間，保持1px的空隙（精確的話，可以把複製好的圖層移到（300，428））。

 

We don’t need the entire duplicated image; we are just interested in the top part of it. So use the Rectangular Marquee Tool (M) to select the area that is below the guide we created earlier on, and then press Delete to remove the selected area.

我們不需要整個複製的圖像，我們只關心它的上半部分。因此，使用矩形選框工具（M），選擇低於我們先前創建的參考線的部分，然後按Delete鍵刪除所選區域。

So now, we only have a little bit of the duplicated image. Next, we need a layer mask on it (click the Add layer mask button at the bottom of the Layers Panel, shown in red).

現在，我們只需要一點點複製的圖像。接下來，我們需要一個圖層蒙版（點擊圖層面板底部的「添加圖層蒙版」按鈕，顯示爲紅色）。

Make sure that the layer mask is the active layer. Switch to the Gradient Tool (G). Select a linear gradient that goes from black (#000000) to transparent. Apply the gradient from the bottom to the top. To finish off the reflection, reduce the layer’s Opacity to 40%.

確保圖層蒙版是激活的（之前要按Ctrl/Cmd + D取消選擇）。切換到漸變工具（G）。選擇從黑色（＃000000）到透明的線性漸變。應用從底部到頂端的簡便。要完成的倒影效果，降低圖層的不透明度爲40%。

What we want to do now is to stylize the main image further by applying a simple glossy reflection on its surface. Start by creating a new layer above the "Main picture" layer called "Gloss".

我們現在要做的是風格化的主圖像，進一步應用一個簡單的在其表面的光澤反射。首先，在Main Picture層上方創建一個新層Gloss。

 

Use the Polygonal Lasso Tool (L) to make a selection similar to the one shown below:

使用多邊形套索工具（L）選擇類似下面的選區：

Fill your polygonal lasso selection with white (#FFFFFF). Next, hold down Ctrl/Cmd and click on the "Main picture" layer’s thumbnail in the Layers Panel to place a selection around it. Your "Gloss" layer should still be your active layer, and if not, switch back to it without deselecting your current selection. Go to Select > Inverse (Shift + Ctrl/Cmd + I) to invert the current selection. Press Delete to remove the selected area. This ensures that our gloss remains within the image. You can now deselect your selection (Ctrl/Cmd + D).

用白色（＃FFFFFF）填充您的多邊形套索選區（新建圖層，前景色設置爲#FFFFFF，按Alt + Backspace用前景色填充選區）。接下來，按住Ctrl/ cmd，然後單擊在圖層面板上的main picture圖層的縮略圖，使它周圍形成一個選區。你的Gloss層仍然應該是您的活動層，如果沒有，請切換回不取消當前的選擇。點擊：選擇 > 反選（Shift + Ctrl / Cmd + I）實現反向的選擇。按Delete鍵刪除所選區域。這確保了我們的光澤保持在主圖像內。現在，您可以取消選擇（按Ctrl / Cmd+ D）。

To finish off the effect, just set the "Gloss" layer’s Opacity to 7%.

要完成的效果，只需要設置Gloss圖層的不透明度爲7%。

Moving on, we are now going to create the arrows that will control the movement of the 3D slider. Inside our "Works" layer group, create a new layer named "Right arrow". Set your foreground color to dark gray (#1E1E1E) and pick the Custom Shape Tool (U) from the Tools Panel. In the Options Bar, there should be a Shape option dropdown menu. Locate the custom shape named Arrow 2 (this shape comes with Photoshop by default) and use it to draw the right arrow (shown below).

繼續，我們現在要創建箭頭，將控制的3D滑塊的運動。在我們的Works組中，創建一個新圖層，命名爲Right Arrow。設置前景色爲深灰色（#1E1E1E），並從工具面板中選擇自定義形狀工具（U）。在選項欄上，應該有一個自定義形狀的下拉菜單。找到命名爲Arrow 2的自定形狀（這種形狀在Photoshop默認情況下會有的），並用它來畫右箭頭（如下圖所示）。

Give the right arrow a Drop Shadow and Inner Shadow Layer style (suggested settings for each layer effect shown below).

給右箭頭添加一個投影和內陰影圖層樣式（建議設置爲每一層的效果如下圖所示）。

 

Reduce the "Right arrow" layer’s Opacity to 15%.

調整Right arrow圖層的不透明度爲15%

Well, we will need a left arrow also but — no worries — we can just duplicate the "Right arrow" layer (Ctrl/Cmd + J) and move the copy to the left side of the images. Then, similarly to the reflection of the main image, we will use Free Transform (Ctrl/Cmd + T) to flip it horizontally. To do this, we just set the Width option in the Options Bar to -100%. (You should rename the duplicated layer to "Left arrow" to keep our layer organization maintained).

好了，我們也需要一個左箭頭 - 不用擔心 - 我們就可以複製​​Right Arrow圖層（Ctrl / Cmd+ J）和移動複製的到圖像的左側。然後，同樣的相對主圖像的翻轉，我們將使用自由變換工具（Ctrl / Cmd的+ T）水平翻轉。要做到這一點，我們要把寬度選項在選項欄中設置爲-100%。 （你應該複製的圖層重命名爲Left Arrow，以使我們的層組織清晰）。

 

Step 7: Create the Social Media Area

步驟7：創建社會媒體區域

 

We are done with the "Work" layer group, so you can collapse it in the Layers Panel now.

我們完成了Work組，所以你現在可以在圖層面板中把它摺疊，。

 

Go to Layer > New > Group and create a new layer group called "Social media". Set your foreground color to black (#000000) and then create a new layer called "Bubble" inside the new group. Pick the Rounded Rectangle Tool (U), set its Radius option to 5px and draw a rounded rectangle on the "Bubble" layer (as shown below). This rectangular box will contain your most recent Tweet.

點擊： 圖層 > 新建 > 組，並創建新組Social media。設置前景色爲黑色（＃000000），然後在新組內創建一個新層Bubble。選擇圓角矩形工具（U），設置半徑爲5px，並在Bubble層繪製一個圓角矩形（50，489，427，97）（如下圖所示）。此矩形框，將包含最新的Tweet。

Now pick the Custom Shape Tool (U) and set the Shape option in the Options Bar to Talk 10 (this custom shape comes bundled with Photoshop by default). Draw the shape on the lower right corner of the rounded rectangle box.

現在選擇自定義形狀工具（U），在選項欄中設置形狀選項，選擇Talk 10（在Photoshop中選擇臺詞框，使用這個自定義形狀）。繪製在圓角矩形的右下角。

I want to flip the tail of the talk bubble so that it is facing towards the right of the canvas. We will just use the same technique as before: Free Transform (Ctrl/Cmd + T) then changing the Width option to -100%.

我要翻轉的談話框的尾巴，使它面向畫布的右側。我們將使用和以前一樣的技術，自由變換（Ctrl / Cmd + T），然後改變寬度選項爲：-100%。

After that, select both the "Bubble" and "Talk 10" layers in the Layers Panel. Right-click on one of them and choose Merge Layers (Ctrl/Cmd + E) to combine the two layers. To finish off the talk bubble, just reduce the merged layer’s Opacity to 15%.

之後，在圖層面板中選擇Bubble和Talk 10圖層。右鍵單擊其中一個，並選擇合併圖層（Ctrl / Cmd + E）使兩圖層合併。要完成通話框的製作，調整合併圖層的不透明度爲15%。

Now set the foreground color to light green (#E5FCC2) and pick the Horizontal Type Tool (T) from the Tools Panel. Set your font to 18pt, Georgia (Italic). Then write up the Twitter message for our comp.

設置前景顏色爲淺綠色（#E5FCC2），並從工具面板中選擇水平文字工具（T）。設置字體爲18pt，Georgia（斜體）。爲我們的對話框寫Twitter的消息。

Then right-click on the Twitter message text layer in the Layers Panel and choose Blending Options from the menu that appears. Let’s give our Tweet text layer a Drop Shadow layer style (which we can recreate using the CSS3 text-shadow property in our HTML/CSS template).

在圖層面板中的 Twitter 消息文本圖層上右鍵單擊，然後從出現的菜單中選擇混合選項。讓我們給 Tweet 文本圖層設置投影圖層樣式 （這在我們的 HTML/CSS 模板中使用 CSS3 文本陰影屬性，我們可以重新創建對象）。

 

Let’s incorporate some social media icons. For this web layout, I chose to go with the awesome and free Function Icon Set. Download that now and locate the following files:

讓我們把一些社會媒體圖標，添加到網頁佈局中，我選擇了awesome and free Function Icon Set。立即下載，並找到以下文件：

Open the first icon (twitter_48.png) in Photoshop and place it into our main document. Again, we should maintain our work’s neatness by renaming the social media layers to "Twitter", "Twitter Boxed", "Flickr", and so on.

在 Photoshop 中打開的第一個圖標 （twitter_48.png），並將其放到我們的主文檔。再次，我們應通過重命名爲Twitter、Twitter Boxed、Flickr等社會媒體層保持我們的工作整潔。

 

Place the Twitter bird icon below the tail of our talk bubble using the Move Tool (V).

使用移動工具 (V) 移動Twitter bird icon 到對話框的下面。

Before designing our social media icons, let’s create a heading on the right-hand side of the talk bubble. To start, first switch your foreground color to a green color (#9DE0AD), select the Horizontal Type Tool and then set it at 24pt, Georgia (Italic) font. Type something for your heading, such as "Add Me on These Social Networks…".

設計我們社會媒體圖標之前, 讓我們在對話框的右側創建一個標題。首先切換到顏色爲綠色 （#9DE0AD） 的前景色、 選擇橫排文字工具，然後將其設置在 24pt， Georgia(斜體） 的字體。鍵入您的標題，如Add Me on These Social Networks…。

 

Let’s copy the drop shadow layer style from the Tweet message; just right-click on the Tweet message text layer in the Layers Panel, choose Copy Layer Style, right-click on the heading, and then choose Paste Layer Style.

讓我們從 Tweet 消息文字圖層複製投影的圖層樣式，只需在圖層面板中的 Tweet 消息文本圖層上右鍵單擊，選擇拷貝圖層樣式，在標題圖層中，用鼠標右鍵單擊，然後選擇粘貼圖層樣式。

Position the other social media icons as shown below.

按如下所示的位置的其他社會媒體圖標。

Change the foreground color to light green (#E5FCC2) and select the Horizontal Type Tool again. Set your font to 18pt, Georgia (Italic). Beside the social media icons, write the services’ respective names (e.g. "Twitter", "Stumble Upon", etc.).

更改前景色，淡綠色 （#E5FCC2） 並再次選擇橫排文字工具。將您的字體設置爲18pt，Georgia(斜體）。在社會媒體圖標的旁邊寫的服務各自名稱 （例如Twitter、Stumble Upon等）。

 

Again, copy the drop shadow layer style from the heading or the Tweet message text layer and paste it onto the social media text layers.

再次，從標題或 Tweet 消息文本圖層複製投影圖層樣式，並將其粘貼到社會媒體文字圖層上。

Let’s give the texts a rounded rectangle background. You should be familiar with this technique since we have done it with the talk bubble. Change your foreground color to black (#000000), choose the Rounded Rectangular Tool and, with the Radius option at 5px, draw a rounded rectangle below each of the text. You must also reduce the rounded rectangles’ layer opacities to 15%. Below, you can see that I’ve performed this method on the "Stumble Upon" text.

讓我們給這些文字添加的圓角矩形背景。因爲我們做過對話框，您應該熟悉這種技術。前景色設置爲黑色 （#000000），選擇圓角矩形工具並設置半徑爲 5px ，在每個文本的下面繪製圓角矩形。您還必須調整圓角矩形圖層不透明度爲15%。下面，您可以看到我已經對Stumble Upon文本添加了背景（圓角矩形的位置是（592，530，130，32））。

 

Now just duplicate the rounded rectangle background’s layer (Ctrl/Cmd + J) and move them behind the other remaining texts.

現在複製圓角矩形背景圖層 （Ctrl/Cmd + J），並將它們移到其他剩餘的文字的後面。其它3個圓角矩形的位置分別是（819，530）、（592，592）、（819，592）

 

Step 8: Designing the "Latest from the Blog" Area

步驟8：設計Latest from the Blog區域

 

This web portfolio also has a blog. What we can do is display the most recent post’s excerpt in the front page. We can do this on the left column, below the Tweet message.

此 web 作品集也有一個博客。我們可以做的是在前端頁面中顯示最近的張貼摘錄。，我們可以做在左邊的列，在 Tweet 消息的下面。

 

You can now collapse the "Social media" layer group. Create a new layer group called "Blog". Change the foreground color to green (#9DE0AD) and choose the Horizontal Type Tool (T). Set your font to 24pt, Georgia (Italic) and write out this section’s heading; something like "Latest from the Blog" should do the trick. Copy and paste the drop shadow layer style that we’ve used in other text layers so that it also has that same consistent design element.

現在，您可以摺疊Social media組。創建一個新組稱爲Blog。更改前景色爲綠色 （#9DE0AD） 並選擇水平文字工具 (T)。將您的字體設置爲 24pt，Georgia (斜體），並寫出此節的標題 ；Latest from the Blog層也應該可以做到，如我們一直採用其他文本層中一樣，複製和粘貼投影圖層樣式，這樣，它們具有一致的設計元素。

 

Below the heading of the "Latest from the Blog" area, we will display a thumbnail image associated with the blog post excerpt. To begin, switch your foreground color to light green (#E5FCC2) and then draw a 90×90px square box for the blog post excerpt’s thumbnail background. You can use the Rectangular Tool (U) to draw the background.

在Latest from the Blog區域的標題的下面我們將顯示摘錄的博客與其關聯的縮略圖圖像。首現，切換到淺綠色 （#E5FCC2） 的前景色，然後繪製 90 × 90px 正方形爲博客摘錄的縮略圖背景。您可以使用矩形工具 （U） 繪製背景矩形（50，715）。

After that, right-click on the layer and choose Blending Options to bring up the Layer Style dialog window. Let’s give the thumbnail’s background an Outer Glow layer effect (settings shown below).

之後，在圖層上右鍵單擊，選擇混合選項，彈出圖層樣式對話框的窗口。讓我們給的縮略圖背景外發光圖層樣式 （設置如下所示）。

 

Now find a nice 80×80px thumbnail image for your blog post (5px smaller on each side compared to the thumbnail’s background). I just used and rescaled the thumbnail image from this Design Instruct tutorial: Design a Skin-Textured Typography Scene in Photoshop.

現在爲你的博文 ( 相比的縮略圖背景的每一側小5px） 找到好 80 ×80px的縮略圖圖像。我只是用縮略圖圖像設計指導教程： Design a Skin-Textured Typography Scene in Photoshop

注：如果圖片比較大，我們還可以對正方形添加內發光或者是描邊的圖層樣式，然後圖片移到正方形的上方，右鍵選擇添加剪貼蒙版，使得圖片只顯示正方形中的這一部分

Using the same foreground color, write your blog post’s headline. Use 18pt, Georgia (Italic) for the headline; it should be slightly smaller than the "Latest from the Blog" heading. Like with the other text layers, copy and paste the drop shadow layer style into the headline’s text layer.

使用相同的前景色，書寫您的博客帖子標題。標題的字體使用18pt，Georgia (斜體）；它應該略小於Latest from the Blog的標題。象其他文字圖層一樣，複製並粘貼到標題的文本圖層的投影的圖層樣式。

Switch your font settings to 13pt, Arial and write out your post’s excerpt. Apply the drop shadow layer style here as well by copying and pasting the layer style from another text layer that has it.

切換到13pt，arial 的字體設置，並寫出您的帖子摘錄。通過複製和粘貼從它的另一個文本圖層的圖層樣式以及應用在這裏投影的圖層樣式。

Let us make the "Read more" link. We will change our font settings to 13pt, Georgia (Italic). Write "Read more" at the bottom of the post excerpt and apply the same drop shadow layer style from other text layers onto it. Create a new layer under the "Read more" text layer, change the foreground color to black (#000000) and, using the Rounded Rectangular Tool (T) at 5px Radius, draw a rounded rectangle button background for the "Read more" text. Finish it off by lowering the layer’s Opacity to 15% just like with the other rounded rectangle backgrounds we’ve drawn.

讓我們創建Read more鏈接。我們將字體設置爲 13pt，Georgia （斜體）。在摘錄的底部寫Read more，和其他的文本圖層應用同一投影的圖層樣式。在Read more文字圖層下創建一個新圖層，更改前景色爲黑色 （#000000） 和使用 5px 半徑的圓角矩形工具 (T)，繪製Read more文字背景的圓角矩形（415，904，85，19）。降低不透明至15%，就像我們已經繪製的其他的圓角矩形的不透明度一樣。

 

Step 9: Creating the Thumbnail Gallery Area

步驟9：創建Thumbnail Gallery區域

 

This area of the layout will contain an image gallery that can contain images pulled from your Flickr account or other portfolio pieces. Let’s go ahead and collapse the "Blog" layer group to get it out of the way, and then create another layer group called "Gallery".

這一區域的佈局將包含圖像庫可以包含從你的 Flickr 帳號或其他作品集的圖像。讓我們繼續和摺疊Blog組，然後創建另一個組Gallery。

We’ll start with the section’s heading. Change your foreground color to green (#9DE0AD), and use the same settings as the "Latest from the Blog" heading — 24pt, Georgia (Italic) — to write out "Gallery". Then, like before, just copy and paste the drop shadow layer style from another text layer that has it.

我們將開始書寫該節的標題。改變前景色爲綠色 （#9DE0AD），並和Latest from the Blog使用相同的設置—— 24pt，格魯吉亞 (斜體） —— 寫Gallery。然後，像以前一樣，複製並粘貼了從另一個文本圖層從投影圖層樣式。

Create another layer group inside the "Gallery" group called "Gallery item". This group will contain an 80×80px image and its background. We will reuse the blog post thumbnail image’s background, so expand the "Blog" layer group, locate the thumbnail background, duplicate it (Ctrl/Cmd + J) and then move the duplicated layer into the "Gallery item" group. Find an 80×80px photo and place it on top of the thumbnail background.

在Gallery組創建名爲Gallery Item的組。該組將包含 80 × 80px的圖像和它的背景。我們將重用博客縮略圖圖像背景，所以展開的Blog圖層組，定位的縮略圖的背景，複製它（Ctrl/Cmd + J），然後將複製的層移入Gallery Item組，位置（530，716）。找到 80 × 80px的圖片並將其放置在縮略圖的背景上。

 

Collapse the "Gallery item" group and make 7 copies of it by right-clicking on the layer group and choosing Duplicate Group from the menu that appears. Position the duplicated gallery items such that you end up with a 2-row by 4-column arrangement.

摺疊Gallery item組並通過右鍵單擊組，並從出現的菜單中選擇複製組7次。這樣您可以爲 2 行 4 列安排所的位置複製的gallery items。

其餘7個方塊的位置分別是（640，716）、（750，716）、（860，716）、（530，833）、（640，833）、（750，833）、（860，833）

 

Step 10: Create the Footer Area

步驟10：創建頁腳區域

 

This is our last step. Start by collapsing the "Gallery" group and then creating a new group called "Footer". Change the foreground color to a bright green (#E5FCC2) and select the Horizontal Type Tool (T). Set your font settings to 13pt, Arial and write your footer copyright and other information. After that, just paste in the drop shadow layer style from other text layers.

這是我們最後的一步。啓動摺疊Gallery組，然後新建組Footer。更改前景色爲明亮的綠色 （#E5FCC2），然後選擇水平文字工具 (T)。設置您的字體設置爲 13pt Arial 和寫入您的頁腳版權和其他信息。在此之後，從其他文字圖層中粘貼投影圖層樣式。

 

Tutorial Summary

Congratulations! We’ve finished our elegant portfolio web design. We covered some useful and trendy techniques like how to create a nice and detailed textured background, inset dividers, applying drop shadows manually, a technique for creating image reflections, creating a nice talk box graphic, and more. I hope that you understood all the steps used, and I’d like to hear your opinion about this tutorial in the comments below!

教程摘要

恭喜 ！我們已經完成了我們的優雅的作品集網頁的設計。我們介紹一些有用和時尚的技巧，如如何來創建好和詳細的紋理的背景，嵌入分隔線，手工，應用投影技術用於創建圖像以及更多，創建一個不錯的談話框圖形和更多。

 

最終的作品

 

後記：

本篇的教程主要體現在2個方面，一個是中間的圖片滑動欄很有特色，加了不常見的光澤效果以及3D效果。二是整個頁面的顏色用的少，用的巧，很多元素的顏色都是通過修改不透明度來達到效果。這樣，如果整個頁面要更改色系的話，只需更改背景色和文字的顏色即可。網頁的複用度比較高。

    本文轉自萬倉一黍博客園博客，原文鏈接：http://www.cnblogs.com/grenet/archive/2012/10/28/2742514.html，如需轉載請自行聯繫原作者