科普云煙臺(tái)網(wǎng)站建設(shè)

煙臺(tái)哪家網(wǎng)絡(luò)公司好,煙臺(tái)網(wǎng)站建設(shè)哪家物美價(jià)廉,請(qǐng)聯(lián)系“科普云”0535-3609990

您正在閱讀:首頁(yè) > 建站知識(shí) > 策劃設(shè)計(jì)美工 > 正文

煙臺(tái)網(wǎng)頁(yè)設(shè)計(jì)教你設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

綠客:2013-09-09 11:20:16 發(fā)布

1.左側(cè)導(dǎo)航背景

選擇背景圖層,新建左側(cè)背景圖層,使用矩形選擇工具創(chuàng)建矩形選區(qū),填充顏色(R:219,G:242,B:254),結(jié)果如圖所示。

內(nèi)頁(yè)左側(cè)導(dǎo)航的設(shè)計(jì)
內(nèi)頁(yè)左側(cè)導(dǎo)航的設(shè)計(jì)

顯示標(biāo)尺,將鼠標(biāo)移到邊緣拖動(dòng)水平輔助線到如圖所示位置,作為左側(cè)欄目的上面界限,這樣做是為了切圖的方便,能夠?qū)⒅鲌D和欄目分開(kāi),并且將熱點(diǎn)鏈接圖形都放在主圖區(qū)域的切片上。

\

在最上面的圖層上面創(chuàng)建“左側(cè)欄目”圖層,使用圓角矩形工具創(chuàng)建圓角矩形路徑,切換到路徑面板單擊工作路徑,使用將路徑作為選區(qū)載入按鈕創(chuàng)建選區(qū),為選區(qū)填充白色,如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法
設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

2.欄目文字背景設(shè)計(jì)

在“左側(cè)欄目”圖層上創(chuàng)建“欄目文字背景”圖層,使用矩形選擇工具創(chuàng)建矩形選區(qū),設(shè)置前景色為(R:83,G:176,B:229),背景色為(R:32,G:96,B:132),使用漸變工具從上向下填充從前景到背景的顏色漸變,結(jié)果如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法
設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

在“欄目文字背景”上新建“斜線”圖層,選擇菜單“文件|打開(kāi)”命令,打開(kāi)配套光盤中“\源文件\6\素材\斜線.png”文件,按放大圖片,選擇菜單“編輯|定義圖案”命令,定義斜線圖案,如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法
設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

切換到效果圖文件的斜線圖層,確保在選定矩形選區(qū)的情況下,選擇菜單“編輯|填充”,使用“圖案”填充,自定圖案選定剛才定義的“斜線”,填充結(jié)果如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法
設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

 我們發(fā)現(xiàn)填充的顏色很深,選擇圖層不透明度選項(xiàng),設(shè)置圖層不透明度為20%左右,如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

拖動(dòng)兩條垂直的輔助線到上面矩形的兩側(cè),使用矩形創(chuàng)建矩形選區(qū),填充灰色(R:221,G:221,B:221)。使用矩形工具創(chuàng)建矩形選區(qū),在對(duì)四行灰色文字背景做小圖標(biāo)式的描邊,如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

我們發(fā)現(xiàn)填充的顏色很深,選擇圖層不透明度選項(xiàng),設(shè)置圖層不透明度為20%左右,如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

3.導(dǎo)航文字設(shè)計(jì)

使用文本工具輸入文字,如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

4.聯(lián)系電話設(shè)計(jì)

創(chuàng)建電話背景圖層,使用圓角矩形工具創(chuàng)建圓角矩形,創(chuàng)建選區(qū),進(jìn)行白色描邊。導(dǎo)入電話圖形,使用文本工具輸入聯(lián)系電話,并復(fù)制電腦陰影得到電話陰影效果結(jié)果如圖所示。

設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法

煙臺(tái)網(wǎng)頁(yè)設(shè)計(jì)教你設(shè)計(jì)出內(nèi)頁(yè)左邊欄目的方法到此結(jié)束,同學(xué)們可以反復(fù)練習(xí)下,很多方法做的多了自然就有了??破赵茻熍_(tái)網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)部。

(科普云-企業(yè)網(wǎng)站建設(shè))為您解讀更多"煙臺(tái)網(wǎng)頁(yè)設(shè)計(jì),內(nèi)頁(yè)欄目設(shè)計(jì)"相關(guān)知識(shí)。
科普云一直致力于互聯(lián)網(wǎng)品牌策劃與設(shè)計(jì),做煙臺(tái)最有創(chuàng)意的網(wǎng)絡(luò)公司。(官網(wǎng):m.federalmarketingsolutions.com
更多
Copyright © 2006-2020 by 煙臺(tái)市科普云網(wǎng)絡(luò)科技有限公司. 技術(shù)客服:0535-3609990 15563895127
主營(yíng)業(yè)務(wù): 煙臺(tái)網(wǎng)站建設(shè)、煙臺(tái)網(wǎng)站制作、煙臺(tái)網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、煙臺(tái)網(wǎng)絡(luò)公司、煙臺(tái)虛擬主機(jī)、煙臺(tái)網(wǎng)站改版、煙臺(tái)域名注冊(cè)