PS網頁設計教程XI——在PS中創建柔和的綠色環保的網頁布局


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

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

約定:

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

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

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

例如:(90,22,231,77),表示矩形的左上角的坐標是(90,22),寬231,高77

例如:(90,22),表示矩形的左上角的坐標是(90,22),矩形的其他兩個參數教程里已經指定

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

 

Let’s start the tutorial.

Open Photoshop and create a new document (Ctrl + N) and as a foreground color choose: #e6e5e5

讓我們開始教程

打開PS新建文檔(Ctrl + N),尺寸:1020px*1150px,設置背景顏色: #e6e5e5

image_thumb

 

Next select Rectangle Tool and create a shape on the top of the document. Dimensions 1020 by 268px, color: #f7f7f7

接下來選擇矩形工具在文檔的頂部創建一個矩形(0,0)。尺寸:1020px*268px,顏色: #f7f7f7

image_thumb11

Step 1 Creating the top area

Having Rectangle Tool selected, create a similar shape. Color (blue) #3fadbf, dimensions: 340 by 4px.

I will duplicate this shape 2 more times and I will move them to the right. For the second shape I have used this color (green) #a3b76b and for the third one (that pinky one) #bf7678.

On the left side, a little bit down, I will add my logo. Here you should add your own logo. Here is my result:

步驟1:創建頂部區域

選擇矩形工具,創建一個矩形(藍)(0,0),顏色: #3fadbf,尺寸:340px*4px

復制這個矩形兩次,並移動到右側。第二個矩形(綠)(340,0)的顏色: #a3b76b,第三個矩形(粉)(680,0)的顏色: #bf7678

在左側的下方一點,我要添加我的LOGO。這兒也能添加你自己的LOGO。這是我的結果

image_thumb2[1]

 

Now on the right side I will create the navigation. With rectangle tool I will create this shapes and with type tool I will add the links.

For the Home tab I have used this color: #3fadbf, dimensions: 75 by 47px. No layer styles applied

For the rest of the tabs (About Us, Services, Portfolio, Contact) I have applied this layer styles

 

現在在右邊要創建導航菜單。用矩形工具添加一些矩形,用文字工具添加一些鏈接。

Home導航項(471,43),顏色: #3fadbf,尺寸:75px*47px。沒有圖層樣式

其余的導航項(About Us(555,54,83,36), Services(648,54,83,36), Portfolio(740,54,83,36), Contact(832,54,83,36)),顏色: #a4a4a4,我將添加如下的圖層樣式,投影的顏色: #ababab

image_thumb21

 

image_thumb1

 

After you will apply this layer styles you should have something similar with me.
Next I will create a shadow at the bottom of the navigation. To create the shadow you will need to select Ellipse Tool, than create a similar shape.

在你添加和我接近的圖層樣式之后。

接下來,在導航欄的底部添加陰影。為了創建陰影,選擇橢圓工具,添加類似的形狀(424,86,254,8)

image_thumb1[1]

 

Then go to Filter>Blur>Gaussian Blur and here choose a radius of 7px.
You should have something like this now

然后,點擊:濾鏡 > 模糊 > 高斯模糊,選擇半徑7px。

image_thumb2

 

Now select Rectangle Tool and create a similar shape. Color: #ebebeb, dimensions: 546 by 42px. Make sure that you cover a small partition of the navigation tabs. Here is my result:

選擇矩形工具創建矩形(424,84),顏色:#ebebeb,尺寸:546px*42px,確保遮住導航欄的一小部分,這是我的結果

image_thumb3

Step 2 Creating Featured Area

With Rectangle Tool I will create this shape. Dimensions: 951 by 282px and I will apply this layer styles:

步驟2:創建特色區域

矩形工具創建一個矩形(35,126),尺寸:951px*282px(建議尺寸是950px*282px),顏色:白色。添加如下的圖層樣式:

image_thumb4

 

Next I will create another shape, just above the shape created on previous step. Dimensions: 930 by 262px, color: #c2cda6

接下來創建另一個矩形(45,136),在剛才的矩形的上方。尺寸:930px*262px,顏色: #c2cda6

image_thumb5

 

