在網(wǎng)頁與多媒體界面設(shè)計(jì)過程中，經(jīng)常會使用到一些線條及邊框設(shè)計(jì)，以對界面區(qū)域進(jìn)行劃分，特別是在網(wǎng)頁中，線條及邊框設(shè)計(jì)比較多。本小節(jié)將介紹網(wǎng)頁中常用線條及邊框設(shè)計(jì)的制作方法。

一、虛線的制作

在網(wǎng)頁中，虛線是一種最常見的線條及邊框設(shè)計(jì)，它一方面可以使網(wǎng)頁結(jié)構(gòu)清晰，另一方面也對畫面起修飾與點(diǎn)綴作用。

(1)執(zhí)行“文件>新建”菜單命令，如下圖所示。

(2)雙擊工具箱中的“抓手工具”，將圖像放大顯示。
(3)選擇工具箱中的“矩形選框工具”在工具選項(xiàng)欄中設(shè)置“羽化”值為0，在圖像窗口中拖動鼠標(biāo)，在中間建立一個像素的選擇區(qū)域，然后填充為黑色，如下圖所示。

(4)按CtrL+A快捷鍵全選圖像，執(zhí)行菜單欄中的“編輯>定義匿案”命令，在彈出的“定義圖案”對話框中單擊“確定”按鈕，則定義了圖案。
(5)重新建立個圖像文件，然后選擇工具中的“單行選框工具”，建立一個單行選擇區(qū)域，在執(zhí)行菜單欄中的“編輯>填充”命令，在彈出的“填充”對話框中選擇剛剛定義的圖案進(jìn)行填充，結(jié)果就會產(chǎn)生虛線，將虛線應(yīng)用到網(wǎng)頁中的效果如下圖所示。

二、立體線條的制作

使網(wǎng)頁中的線條及邊框設(shè)計(jì)具有一種獨(dú)立感，可以極大地豐富網(wǎng)頁的視覺效果，創(chuàng)建更活躍的網(wǎng)頁界面，這里介紹一種獨(dú)立感線條的制作方法。
(1)執(zhí)行“文件>新建”菜單命令，創(chuàng)建一個尺寸為9．5cm×5cm、分辨率為72像素/英寸的圖像文件。
(2)設(shè)置背景色的RGB值為95、98、1 01，將圖像背景色填充為灰色。
(3)將圖像以200%的比例放大顯示。
(4)選擇工具相中的“鉛筆工具”，在鉛筆工具選項(xiàng)欄中設(shè)置參數(shù)，如下圖所示。

(5)打開“畫筆”面板，設(shè)置參數(shù)，如下圖所示。

(6)創(chuàng)建一個新圖層“圖層1”。
(7)設(shè)置前景色的RGB值為1 93、1 94、198，按住Shift鍵的同時在畫面中水平拖動鼠標(biāo)，繪制一條兩個寬度的虛線，如下圖所示。

(8)創(chuàng)建一個新圖層“圖層2”，然后設(shè)置前景色為黑色，在按住Shift鍵的同時在灰色線條的上方水平拖動鼠標(biāo)，再繪制出一條相同長度的黑色虛線。
(9)選擇工具箱中的“移動工具”，然后使用方向鍵微移“圖層2”的黑色虛線，使“圖層1”與“圖層2”中的兩條虛線產(chǎn)生交錯效果，兩條虛線偏移1個像素，如下圖所示。

(10)雙擊工具箱中的“放大鏡工具”，使圖像以1 00%的比例顯示，則產(chǎn)生了立體效果，如下圖所示。

如果將這樣的立體線條應(yīng)用到網(wǎng)頁設(shè)計(jì)中，將產(chǎn)生很好的視覺效果，如下圖所示，將這種線條重復(fù)使用，可以形成大面積的分割區(qū)域。

三、斜紋線條的制作

斜紋線條多用作網(wǎng)頁中某一功能區(qū)的底紋使用，使用它作為分割線的情況比較少見。斜紋線條的制作主要運(yùn)用了Photoshop軟件的自定義圖案技術(shù)，具體操作步驟如下。
(1)執(zhí)行“文件>新建”菜單命令，創(chuàng)建個尺寸為9．5cm x 5cm、分辨率為72像素/英寸的圖像文件。
(2)設(shè)置背景色的RGB值為95、98、1 01，將圖像背景填充為灰色。
(3)將圖像以1600%的比例放大顯示。
(4)創(chuàng)建一個新圖層“圖層1”。
(5)選擇工具箱中的“鉛筆工具”，在鉛筆工具選項(xiàng)欄中設(shè)置參數(shù)，如下圖所示。

