玩软件 > Photoshop
+

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

2016-04-27    作者:未知    来源:网络文摘

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

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

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

为了让两个图片更加突出铱梢孕陆ㄒ徊悖设置该层模式为叠加,重复第五步的效果添加的操作。

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

第十九步

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

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

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

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

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

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

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

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

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

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

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

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

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

阅读:562    评论:0
  • 相关文章
  • 热门文章
  • 相关评论
网站地图

免责申明:我要玩起网旨在提供一个相互学习交流的平台,是一个完全免费的网站,部分原创作品,欢迎转载,部分内容来自互联网,如果侵犯了您的权利请尽快通知我们!邮箱:279459762@qq.com Copyright 2018-2021我要玩起网

  湘ICP备17006802号-2
【电脑版】  【回到顶部】