回主页

笨活儿关注Web前端和网页设计,同时兼顾用户体验,致力于将国外的优秀教程汉化,并不定期推荐免费优秀影视娱乐资源。

订阅本博客。


  • About/关于
  • Browse/浏览
  • Portfolio/作品集
  • Search/搜索

TOPICS/主题:英国达人中文字幕 网页设计 免费资源 Web前端 感受年轻 边翻译边学习More...


  • « 一个小调查
  • 调查总结。 »
发表时间:四月 10 ↓ 有话想说

[教程]用Photoshop创作真实的黑板和粉笔字

由 慵云 发表于 设计丛谈 分类下  发表时间:星期五, 四月 10, 2009 15:21

原文链接:用Photoshop创作真实的黑板和粉笔字

若需转载,务请保留出处。

chalkboard-vignette

综述

在Photoshop里可以仅仅使用滤镜、蒙版和渐变轻松地创造令人惊叹的真实材质效果,本教程就是这真实的一例。

所用文件:

preview2 download2

第一步

新建文档,我使用的大小是1000×609。使用暗绿到中绿的径向渐变,填充背景图层。

gradient

background

第二步

给黑板添加噪点:“滤镜->杂色->添加杂色”。设置数量为1.6%。 分布方式为平均分布,并勾选单色。

noise

background-noise

第三步

接下来我们画黑板的木条边框。只需几步即可完成,我选择使用纤维滤镜来创建它。由于无法设置纤维方向,所以我为木框的各个部分分别创建了一个文档,再把他们放到黑板图片中。

首先创建顶部横条。新建文档,高度与黑板的宽度相同,宽度设置成你需要的木条宽度。在本教程中,我的黑板大小是1000×609,于是我为顶部横条创建的文档尺寸是45×1000。设置前景色为浅灰,背景色为深灰,然后点击“滤镜->渲染->纤维”(Filter->Render->Fiber) 。 差异设为3,强度设为21左右,使用“随机化”按钮找到合适的纤维形状。然后将图像旋转90度——“图像->旋转画布->90度(顺时针)/90度(逆时针)”(Image->Image Rotation->90 Degrees CW)

fibers

fibers-rotated

第四步

下面给木条添加颜色,“图像->调整->色相/饱和度”(Image->Adjustments->Hue/Saturation),快捷键“ctr+u”。选中“着色”,参数分别设置为色相29,饱和度33,明亮度-20。当然,你可以根据你要制作的效果灵活调整参数。

top-frame

第五步

为木条也添加一些杂色,与第二步同理,这次设置数量为 1%。复制木条到黑板文件,移到顶部它应该在的位置。之后效果如下:

top-frame-placed

第六步

画出木框的其他三个边。这些木条可以通过复制和翻转/旋转快速完成。当然,你也可以从头开始画,让这些木条显得更有差异。

full-frame

第七步

选中所有木条图层,合并图层(Ctr+E)。双击这个合并过后的图层,设置图层样式,添加阴影和内发光,参数如下:

阴影:角度-39,距离11,大小29;

内发光:颜色为白色,不透明度12

其余参数不变。

drop-shadow

inner-glow

frame-styled

第八步

木条框画好了,接下来继续研究黑板上的东西。我们需要给它添加一些做旧效果,从你的笔刷库里找出适当的Grunge效果笔刷吧。我这里使用的是 Grunge Corner Brush Pack 。在木框图层和黑板面图层之间新建一个图层,拾取一个非常暗的绿色,然后用笔刷刷出grunge的效果…… 然后将这一图层透明度调到40%左右。

译注:grunge是90年代流行的脏乱邋遢+摇滚的时尚生活方式,后来被用于平面设计中,一度很流行……

grunge-brush-pack

grunge-borders

第九步

下面为黑板添加更多颜色变化。在grunge图层之上新建一个图层,设置前景色为黑色,背景色为白色(快捷键“D”),然后点击“滤镜->渲染->云彩”。使用动感模糊(滤镜->模糊->动感模糊)把这些云彩模糊掉,角度18,距离100。最后,更改图层混合样式为“正片叠底”(multiply),不透明度30%左右。

motion-blur

background-clouded

第十步

接下来制造一些黑板刷刷过的效果。在云彩图层之上新建一个图层,找到“平头湿水彩笔”(photoshop自带),画笔颜色为黑色,不透明度30%左右,然后像擦黑板一样在黑板上刷。刷的时候可以有一些中途停顿,然后某些地方可以多刷几次,让其颜色更重一些。最后,降低图层不透明度至10%左右。

watercolor_brush

black-eraser

black-eraser-opac

第十一步

新建一个图层,重复第十步,不过这次把图层不透明度降至5%左右,之后应该达到如下效果:

white-eraser

第十二步

选一个好看的手写字体,我这里使用的是 Christopher Hand。在黑板上写几个大字先,这可以被当做是以前在黑板上写的,没有被完成擦去的字迹。把透明度调低至2%。

old-text

第十三步

