Photoshop製作雲朵標題的網頁布局

導言：

在本教程你將學習到如何製作一個簡潔的組合網頁包含多雲的標題. 如果你對於本教程有任何不懂的地方歡迎在評論中提出。

最後結果

 
教程資源：
Mono圖標集
Lightning Bolt 圖標

開始製作
1. 我們要做的第一件事就是新建ps文件,大小1020×1000.（圖01）

  
圖01

2. 使用矩形選區工具製作如下選區,填充顏色 #C9EFFA.（圖02）

 
圖02

3. 在圖層麵板右鍵根據下圖增加圖層選項.（圖03、04、05）

 
圖03

 
圖04

 
圖05

4. 在你剛才圖層下麵再建新的圖層,在文檔的空白處繪製出選區,填充顏色#535353. 這一部分將充當你餘下文檔的背景. 複製該層(Command+J), 然後回到原始圖層.（圖06）

 
圖06

#p#e#

5. 現在根據以下圖層選項為原始圖層增加灰色背景.（圖07、08）

 
圖07

 
圖08

6. 接著在你的圖層麵板中選擇複製圖層接著點擊濾鏡>雜色>添加雜色. 在彈出的對話框裏設置:（圖09）

 
圖09

7. 降低複製圖層的透明度為 65%, 混合模式更改為疊加.

8. 是時候製作你的雲朵標頭了.使用橢圓形工具創建橢圓然後按住 shift鍵不斷的增加你的選區 直到看起來類似這樣:（圖10）

 
圖10

9. 填充你的選區為#FFFFFF, 然後增加如下圖層樣式:（圖11、12、13、14）

 
圖11

 
圖12

 
圖13

 
圖14

10. 對於 logo我使用Myriad Pro字體 顏色為#5EADC6. logo的小圖標可以在上麵下載.（圖15）

 
圖15

#p#e#

11. 導航非常簡單. 所有鏈接的字體設置為Helvetica.我們激活鏈接的顏色為#FFFFFF, 沒有激活為#B64366. 然後選擇圓角矩形工具半徑設置為15px繪製簡單的圓角矩形:（圖16）

 
圖16

12. 在你的圓角矩形上, 添加混合樣式:（圖17、18）

 
圖17

 
圖18

13. 在雲朵層後麵, 我們將增加藍色的條紋. 選擇矩形選區工具繪製簡單的矩形如下不斷重複直至跨越整個屏幕:（圖19）

 
圖19

14. 減低條紋的透明度為17%, 改變它的混合模式為柔光. 接著增加一些你公司的描述性文字使用 Georgia字體 顏色為#51656A.然後我使用了 Mono 圖標集合的其中一個圖標.（圖20）

 
圖20

15. 對於內容區域我們再一次選擇矩形選區工具 根據下圖繪製選區如下填充顏色為#FFFFFF.（圖21）

 
圖21

16. 為你的矩形圖層增加圖層樣式如下.（圖22）

 
圖22

17. 下一步是為每個選區創建標題. 使用矩形選區工具繪製簡單的矩形 根據下圖填充顏色為#000000. 然後使用橢圓形選區工具繪製簡單的圓形如下.選擇上麵兩個圖層並且合並.（圖23）

 
圖23

18. 為這個層增加圖層樣式:（圖24、25、26）

 
圖24

 
圖25

 
圖26

#p#e#

19.在圓中我插入 Mono圖標集中的心形圖標並且增加顏色疊加#BF637F. 字體為Helvetica,顏色#494949.（圖27）

 
圖27

20. 接下來添加你代表性作品的縮略圖展示, 然後在他們右邊增加描述性文字.（圖28）

 
圖28

21. 為縮略圖增加下麵圖層樣式:（圖29）

 
圖29

22. 我們需要給用戶一個快速的選項一遍瀏覽我們所有的作品. 因此我需要新建一個按鈕長度跟主題相適應. 選擇橢圓形選區工具, 開始繪出選區如下,填充顏色#000000. 記得按住 shift鍵增加你的選區.（圖30）

 
圖30

23. 現在增加如下樣式:（圖31、32）

 
圖31

 
圖32

24. 在按鈕左側增加 Georgia字體文字,顏色#2C86A2. 然後使用圖標集中的箭頭圖標,顏色疊加#87C8DC.（圖33）

 
圖33

25. 下一個區域我們需要重複步驟17, 但是有一點不同的是為你的圖層增加下列樣式和不透明度降低為 68%.（圖34、35、36）

 
圖34

 
圖35

 
圖36

26. 你的結果看起來應該類似這樣:（圖37）

 
圖37

#p#e#

27. 為最新文章列表增加雲朵以適應主題. 再一次選擇橢圓選區工具繪製簡單的選區如下記得按住SHIFT鍵.（圖38）

 
圖38

28. 選區填充#FFFFFF, 然後為圖層插入圖層樣式:（圖39）

 
圖39

29. 接著在雲朵裏麵增加簡單的鏈接.（圖40）

 
圖40

30. 對於聯係表格,我先給你看我們製作的最終結果, 待會會展示如何製作.（圖41）

 
圖41

31. 對於輸入框, 使用矩形工具填充顏色為#3F3F3F. 然後為你的圖層增加樣式:（圖42）

 
圖42

32. 對於“send email” 按鈕, 為你的圖層添加如下圖層樣式,並且在上麵加上白色的文字.（圖43、44、45、46）

 
圖43

 
圖44

圖45

圖46

33.最後一件事就是增加簡單的頁腳，最終結果如下:

原文鏈接：http://devisefunction.com/2010/04/13/simple-cloudy-portfolio-layout-in-photoshop/

轉載自：http://www.faxianba.net/?p=1775