Mq724014513
2016-02-02 01:32
下面图老师小编跟大家分享一个简单易学的Photoshop制作清凉动感的水中网页教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!
本教程介绍非常简洁创意的网页制作方法。作者构思非常巧妙,用海水作为整个网页的背景,用一些水珠装饰网页主体边缘。看上去就好像是悬挂在水中的物体。非常逼真。
最终效果![](https://img.tulaoshi.com/image/20160205/9fd7b37fd9ad93bbefe0e5aac1197af0.jpg)
1、新一个1100×1020像素的文档,如下图。![](https://img.tulaoshi.com/image/20160205/75ef90529fe494843c83f79465e3b912.jpg)
2、打开下图所示的海水素材作为背景,如果素材太小可以适当放大比例。![](https://img.tulaoshi.com/image/20160205/2c31957f9823096c258016e52c065997.jpg)
3、选择圆角矩形工具,半径为 10px,拉出下图所示的白色圆角矩形。![](https://img.tulaoshi.com/image/20160205/9847d332c186da4f915026deb8bea3f6.jpg)
4、双击图层调成圆角矩形图层样式,参数设置如下图。![](https://img.tulaoshi.com/image/20160205/86149b93b71fa789821bffdacd9a90f1.jpg)
![](https://img.tulaoshi.com/image/20160205/13bcbdd279f359dc5b1d3ae6dad37336.jpg)
![](https://img.tulaoshi.com/image/20160205/b838313659c53b63f6432c04a71ca911.jpg)
![](https://img.tulaoshi.com/image/20160205/387a5e1d5535a4a656db82a988d9c17e.jpg)
5、把图层不透明度改为:15%左右,大致效果如下图:![](https://img.tulaoshi.com/image/20160205/419267475e46fcc3c8ab578849fe9f9d.jpg)
6、下一步是添加我们添加喷溅水珠。 打开下图所示的喷溅素材。![](https://img.tulaoshi.com/image/20160205/1c2cd750d66113a718a1b2b5b014585c.jpg)
7、按Ctrl + Shift + U 把素材变成黑白。选择套索工具勾出下图所示的水珠部分,羽化10个像素后按Ctrl + C 复制:![](https://img.tulaoshi.com/image/20160205/ca41e9659f1aa2bdf0e7d6eaa62ce3a5.jpg)
8、把选区水珠素材复制进来,适当调整大小,放到右上角位置,如下图:![](https://img.tulaoshi.com/image/20160205/e0e4c870763fe52d36cdcb00eabed467.jpg)
9、把水珠的图层混合模式改为“滤色”,效果如下图:![](https://img.tulaoshi.com/image/20160205/c192ce24008420b8358c408e7c4d6b96.jpg)
10、加上图层蒙版,用黑色画笔把圆角矩形里面的水珠部分擦掉,如下图:![](https://img.tulaoshi.com/image/20160205/c2ab045b1b85cc259cc0fb58eaa4f955.jpg)
11、左上角的水珠我们可以直接复制右边的,不过为了效果图更加丰富,我们可以选择不同的水珠素材来制作,大致效果如下图:![](https://img.tulaoshi.com/image/20160205/2ad8f3c37f38aeb16c1277584da488e7.jpg)
12、再制作右下角部分的水珠,打开下图所示的水珠素材,同上的方法截取水珠部分复制进来,放到背景图层上面,图层混合模式改为“滤色”,适当调整好角度,加上图层蒙版,用黑色画笔擦掉矩形里面的部分,过程如下图:![](https://img.tulaoshi.com/image/20160205/8b07688866eb7b58cced4142a9746ff3.jpg)
![](https://img.tulaoshi.com/image/20160205/6d70b70057690f83c3a45d0896287d11.jpg)
![](https://img.tulaoshi.com/image/20160205/783a9e960204fbf1a3debca48412e001.jpg)
13、同上的方法再用下面的水珠素材制作矩形顶部的水珠效果,图层混合模式均为“滤色”。![](https://img.tulaoshi.com/image/20160205/01a2d3873b3eccb43a2ab69e8caeef70.jpg)
![](https://img.tulaoshi.com/image/20160205/ff3791509b77467b398e3662c4409f03.jpg)
![](https://img.tulaoshi.com/image/20160205/c776e6ee08d614fb32964c6456e35a41.jpg)
14、同样的方法再加上其它部分的水珠,如下图。![](https://img.tulaoshi.com/image/20160205/065d9518052417e4d078d8b810a04ba4.jpg)
![](https://img.tulaoshi.com/image/20160205/5bef4e582abd8c09ac317b8fc8ea7824.jpg)
15、调出圆角矩形图层选区,新建一个图层填充黑色。![](https://img.tulaoshi.com/image/20160205/6594edf34fc093fb8e16f0d924170909.jpg)
16、选择矩形选框工具,选取黑色圆角矩形下半部分,按Delete删除,效果如下图。![](https://img.tulaoshi.com/image/20160205/5c26c9579cf9f56081611d37a077d4ae.jpg)
17、双击图层调出图层样式,参数设置如下图,确定后把图层不透明度改为:80%,效果如下图。![](https://img.tulaoshi.com/image/20160205/12e906b7fa9642e0315cbd1a398efd3c.jpg)
![](https://img.tulaoshi.com/image/20160205/342780a116fc58dd0f5ed977f032b083.jpg)
![](https://img.tulaoshi.com/image/20160205/36970d3ba7a926feb5badd800acf06aa.jpg)
![](https://img.tulaoshi.com/image/20160205/228bf0485b3fe4b42f258c2807f8dfe1.jpg)
![](https://img.tulaoshi.com/image/20160205/d843a37c6ca2d3cbe7053093387081cc.jpg)
18、选择文字工具,选择好合适的字体,打上白色的导航文字,效果如下图。![](https://img.tulaoshi.com/image/20160205/9d8f6796a6b769ab27a93c8111b67fa5.jpg)
19、新建一个图层,把前景颜色设置为:#8CFBFF,选择柔角的画笔工具,调整好笔刷大小,点出下图所示的高光部分。![](https://img.tulaoshi.com/image/20160205/0c5003adae48d523f4478d38af73e127.jpg)
20、用矩形选框工具选取超出导航栏的部分删除,再把图层不透明度改为:#60%,效果如下图。![](https://img.tulaoshi.com/image/20160205/31444ace61906554559f94396bc7def8.jpg)
21、新建一个图层,用椭圆选框工具拉出下图所示的小正圆选区填充颜色:#192932,如下图。![](https://img.tulaoshi.com/image/20160205/db0e98627fa63df1dcaa7556bc0ebeb9.jpg)
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com)22、给小圆添加图层样式,参数设置如下图。![](https://img.tulaoshi.com/image/20160205/a77335be509cc159f1c20eaf33f12c4f.jpg)
23、新建一个图层,用钢笔工具勾出下图所示的路径。![](https://img.tulaoshi.com/image/20160205/d59231bec5f26e0ae56faa53ab3a1377.jpg)
24、用2像素的黑色画笔描边路径,效果如下图。![](https://img.tulaoshi.com/image/20160205/d7c2e3afafc889b344ce06f0695ad734.jpg)
25、给做好的曲线添加图层样式,参数设置如下图。![](https://img.tulaoshi.com/image/20160205/4a4369e4aab938cdaf287766e11c9690.jpg)
![](https://img.tulaoshi.com/image/20160205/edc2372d270b9fe16271e8f27db87ac2.jpg)
![](https://img.tulaoshi.com/image/20160205/0787d278d9a2695702e010a25303390b.jpg)
26、用钢笔勾出下图所示的选区,按Delete 删除,效果如下图。![](https://img.tulaoshi.com/image/20160205/b7ac1bce7e286dd9d4d22f17240cbb07.jpg)
![](https://img.tulaoshi.com/image/20160205/a5bdbe11fb81a752a18390e51de331d8.jpg)
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com)27、新建一个图层,用钢笔勾出下图所示的曲线路径。![](https://img.tulaoshi.com/image/20160205/2a4f30e8eef74733ed5463840b5755dc.jpg)
28、用2像素的白色画笔描边路径,效果如下图。![](https://img.tulaoshi.com/image/20160205/41389e3f4138e639bb6eaf08bd1d06b9.jpg)
29、给白色曲线调整图层样式,参数设置如下图。![](https://img.tulaoshi.com/image/20160205/d5a16798321d663cb312c4920ecd88c5.jpg)
![](https://img.tulaoshi.com/image/20160205/c1747e108684a887d2867812ca8cc1ba.jpg)
30、右侧的曲线制作方法一样,也可以直接复制左边的,水平翻转即可。![](https://img.tulaoshi.com/image/20160205/69060145d636d80f64b40b4d20901457.jpg)
31、把前景颜色设置为:#79B5F5,选择圆角矩形工具,拉出下图所示的两个小圆角矩形,半径自定。![](https://img.tulaoshi.com/image/20160205/b799c5f547c17397ff98d6bc88473a01.jpg)
32、选择圆角矩形工具在左侧拉一个圆角矩形,栅格化图层后,用矩形选框工具删除右边部分,效果如下图。![](https://img.tulaoshi.com/image/20160205/05edbacf2520af796c9e0429d81dff9b.jpg)
33、添加图层样式,参数设置如下图。![](https://img.tulaoshi.com/image/20160205/b9921e4bac869b70f936078d9f342e1b.jpg)
![](https://img.tulaoshi.com/image/20160205/0be8149e82b6007e059e15db2f287330.jpg)
![](https://img.tulaoshi.com/image/20160205/78eab00d1f904166d052c2ca5bd0b0ae.jpg)
![](https://img.tulaoshi.com/image/20160205/e55b49c3b3fab2fecfefca3634058a3f.jpg)
新建一个图层制作方向按钮,右边的直接复制过去即可。完成后的效果如下图,最后加上想要的图片完工。![](https://img.tulaoshi.com/image/20160205/9fd7b37fd9ad93bbefe0e5aac1197af0.jpg)