PS網(wǎng)頁設(shè)計教程XIX——在Photoshop中創(chuàng)建一個優(yōu)雅的作品集的網(wǎng)頁布局

本系列的教程來源于網(wǎng)上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優(yōu)秀的教程。因為翻譯能力有限，翻譯的細(xì)節(jié)上還有待推敲，希望廣大網(wǎng)友不吝賜教。

約定：

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

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

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

例如：（90，22，231，77），表示矩形的左上角的坐標(biāo)是（90，22），寬231，高77

例如：（90，22），表示矩形的左上角的坐標(biāo)是（90，22），矩形的其他兩個參數(shù)教程里已經(jīng)指定

4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優(yōu)化等。

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網(wǎng)頁設(shè)計教程中，我想向您展示了如何創(chuàng)建一個干凈，優(yōu)雅的作品集布局。有許多領(lǐng)域常見的內(nèi)容區(qū)域，如顯示博客文章摘錄特色的作品，一個漂亮的圖像滑塊，社會化媒體的信息，和縮略圖畫廊。在這個Photoshop教程中，我們將涉及大量的專業(yè)級的網(wǎng)頁設(shè)計技術(shù)。

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.

現(xiàn)在在畫布上添加參考線，以確保正確對齊的各種網(wǎng)頁布局的組件。您可以精確的創(chuàng)建參考線，點擊：查看 > 新建參考線。

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

你可以在50px、500px、950px處創(chuàng)建垂直參考線

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

你可以在75px、467px、651px、943px處創(chuàng)建水平參考線

Step 3: Creating the Background

步驟3：創(chuàng)建背景

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.

雙擊默認(rèn)的背景圖層，原本是鎖定的和不能編輯的；新建圖層的窗口會被打開。我重命名該圖層為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.

現(xiàn)在，設(shè)置你的前景色為藍(lán)綠色（#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.

現(xiàn)在給背景添加一些雜色，點擊：濾鏡 > 雜色 > 添加雜色。在添加雜色的窗口里，設(shè)置數(shù)量為1%，分布選擇平均分布，并勾選上單色

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

設(shè)置前景色為黑色（#000000），創(chuàng)建一個新圖層（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鍵用黑色前景色填充所選的區(qū)域。

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

重復(fù)同樣的過程在中部的選區(qū)和底部的選區(qū)，在結(jié)束的時候你有3個水平的區(qū)塊穿越整個畫布

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

現(xiàn)在調(diào)整Dark sections圖層的不透明度為15%

Step 4: Creating Inset pider Lines

步驟4：創(chuàng)建內(nèi)陷分隔線

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

在Background組中創(chuàng)建新組，在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.

在組中創(chuàng)建新的圖層，命名為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組中創(chuàng)建另一個圖層命名為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組，保持我們的圖層面板可管理的。調(diào)整組的不透明度為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".

復(fù)制Line組（在圖層面板上右鍵在出現(xiàn)的菜單中選擇復(fù)制組），然后命名復(fù)制的組為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 pider lines on the 3rd and 4th horizontal guides.

重復(fù)上面的方法創(chuàng)建2條內(nèi)陷分割線在第3條和第4條的水平參考線

Step 5: Create the Layout’s Header

步驟5：創(chuàng)建布局的頭部區(qū)域

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.

在我們繼續(xù)之前，我想請注意，在這種布局中，我們將使用大量的層，使我們的工作是靈活的，這是很好的。然而，這也導(dǎo)致到圖層面板中可能會變得非常龐大和笨重。因此，每當(dāng)我們完成了我們的網(wǎng)頁設(shè)計的一個組成部分，我們應(yīng)該折疊組以確保我們能直觀地命名圖層和組。所以，讓我們繼續(xù)前進，因為我們現(xiàn)在完成了背景和折疊Background組。

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

在Background組的上方創(chuàng)建新組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".

