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

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è)計教程（圖一）
 

同樣復(fù)制信息中心 News文字層，使用移動工具將文本移動到熱點鏈接圖標(biāo)后位置，使用文本工具選擇文字，改為“熱點鏈接 Hot”。我們這里使用復(fù)制得到文字的方法是為了省去文字屬性的設(shè)置，保證欄目文字的一致性。使用文本工具，設(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è)計教程（圖三）

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


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

 

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

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


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

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


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

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


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

為選區(qū)填充漸變顏色，如圖所示。按<Ctrl+T>對選區(qū)變形為橢圓形，按<Ctrl+D>取消選區(qū)，結(jié)果如圖所示。

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

 

4.熱點鏈接文字

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


網(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è)計教程（圖十）

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


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

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