PS網頁設計教程XVII——在Photoshop中設計創意組合網頁－互聯網

文章出處

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

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

約定：

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

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

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

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

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

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

Step 0 – Start by setting-up the document

步驟0：設置文檔

Open a new document: dimensions 1200×1640 pixels and resolution 72 pixels/inch.

新建文檔：尺寸：1200px*1640px，分辨率：72px/英寸

To keep everything aligned we can use the 960s Grid System from here; it is not essential in this case, because we can use the Photoshop Guides (Ctrl+R to activate rules, View > New Guide to add the guide), but, how you can see in the previous tutorials, sometimes it can help.

為了對齊元素，我們在這兒可以用960網格布局系統；在這里是沒有必要的，因為我們可以用PS的參考線（Ctrl + R激活標尺，視圖 > 新建參考線去增加參考線），不過，你可以參考之前的教程，有時能很好的幫助我們

Step 1 – Background

步驟1：背景

We’re going to create the basic layers for the background. In this case I had a precise idea on how to separate the different blocks to create the layout, why? Well, my tutorial, my web designs, ever start from a sketch (or a wireframe), it is useful just to keep in mind what is the final aim; but it’s clear that during the design process we will probably add new elements.

我們要創建基本的背景層。在這種情況下，我在布局上精確的區分不同的塊，為什么？好了，我的教程，我的網頁設計，不斷從草圖（或線框）中來，它可以幫助記住每塊的最終目的是什么，但很明顯，在設計過程中，我們可能會添加新的元素。

So, in this case, we’ll create 5 containers, where we’ll add the content.

所以，在本教程中，我們要創建5個不同的區域，每個區域添加不同的內容

Add a first layer, it will be our background, with the color #ededed. Rasterize the layer (color #ededed) and add a subtle noise effect (Filter > Noise > Add Noise… Amount 0,5 – 0,8; check Gaussian and Monochromatic).

添加第一個圖層，這會是我們的背景，顏色： #ededed。柵格化圖層（顏色： #ededed），并添加一個細微的雜色效果（濾鏡 > 雜色 > 添加雜色，數量：0.5-0.8；勾選高斯分布和單色）

