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

步骤十四：描边设置。 描边颜色设置为：#5e80a3，设置如图7-41所示。 步骤十五：呈现样式。 呈现样式如图7-42所示。 图7-41 图7-42 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 步骤十六：搜索框内添加文字。 在小矩形形状内输入“Search”，字体设置为：Arail，大小设置为：12pt，颜色设置为：#7b7b7b，如图7-43所示。 步骤十七：最终效果。 最终效果如图7-44所示。 图7-43 图7-44 《 Photoshop艺术设计》 7.4.1 导航条制作 7.4 导航条与按钮制作 第7章 Photoshop在网页设计中的应用 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在网页设计中的应用