再写一些你想写的字,这次把透明度设为70%。再次找到grunge画笔,我这里使用的Subtle Grunge Textures and Effects 来自Function 。新建蒙版,用黑色的grunge笔刷在蒙版上涂画,这可以制造粉笔的质感,注意不要画太过了。

layers

text-on-board1

第十四步

我觉得这黑板有点深度和透视效果会更好,所以下面我们添加两个额外的东西。首先,在下边框上加一条放黑板刷的横条。使用上面的制作木条的方法,记得加上阴影效果。

bottom-ledge

第十五步

接下来在画一个黑板刷。使用圆角矩形工具画一个圆角矩形(快捷键U),圆角半径设为1像素。转换该图层为智能对象。这样做是为了让以后应用滤镜的时候更加灵活,便于更改。首先,添加光影效果,重置前背景色为黑和白,点击“滤镜->渲染->分层云彩”。

eraser-clouds

第十六步

黑板刷的材质和光照效果还需要在深化才行。我这里采用了滤镜。首先点击“滤镜->画笔描边->喷色描边”,然后点击“滤镜->杂色->添加杂色”。建议参数如下所示。由于我们使用了智能对象,所以如果参数不够好,很容易就能再进行调整。

喷色描边:长度20,半径25,方向为垂直

杂色:数量1.96%,平均分布,单色

sprayed-strokes

eraser-noise

eraser-bottom

第十七步

现在只是画好了黑板刷的下面部分,接下来画上面部分。再次使用圆角矩形工具,画一个深灰色的矩形。如上面一样,转换为智能对象,然后添加一些杂色即可。

eraser-top

第十八步

为了保持光影效果的一致性,给黑板刷的两个部分也加一些投影。现在你做出的效果应该如下图:

eraser-shadow

第十九步

最后,我们再为整个设计加上两只粉笔,让场景更为真实。粉笔的画法和黑板刷的画法大同小异。最终结果如下:

chalkboard-finished1

总结

仅仅利用一些滤镜、画笔和渐变就能创造出真实的材质效果,如此简单,是不是很激动人心呢?欢迎在下面留言告诉我你的想法。也许你还发现了可以在某些地方添加细节,让整个设计变得更加真实?

© 本文编译至MyInkBlog。版权归原作者所有。如有图像无法显示,请到原文作者blog查看。

咱再换个话题?→ 《[英国达人/BGT]上季冠军Diversity在今年半决赛再次出场》


标签:Photoshop • 教程 • 材质

© 笨活儿   允许转载,但请以链接形式保留出处。也欢迎您使用RSS订阅本博客。

  • « 一个小调查
  • 调查总结。 »

感谢第一位留言的小朋友!

  1. 木丝草 ←@
    七月 7, 2009 7:56 下午

    好文!
    下载了原文档,但字体不可用?有下载吗?
    要支持中文的,刚刚好用来做个Logo,嘿嘿!

多说话有益身体健康

点击这里取消回复。

请勿发表“顶”、“好”、“很有用”之类对他人没有帮助的话。欢迎针对文章内容发表您自己的真知灼见。

点击人名后面的 ←@ 可以回复TA。如果已经超过回复层级,您可以在上一级回复,并记得加上“@称呼”以注明您回复的是谁。

您可以订阅本文的RSS供稿,及时了解大家的讨论进度。


唠唠叨叨:
  • 02月10日
     ktmud: @jeuxee 明明一个点击就可以完成的事,要强迫用户用拖拽... 装逼装到这个份儿上,我看着恶心 
  • 02月10日
     ktmud: http://t.co/6Muc6KnG  ..... “把安装包拖动到这里下载”.... 苹果用户就是高贵 
  • 02月10日
     ktmud: @feelinglucky 台湾站也要备案? 
  • 02月09日
     ktmud: @helloleo 因为他贵 
  • 02月09日
     ktmud: RT @junyu: Google 这个短信计费方式太搞笑了… http://t.co/wqEuO2bx 

follow me!


  • 日历 Calendar

    2012 年二月
    一二三四五六日
    « 十二  
     12345
    6789101112
    13141516171819
    20212223242526
    272829 
  • 分类文章 Categories

    • Web技术 (28)
      • 交互和UE (2)
      • 前端开发 (14)
      • 网页设计 (9)
    • 人微言轻 (20)
    • 外语笔记 (10)
      • 英语精译精析 (6)
    • 好康推荐 (16)
    • 娱乐至死 (54)
    • 生活琐碎 (52)
    • 设计丛谈 (5)
  • 有情博客 Blogroll

    • 个篱: 音乐媒体观察
    • 偶为“英音”狂
    • 奇技淫巧
    • 小苑
    • 岁月如歌
    • 明城
    • 暂不留名
  • 博客群落 MyBlogs

    • 一同堕落
    • 丘迟的维基
    • 千吨泥 – 前端技术
    • 千吨泥维基
    • 千吨瞎想
    • 超哥爱你

人人 | 豆瓣 | Last.Fm | Facebook | Google Reader | 百度 | 维基百科

© 笨活儿 2009

本站所有内容均可自由转载,但请遵循CC协议规定

Powered By WordPress, Original Theme by BenHuoer