(6)設(shè)置前景色的RGB值為1 90、1 91、1 92，在畫面中單擊，繪制出兩條平行的，由1 0個像素組成的傾斜線條，如下圖所示。

(7)選擇工具箱中的“矩形工具”，在工具選項(xiàng)欄中設(shè)置“羽化”值為O，然后在畫面中拖曳鼠標(biāo)，創(chuàng)建一個矩形選擇區(qū)域，然后在“圖層”面板中隱藏“背景”層，如下圖所示。

(8)執(zhí)行“編輯>定義圖案”菜單命令，在彈出的“圖案名稱”對話框中輸入名稱，然后單擊“確定”按鈕，如下圖所示。

(9)按Ctrl+A快捷鍵全選圖像，然后按Delete鍵刪除選擇區(qū)域內(nèi)的圖像。
(1 0)選擇工具箱中的“矩形選框工具”，在畫面中創(chuàng)建一個矩形選擇區(qū)域。
(1 1)選擇工具箱中的“油漆桶工具”，在“油漆桶工具”選項(xiàng)欄中單擊，選擇剛剛存儲的圖案名稱，如下頁圖所示。

(1 2)在選擇區(qū)域內(nèi)單擊，填充圖案，然后按Ctrl+D快捷鍵取消選擇區(qū)域效果，如下圖所示。

將這種斜紋線條應(yīng)用到網(wǎng)頁設(shè)計(jì)中，既可以作為功能區(qū)的底紋，也可以作為一種點(diǎn)綴，如下圖所示，我們將這種斜紋線條應(yīng)用在導(dǎo)航條右側(cè)的空白區(qū)上，平衡了整個頁面，并且增強(qiáng)了節(jié)奏感，頁面更加和諧、清晰。

四、交叉紋線條的制作

與斜紋線條～樣，交叉紋線條也多用于網(wǎng)頁功能模塊的底紋，制作方法與思路跟斜紋線條基本一致，關(guān)鍵是準(zhǔn)確定義好圖案樣本，這一點(diǎn)很重要。
(1)執(zhí)行“文件>新建”菜單命令，創(chuàng)建一個尺寸為9．5cm×5cm、分辨率為72像素/英寸的圖像文件。
(2)設(shè)置背景色的RGB值為95、98、101，將背景色填充為灰色。
(3)將圖像以1 600%的比例放大顯示。
(4)創(chuàng)建一個新圖層“圖層1”。
(5)選擇工具箱中的“鉛筆工具”，在“鉛筆工具”選項(xiàng)欄中設(shè)置參數(shù)，如下圖所示。

(6)設(shè)置前景色的RGB值為1 90、1 91、1 92，在畫面中單擊，繪制出一個由單個像素組成的圖像，如下圖所示。

(7)選擇工具箱中的“矩形選框工具”，在工具選項(xiàng)欄中設(shè)置“羽化”值為O，在畫面中拖動鼠標(biāo)，創(chuàng)建一個正方形選擇區(qū)域，如下圖所示，將圖像選中，然后在“圖層”面板中隱藏“背景”層。

(8)執(zhí)行“編輯>定義圖案”菜單命令，在彈出的“圖案名稱”對話框中輸入名稱，然后存儲圖案。
(9)按Delete鍵刪除選擇區(qū)域內(nèi)的圖像，然后顯示“背景”層，重新使用“矩形選框工具”在畫面中創(chuàng)建一個矩形選擇區(qū)域。
(1 O)選擇工具箱中的“油漆桶工具”，在油漆桶工具選項(xiàng)欄中單擊，選擇剛剛存儲的圖案。
(11)在選擇區(qū)域內(nèi)單擊，填充圖案，效果如下圖所示。

在網(wǎng)頁設(shè)計(jì)中，我們使用交叉紋線條作為導(dǎo)航條的底紋，使得頁面顯得很清凈而又不單調(diào)，如下圖所示，與其他的按鈕式導(dǎo)航條相比，這種設(shè)計(jì)具有制作方法簡單、效果突出的特點(diǎn)。

最新評論