Now from my stock images, I will add this image in Photoshop:

現在從我的圖庫中添加下圖到PS中

image_thumb6

 

As you can see the image it has a white background. In order to make it look good we will need to work a little bit on it. First I will make sure that on my layer palette, the image layer is just above our green shape.Once you have the image layer above the green shape, right click on the image layer and choose “Create Clipping Mask”.You should have something like this now

 

如你所見,圖片有白色的背景。為了看起來更好一點,我們還得做一些工作。首先確定在圖層面板上,圖片圖層在綠色圖層的上方。當你的圖片圖層在綠色圖層的上方時,在圖片圖層上右鍵選擇創建剪貼蒙版。看起來就像下面所示

image_thumb7

 

As you can see the image is perfectly integrated in our green shape, but it still does not look right. The image it has a bright white at the background it it does not look really nice on our green shape. That’s why I will apply a layer mask. To do that, make sure that you have the image layer selected on your layer palette and then go to : Layer>Layer Mask>Hide All. The image will disappear and a layer mask will be created in our layer palette. Now select Gradient Tool . Make sure that you have the default palette selected (black and white )and with your mouse drag a similar line. From left to the right.As you can see on the right side we will need to create the same thing in order to have a nice image. To repeat the same step, don’t forget to apply the layer mask. Right click on that black thumbnail and choose “Apply layer mask” Then repeat the same step once again (but this time for the right edge of the image)

如你所見,圖片完整的出現中在綠色的矩形中,但還是看上去不夠好。圖片有亮白色的背景,在綠色的矩形中看起來有點刺眼。因此要添加圖層蒙版。故此,確保圖層面板上的圖片圖層被選中,然后點擊:圖層 > 圖層蒙版 > 隱藏全部。圖片會被隱藏,一個圖層蒙版會出現在圖層面板上。現在選擇漸變工具。確保選中默認的漸變(黑和白),用鼠標拖動一條從左到右的直線。如你所見,在右邊做同樣的操作,去呈現完美的圖片。重復同樣的操作,別忘添加圖層蒙版。在黑色的縮略圖上右鍵,選擇“應用圖層蒙版”,然后再重復一次操作即可(不過這次是從圖片的右側開始)

經過測試,圖片圖層在第一次添加蒙版后,“應用圖層蒙版”選項為灰色,是無法再添加蒙版。故此步驟改為在添加圖層蒙版后,選擇黑-白-黑的漸變,拖動一次漸變即可。

image_thumb8

 

Next on the right side, with Type Tool I will add some text

在圖片的右側,用文字工具添加一些文本

右側的標題文字添加如下的圖層樣式

image_thumb[1]

image_thumb[2]

 

Then I will select Rectangle Tool and I will create this shape. I will apply this layer styles:

接下來用矩形工具創建一個矩形(727,335,170,25)。並添加如下的圖層樣式:

image_thumb[3]

漸變疊加:漸變顏色為: #e2e2e2,#ffffff

image_thumb[4]

image_thumb[5]

 

And with type tool I will add some text.

並用文字工具添加一些文本

image_thumb[6]

 

Now the final step would be to add some buttons for the featured area.
I will select Ellipse Tool and I will create this shape:

最后給特色區域添加一些按鈕

橢圓工具創建一個圓(21,245,35,35)

image_thumb[7]

 

And I will apply this layer styles:

並給圓添加如下的圖層樣式:

漸變疊加的顏色: #f0f0f0,#ffffff

image_thumb[8]

image_thumb[9]

 

With Pen Tool I will create this triangle

When you have a triangle, right click in it (make sure that you still have Pen Tool selected) and choose “Make Selection”

Select Paint Bucket Tool, than on your keyboard click Ctrl + Shift + Alt + N (to create a new layer) and fill your selection with your desired color. Here is my result:

 

鋼筆工具創建三角形

當你完成三角形后,右鍵它(確保鋼筆工具仍然選中)選擇“轉為選區”

油漆桶工具,按鍵盤上的Ctrl+Shift+Alt+N(新建圖層),然后用醒目的顏色填充選區。這是我的結果

