教你网站热点链接栏目的设计方法教程

1.图标与热点链接标题

热点链接的图标和信息中心的图标一样，因此我们采取复制图层的方法。按住鼠标左键将图层面板中“信息中心图标”图层拖动到创建新图层按钮上，从而复制得到“信息中心图标层副本”，改名为“热点链接图标”，使用移动工具将该图标移动到如图位置，可以借助键盘上的方向键实现位置的微调。

网站热点链接栏目设计教程（图一）
 

同样复制信息中心 News文字层，使用移动工具将文本移动到热点链接图标后位置，使用文本工具选择文字，改为“热点链接 Hot”。我们这里使用复制得到文字的方法是为了省去文字属性的设置，保证栏目文字的一致性。使用文本工具，设置文字大小与字体，输入热点链接下面的文字信息，如图所示。


网站热点链接栏目设计教程（图二）

 

2.热点链接图形

使用圆角矩形工具，设置圆角半径为8，创建圆角矩形路径，使用路径选择工具选择路径，单击鼠标右键创建选区，如图所示。选择菜单“编辑|描边”命令，设置描边颜色为淡灰（R：210，G：208，B：208），宽度为1像素，对选区描边，如图所示。


网站热点链接栏目设计教程（图三）

单击路径面板，单击面板中的工作路径，如图所示，从而在设计图中显示工作路径，使用路径选择工具移动该路径到圆角矩形右侧，同样建立选区对路径描边。按照上面的方法得到3个圆角矩形。


网站热点链接栏目设计教程（图四）

 

3.热点链接图标

选择菜单“文件|打开”命令，打开配套光盘中“\源文件\6\素材\电脑.png”文件，使用移动工具把电脑图片移动到效果图上，新移进的图形会出现在自动生成的“图层X”中。按<Ctrl+T>对图片自由变形，结果如图所示，并改变图层的名称为“电脑”。


网站热点链接栏目设计教程（图五）

在“电脑”图层下创建“电脑阴影”图层，使用椭圆选择工具创建正圆形选区。


网站热点链接栏目设计教程（图六）

单击工具栏中的设置默认的前景背景色图标 ，设置“前景色/背景色”颜色为默认的“黑色/白色”，使用渐变工具，设置填充方式为径向，颜色为前景到透明，前景色不透明度为70%。


网站热点链接栏目设计教程（图七）

为选区填充渐变颜色，如图所示。按<Ctrl+T>对选区变形为椭圆形，按<Ctrl+D>取消选区，结果如图所示。

网站热点链接栏目设计教程（图八）

 

4.热点链接文字

使用文本工具，设置英文字体为Arial，中文字体为汉仪中圆简，颜色为深灰（R：80，G：80，B：80），安排好热点链接的文字信息。


网站热点链接栏目设计教程（图九）

 

5.热点链接“GO”

创建“热点go”图层，使用圆角矩形工具，设置圆角半径为10px，创建圆角矩形路径，使用路径选择工具，单击鼠标右键创建选区，设置前景色为（R：188，G：248，B：255）背景色为（R：17，G：106，B：236），使用渐变工具，设置渐变方式为菱形，从中心向外拖动鼠标，为选区填充从前景到背景的渐变颜色，使用文本工具，设置字体为Bitsumishi，大小为10，颜色为白色，设置字体与颜色，结果如图所示。如果没有对应的字体，可以选择适当的字体替换。


网站热点链接栏目设计教程（图十）

采用同样的方法我们可以设计“交通路线”和“今日天气”两个热点链接栏目。对于文字可以采用复制图层的方法得到，然后修改文字即可；对于阴影的图形也可以使用复制图层的方法得到，然后改变大小即可。“交通路线”栏目圆角矩形按钮的颜色为深灰色（R：111，G：111，B：111），“今日天气”圆角矩形按钮的颜色为浅灰色（R：165，G：165，B：165）。


网站热点链接栏目设计教程（图十一）

至此“网站热点链接栏目的设计方法教程”结束，科普云烟台网站建设网页设计部整理发布。