作者:佚名　  出處:發現吧

在本教程你將學習到如何制作一個簡潔的組合網頁包含多云的標題. 如果你對于本教程有任何不懂的地方歡迎在評論中提出. 另外,記得所有的教程結尾均有PSD文件下載.

最后結果

教程資源

• Mono圖標集
• Lightning Bolt 圖標

開始制作

1. 我們要做的第一件事就是新建ps文件,大小1020×1000.

2. 使用矩形選區工具制作如下選區,填充顏色 #C9EFFA.

3. 在圖層面板右鍵根據下圖增加圖層選項.

4. 在你剛才圖層下面再建新的圖層,在文檔的空白處繪制出選區,填充顏色#535353. 這一部分將充當你余下文檔的背景. 復制該層(Command+J), 然后回到原始圖層.

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

6. 接著在你的圖層面板中選擇復制圖層接著點擊濾鏡>雜色>添加雜色. 在彈出的對話框里設置:

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

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

9. 填充你的選區為#FFFFFF, 然后增加如下圖層樣式:

10. 對于 logo我使用Myriad Pro字體 顏色為#5EADC6. logo的小圖標可以在上面下載.

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

12. 在你的圓角矩形上, 添加混合樣式:

13. 在云朵層后面, 我們將增加藍色的條紋. 選擇矩形選區工具繪制簡單的矩形如下不斷重復直至跨越整個屏幕:

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

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

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

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

18. 為這個層增加圖層樣式:

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

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

21. 為縮略圖增加下面圖層樣式:

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

23. 現在增加如下樣式:

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

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

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

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

28. 選區填充#FFFFFF, 然后為圖層插入圖層樣式:

29. 接著在云朵里面增加簡單的鏈接.

30. 對于聯系表格,我先給你看我們制作的最終結果, 待會會展示如何制作.

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

32. 對于“send email” 按鈕, 為你的圖層添加如下圖層樣式,并且在上面加上白色的文字.

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

原文地址

翻譯自:http://www.faxianba.net/?p=1775,轉載請保留鏈接

下載psd