新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > Photoshop教程 > 如何利用Photoshop或illustrator让图片和文字的像素清晰可辨

如何利用Photoshop或illustrator让图片和文字的像素清晰可辨

时间:2014-06-27   文章来源:马海祥博客   访问次数:

大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,当我们把图片放大、缩小、旋转后虚边变的更严重了,或者是在AI里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变“糊了”,这是我们双眼所不允许的,我们要让每一个像素都清晰可辨。

要想解决这些问题就要先理解PS像素组成的原理,了解一些设置选项和使用技巧,下面我就借助马海祥博客的平台上跟和大家分享一下如何利用Photoshop或Illustrator让图片和文字的每一个像素都清晰可辨:

1、绘制边缘清晰的“形状图层”

我们通常在PS(Photoshop)里绘制矩形时会用“矩形工具”,这样产生的是矢量的形状图层,它的好处是我们无论放大缩小时都保持矢量属性,但当我们放大视图看时还是有虚边(如下图所示),这些虚边虽然在绘制大的图形时影响不太大,但当我们绘制很小的像素级图标时,就会很明显了。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

解决方法是选中下图列出的“对齐像素”选项,当我们再绘制同样的矩形时,放大视图看边缘就清晰可辨了(如下图所示)。其中的原理是:我们屏幕显示的图像是由无数个像素组成的,也就是说像素是图形的最小单位,通常当我们绘制的图形不是整数像素时,比如宽是20.5像素,那0.5的像素小于1像素,PS就会以虚边显示。当选中“对齐像素”选项时,我们绘制的宽、高将都是整数了(有兴趣的可以查看一下马海祥博客的《JPG、PNG和GIF图片的基本原理及优化方法》相关介绍)。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

2、旋转图形时保持边缘清晰

当我们以矩形的中心点90度旋转时,得到的矩形缺失了两个边。这是什么原因呢?

得知这个矩形的长是奇数、宽是偶数。当以中心点旋转时像素不能整分,所以得到这种结果。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

解决办法是:可以选矩形的四个角的任一顶点为中心点旋转,或者使矩形的长宽都为奇数或偶数值。如果我们的操作是旋转并缩放图形,最好是旋转完按确定,再进行缩放,不要连续操作完再确定,这样得到的结果会比较清晰。

3、让字体的每一个像素都清晰可见

但是在PS里,字体会有很多虚边,如下图,放大之后字体的虚边就很明显了,字体也显的不是很清晰。这样是很影响视觉效果的,有同学会说,将文字栅格化之后删除那些虚边或者得到选区,收缩1像素,可是,在实际运用中文字都是会变形的。那么我们该怎么办呢?在此,马海祥告诉大家一个方法来解决这个问题:

(1)、先将字体放大后,可以看见有虚边。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

(2)、右键文字图层,点击:转换为形状。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

(3)、如下样子,文字会出现路径及锚点。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

(4)、可以看见放大文字层后,虚边较多,注意:用直接选择工具 ,拖动锚点,往虚边的里面拖动。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

(5)、把虚边一点一点的往里拖动,要注意耐心和细节,最后对比一下,是不是很清晰了呢。

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

现在不管放大多少倍都不会有虚边了。

4、AI粘入PS时保持边缘清晰

如何利用Photoshop或Illustrator让图片和文字的像素清晰可辨-马海祥博客

有时当我们在AI(Illustrator)里绘制了图标后,粘到PS里就会出现如下图的虚边,这是有两种原因造成的:

一是在AI里新建文件时没有选中“对齐像素网格”选项(只有AI CS5以上版本有这个选项),这样绘制的图标的各个数值不为整数的情况,粘到PS里就会出现虚边。

再一个是选中了“对齐像素网格”选项粘到PS中依然出现虚边,这是要在粘之前在PS中建一个与图标大小相同的选区,再粘进来就OK了,因为PS中粘贴板中的图标粘入到视图时,图标是以被粘入视图的中心点定位粘贴的,这样粘贴的位置可能不是整数值,所以会出现虚边,这时我们要建一个同样大小的选区,再粘就没问题了。

还有粘贴时选“形状图层”,这样以后的可编辑性会比较强。

马海祥博客点评:

illustrator(简称AI)是矢量图的创作、处理软件,主要用来制作动画、艺术创作的,它生成的矢量图可以无限放大而不失真和损失。此外它可以将矢量图导出为位图,得到质量不错的位图,然后再用位图软件进行后期处理。

Photoshop(简称PS)就是位图的合成处理软件,主要用来对各种已有的素材进行后期加工处理,合成各种各样的图片。比如广告图片等等。

所以,两者最大的区别:一个是矢量图,一个是位图;一个是创作型,一个是合成处理型;一个处于前期,一个后期。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/Photoshop/649.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: Photoshop illustrator 图片像素 文字像素

上一篇:从PNG格式和透明度来看PC端和手机端该用哪种Png图片
下一篇:如何利用Photoshop的路径工具设计制作文字图案

今日话题更多>

SEO研究院 更多 >>