讓我們創(chuàng)建網(wǎng)站的LOGO——這是非常簡單的文字LOGO，擁有光滑的和時尚的圖層樣式。一開始，選擇水平文字工具（T），設(shè)置字體為Lobster，36pt。設(shè)置文字的顏色為亮綠色（#E5FCC2），然后書寫你的網(wǎng)站的名字。在本實例中，我寫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?

下面的圖像顯示了添加圖層樣式后的結(jié)果?？焖俸唵危敲利?，你不這樣認(rèn)為么？

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.

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

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

當(dāng)做完的時候，用移動工具擺放導(dǎo)航菜單到頂部頭部區(qū)域的右邊

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.

我們要復(fù)制LOGO的圖層樣式到導(dǎo)航菜單。在圖層面板中的Instruct portfolio圖層上右鍵，在出現(xiàn)的菜單中選擇拷貝圖層樣式。接下來，在導(dǎo)航菜單文本的圖層上右鍵選擇粘貼圖層樣式

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

現(xiàn)在要創(chuàng)建活動鏈接的背景來顯示用戶在哪個頁面上。他也能表示頁面的懸停狀態(tài)（即我們鼠標(biāo)移到非活動鏈接上的時候顯示）

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.

創(chuàng)建新的圖層Button（因為是活動鏈接的背景看起來像是一個UI按鈕）。該圖層在導(dǎo)航菜單文字的下方，因為它像是鏈接的背景。

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），設(shè)置半徑為5px，并在文字的后面繪制按鈕。如下所示，活動鏈接的背景繪制在Home導(dǎo)航菜單文本的后面。

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%.

在添加完圖層樣式后，調(diào)低Button圖層的不透明度為10%

Step 6: Create the "Featured Work" Area

步驟6：創(chuàng)建Featured Work區(qū)域

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.

是時候移到另一個布局的組件。記?。菏掌饒D層面板中的Header圖層組，表示已經(jīng)離開我們的流程

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）調(diào)整你的圖片到合適的大小

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.

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

注：教程中沒有交代兩側(cè)圖片的擺放過程，這里補充完整

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

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

在圖片的圖層上右鍵選擇創(chuàng)建剪貼蒙版

選中矩形圖層和圖片圖層，右鍵選擇轉(zhuǎn)換為智能對象，并在新的圖層上右鍵選擇柵格化圖層，新的圖層命名為Left Picture

用同樣的方法在右側(cè)擺放一張圖片，矩形為（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.

對左側(cè)的圖片執(zhí)行同樣的步驟，只是這時面朝右邊罷了

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

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

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.

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

注：效果不明顯的話，可以反復(fù)涂抹。另，沿著主圖像的左邊沿效果最好

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.

現(xiàn)在，我們將創(chuàng)建主圖像的投影，使用一個快速和簡單的技術(shù)。首先，在Main Picture下方創(chuàng)建一個新的圖層。

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）。如果做得正確，你應(yīng)該只看到橢圓形的左半部分?，F(xiàn)在點擊：濾鏡 > 模糊 > 高斯模糊，設(shè)置半徑為5px，然后按確定應(yīng)用添加濾鏡。

Lower the layer’s Opacity to 40%.

設(shè)置圖層的不透明度為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.

要創(chuàng)建的主圖像在右邊的陰影，只是重復(fù)的左邊陰影層（按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).

現(xiàn)在我想創(chuàng)建主圖像的一個漂亮的倒影效果 - 這是很簡單的事情。復(fù)制Main Picture層（按Ctrl / Cmd + J）。然后按Ctrl/ Cmd + T進入自由變換模式，并設(shè)置高度選項，在選項欄里填上：-100%，以達到垂直翻轉(zhuǎn)圖像（你也可以使用：編輯 > 變換 > 垂直翻轉(zhuǎn)作為替代）。

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），這樣您就可以將復(fù)制的圖像移動到低于原始圖像的位置。在原始圖像和翻轉(zhuǎn)復(fù)制的圖像之間，保持1px的空隙（精確的話，可以把復(fù)制好的圖層移到（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.

