个性化阅读
专注于IT技术分析

Photoshop圆角矩形使用总结

圆角矩形,或者QuickDraw称之为roundrect,是web和界面设计师的通用带。页脚太常见了,以至于页脚本身包含12个roundrects。如此普遍以至于网页或应用程序很少不包含一两个roundrect。

不幸的是,像素锁定的圆角矩形在Photoshop中很难绘制。(像素锁定,意味着所有的边缘都落在一个精确的像素边界上,创造出最清晰的物体。)

有经验的Photoshop用户可能已经知道一到两种画圆的方法。希望通过阅读这篇文章,他们也会知道更多,以及哪些方法产生像素完美的结果。

圆角矩形向量工具

Photoshop的圆角矩形矢量工具似乎是这项任务的理想人选,直到你意识到它创建的边缘是模糊和不一致的。

圆角矩形向量

幸运的是,有一个相当好的隐藏选项可以将圆角矩形向量工具的输出锁定到像素网格。

要为圆角矩形矢量工具启用像素锁定绘图,请检查选项栏中的Snap To Pixels选项。如果你把Snap设置为关闭像素,100%缩放的绘图也可以达到同样的效果。

向量圆角矩形选项

结果每次都是完美的圆形。唯一的缺点是,在绘制形状期间或之后,无法更改圆角半径。如果你需要一个不同的半径,你必须再画一次。遗憾的是,roundrect工具在这方面不像Illustrator,向上和向下箭头键可以增加和减少绘制时的角半径。

从积极的方面来说,将对象作为矢量意味着你将能够调整文档的大小,拐角将充分利用任何额外的分辨率。但是有一个小警告:如果你调整大小,你将不得不做一个精确的倍数,或风险模糊,非像素锁定边缘。

如果你对结果很迂腐,你可能会注意到每个角的前半部分的反锯齿与后半部分不匹配——尽管你必须仔细观察才能注意到。例如,查看下面放大的角,角的起始点到顶点与角的结束点的顶点(从任意一边开始)不相同。实际上,这可能不会给你带来任何问题。

向量圆角矩形固定

模糊

模糊方法是一个小技巧,包括创建一个选区,模糊它,然后增加对比度,这样你就得到了一个锐蒙版,很好地消除了锯齿。

总共7步,容易出错,加上弯角半径不能在飞行中改变。应用关卡也会有点麻烦。一个优点是,不同的水平设置可以用来获得不同数量的抗锯齿,从难以置信的软到完全别名。

  • 创建一个新层。
  • 画一个矩形选区。
  • 输入快速蒙版(Q)。
  • 高斯模糊半径的一半,你想为圆角。例如,10px的半径需要5px的模糊。
  • 应用关卡(Command-L),在输入关卡上对黑点使用118,对白点使用137。
  • 退出快速蒙版(Q)。
  • 填充选择。
圆角矩形模糊

从好的方面来说,模糊方法可以用来快速创建一些有趣的和有机的形状,这是很难用手画的。

圆角矩形模糊例子

圆圈

圆法非常准确,容易复制,但有一个巨大的13步。对于单个的roundrect,这需要大量的点击。

  • 创建一个新层。
  • 选择一个两倍于你想要的半径的圆形,10px的半径需要20px X 20px的圆。
  • 填充这一选择。
  • 向右移动选区,这可以通过按住shift键并按几次右箭头键来快速完成。
  • 填充这一选择。
  • 向下移动选区。
  • 填充这一选择。
  • 向左移动选区。
  • 填充这一选择。
  • 做出一个矩形选择,它覆盖了整个roundrect的垂直跨度,但是在两端的圆的一半的地方开始和结束。
  • 填充这一选择。
  • 做出一个矩形的选择,它覆盖了roundrect的整个水平跨度,但是起点和终点是圆的一半。
  • 填充这一选择。
圆角圆圈示例

笔划

笔划法是非常准确的,容易复制,只有大约四个步骤,这取决于你所追求的结果。不过,边角比圆法要尖锐一些。这可能是一件好事,也可能是一件坏事,这取决于你的个人喜好。

  • 创建一个新层。
  • 画一个比你需要的面积小的矩形(如果你想精确的话,比半径小一倍)。
  • 填补这一选择。
  • 添加一个笔划作为一个图层样式,它的厚度和你想要的角半径一样。

如果你想要将物体压平以移除笔划,请继续执行以下步骤。

  • 创建一个新层。
  • 在图层面板中,选择新图层和上一层。
  • 合并图层(Command-E)。
stroke例子

笔划法的一大优点是它是动态的,因此可以实时编辑半径,它还可以用来轻松地创建其他圆形形状,如下所示。

哪种方法最好?

在大多数情况下,使用圆角矩形工具与Snap像素打开将提供伟大的结果,是最快的。如果你希望能够在不重新绘制的情况下更改角的半径,那么可以使用描边方法。

然而,如下所示,每种方法产生不同的结果。因此,根据你的目标,你可能需要在不同的情况下组合使用方法。

对比图解

在写这篇文章之前,我实际上并不知道圆角矩形工具的Snap to Pixel选项,所以这绝对是值得一试的——我的工作流程现在明显更快了。所有测试都是在Mac电脑上使用Photoshop CS4和CS5完成的。两个版本的测试结果是一致的。

赞(1)
未经允许不得转载:srcmini » Photoshop圆角矩形使用总结

评论 抢沙发

评论前必须登录!