直接用多邊形工具即可,選中多邊形工具,邊數選擇為3,然后按住Shift,畫一個正三角形即可。

image_thumb[10]

 

I will apply this layer styles:

添加如下的圖層樣式

image_thumb[11]

image_thumb[12]

顏色疊加的顏色: #d3d3d3

image_thumb[13]

 

I will create another button on the right side also. Here is my result for Featured Area

在特色區域的右側創建另一個按鈕。這是我特色區域的結果

image_thumb[14]

 

Step 3 Creating the middle area

Well, this area it’s really easy to create. First I select Rectangle Tool and I will create 3 shapes. Each shape has the following dimensions: 308 by 221px. Colors: for the first shape (soft blue) #a1b7ba, the second one (soft green) #c1c7b0, the third one (pinky) #c2afaf

步驟3:創建中部區域

很好,這部分的區域很容易制作。首先選擇矩形工具創建3個矩形。每個矩形的尺寸:308px*221px。顏色:第一個矩形(36,423)(柔藍)#a1b7ba,第二個(356,423)(柔綠)#c1c7b0,第三個(675,423)(粉色)#c2afaf

image

 

Now I will create another layer on my layer palette (to do so, press Ctrl + Shift + Alt + N on your keyboard) , then I will select a soft brush, I’ll make sure that the foreground color is set to white , I will reduce the opacity to 13% and I will increase the brush size to 200%, than I will gently push few times with the brush on each shape.
現在在我的圖層面板上新建一個圖層(要做此步,按鍵盤上的Ctrl+Shift+Alt+N),然后選擇一個柔和的筆刷,確保前景色設置為白色,然后調整不透明度為13%和畫刷的大小為200%(應該是200px),然后在每個矩形上點擊數次

 

Here is my result:

這是我的結果:

image

 

Then I will select Ellipse Tool and I will create this shape (the black one, at the bottom of the rectangle)

選擇橢圓工具創建如下的橢圓(36,638,308,8)(黑色的,在矩形的底部)

image

 

and I will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 7px. I will make the same thing for the next 2 shapes, and here’s my result:

對橢圓添加高斯模糊(點擊:濾鏡 > 模糊 > 高斯模糊),半徑:7px。對右邊的兩個矩形做同樣的步驟。這是我的結果:

image

 

Next I will select Rectangle Line tool and I will add 2 lines on each shape. This line it will serve as a separator between the content and the title. Each line has this dimensions: 244 by 1px

接下來選擇直線工具,對每個矩形添加2條直線。這直線作為標題和內容的分隔線。每條直線的尺寸:244px*1px


And here are the colors. For the first one: first shape (the darker one) : #b2bdbf the second one #d3dbdc

直線的顏色設置。第一個矩形:第一條直線(60,466)(深色的那個):#b2bdbf(應該是#93a1a3比較合適),第二條直線:#d3dbdc(應該是#c8d9db比較合適)

image

The second one : first shape (the darker one) : #abb09f the second one #e0e5d1

第二個矩形:第一條直線(380,466)(深色的那個):#abb09f,第二條直線:#e0e5d1

image

 

The third one : first shape (the darker one) : # b09fa0 the second one # e3d4d5

第三個矩形:第一條直線(699,466)(深色的那個):#b09fa0,第二條直線:#e3d4d5

image

 

這里一段題外話,為何第一個矩形的兩條直線的顏色要修正?原因是原來的顏色不協調,看看下面的兩個圖,左邊是修正后的效果,右圖是原來的顏色

image image

很明顯,右邊原來的顏色是不協調的。

那是怎么修正的呢?看下面的分析過程

首先把矩形和兩條直線的顏色都轉換為HSV模式,相關內容參看我的“計算機中的顏色”系列文章

第一個矩形:

矩形:#a1b7ba,HSV:(187,13,73)

深線:#b2bdbf,HSV:(189,7,75)

淺線:#d3dbdc,HSV:(187,4,86)

第二個矩形:

矩形:#c1c7b0,HSV:(76,12,78)

深線:#abb09f,HSV:(78,10,69)

淺線:#e0e5d1,HSV:(75,9,90)

第三個矩形:

矩形:#c2afaf,HSV:(0,10,76)

