当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop绘制个性化的网站导航

Photoshop
数码暗房之应用通道系列:1、《通道中有什么?》
数码暗房之应用通道系列:2、《通道就是选区》
数码暗房之应用通道系列:3《利用Lab明度通道转换黑白》
Photoshop快速打造莹蓝冰窟特效
《凝香》色彩调整教程
诱惑:Photoshop打造性感日本美女
数码暗房之应用通道系列:4《计算法 选择效果最好的通道》
数码暗房之应用通道系列:5《最常见的通道混合器法》
数码暗房之应用通道系列:6《利用CMYK黑色通道加锐》
[PS技艺交流之一]怎样仿制水彩效果
[PS技巧交流之二]怎样增强照片清晰度?
[PS技巧交流之三]怎样快速改变照片色调及调制单色照片
[PS技巧交流之四]怎样仿制钢笔淡彩效果
[PS技巧交流五]如何挽救逆光失败的照片[附逆光修正滤下载]
[PS技巧交流六]初学PS的“三板斧”
[PS技巧交流之七]人物后期综合PS处理技巧[附磨皮滤镜下载]
[PS技巧交流之八]摹仿色调的秘密
[PS技巧交流之九]怎样精确校正严重偏色的照片?
教你用PS打造一只漂亮的足球
用PS打造水粉画效果

Photoshop绘制个性化的网站导航


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 625 ::
收藏到网摘: n/a

  今天为大家带来的这个教程是教大家怎么用PHOTOSHOP制作一个像Web Designer Wall这个网站的水彩画风格的导航栏(菜单栏。首先我会教大家用PHOTOSHOP制作出导航所需要的图片文件,然后再第2个部分教程中我会教你怎么样用CSS把这个导航栏做出来。OK,废话不多说,我们开始吧:

  先看效果图

Photoshop绘制个性化的网站导航_webjx

  1.笔记本纸张图片

  首先我们要找一张那种带穿孔的笔记本纸张的图片素材。eddie推荐一个找这种素材的网站是stock.xchng.当然deviantart也是一个不错的选择。在这个教程,你就先用我给你的这张图片吧。本文由软晨学习网RuanChen.Com整理发布!转载请注明出处,谢谢!

Photoshop绘制个性化的网站导航_webjx

  2.水彩画效果

  首先在photoshop中打开我们的素材图片,按住Ctrl点击纸张图层载入选区,然后新建一个组,并点击图层面板下面的小按钮创建图层蒙版。这样做使我们后面使用画笔时颜色只会出现在蒙版区域内。

Photoshop绘制个性化的网站导航_webjx

  新建一个图层,选一个很浅的粉红色(或者其他你喜欢的浅颜色),选择画笔工具(B),在上方面板把画笔大小调为100px,不透明度为10%。然后在纸张上方随意画上一些粉红色。看到本信息,说明该文章来源于软晨学习网www.RuanChen.Com,如果文章不完整请到软晨学习网RuanChen.Com浏览!

Photoshop绘制个性化的网站导航_webjx

  重复这个步骤直到效果差不多

Photoshop绘制个性化的网站导航_webjx

  3.增加一些细节

  找一些咖啡污渍的素材图片,放在纸张图层上面,在图层面板把混合模式调为“整片叠底”。

Photoshop绘制个性化的网站导航_webjx

  

  接下来我们还可以用一些现成的笔刷来添加一些污渍与水迹的效果。可以从splatter与watercolor这里下载到合适的笔刷。

Photoshop绘制个性化的网站导航_webjx

  接下来再添加一些素描的素材上去来丰富细节的部分。你可以从我提供的网站寻找素材,或是直接从vector illustration这里下载。

Photoshop绘制个性化的网站导航_webjx

  在纸张右上角做一个三角形的选区,然后选取灰色,选择渐变工具在选区画一个渐变。这样使得右上角的纸好像被折过后的效果。

Photoshop绘制个性化的网站导航_webjx

  

  4.手写字体

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

Photoshop绘制个性化的网站导航_webjx

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

  首先我们去找一个RSS图标。选择橡皮擦工具,然后选择一个上面你用过的笔刷,把不透明度调为10%后在图标边缘轻轻擦。然后你还可以选择灰色,在图标上加一些灰色让RSS感觉有点脏。

Photoshop绘制个性化的网站导航_webjx

  6.铅笔风格的边框

  铅笔风格的边框可以在Adobe Illustrator中很轻松的画出来。先画一个图形或是路径,然后打开画笔面板。选择木炭画笔并把大小调为0.25pt.

Photoshop绘制个性化的网站导航_webjx

 

  7.结束

  这就是最后的成果啦,你的呢?

  如果你还想花更多时间在细节上面,你还可以增加一些纸屑,透明胶带,小贴纸等等。

Photoshop绘制个性化的网站导航_webjx

  我看到这个效果很不错,所以也翻译成汉语给需要的朋友看,意思有不对的也请原谅。

  虽然要做到与原作者一模一样的效果不是那么简单(除了这里的高手),但是我相信这篇教程还是有相当多可以学习的要点。希望大家能从中获益。