您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> ps教程 >> 瀏覽設計教程

網(wǎng)頁設計教程-橙色標題欄的內容框設計(附psd下載)

先看下橙色標題欄的內容框設計(也是常用的折角)最終效果:

1. 新建文檔 大小為400×400像素

2. 繼續(xù)把背景改為 #000000 然后準備工作就完成了,開始關鍵步驟;

3.使用圓角矩形工具畫出一個類似下面10px半徑的一個圓矩形;

4. 然后通過右擊圓角矩形圖層,選擇混合選項,輸入數(shù)值如下;


5. 做出如下效果的圓角矩形來;

6. 接下來使用矩形選框工具,框選出類似于下面的一個選擇框用白色填充它

7. 顯然的,我們不會保持它的白色,所以讓我們繼續(xù)選擇我們的圖層,然后右擊輸入下面的混合選項;



8. 再做出類似下圖的效果

9. 接下來,我們將我們的'旗幟'的褶皺(折角)會給我們帶來我們所需要的角度。使用多邊形套索工具創(chuàng)建一個類似于以下選擇,并填寫FFFFFF

10. 然后輸入下面的混合選項:


11. 換另一側重復同樣的步驟,你應該做出來有一些看起來像這樣;

12. 接下來的事情,我們要做的加上我們的內容框中標題。所以讓我們繼續(xù),拿出你的文字工具,輸入一些文字,標題:

13. 白色看上去有點平淡。所以,我們想要做什么,是正確的點擊輸入層和下面的混合選項


14. 大體是這個樣子,這樣看起來好多了

15. 繼續(xù),把你的文字復制,確保所有混合選項被關閉,在這個新的層和字體顏色設置FFFFFF。您的原始文字層下面這層然后用方向鍵向下移動1px的。(這樣就做出了一個像素的高亮投影)

16. 亮度太強了,調低到28%,效果類似于這樣:

17. 大功告成,這樣你可以再添加一些裝飾用的圖標,看上去就好很多了。

 下載信息  [文件大?。?5.43 KB 下載次數(shù): 次]
點擊下載文件:contentboxpsd


 

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1488.html
網(wǎng)頁PS教程:制作晶塊炫彩背景圖(附psd下載)
設計中曲線的連續(xù)
圖趣網(wǎng)微信
建議反饋
×