深線:#b09fa0,HSV:(356,10,69)

淺線:#e3d4d5,HSV:(356,7,89)

后面兩個矩形的直線的顏色還是協調的,於是分析后面兩條直線的顏色

可以看出

深線的H分量和矩形的H分量差不多,S分量也差不多,V的分量少了10左右

淺線的H分量和矩形的H分量差不多,S分量略微少一點,V的分量多了10左右

注:H分量表示顏色的色相,色相是環狀的,0也就是360,所以0和356相差是4,也就是差不多

於是,按照上面的規律發現第一個矩形的直線的顏色是不協調的,按照上面的規律進行調整

深線的顏色調整為:#93a1a3,HSV:(189,10,64)

淺線的顏色調整為:#c8d9a6,HSV:(187,9,83)

之前看過一篇文章,出處忘記了,說是如何快速制作類似的分割線

深線基於底色,H分量和S分量不動,H分量減少10%左右

淺色基於底色,H分量個S分量不動,H分量增加10%左右

淺色緊挨着深色,淺色在深色的下方

 

Next with Type Tool I will add some text and from Premium Files I will use “Weather Vector Icons” and ” Vector Trees Icons” .
接下來用文字工具添加一些文本,從Premium Files中,將使用Weather Vector Icons和Vector Trees Icons。

 

Here’s my result

這是我的結果

image

 

Step 4 Creating the content area and the Footer

步驟4:創建內容區域和頁腳

 

To create the content area, select first Rectangle Tool and create a similar shape:

要創建內容區域,選擇矩形工具,創建一個矩形(38,658,944,426),顏色:白色

image

 

和之前的添加陰影的操作一樣,先用橢圓工具創建一個橢圓(38,1076,944,8),在點擊:濾鏡 > 模糊 > 高斯模糊,半徑:7px

image

 

Having Rectangle Tool selected create another shape at the bottom of the previous shape. This one it will be used for footer

矩形工具在剛才的矩形的底部創建另一個矩形(0,1038,1020,112),顏色: #efefef。這個矩形就是用來做頁腳部分

image

 

在底部添加三個矩形:

矩形(0,1147,340,3),顏色: #3fadbf

矩形(340,1147,340,3),顏色: #a3b76b

矩形(680,1147,340,3),顏色: #bf7678

image

 

Next I will select Ellipse Tool and I will create this shape

接下來用橢圓工具創建如下的橢圓(664,670,12,400)

image

 

Then I will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 50 px. I will select Rectangular Marque Tool and I will make this selection

添加高斯模糊(點擊:濾鏡 > 模糊 > 高斯模糊),半徑為50px。選擇矩形選擇工具,創建如下的選區

image

 

I will hit Delete on my keyboard than I will push Ctrl + D (to unload the selection)

按鍵盤上的Delete鍵,然后按Ctrl + D(取消選區)

image


Then with Type Tool I will add some text, I will create some buttons in the same way I have do it for the Featured Area

文字工具添加一些文本,創建一些按鈕,用和在Featured Area中的按鈕的方法一致。

 

此步驟寫得極為簡略,故在此補充的相對完善一些

矩形工具添加矩形(62,684,561,41),顏色: #c1bbbb,和矩形(700,684,251,41),顏色: #abbec2

並添加相應的文本

image

 

添加一張圖片,添加如下的描邊圖層樣式,描邊顏色: #d4d4d4

image

 

在圖片的下方添加一些文字,並在右側的矩形下方也添加一些文字

image

 

在右側的文字下方,添加三個矩形,分別是(707,876,142,25)、(707,913,142,25)、(707,948,228,84),圖層樣式復制Featured Area中的的三角形的圖層樣式,並添加相應的文字

image

 

矩形工具添加兩個矩形,分別是(527,1042,93,25)、(843,1042,93,25),圖層樣式復制Featured Area中的按鈕的圖層樣式,並添加相應的文字

image

 

最后,在左下角添加版權信息

image

 

最終的結果如下:

image

 

后記:

本教程采用的是柔和的顏色,實際上選用了紅綠藍三色,三種顏色的柔和顏色都選得不錯。可以為日后做個參考。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM