photoshop

Photoshop制作一个水彩画效果的网站导航栏

今天为大家带来的这个教程是教大家怎么用PHOTOSHOP制作一个像Web Designer Wall这个网站的水彩画风格的导航栏(菜单栏。首先我会教大家用PHOTOSHOP制作出导航所需要的图片文件,然后再第2个部分教程中我会教你怎么样用CSS制作这个导航栏。OK,废话不多说,我们开始吧:
转载请注明来自eddie yang’s creative
预览图:
menu sample Photoshop制作一个水彩画效果的网站导航栏

1.笔记本纸张图片

首先我们要找一张那种带穿孔的笔记本纸张的图片素材。eddie推荐一个找这种素材的网站是stock.xchng.当然deviantart也是一个不错的选择。在这个教程,你就先用我给你的这张图片吧。

notepaper

2.水彩画效果

首先在photoshop中打开我们的素材图片,按住Ctrl点击纸张图层载入选区,然后新建一个组,并点击图层面板下面的小按钮创建图层蒙版。这样做使我们后面使用画笔时颜色只会出现在蒙版区域内。
menu-2
新建一个图层,选一个很浅的粉红色(或者其他你喜欢的浅颜色),选择画笔工具(B),在上方面板把画笔大小调为100px,不透明度为10%。然后在纸张上方随意画上一些粉红色。
menu 3 Photoshop制作一个水彩画效果的网站导航栏

重复这个步骤直到效果差不多
menu 4 Photoshop制作一个水彩画效果的网站导航栏

3.增加一些细节

找一些咖啡污渍的素材图片,放在纸张图层上面,在图层面板把混合模式调为“整片叠底”。
menu 5 Photoshop制作一个水彩画效果的网站导航栏
接下来我们还可以用一些现成的笔刷来添加一些污渍与水迹的效果。可以从splatterwatercolor这里下载到合适的笔刷。
menu 6 Photoshop制作一个水彩画效果的网站导航栏
接下来再添加一些素描的素材上去来丰富细节的部分。你可以从我提供的网站寻找素材,或是直接从vector illustration 这里下载。
menu 7 Photoshop制作一个水彩画效果的网站导航栏
在纸张右上角做一个三角形的选区,然后选取灰色,选择渐变工具在选区画一个渐变。这样使得右上角的纸好像被折过后的效果。
menu 8 Photoshop制作一个水彩画效果的网站导航栏

4.手写字体

如果你没有合适的手写字体,我也推荐你去Dafont与 Urban Fonts去找。(这2个网站都是免费并且资源相当多。)
接下来添加你想要的文字吧。如图
menu 9 Photoshop制作一个水彩画效果的网站导航栏

5.一个在水里泡过的RSS图标

首先我们去找一个RSS图标。选择橡皮擦工具,然后选择一个上面你用过的笔刷,把不透明度调为10%后在图标边缘轻轻擦。
然后你还可以选择灰色,在图标上加一些灰色让RSS感觉有点脏。
menu 11 Photoshop制作一个水彩画效果的网站导航栏

6.铅笔风格的边框

铅笔风格的边框可以在Adobe Illustrator中很轻松的画出来。先画一个图形或是路径,然后打开画笔面板。
选择木炭画笔并把大小调为0.25pt.
menu 12 Photoshop制作一个水彩画效果的网站导航栏

7.结束

这就是最后的成果啦,你的呢?
如果你还想花更多时间在细节上面,你还可以增加一些纸屑,透明胶带,小贴纸等等。
menu sample1 Photoshop制作一个水彩画效果的网站导航栏
转载请注明来自eddie yang’s creative
Download PSD File
原文链接:http://www.webdesignerwall.com/tutorials/design-watercolor-effect-menu/

people also love:

  1. 这15个Photoshop快捷键,你掌握了吗
  2. Photoshop网页设计中加强像素化细节的3个小技巧
  3. Photoshop在网页设计中制作文字效果的2种方法

6 Comments:

  1. Alvin.J says:

    Excellent!
    漂亮!

  2. Gealm says:

    很详细的教程呀。很漂亮

  3. daile says:

    不错不错 感谢教导 ^_^

  4. keke says:

    好教程,学习了!

  5. 蜡笔小强 says:

    期待下期的CSS教程哦。

    • eddie says:

      呵呵.请多回来看看,应该快了
      CSS教程已经发布了

Leave a Reply

Back To top