我們不需要整個復(fù)制的圖像，我們只關(guān)心它的上半部分。因此，使用矩形選框工具（M），選擇低于我們先前創(chuàng)建的參考線的部分，然后按Delete鍵刪除所選區(qū)域。

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

現(xiàn)在，我們只需要一點點復(fù)制的圖像。接下來，我們需要一個圖層蒙版（點擊圖層面板底部的“添加圖層蒙版”按鈕，顯示為紅色）。

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）到透明的線性漸變。應(yīng)用從底部到頂端的簡便。要完成的倒影效果，降低圖層的不透明度為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".

我們現(xiàn)在要做的是風(fēng)格化的主圖像，進一步應(yīng)用一個簡單的在其表面的光澤反射。首先，在Main Picture層上方創(chuàng)建一個新層Gloss。

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

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

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）填充您的多邊形套索選區(qū)（新建圖層，前景色設(shè)置為#FFFFFF，按Alt + Backspace用前景色填充選區(qū)）。接下來，按住Ctrl/ cmd，然后單擊在圖層面板上的main picture圖層的縮略圖，使它周圍形成一個選區(qū)。你的Gloss層仍然應(yīng)該是您的活動層，如果沒有，請切換回不取消當(dāng)前的選擇。點擊：選擇 > 反選（Shift + Ctrl / Cmd + I）實現(xiàn)反向的選擇。按Delete鍵刪除所選區(qū)域。這確保了我們的光澤保持在主圖像內(nèi)。現(xiàn)在，您可以取消選擇（按Ctrl / Cmd+ D）。

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

要完成的效果，只需要設(shè)置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).

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

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

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

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

調(diào)整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).

好了，我們也需要一個左箭頭 - 不用擔(dān)心 - 我們就可以復(fù)制Right Arrow圖層（Ctrl / Cmd+ J）和移動復(fù)制的到圖像的左側(cè)。然后，同樣的相對主圖像的翻轉(zhuǎn)，我們將使用自由變換工具（Ctrl / Cmd的+ T）水平翻轉(zhuǎn)。要做到這一點，我們要把寬度選項在選項欄中設(shè)置為-100%。 （你應(yīng)該復(fù)制的圖層重命名為Left Arrow，以使我們的層組織清晰）。

Step 7: Create the Social Media Area

步驟7：創(chuàng)建社會媒體區(qū)域

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

我們完成了Work組，所以你現(xiàn)在可以在圖層面板中把它折疊，。

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.

點擊： 圖層 > 新建 > 組，并創(chuàng)建新組Social media。設(shè)置前景色為黑色（＃000000），然后在新組內(nèi)創(chuàng)建一個新層Bubble。選擇圓角矩形工具（U），設(shè)置半徑為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.

現(xiàn)在選擇自定義形狀工具（U），在選項欄中設(shè)置形狀選項，選擇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%.

我要翻轉(zhuǎn)的談話框的尾巴，使它面向畫布的右側(cè)。我們將使用和以前一樣的技術(shù)，自由變換（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）使兩圖層合并。要完成通話框的制作，調(diào)整合并圖層的不透明度為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.

設(shè)置前景顏色為淺綠色（#E5FCC2），并從工具面板中選擇水平文字工具（T）。設(shè)置字體為18pt，Georgia（斜體）。為我們的對話框?qū)慣witter的消息。

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 消息文本圖層上右鍵單擊，然后從出現(xiàn)的菜單中選擇混合選項。讓我們給 Tweet 文本圖層設(shè)置投影圖層樣式 （這在我們的 HTML/CSS 模板中使用 CSS3 文本陰影屬性，我們可以重新創(chuàng)建對象）。

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:

讓我們把一些社會媒體圖標(biāo)，添加到網(wǎng)頁布局中，我選擇了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 中打開的第一個圖標(biāo) （twitter_48.png），并將其放到我們的主文檔。再次，我們應(yīng)通過重命名為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…".

