回主页

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

订阅本博客。


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

TOPICS/主题:生而享乐 网页设计 免费资源 Web前端 感受年轻 边翻译边学习More...


  • « 爷当年也是文艺过的。
  • 构建完美作品集网站十步走[SM] »
发表时间:二月 12 ↓ 有话想说

[教程]Photoshop动作功能实例-制作规范化的截屏图

由 慵云 发表于 网页设计 分类下  发表时间:星期四, 二月 12, 2009 19:14

简介

Photoshop的“动作”功能可以帮助我们完成一些枯燥的重复性工作。本教程就是这项功能的应用实例。

有时候我们会需要把截屏图拿到Photoshop里面处理,添加固定的风格样式,如模糊、残边、投影等。一两张倒无所谓,图片多的话就显得烦人。在Photoshop里面添加一个处理截屏图的动作,可以节省很多时间。

“动作”功能的原理是记录下你的一系列操作,今后遇到同样的效果要求时,可以“播放”动作,让Photoshop自动帮你完成这一系列类似的操作。 在Smashing Magazine 上有很多免费的动作脚本供你下载使用: The Ultimate Collection Of Useful Photoshop Actions(英文)。

开始行动吧

以下教程将为Photoshop添加一个简单的对截屏图进行倾斜、模糊、黑角处理的动作。

第一步

在Photoshop中新建一个你所需尺寸的文档,我这里采用的是575px × 250px。抓取截屏图(比较简单的方法是点击键盘上的“Print Screen”键), “Ctr+V”黏贴到文档中。

screenshot-action-1

第二步

现在转到你的动作调板。如果找不到,点击菜单栏上的窗口->动作(快捷键Alt+F9)。 如果你是第一次使用改功能,则可以看到Photoshop已经为我们预设了一些默认动作。你可以查看一下这些动作能提供的操作,有些动作可能对你有用。点击面板右上角的小三角按钮你还能找到其他预设动作。考虑到本教程的目的和以后的使用需求,我建议你新建一个组。点击动作调板下方的文件夹图标,新建一个组,并命名。

screenshot-action-2

第三步

点击文件夹图标右边的“新建动作”图标,创建一个动作,并将其命名为“截屏”。当然,你也可以在名字里面添加一些细节说明,如“截屏-模糊并黑角”。点击“记录”按钮确定。

screenshot-action-3

第四步

新建动作后会自动进入录制动作状态。请注意,Photoshop并不是像录音录像那样在实时记录,它只会记录下你实实在在的图像处理操作。所以你用不着慌忙,如果你愿意,让 Photoshop 等上个三五天都没有问题。另外,可以看到,当你进行处理时,动作面板里你的动作名下方会列出你的操作步骤。如果你不喜欢某一步操作结果,只需暂停录制,然后将这一步操作拖到面板下方的垃圾桶图标中即可。当你准备好重新来过时,别忘了再点击圆形的录制图标重新开始记录。

我们需要录制的第一个操作是倾斜图像。“Ctr+T”,使用自由变化工具对图像进行旋转。在这里我使用了菜单栏下方的选项栏,设置旋转角度为“-5°”。请注意动作调板,“变换 当前 图层”的操作已被记录。

screenshot-action-4

第五步

接下来我们移动图像到合适的位置。再次使用“Ctr+T”自由变换工具,拖动截屏图到你认为最佳的位置。在将来播放动作的时候,这一步的参数可能会根据所处理图片的情况有所变化,所以你应该在这一步加上一个暂停。 点击勾号“√”右边的“切换对话开/关”,给这一步变换当前图层添加一个暂停,好让将来应用动作时能重新调整参数。

screenshot-action-5

第六步

接下来,点击“Ctr+J”复制当前图层。

screenshot-action-6

第七步

