網(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