当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop制作蓝色风格网站首页模板(5)

Photoshop制作蓝色风格网站首页模板(5)

第二十一步

Photoshop制作蓝色风格网站首页模板

按住shift键画灰色的分割线。

第二十二步

Photoshop制作蓝色风格网站首页模板

为每个切换标题添加小图标。我用了来自WebAppers.com的图标。通常一个切换标题激活了其他的就处于非激活状态了。为了清楚表达这一点,我们需要想个办法完成它。我降低其他图标的饱和度并且降低标题字眼和描述文字的透明度一保证激活的标题处于高亮状态。

第二十三部

Photoshop制作蓝色风格网站首页模板

为了使激活的按钮更加明显,我们将给它添加一个时尚的背景。为了达到这样的效果我们把整个对象选中然后裁切选区(按住alt画选区即可把不要的选区去掉)最终使选中的范围只有第一个按钮。

Photoshop制作蓝色风格网站首页模板

如上图所示即为所要达到的选区。

Photoshop制作蓝色风格网站首页模板

用一个更小的软笔刷,画出一个白色背景。

第二十四步

Photoshop制作蓝色风格网站首页模板

增加一个阴影:在切换菜单的后面如上图所示画一个深灰色的长方形。

Photoshop制作蓝色风格网站首页模板

点击图层区底部的小图标给该层增加一个蒙版。

Photoshop制作蓝色风格网站首页模板

把前景色设置为黑色,选一个大的软笔刷,在蒙版层上面点击(如图所示,蒙板上面出了白色之外的颜色都会遮挡图层)使部分黑色去掉。结果,我们创建了一个比较好看的阴影效果。

Photoshop制作蓝色风格网站首页模板

最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。

Photoshop制作蓝色风格网站首页模板

现在切换菜单就像这样。

Photoshop设计苹果系统风格的网页模板
Photoshop制作清爽绿色风格网页模板