下一步我们将对原始截图的拷贝进行模糊处理,以便通过给上面这个图层添加蒙版来达到效果。所以我们需要选择原始截图所在的图层,但是如果只是简单地点击这个图层来选择,动作功能就会按照图层名记录下选择操作。因此,将来应用这个动作时就有可能因为图层名不一致而造成动作失效。 不过,通过使用键盘快捷键,我们可以利用图层间相对位置来达到目的。也就是说,点击“Ctr+[”移动当前复制图层到原始图层之下。

screenshot-action-7

第八步

现在设置模糊效果。滤镜->模糊->高斯模糊,我这里半径为2像素。

screenshot-action-8

第九步

接下来我们要选择最上面的图层,以便添加蒙版实现渐变模糊效果。应用同样的技巧,这一次我们需要选择当前活动图层上面的图层,所以点击“Ctr+]”(注意,不是Ctr+[)。

screenshot-action-9

(译者注:第七步和第九步这里貌似作者脑子犯毛病了。原文里写的是“选择(Select)”各个图层,结果操作的时候是在移动图层。配的图片也显示的是Move Current Layer。其实哪用这么麻烦移过去移过来,直接在复制的图层上就可以完成高斯模糊、加蒙版的操作。我这里之所以不纠正,是觉得第七步说的那些东西在将来还是会有用的。这个理念还是好的,现在用不到这个方法,不保证将来不用,对不对?

在Windows里,选择前一图层和选择后一图层的快捷键是“Alt+[”和“Alt+]”。原教程是针对Mac用户的,根据作者的解释,Mac里的“Alt+[”和“Alt+]”是前后置图层的快捷键,他的本意还是要移动图层。但最开始的时候他把“Alt+[”写成了“Command+[”,所以搞得我很糊涂。)

第十步

为上面的图层添加图层蒙版:图层->图层蒙版->显示全部(亦可使用图层面板下方的“新建蒙版”图标)。选择渐变工具(快捷键“G”),设置一个白-灰-白的渐变,如下图。 在你的截屏图上沿着你刚才旋转的倾斜角度点击并拖动。如此便为图像边缘添加了模糊效果。

screenshot-action-11

第十一步

新建一个图层:图层->新建->图层(快捷键Ctr+Shift+N。或者图层面板的新建图标。囧,感觉我好啰嗦啊。)。使用矩形选区工具,新建一个选区并羽化,设置羽化半径为20像素。

关于羽化:你可以在建立选区前先在选项栏设置好选区的羽化半径,也可以建立选区后在选区上右键单击-> 羽化… ,来设置选区羽化。

screenshot-action-12

screenshot-action-13

第十二步

“Ctr+Shift+I”反选(选择->反选)。点击“D”复位色板,“X”交换色板,以使背景色为黑色(你也可以直接设置背景色,但我认为这样更快捷一点)。“Ctr+Backspace”用背景色填充选区。 于是我们就为图像添加了一个黑色的渐变边框。这看起来有点太过了,下一步我们会将它处理一下。

(知道这一步更快捷的做法吗?“D”复位色板后,点击“Alt+Backspace”,用前景色填充。)

screenshot-action-14

第十三步

点击图层面板左上方的下拉菜单,改变该图层的混合模式为“柔光”。我建议你在此也添加一个暂停动作,因为改变图层的混合模式可以产生丰富的效果变化。图像的明亮程度也会影响各种混合模式的最终效果。

screenshot-action-15

screenshot-action-16

最终效果

如下图:
screenshot-final

动作的应用

以下是使用刚才新建的动作处理的其他图片。

screenshot-action-action-1

screenshot-action-action-2

screenshot-action-action-3

screenshot-action-action-4

结语

Photoshop的动作是个很强大的功能,可以节省许多重复性劳动。本实例都是一些很基本的简单操作,最终效果却不同凡响,可见,对PS功能恰当地组合运用正是用PS进行“设计”创作的精髓所在。

本教程编译自MyInkBlog.com。版权归原作者Andrew Houle所有。翻译者笨活儿保留翻译文本的版权。允许自由转载,但请注明出处,并保留此声明。

你应该也会喜欢:
  1. 五个为你的设计添加光影效果的简单技巧[SM]
  2. 十个简单好用的设计技巧[SM]
  3. 高品质的网页设计: 实例与技巧
  4. 优雅的原创博客,一场视觉盛宴[SM]
  5. 构建完美作品集网站十步走[SM]
  6. 固定 vs. 流动 vs. 弹性:哪种布局更适合你?[SM]

标签:Photoshop • Smashing Magazine • 动作 • 教程

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

  • « 爷当年也是文艺过的。
  • 构建完美作品集网站十步走[SM] »

此文被敲了 2 下了已经

  1. 高品质的网页设计: 实例与技巧 | Living the dream ←@
    九月 16, 2009 9:10 上午

    [...] [教程]Photoshop动作功能实例-制作规范化的截屏图 [...]

  2. dabin ←@
    十二月 3, 2009 4:12 下午

    看了你翻译的国外PS教程,觉得整个过程描述的比较详细,不像中文网站上的PS教程,简单概括,老鸟风范。看得新手云里雾里,摸不着头脑。当然,这跟你详尽如实的翻译是分不开的。真想在诸如此类国外设计者的个人网站上学习PS,无奈英语水平太烂,也就免不了整天对着中文教程直挠头了。

    貌似你博客不常更新,可能比较忙吧。这里的翻译材料都挺不错。我很受益。

多说话有益身体健康

点击这里取消回复

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

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

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


唠唠叨叨:
  • 03月07日
     以上是我比较看重的优点,也是我自己努力的方向,更是我的择偶标准。而多大程度上认同和自我要求这些则决定我愿意和某人成为多要好的朋友... 
  • 03月07日
     今天洗完澡只换了内衣内裤,而内衣内裤是一模一样的两件。突然就有买几套一模一样的外衣裤换着穿的冲动。 
  • 03月06日
     当你真的学会不带感情地看一段历史,你会发现这些历史里有的只是无可奈何的苦涩。 
  • 03月06日
     越来越觉得人性是很值得研究的东西,从人性的规律找到人存在的意义,是每个人一生都该做的功课。 
  • 03月06日
     虽然说激情的演说越来越烦人,但不得不承认,每次听他讲我都会想很多东西。我自己的价值观也更佳清晰和坚定。 

由 嘀咕 提供服务


  • 择日再见 Calendar

    2010年三月
    一 二 三 四 五 六 日
    « 十二    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
  • 订阅 Subscribe

    • google reader
    • 抓虾
    • 鲜果
    • 有道
    • QQ邮箱
    • 哪吒
    • 九点
    • 更多方式...
  • 广告 Ads

  • 分类文章 Categories

    • Web技术 (30)
      • 交互和UE (2)
      • 前端开发 (14)
      • 网页设计 (9)
    • 外语笔记 (8)
      • 英语精译精析 (5)
    • 好康推荐 (15)
    • 娱乐至死 (33)
    • 生活琐碎 (37)
    • 设计丛谈 (5)
  • 有情博客 Blogroll

    • 个篱: 音乐媒体观察
    • Fall With Me
    • 亲泥巴

    更多

  • 热文 Hot Posts

    • 《民主的细节》免费赠送
    • Web技术要发展,IE6必须先消失!
    • 面试心得
    • 对《民主的细节》赠送活动的一点小牢骚
    • 浅谈前端新人的职业规划
    • 网页设计中的包容原则[ALA]
    • [Britain's Got Talent]英国达人2009年度冠军Diversity视频合辑

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

© 笨活儿 2009

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

Powered By WordPress, Original Theme by BenHuoer