PS绘制网格背景教程(2)

来源:网络   作者:热心网友   发布时间:2016-06-15    浏览次数:481

7,接下来回到第一次新建的画布开始用我们的自定义图案绘制网格吧,没错,接下来就是见证奇迹的时候了。选择油漆桶工具,

在左上角的油漆桶子菜单里面选择图案,并点击旁边的倒三角符号,在下拉菜单中去找到你刚才定义的图案,一般会是在最后一个。

8,然后在背景图层上面再新建一个图层用以填充网格图案,用选中的油漆桶图案在新建的图层上面点击就好了,你会发现网格就填充好了,如下图所示。

9,我们来看看我们做出来的这张图和之前的那张图。

10,通过对比,我们可以看出,为什么人家的网格那么好看呢,我们的网格好像不是很好看呢。为什么我们的网格线那么粗,人家的网格就那么细致呢,同样都是1像素的单位,为什么看起来就不一样呢?难道在PS里面还可以选择0.5像素吗?或者更小的像素吗?

有的同学会说,调一下新建的网格背景的透明度就好了,你可以试试哟,即使调了透明度,效果还是不理想,即使你放大缩小看,依然没有人家的好看。

我觉得那一定是哪里出了问题了,为了解决掉这一问题,我们继续分析吧.....

11,我们来放大看看我们的网格背景,看看他到底为何那么粗,谁让他那么粗的,谁允许他那么粗的?我们放大到3200%,可以看到在参考线下,我们能看到一像素的网格是多大了。这一步调出参考线(快捷键ctrl+r),设置参考线单位为像素。

12,通过放大网格背景来看,我们终于发现了猫腻,原来有的直线占据了2像素,有的直线占据了1像素,所以才导致了最终的效果显示那么粗狂,一点也不符合我们的审美有木有。定义图案的时候我们明明是画的一像素直线啊,即使在纵向和横向都是如此,

为什么油漆桶刷出来就出现了2像素的直线了呢?我们不妨回到定义图案PSD文档去看看是怎么回事。

13,观察上图有木有得出一点思考,2像素是从哪里冒出来的,说好了的一像素呢?经过分析,我得出的结论是问题出在这里,如下图红色标注所示。当我们去掉这两条直线重新定义图案看看会出现怎样的效果。

14,去掉这两条直线以后,整个网格图案就是未闭合的图案,此时我们再用同样的方法去重新定义图案,并给图案取个名字方便识别。然后回到之前的画布,再去用油漆桶工具刷一次,看看是怎么样的效果吧。

15,通过再一次重新定义图案,再一次油漆桶粉刷,我们得出下图效果。(记得降低网格图层整体透明度到30%左右),顺便对比一下之前的图,看看效果有么有提升。

16,经过重新定义图案,我们发现问题就是出在了那里对不对,原因是为什么呢,是因为闭合的网格图案在用油漆桶工具粉刷的时候自动合并了相同的网格,造成了边缘叠加,也就是说1像素的直线经过叠加就变成了2像素的直线,为了解决这一问题,我们在网格图案定义的时候去掉边缘直线,让图案在用油漆桶粉刷的时候不用重合边缘就行了。

至于主要网格和次要网格的区分,就取决于你在定义图案的时候,对边缘直线和网格内部直线透明度的区分了。


17,设计有时候就是这么好玩,一像素的区分就会带来不一样的整体效果,尤其是在UI设计这个行业,需要太多的细节把控。希望这篇文章能给设计行业的新朋友们带来不一样的思考角度,这篇文章也送给自己。

希望小伙伴们喜欢,希望编辑给我上首页啊有木有。高清晰分辨率五码教程有木有...

12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/xinshourumen/psjiaocheng/4251.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通