专业技能 > Photoshop
+

从零开始设计一个漂亮的网页(3)

2016/4/27    作者:未知    来源:网络文摘    阅读:675

头部看起来有的平淡,因此我们可以再任意位置加相同的亮光效果. 选中蓝色的头部区域.在它上面创建一个新层并设置其混合样式为 叠加.

从零开始设计一个漂亮的网页

选一个大点的600px软笔刷,颜色为#ffffff白色。然后再导航下方点击几次。假如想更有层次感,你还可以把颜色调为黑色,然后在头部区底部重复同样操作。
第十八步

从零开始设计一个漂亮的网页

在这一步我介绍一下我是怎么实现头部图片的反光效果的。选择两张图片,我用了我自己另外做的两个网页模板图片,缩放其中一个然后把他放在比较大的那个的下方。复制这两层,用自由变换工具按住shift键等比例缩放一下,用长方形工具在上层的图片下端外部画一个选区,到选择->修改->羽化,填入30px或者大点羽化一下选框。(这里原教程说得不大清楚,我实现的方法是这样的:羽化之后选择反选,然后选取画笔工具,选白色,再在图片的左边角和右下角点击数下,然后用长方形选框和delete键修整边缘)

从零开始设计一个漂亮的网页

为了让两个图片更加突出,可以新建一层,设置该层模式为叠加,重复第五步的效果添加的操作。

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

第十九步

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

选择直线工具,设置大小为1px
第二十一步

从零开始设计一个漂亮的网页

按住shift键画灰色的分割线。
第二十二步

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

用一个更小的软笔刷,画出一个白色背景。
第二十四步

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

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

从零开始设计一个漂亮的网页

现在切换菜单就像这样。
第二十五步

从零开始设计一个漂亮的网页
  • 相关文章
  • 热门文章
免责申明:天天CAD教程网旨在相互学习交流,是一个完全免费的网站,部分原创作品,欢迎转载,部分内容来自互联网,如果侵犯了您的权利请尽快通知我们!邮箱:qm198794@gmail.com天天CAD教程网湘ICP备17006802号
【回到顶部】