Photoshop艺术设计田秋成第7章Photoshop在网页设计中的应用.pptVIP

2. 个人博客导航条 个人博客导航条效果如图7-45所示。 图7-45 制作思路和步骤如下。 （1）制作思路 1）用渐变实现导航条的背景或者添加渐变样式效果。 2）输入导航条文字，如个人博客。 3）为文字添加样式效果。 4）用一像素选区渐变添加导航条分隔条。 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 （2）制作步骤 步骤一：创建新文件。 新建一个像素为800px×60px的文件，背景填充颜色为白色，如图7-46所示。 图7-46 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 步骤二：图层样式设置。 使用形状工具创建一个填充满背景的矩形形状。为矩形形状工具添加样式：内发光效果，颜色设置为：#f8b500，如图7-47、图7-48所示 图7-47 图7-48 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 步骤三：渐变叠加。 渐变叠加，颜色分别为#fbe29d、#fcecc0和#f8b500，如图7-49、图7-50所示。 图7-49 图7-50 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 步骤四：描边设置。 添加描边效果，颜色为：#dea303，如图7-51所示。 步骤五：导航条文字添加。 添加导航条文字，并设置颜色为：黑色；字体为：宋体；字号为：像素14px，如图7-52所示。 图7-51 图7-52 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 步骤六：分隔线设置。 设置分隔线，用1像素的黑和1像素的白，并降低透明度，如图7-53所示。 步骤七：图层叠加设置。 图层融合方式设置为叠加，透明度设置为：86%，如图7-54所示。 图7-53 图7-54 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 步骤八：分隔线虚化设置。 利用矩形选区选中分隔线，单击右键—羽化半径，并设置羽化半径为：10px，并删除，如图7-55所示。 步骤九：分隔线复制并移动。 复制分隔线并移动到相应的位置，如图7-56所示。 图7-55 图7-56 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 以个登录按钮、网页博客按钮、样式制作为例，讲述按钮的设计与制作的具体过程。 1. 登录按钮 （1）登录按钮 登录按钮