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

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

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

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


網(wǎng)站熱點(diǎn)鏈接欄目設(shè)計(jì)教程（圖二）

 

2.熱點(diǎn)鏈接圖形

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


網(wǎng)站熱點(diǎn)鏈接欄目設(shè)計(jì)教程（圖三）

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


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

 

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

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


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

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


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

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


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

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

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

 

4.熱點(diǎn)鏈接文字

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


網(wǎng)站熱點(diǎn)鏈接欄目設(shè)計(jì)教程（圖九）

 

5.熱點(diǎn)鏈接“GO”

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


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

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


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

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