茉莉网
当前位置:首页»其它

ps对齐像素网格 优设-UISDC

2017年11月22日 来源:ps对齐像素网格 大字体小字体

  以下是同样的路径几次粘贴到Photoshop后的效果。显而易见,仅有左上的图形是清晰的,其他图形的像素不是沿x轴就是沿y轴或者两个方向上都偏移了半个像素。

  PhotoshopCS6自发布以来,一直颇受好评,细心的朋友可能发现最新的PSCS6支持矢量对象绘制、变换时像素自动对齐网格,而且非常好用。PSCS6的像素自动对齐网格功能在绘图过程中,无疑方便了很多,不必再担心图形边缘会出现模糊,但是我们在实际的图形设计过程中会发现,还是会经常需要调整一些路径没有完全对齐到网格产生的半透明的过渡像素,用来平滑图形边缘减少锯齿感,或让图形看上去更饱满、更细腻,我们称其为次像素(或亚像素,Sub-pixel,一般用于屏幕显示技术等领域),如下图所示。

  像素完美之矢量粘贴

优设 UISDC

  本例中原始图层的尺寸为20×9像素:偶数×奇数。尽管位图和矢量图层在旋转后的效果不一样,但两者都变得不可用了。这是由于图层旋转的中心点没有落在某个像素边界上导致的。

  在使用自由变换工具时,把旋转的中心点挪到左上角(或其他任意一个顶角)就能确保它会落在某个像素的边界上,这样便能保证每次旋转后的结果都是完美的。为此,你需要在选择自由变换工具后在参考点设置按钮上单击下任意顶角再进行旋转。这是目前为止最简单有效的方法。

  为了让工作变得更轻松,我就为你悉心制作了一些Photoshop动作和工作流程。

  接着我们需要调整ps中网格的大小,这个可以直接按ctrl+k,然后选择“参考线、网格和切片”

  想要在常规图形(矩形、圆角矩形、圆形)绘制过程中,使像素在任何情况下都对齐网格,在PSCC的首选项窗口中,对”参考线、网格和切片”选项卡的网格参数进行简单的设置,并配合快捷键就可以做到。

优设 UISDC: 优秀网页设计联盟 SDC

  一种解决方法

  初始状态下的网格参数

  下图是在Illustrator里构造完美,像素与网格对齐的原图,尺寸正是我们想用在Photoshop中的大小。

优设 UISDC

  总而言之,只要图层的宽高是偶数×偶数或者奇数×奇数就可以了。

  只要将角点上的路径锚点分别向外移动一点,让原本颜色比较淡的次像素稍微加深就可以了,操作时,放大画布让调节更细微和精确,选中锚点,轻点多次键盘上的方向键来移动即可,这个方法不局限于箭头形状,大家可以开启像素眼去发现更多的应用场景。

  位图蒙版和矢量蒙版也会因为这个问题受到影响,因此要小心使用。但其实它只影响那些通过编辑菜单中的“自由变换”或者“变换”进行旋转的图层。如果使用图像→图像旋转对整个画布进行旋转则不会出现这个问题。

优设 UISDC

  当图层的宽高为奇数×偶数或偶数×奇数时,旋转后就会出现问题。因此,我们需要某种方法来保证图层的宽高是偶数×偶数或奇数×奇数。也许你所想到的解决方法就是给要旋转的图层增加一个正方形的位图蒙版或者添加更多的像素。除此之外,你还可以通过在另外一个图层上绘制一个正方形后跟原始图层同时旋转来解决这个问题。

  @Iamkikidong在设计网页和程序界面的时候,为了确保每一个像素的颜色、纹理和位置都准确地呈现,大多数设计师都会被搞得疲惫不堪。一不小心,一些很常用的操作像移动、旋转和粘贴就会让你的辛勤劳动付之东流。但是,如果能对你的工作流程做些小小的改动,就能在项目中始终保持作品的高质量。

  使用自由变换工具(或其他工具)把图层精确旋转90度或270度后,像素最终的显示效果将取决于图层的尺寸。如果图层的宽和高都是偶数,你就可以幸免于难。如果图层的宽和高都是奇数,也不会有问题。但是如果图层的宽是奇数,高是偶数或者宽是偶数,高是奇数,那么你将会看到如下情景:

优设 UISDC

  图4-不同网格参数呈现的效果

  解决方法是选中下图列出的「对齐像素」选项,当我们再绘制同样的矩形时,放大视图看边缘就清晰可辨了(下图)。其中的原理是:我们屏幕显示的图像是由无数个像素组成的,也就是说像素是图形的最小单位,通常当我们绘制的图形不是整数像素时,比如宽是20.5像素,那0.5的像素小于1像素,PS就会以虚边显示。当选中[对齐像素]选项时,我们绘制的宽、高将都是整数了。

  如果你不够小心,那么在Photoshop中旋转图层就会使像素遭到明显的破坏,出现模糊。

  转载请注明:学UI网»该死的像素终于对齐了(第一部)

  1、对象绘制时像素对齐网格

  哪里出错了呢?

  一种更简单的方法

  这个强烈建议UI设计开启这个功能,这个让你来矢量力不会产生半像素虚边,十分好用。但在需要微调整时可暂时关闭它。

  像素完美之旋转

  如果你在Illustrator中绘制了一幅像素对齐的原图,然后作为形状图层粘贴到Photoshop里,你可能已经留意到结果不仅不像预期的那样(一幅绝对清晰的图像),而且是糟糕透顶。下面教你如何解决这个问题。

相关内容

编辑精选

Copyright © 2015 茉莉网 http://www.szmlwh.cn. All rights reserved.