設(shè)計我們社會媒體圖標(biāo)之前, 讓我們在對話框的右側(cè)創(chuàng)建一個標(biāo)題。首先切換到顏色為綠色 （#9DE0AD） 的前景色、 選擇橫排文字工具，然后將其設(shè)置在 24pt， Georgia(斜體） 的字體。鍵入您的標(biāo)題，如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 消息文字圖層復(fù)制投影的圖層樣式，只需在圖層面板中的 Tweet 消息文本圖層上右鍵單擊，選擇拷貝圖層樣式，在標(biāo)題圖層中，用鼠標(biāo)右鍵單擊，然后選擇粘貼圖層樣式。

Position the other social media icons as shown below.

按如下所示的位置的其他社會媒體圖標(biāo)。

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） 并再次選擇橫排文字工具。將您的字體設(shè)置為18pt，Georgia(斜體）。在社會媒體圖標(biāo)的旁邊寫的服務(wù)各自名稱 （例如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.

再次，從標(biāo)題或 Tweet 消息文本圖層復(fù)制投影圖層樣式，并將其粘貼到社會媒體文字圖層上。

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.

讓我們給這些文字添加的圓角矩形背景。因為我們做過對話框，您應(yīng)該熟悉這種技術(shù)。前景色設(shè)置為黑色 （#000000），選擇圓角矩形工具并設(shè)置半徑為 5px ，在每個文本的下面繪制圓角矩形。您還必須調(diào)整圓角矩形圖層不透明度為15%。下面，您可以看到我已經(jīng)對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.

現(xiàn)在復(fù)制圓角矩形背景圖層 （Ctrl/Cmd + J），并將它們移到其他剩余的文字的后面。其它3個圓角矩形的位置分別是（819，530）、（592，592）、（819，592）

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

步驟8：設(shè)計Latest from the Blog區(qū)域

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.

現(xiàn)在，您可以折疊Social media組。創(chuàng)建一個新組稱為Blog。更改前景色為綠色 （#9DE0AD） 并選擇水平文字工具 (T)。將您的字體設(shè)置為 24pt，Georgia (斜體），并寫出此節(jié)的標(biāo)題 ；Latest from the Blog層也應(yīng)該可以做到，如我們一直采用其他文本層中一樣，復(fù)制和粘貼投影圖層樣式，這樣，它們具有一致的設(shè)計元素。

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區(qū)域的標(biāo)題的下面我們將顯示摘錄的博客與其關(guān)聯(lián)的縮略圖圖像。首現(xiàn)，切換到淺綠色 （#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).

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

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.

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

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

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.

使用相同的前景色，書寫您的博客帖子標(biāo)題。標(biāo)題的字體使用18pt，Georgia (斜體）；它應(yīng)該略小于Latest from the Blog的標(biāo)題。象其他文字圖層一樣，復(fù)制并粘貼到標(biāo)題的文本圖層的投影的圖層樣式。

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 的字體設(shè)置，并寫出您的帖子摘錄。通過復(fù)制和粘貼從它的另一個文本圖層的圖層樣式以及應(yīng)用在這里投影的圖層樣式。

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.

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

Step 9: Creating the Thumbnail Gallery Area

步驟9：創(chuàng)建Thumbnail Gallery區(qū)域

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".

這一區(qū)域的布局將包含圖像庫可以包含從你的 Flickr 帳號或其他作品集的圖像。讓我們繼續(xù)和折疊Blog組，然后創(chuàng)建另一個組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.

我們將開始書寫該節(jié)的標(biāo)題。改變前景色為綠色 （#9DE0AD），并和Latest from the Blog使用相同的設(shè)置—— 24pt，格魯吉亞 (斜體） —— 寫Gallery。然后，像以前一樣，復(fù)制并粘貼了從另一個文本圖層從投影圖層樣式。

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組創(chuàng)建名為Gallery Item的組。該組將包含 80 × 80px的圖像和它的背景。我們將重用博客縮略圖圖像背景，所以展開的Blog圖層組，定位的縮略圖的背景，復(fù)制它（Ctrl/Cmd + J），然后將復(fù)制的層移入Gallery Item組，位置（530，716）。找到 80 × 80px的圖片并將其放置在縮略圖的背景上。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com