Draw a rectangle on the top of the page (using the Rectangle Tool, color #cddcec) and, again, rasterize the shape and add a subtle noise effect (Filter > Noise > Add Noise… Amount 0,5 – 0,8; check Gaussian and Monochromatic). Add a Gradient Overlay (Soft Light, 54%, from black to white, Angle 90% and Scale 75%).

在頁面的頂部畫一個矩形（0，0，1200，128）（用矩形工具，顏色： #cddcec），再次，柵格化圖層并添加一個細微的雜色（濾鏡 > 雜色 > 添加雜色，數量：0.5-0.8；勾選高斯分布和單色）。添加一個漸變疊加（柔光，54%，從黑到白，角度90，縮放75%）

Add, using the Rectangle Tool (U), a new shape (color #608bb6, height around 400 pixels) for the middle container, set Blend Mode to Color Burn and Fill to 75% and, then add a white Stroke of 1 pixel (from Layer Style). Finally the rectangular shape for the credits (the footer), use the same tool and color of the middle container, but now set Blend to Linear Light and Opacity to 70%.

用矩形工具添加一個矩形（0，753，1200，400）（顏色： #608bb6，高度400px）作為中部區域，設置混合模式為顏色加深，填充為75%，然后添加一個1px的白色描邊（從圖層樣式面板上）。最后，在底部添加一個矩形（0，1592，1200，48）顯示字幕（頁腳），用和中部區域同樣的工具和顏色，只是設置混和模式為線性光（應該是線性加深），不透明度為70%

Below the final result.

下面是最終的結果

Step 2 – Background details

步驟2：背景細節

We want to give more character to our background!

Add a new layer (Ctr+Shift+N) and use the Single Row Marquee Tool to add a 1 pixel white line on the top od the canvas.

我們想給背景添加更多的符號

新建一個圖層（Ctrl+Shift+N），用單行選框工具在畫布的頂部添加一個1px的白色的線

建議：用直線工具畫一條直線（0，0，1200，1）比較好

Now open a new document 12×1 pixels, unlock the background layer and hide it from the Layers Palette. Zoom to 3200%, add a new layer and using the Rectangular Marquee tool add two 1×1 pixel square, fill one with the color #fff and the other one with #000, as shown below. Then go to Edit > Define Pattern.

現在新建一個文檔，12px*1px，解鎖背景圖層并在圖層面板中隱藏它。放大至3200%，新建圖層，并用矩形選框工具創建2個1px*1px的正方形，一個填充顏色： #ffffff，另一個填充顏色： #000000，如下圖所示。然后點擊：編輯 > 定義圖案

建議：用鉛筆工具比較合適

We have a new pattern that we’re going to use, go back to our main document. Create a new layer and (with the Rectangular Marquee Tool) draw a selection that covers the whole canvas, fill it with a random color, set Fill to 0% then add Pattern Overlay from Layer Style.

我們即將用我們新建的圖案，回到我們的主文檔。創建一個新的圖層，命名為pattern（用矩形選框工具），畫一個覆蓋整個畫布的選區，隨便用一個顏色填充，設置填充為0%，然后添加一個圖案疊加的圖層樣式

Now it’s time to create the clouds!

接下來是創建云

You can add 5 guides (84px – 186px – 600px – 1014px – 1118px) in order to limit the work area, then use the Ellipse Tool to add some shapes as shown to create the basic shapes. Select all the layers from the Layers Palette (Ctrl+click on layers) and then Ctr+G to group the shapes.

你需要添加5條參考線（84px – 186px – 600px – 1014px – 1118px）去劃分各個工作區域，用橢圓工具按下圖添加一些形狀去創建基本形狀。在圖層面板上選擇這些層（Ctrl+Click這些圖層），然后按Ctrl+G把這些形狀歸并到一個組

Duplicate the group and convert the copy to a Smart Object – right click on the group in the layer palette, then Convert To A Smart Object – resterize it and add a subtle nois effect. Now you have to hide the excess part of the clouds using a layer mask: Ctrl+click on the “Top-background” layer thumbnail (in the Layer Palette), in order to create a selection which excludes the bottom of the clouds, then select the clouds’ layer and add a vector mask.

復制該組并把副本轉換為智能對象——在圖層面板上組上右鍵，然后選擇轉換為智能對象——柵格化圖層并添加細微的雜色特效。現在，你必須使用一個圖層蒙版隱藏超出部分的云：Ctrl +鼠標單擊Top-background圖層縮略圖圖（在“圖層”調板中），創建一個選區，不包括底部的云彩，然后選擇cloud層并添加圖層蒙版。

Then apply the following style.

然后按照下圖添加樣式，在圖層面板將pattern層移到最頂端

顏色疊加的顏色： #ededed

Now we draw a nice shadow for the clouds. Duplicate the clouds’ layer and positionate the copy just below the original layer, set the fill to 0% and apply the following style.

現在我們給云添加一個漂亮的陰影。復制cloud圖層，然后把副本擺放到當前圖層的下方（偏右一點的位置），設置填充為0%，然后按照下圖添加樣式

注：在添加樣式之前，還要進行一部分操作，就是把復制云的下半部刪除掉

選擇云副本的層，然后用矩形選框工具創建如下的選區

按delete鍵，刪除云的副本的下半部

然后填充為0%，并按照下圖添加樣式

漸變顏色編輯器：左側的顏色： #4d76a4，右側的不透明度為80%

At this point use the same techniques to draw other clouds.

在這一塊上，使用相同的技術來畫其他云。云的顏色疊加的顏色選擇白顏色

Step 3 – Header details

Time to add the logo. Use the Pen Tool (color #79a7db) to design a billoboard (doubts on how to use the Pen Tool? Read this fantastic article written by Sebastiano), use the Line Tool to add the two white segments. Then add the following style to the billboard.

步驟3：頭部區域的細節部分

添加網頁的LOGO。用鋼筆工具（顏色： #79a7db）去設計一個廣告牌（疑惑如何使用鋼筆工具？閱讀SEBASTIANO寫的美妙的文章），用直線工具添加兩條白色的線段，粗細為4px，然后給廣告牌添加如下的圖層樣式

投影的顏色： #79a7db

Apply the same Drop Shadow for the two white lines too.

給兩條白色的直線添加相同的投影，距離改為2

Add the text using the Horizontal Type Tool (T), using the Ballpark Font, then add a Drop Shadow and a soft Gradient Overlay.

用文字工具添加一些文本，字體：Ballpark，并添加一些投影和柔和的漸變疊加的樣式，投影和漸變疊加的顏色都是： #79a7db

After the logo we are going to draw a nice, and simple, robot character using Zoom, Pen Tool, Ellipse Tool and Rounded Rectangle Tool. There isn’t the need to explain step by step how to create the robot, take a look to the image below and, at a glance, you’ll unbderstand how to draw our “friend”.

在完成Logo后，我們使用縮放工具、鋼筆工具、橢圓工具、圓角矩形工具繪制一個漂亮的、簡單的、機器人符號。不需要解釋一步一步如何創建機器人，一起來看看下面的圖片，一看，你就會明白如何畫好我們的friend。

Group all the shapes used to compose the robot and Add a Layer Mask, as previously done, to obtain the following result.

把這些形狀歸成一組，組成機器人，并添加一個圖層蒙版，以前也做過，得到以下結果。

畫這個機器人太復雜了。直接在網上找了一張安卓的圖片替代這個機器人

Now we have to draw the bird and the badge. We use the Pen Tool, the Brush Tool an the Horizontal Type Tool. Take a look below to understand how to enhance our layout with a sweet and, I repeat, very simple illustration.

現在我們就來畫鳥和徽章。我們使用鋼筆工具，畫筆工具、橫排文字工具。看看下面一個小貼士，很簡單的例子，以了解如何提高我們的布局。

注：鳥也不畫了，直接在網上找

將鳥的圖像添加到合適的位置

在鳥的左上側用矩形工具添加一個矩形，顏色：#ebefbc

用添加錨點工具在矩形的左側中間添加一個錨點

將新增的錨點往右側拖動

給該形狀添加如下的圖層樣式：

用直線工具在鳥和形狀之間畫一條白色的直線

用文字工具在淺黃色形狀中添加文字follow us，字體：Ballpark

Step 4 – First container

步驟4：首內容區域

First of all create the box where we will insert the information of the team’s members. Use the Rectangle Tool to draw a 480×425 white box, add two grey lines as shown (Create Clipping mask to limite the segments within the white box), and add also a text (use Delicious Font).

首先要創建一個區域顯示團隊成員的信息。用矩形工具創建一個白色矩形（532，192），尺寸：480px*425px，如下圖添加兩條灰色（#eeeeee）的直線（（532，200）和（532，606））（創建剪貼蒙版以使直線只顯示在白色矩形的內部），并添加一段文本（字體：Delicious），并按照下圖對白色矩形和文字添加樣式：

With the help of the Guides and Horizontal Type Tool, add photos and information about the team’s member. In this case we use Lucida Sans.

在網格的幫助下，用文字工具，添加團隊成員照片和信息。在這里，我們用字體：Lucida Sans

設計師姓名文字的字體設置如下：顏色： #1b77a8

身份文字的字體如下：顏色： #a8b9c9

說明信息的字體如下：顏色： #898989

按鈕的顏色：#1b77a8

按鈕上的文字字體：顏色： #ffffff

Draw a white “arrow” using the same technique seen for the “follow us” ribbon. Create a rectangular shape with the Rectangle Tool and then with the help of Guides, Add Anchor Point Tool and Direct Selection Tool transform it in a nice ribbon.

用和follow us飄帶相同的技術畫一個白色的arrow。在網格的幫助下，用矩形工具創建一個矩形，用添加錨點工具添加錨點，然后用直接選擇工具把它變成一個漂亮的飄帶

Add the shadow to the ribbon. Duplicate the layer just created (you can temporarily hide the main shape), set color to #000 and opacity to 5%. Right click on the shape and go to Free Trasform Path and activate swarp modes to obtain the following result.

給飄帶添加投影。復制剛才創建的圖層（你可以暫時隱藏主形狀），設置顏色為 #000000，把不透明度設置為5%。在形狀上右鍵選擇自由變換路徑并激活變形模式，調整成如下的樣子

Use the Horizontal Type Tool to create a “- – - – - – - -” string, you can rasterize and trasform it to create the following effect .Also add a soft drop shadow.

用文字工具添加- – - – - – - -文本，你可以柵格化它并按照下面的效果變換，并添加一個柔軟的投影

Finally add the text (using Delicious Font).

最后添加一些文字（字體：Delicious）

Now create three blocks with descriptions of services that the studio provides. In this section we use the awesome icon sets, created by Asher Abbasi for WeGraphics, Wapp vol. 2 and Wapp vol. 1.

Remember: in this case the guides are really useful to fill with icons and text the section.

現在創建3個塊用來描述該工作室提供的服務。在這里，我們要使用一些圖標集，Asher Abbasi制作的WeGraphics中的Wapp vol. 2和Wapp vol. 1

記住：在這兒，網格能在這兒幫助你擺放圖標和文字

標題的字體：顏色： #10789b

段落文字的字體：顏色： #585858，文字右對齊

Add three “dots” (with a nice drop shadow) and enhance the text with a 1px white drop shadow as shown below.

添加三個dots（有著漂亮的投影），顏色： #5a8cc1，并且按下圖對之前的文字添加1px的白色投影

點的投影，投影的顏色： #a3c6e6

文字的投影

We create also a nice menu, just below the white box, it should be clear how to realize this menu at this point. We add just a soft Inner Shadow to the “arrows.”

我們要創建漂亮的菜單，在白色的矩形的下方，為了清楚的知道如何實現該菜單，我們要對arrows添加內陰影的樣式，并添加文字

Step 5 – The middle ribbon

步驟5：中間的飄帶

The middle element of our design is an informative infographic that is introduced by a big ribbon that contains a slogan. In order to realize this ribbon we will create 5 custom shapes using, as usual, the Pen Tool (I remind, again, that if you are a beginner you can read Photoshop For Beginners: The pen tool to learn more about how to use this tool). Take a look below to understand what kind of shapes we need to draw (note: we will use #497287 for the main shapes and #798ea4 for the darker shapes).

中間的元素，我們的設計是一個內容豐富的信息圖表區域，其引入的是一個大的飄帶，其中包含一個標語。為了實現這一功能區，我們像往常一樣使用鋼筆工具創建5個自定形狀，（我再次提醒的是，如果你是一個初學者，你可以閱讀入門：Photoshop的鋼筆工具，以了解更多有關如何使用這工具）。讓我們一起來看看究竟需要繪制什么樣的形狀，（注：主要形狀的顏色： #497287 和較深的形狀的顏色： #798ea4）。

注：也可以用矩形工具加直接選擇工具，來完成相似的形狀，如下圖，為了醒目，各自用了亮眼的顏色

再分別改顏色，主要形狀的顏色： #497287，較深的形狀的顏色： #798ea4

What about the style? Well, we apply the same style for the “front-shape,” as you can see below (the pattern, that we are going to use, is from Old Paper Patterns on WeGraphics).

樣式設置為什么樣？好的，我們將添加和front-shape一樣的圖層樣式，就像下圖一樣（圖案，我們打算用的是Old Paper Patterns on WeGraphics）

投影的顏色： #445055

圖案疊加的圖案用的是自定義的圖案，效果也差不多

12*24的圖案，左邊和上邊各一條線，顏色： #f0f0f0

For the two little triangles we apply the following style:

給2個三角形添加如下的樣式：

左側的三角形

投影的顏色： #445055

右側的三角形

投影的顏色： #445055

Finnally add the slogan.

最后，添加標語

投影的顏色： #445055

Step 6 – The infographic

步驟6：信息圖表

The idea of adding a little infographic borns from the need to synthesize the creative process of our fictionary design studio. Below you can see the finale result (obvious, it’s just a simplistic example of how you can describe a creative process behind the development of a project).

添加簡約的信息圖表的想法來自需要合成我們的創建過程的設計工廠。下面是你看到的最終結果（很顯然，它只是一個簡單的例子說明，你可以描述的一個創造性的過程在后面的過程中）

Start designing the two circles (hold down Shift to draw a perfect circumference, color #3d3d3d). Set the, for the left shape, Fill to 0%; for the right shape, set Blend Mode to vivid Light and Fill to 35%. Add the style as shown below (it is the same for both the shapes, Pattern Overlay fo the left shape apart).

在開始設計兩個圓（（240，840，275，275）和（572，837，275，275））（按住Shift鍵去畫一個非常完美的圓，顏色： #3d3d3d）。設置，左側的圓，填充為0%；右側的圓，設置混合模式為亮光，填充為35%。按照下圖設置圖層樣式（兩個圓都設置一樣的，再對左側添加圖案疊加）

投影的顏色： #445055

內發光的顏色： #aac1d1

再對左側的添加圖案疊加樣式，圖案是12*12，左上角8*8的黑色方塊

Note that the left circle use a custom pattern, we can create this pattern adopting the same technique of the Step 2.

注意左側的圓用了自定義的圖案，我們可以用步驟2中的技術創建這個圖案

Use Ellipse Tool (create the little white circle one time and then duplicate it to use again) and the Line Tool (Weight: 3px, color #ffffff) to design the graph on the left. Group all the shapes and the lines created, duplicate the group, convert it to smart object and then rasterize it. Now you can add the style to the layer.

用橢圓工具（創建小的白色的圓一次，然后復制需要的個數），和直線工具（粗細：3px，顏色： #ffffff），設計左側的圓。把這些形狀和直線歸成一組，復制組，轉換成智能對象并柵格化。現在，你可以添加圖層樣式

投影的顏色： #94acb5

Using the Pen Tool to draw some tags (using vibrant colors: #d82f4c, #edcd59, #4d85a2, #598b3b) and then name it using Horizontal Type Tool, you can apply a soft drop shadwo to both, tag and text.

接下來用鋼筆工具畫一些標簽（用些鮮艷的顏色： #d82f4c, #edcd59, #4d85a2, #598b3b，實際上使用的顏色分別是#cbc71e，#5a8c45，#e1c325，#ef6d39，#ec354d，#4c849e），并用文字工具添加一些文字，你可以給標簽和文字添加想用的柔和的投影樣式

標簽的圖層樣式：

文字的圖層樣式：

Within the right circle add other three circles, set Fill to 20%, add text (you can apply a soft drop shadow to the string) as shown.

在右側的圓中添加另外3個圓（顏色： #092f46），設置填充為20%，添加文本（你可以給文本添加柔和的投影），如下圖所示

Now we have to hide the excess parts of the “Design” and “Development” circles. As already seen we’ll use the Layer Mask.
Ctrl+click on the shape of the “Creativity” circle in the Layer Palette, then go to Select > Modify > Expand set the value to 3 pixels.

現在我們要隱藏Design和Development圓的超出部分。就像你們之前看到的，用的是圖層蒙版

在圖層面板上Ctrl+單擊Creativity圓，然后點擊：選擇 > 修改 > 擴展，設置擴展量為3px

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “Design.”

按Ctrl+Shift+I反向選擇，然后對Design形狀添加圖層蒙板

Repeat the operation creating a new selection and expanding it as shown. You can use Ctrl+Shift+Click when you need to add two or more selections from vector mask thumbnail; in this case we create the selection by clicking on “Design” and “Creativity” shapes.

重復上述操作，創建一個新的選區和如下所示擴大它。當你需要從兩個或兩個以上的縮覽圖添加矢量蒙版選區，您可以使用Ctrl+ Shift +單擊，通過點擊Design和Creativity的形狀，創建了復合的選區。

Ctrl+Shift+I to invert the selection and then apply layer mask to the shape named “Development.”

按Ctrl+Shift+I反向選擇，然后對Development形狀添加圖層蒙板

Apply a soft Drop Shadow to the three circles to obtain the following result.

對三個圓添加柔和的投影，得到以下結果。3個圓的其他參數都一樣，唯一的區別是角度不一樣，每個圓都要仔細的調一調

Draw a new circle.

畫一個漂亮的圓

Set Fill to 0% and add a white stroke (Size 3px).

設置填充為0%，并添加白色的描邊（大小：3px）

Convert to Smart Object, rasterize it and add a drop shadow (the same drop shadow applied to the graph in this “Step”). Finally, complete the infographic adding other lines and tags as shown in the following image.

轉換為智能對象，柵格化并添加投影（在這步添加和之前一樣的投影）。最后，按照下圖添加其他的標簽和直線