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

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

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

教你網(wǎng)站熱點鏈接欄目的設(shè)計方法教程

綠客:2013-09-03 09:36:14 發(fā)布

1.圖標(biāo)與熱點鏈接標(biāo)題

熱點鏈接的圖標(biāo)和信息中心的圖標(biāo)一樣,因此我們采取復(fù)制圖層的方法。按住鼠標(biāo)左鍵將圖層面板中“信息中心圖標(biāo)”圖層拖動到創(chuàng)建新圖層按鈕上,從而復(fù)制得到“信息中心圖標(biāo)層副本”,改名為“熱點鏈接圖標(biāo)”,使用移動工具將該圖標(biāo)移動到如圖位置,可以借助鍵盤上的方向鍵實現(xiàn)位置的微調(diào)。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖一)

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖一)
 

同樣復(fù)制信息中心 News文字層,使用移動工具將文本移動到熱點鏈接圖標(biāo)后位置,使用文本工具選擇文字,改為“熱點鏈接 Hot”。我們這里使用復(fù)制得到文字的方法是為了省去文字屬性的設(shè)置,保證欄目文字的一致性。使用文本工具,設(shè)置文字大小與字體,輸入熱點鏈接下面的文字信息,如圖所示。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖二)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖二)

 

2.熱點鏈接圖形

使用圓角矩形工具,設(shè)置圓角半徑為8,創(chuàng)建圓角矩形路徑,使用路徑選擇工具選擇路徑,單擊鼠標(biāo)右鍵創(chuàng)建選區(qū),如圖所示。選擇菜單“編輯|描邊”命令,設(shè)置描邊顏色為淡灰(R:210,G:208,B:208),寬度為1像素,對選區(qū)描邊,如圖所示。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖三)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖三)

單擊路徑面板,單擊面板中的工作路徑,如圖所示,從而在設(shè)計圖中顯示工作路徑,使用路徑選擇工具移動該路徑到圓角矩形右側(cè),同樣建立選區(qū)對路徑描邊。按照上面的方法得到3個圓角矩形。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖四)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖四)

 

3.熱點鏈接圖標(biāo)

選擇菜單“文件|打開”命令,打開配套光盤中“\源文件\6\素材\電腦.png”文件,使用移動工具把電腦圖片移動到效果圖上,新移進(jìn)的圖形會出現(xiàn)在自動生成的“圖層X”中。按<Ctrl+T>對圖片自由變形,結(jié)果如圖所示,并改變圖層的名稱為“電腦”。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖五)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖五)

在“電腦”圖層下創(chuàng)建“電腦陰影”圖層,使用橢圓選擇工具創(chuàng)建正圓形選區(qū)。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖六)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖六)

單擊工具欄中的設(shè)置默認(rèn)的前景背景色圖標(biāo) ,設(shè)置“前景色/背景色”顏色為默認(rèn)的“黑色/白色”,使用漸變工具,設(shè)置填充方式為徑向,顏色為前景到透明,前景色不透明度為70%。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖七)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖七)

為選區(qū)填充漸變顏色,如圖所示。按<Ctrl+T>對選區(qū)變形為橢圓形,按<Ctrl+D>取消選區(qū),結(jié)果如圖所示。
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖八)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖八)

 

4.熱點鏈接文字

使用文本工具,設(shè)置英文字體為Arial,中文字體為漢儀中圓簡,顏色為深灰(R:80,G:80,B:80),安排好熱點鏈接的文字信息。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖九)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖九)

 

5.熱點鏈接“GO”

創(chuàng)建“熱點go”圖層,使用圓角矩形工具,設(shè)置圓角半徑為10px,創(chuàng)建圓角矩形路徑,使用路徑選擇工具,單擊鼠標(biāo)右鍵創(chuàng)建選區(qū),設(shè)置前景色為(R:188,G:248,B:255)背景色為(R:17,G:106,B:236),使用漸變工具,設(shè)置漸變方式為菱形,從中心向外拖動鼠標(biāo),為選區(qū)填充從前景到背景的漸變顏色,使用文本工具,設(shè)置字體為Bitsumishi,大小為10,顏色為白色,設(shè)置字體與顏色,結(jié)果如圖所示。如果沒有對應(yīng)的字體,可以選擇適當(dāng)?shù)淖煮w替換。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖十)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖十)

采用同樣的方法我們可以設(shè)計“交通路線”和“今日天氣”兩個熱點鏈接欄目。對于文字可以采用復(fù)制圖層的方法得到,然后修改文字即可;對于陰影的圖形也可以使用復(fù)制圖層的方法得到,然后改變大小即可。“交通路線”欄目圓角矩形按鈕的顏色為深灰色(R:111,G:111,B:111),“今日天氣”圓角矩形按鈕的顏色為淺灰色(R:165,G:165,B:165)。

網(wǎng)站熱點鏈接欄目設(shè)計教程(圖十一)
網(wǎng)站熱點鏈接欄目設(shè)計教程(圖十一)

至此“網(wǎng)站熱點鏈接欄目的設(shè)計方法教程”結(jié)束,科普云煙臺網(wǎng)站建設(shè)網(wǎng)頁設(shè)計部整理發(fā)布。

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