PS设计教程网欢迎你!

Photoshop从零开始设计漂亮的网页模板(4)

文章来源于 优设,感谢作者 Joe 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2013-05-06
在添加了一些按钮和漂亮的条纹之后,头部区域就是像上面那样子的。不要方剂把图层都放在header层文件夹里面。 第十九步 最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额

在添加了一些按钮和漂亮的条纹之后,头部区域就是像上面那样子的。不要方剂把图层都放在’header’层文件夹里面。

Photoshop从零开始设计漂亮的网页模板

第十九步

Photoshop从零开始设计漂亮的网页模板

最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额外的一些操作,这是很有必要的。首先用圆角长方形工具创建一个高70px圆角半径为10px的图形(注意要画路径图),现在我们不要底部圆角的部分而为它郑家一个更好的角效果。用直接选取工具单击这个图形的路径,单击垂直点然后按住shift键往下拉直到如图所示状态.现在看起来不错了,但是还是比较简陋。然后…(把圆角变直角!???我汗,那还不如直接画个直角的长方形?)

Photoshop从零开始设计漂亮的网页模板

如图创建了一个比较好的角(我汗)

第二十步

Photoshop从零开始设计漂亮的网页模板

选择直线工具,设置大小为1px

第二十一步

Photoshop从零开始设计漂亮的网页模板

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

第二十二步

Photoshop从零开始设计漂亮的网页模板

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

第二十三部

Photoshop从零开始设计漂亮的网页模板

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

Photoshop从零开始设计漂亮的网页模板

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

Photoshop从零开始设计漂亮的网页模板

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

第二十四步

Photoshop从零开始设计漂亮的网页模板

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

Photoshop从零开始设计漂亮的网页模板

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

Photoshop从零开始设计漂亮的网页模板

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

Photoshop从零开始设计漂亮的网页模板

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa