Photoshop繪制簡潔的包含云朵主題的網(wǎng)頁

在本教程你將學(xué)習(xí)到如何制作一個(gè)簡潔的組合網(wǎng)頁包含多云的標(biāo)題. 如果你對于本教程有任何不懂的地方歡迎在評論中提出. 另外,記得所有的教程結(jié)尾均有PSD文件下載.

最后結(jié)果

教程資源

• Mono圖標(biāo)集
• Lightning Bolt 圖標(biāo)

開始制作

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

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

3. 在圖層面板右鍵根據(jù)下圖增加圖層選項(xiàng).

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

5. 現(xiàn)在根據(jù)以下圖層選項(xiàng)為原始圖層增加灰色背景.

6. 接著在你的圖層面板中選擇復(fù)制圖層接著點(diǎn)擊濾鏡>雜色>添加雜色. 在彈出的對話框里設(shè)置:

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

8. 是時(shí)候制作你的云朵標(biāo)頭了.使用橢圓形工具創(chuàng)建橢圓然后按住 shift鍵不斷的增加你的選區(qū) 直到看起來類似這樣:

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

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

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

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

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

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

15. 對于內(nèi)容區(qū)域我們再一次選擇矩形選區(qū)工具 根據(jù)下圖繪制選區(qū)如下填充顏色為#FFFFFF.

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

17. 下一步是為每個(gè)選區(qū)創(chuàng)建標(biāo)題. 使用矩形選區(qū)工具繪制簡單的矩形 根據(jù)下圖填充顏色為#000000. 然后使用橢圓形選區(qū)工具繪制簡單的圓形如下.選擇上面兩個(gè)圖層并且合并.

18. 為這個(gè)層增加圖層樣式:

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

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

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

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

23. 現(xiàn)在增加如下樣式:

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

25. 下一個(gè)區(qū)域我們需要重復(fù)步驟17, 但是有一點(diǎn)不同的是為你的圖層增加下列樣式和不透明度降低為 68%.

26. 你的結(jié)果看起來應(yīng)該類似這樣:

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

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

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

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

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

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

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

原文地址

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

下載psd