png网格素材-矢量素材的分类

Jean-Marc Denis(原文作者,前Sparrow设计师,现在在Google工作)在参加WWDC 2013时认识了Sketch的开发团队,所以在第一时间尝试了Sketch,当时由于一些功能的缺失,所以还是折回去使用Photoshop了。过了一段时间,他发现设计师社区开始疯狂着迷于这款新的设计工具,所以决定再试一试,想看看迭代了一段时间的Sketch现在能完成多少原先他需要用Photoshop来做的工作。现在,他80%的设计工作都是由Sketch来完成的,所以写了这篇文章来帮助大家一起了解Sketch。

为什么我们会期待一个新的设计工具?因为当我们更多的关注效率和关注协作,就越发现Photoshop已经不足以满足我们的期待了。下面看看具体的理由:

Photoshop是为图像处理开发的,诸如路径和矢量工具都是后期才加上去的,所以如果你关心一下Photoshop的更新路径,用户界面设计师完全不是Adobe做这条产品时关心的用户群。所以,如果抛去那些复杂的功能,一个为用户界面设计师打造的设计工具完全可以做得更简单,更高效。

相信我们都会觉得为不同的设备输出不同分辨率的素材而痛苦不已吧。或许,你会使用一些第三方插件或是启用一些模板来处理这些事,但依然是很浪费时间的。

Photoshop的引擎是上个世纪为图像处理而打造的,非常的耗费资源,即使是启动一下都要等很久,更别说一次移动多个分组了。话说回来,由于要兼顾Mac和Windows平台,能做到这样已经不容易了。

大公司的执行效率实在太低。不知道大伙是不是和我一样,非常痛苦地等了好几个月才等到Photoshop对Retina屏幕的支持。诸如自动对齐的等功能我已经不做期待了。

有没有梦想过拜托机械的手动保存?Sketch可以做到。Sketch在工作的时候会不断地自动保存成果,并且允许你回复到此前的任一版本。

矢量图意味着可以任意扩展。你没有必要不断地去调整素材的尺寸,Sketch会自动就帮你维持一个像素级完美的作品。如果有的时候你必须用像素点来作图,比如说是画图标或者是插画设计,Sketch 也提供了从矢量切换到像素视图的功能。

你喜欢xScope吗?还是正在用选框工具来进行测量?又或者是难用的网格?Sketch的智能标尺可以帮你轻松地把设计元素的对齐方式、内外间距都调整完美。就我个人而言,这个功能非常节省时间而且避免了复杂的人工计算,是我觉得最有用的功能之一。

在Sketch里我们可以随时随地修改一个元素的圆角、高度和宽度。只需要简单地修改数值就可以轻松调整元素,对于刚从Photoshop切换过来的设计师而言非常好用。甚至会让你产生强烈的依赖。

在Sketch 里你可以很轻松地把多个图形合并,构成一个新的图形。并且Sketch在提供了多种图形合并模式的同时,还允许你随时修改已经合并图形的子图形。这项功能使得你可以很轻松地管理和创造更复杂的图形。

在Photoshop里想要让一个图层有多种混合效果是很困难的。但在Sketch里,你可以很容易给一个图层加上多种混合效果,看看下面的示例就知道了。

自动选择最接近的像素边界可以让一个图形或者是图层自动修正边距到一个像素级完善的位置。比如可以把一个宽度是5.3px的图形自动修正到5px,这样就不会有模糊的像素点和粗糙的图形了。我自己给这项功能设了一个快捷键(Command+Opitons+x),来确保我做出的每一个图形都像素级完美。这比人工一个一个按照网格修改图形高效得多。

有的时候你会做一些充斥文字的设计,样式链接可以帮助你设定一个固定的样式来快速地应用在新的文字上。如果你修改了其中任何一处的样式,那么所有链接该样式的文字都会自动更新到新的样式。并且,这项功能也可以应用在图形上。

用Photoshop的时候,最痛苦的事莫过于切割元素,然后到处素材。Sketch则可以帮助你快速地导出各种分辨率和格式(pdf, eps, svg, png, jpg, tiff)的素材,通常导出只需要一个点击,并且不用借助任何第三方应用程序。

作富文本设计的时候,布局会变得非常重要,这项功能可以帮助你快速地试验不同的方案。

其实可以把网格功能理解成按照纵横两个维度自动地结构化布局内容。这个对于排版布局而言,非常方便。

Sketch的文字渲染引擎非常出色,可以用来做很出色的文字布局和字体设计。因此,你可以放心地放弃Photoshop的抗锯齿功能。

如果你在做一些网页设计,Sketch可以帮助你快速地把你的成果到处成CSS样式。

这是一项小功能,但是确实可以节约你很多时间和精力。

Sketch Mirror是一个Universal App,可以方便你在iPhone或是iPad上查看自己的成果。(作者撰写这个文章的时候Sketch还没有推出官方的镜像工具,所以这一段是译者补充的)。

Sketch是一个小团队,发展非常快速。简单扫一眼Sketch的升级日志,你会发现每一个更新都会带来新的功能。

我非常建议你去使用Beta版本,你会见证Sketch快速的升级。

Sketch团队非常善于聆听用户的诉求,因而软件不断地变得更好。你可以去tenderapp上向他们提出新功能的要求。

矢量素材一共分为三个格式最为常用。分别是AI格式,EPS格式和CDR格式。 我们来说一下Illustrator与Photoshop 的软件转换格式运用 同时期待高手指点 完善内容

AI格式转换PSD分层格式

AI文件想导出完全分层还是一个图层,取决于你设置先用AI软件打开文件

2.选择文件菜单-导出-选择PSD格式

3.保存选择导出选项设置几个关键选项:写入图层,最大可编辑性,消除锯齿等关键选项

4.用PS软件打开这个PSD格式文件图中的编组,就是图层了,因为你勾选了最大可编辑性,所以每一个对象都成为了图层,你可以根据情况进行合并,以减少文件不必要的增大。

PS抠图文件导入到AI里面背景为透明技法

先用PS抠出图像使其文件只剩下抠出图像这一个图层

将其模式改为RGB模式

保存类型为PNG格式

使用AI软件将此文件导入可以看到PS软件抠出的图像独立出现

背景为透明的 AI格式与CDR格式互换

一.打开AI格式文件转换另存为EPS格式,版本选8.0或以下版本

打开CDR软件导入上个EPS格式文件再保存CDR8.0或8.0BIDI版本

校对CDR文件和原AI文件是否不同

二.1、CD12可以打开AI10及以下版本的文件。[效果和网格填色除外]

2、CD9可以打开AI7及以下版本的文件。 [效果和网格填色除外]

3、AI10文件和以下版本的文件最好在AI10软件保存,高版本导出的AI10可能在CD中不兼容。

总结得出,AI11及以上版本的AI文件,导出成AI10及以下版本即可在CD12或9中打开。能支持的功能有填色、渐变,蒙板将自动删除蒙板以外的物件、图案填充将被打散。效果和网格还未偿试到更好的导出方法。

4、把AI转换成PSD格式,然后再导入CD中。

5、CD X3可以打开AI CS以下的AI文件及EPS文件,效果和渐变除外!

6、CDR12 可以另存为AI 格式的,就是存前要转曲线!效果很好.

三.1,先用AICS2打开这个AI文件,另存为AI10格式,这样完整地保存了文件和填色\组合等属性.

2,用AI10软件打开这个AI10格式的文件,另存为AI7格式,这样降低了文件大小,依然保持了所有属性,因为文件版本更低,所以兼容性更好,方便在CD中完全读取.

3,用CDR13打开这个AI7文件,这样看到除了CDR通病颜色不够亮外,基本上将AI文件填色,组合方式与层次等所有属性完整导入了CDR格式转换AI格式

打开CDR格式文件再保存CDR8.0或8.0BIDI版本

打开AI软件直接打开这个CDR文件(12版本也可以)

CDR12版本可以另存为AI格式文件如不再修改存前最好转曲,若修改保存时选择文本

用AI CS5打开,保存成AI CS的,然后用CD X4打开,保存成CD 8,再在CD9里打开调整一下,保存备用 CDR格式转换PSD分层格式

1.CDR文件想导出完全分层还是一个图层,还是取决于你的设置先用CDR软件打开文件

2.点击工具菜单栏的对象管理器,选择你要分层的页面打开图层一(里面就是分层的图形)

3.新建图层N个,把图层一里面的图像分别对应放入每个新建图层

4.点击文件菜单栏中的导出功能--选择保存类型PSD文件--点击导出--转化为位图面板选择右下角保持图层打上对号--选择确定--完成

5.用PS打开此导出的PSD文件 可以看到每个图层就是CDR里面新建的那些图层

PSD分层格式导入CDR里面分层

PS保存文件为PSD文件 用CDR软件打开

2.只需要选择导入的图像右击取消群组 就可以看到每个图层的位图效果了

当然,这里说的是排除别人找的素材本身更清晰的情况,找高清素材图可以看看

要说这个问题,还得从说公众号图片格式说起,目前公众号文章里的配图格式基本就是三种:JPG、PNG、GIF。

简单介绍一下:

Gif算是比较老的图片格式了,适合矢量图和颜色比较少的图片。它的色彩效果最低,对于色彩比较丰富的图片容易失真,但是有个极大的优势:体积小,并且支持透明效果。

JPG是数码相机最常用的格式,其特点是色彩还原好,可以在照片不明显失真的情况下,大幅降低体积,不支持透明。照片类的图片、自然风景之类的最好都用JPG。

PNG的优点是,清晰,无损压缩,可渐变透明,具备几乎所有GIF的优点,但是不如JPG的颜色丰富,同样的图片体积也比JPG略大。另外,截图基本都该用PNG。

大小比较:通常PNG ≈ JPG > GIF

色彩丰富程度:JPG > PNG >GIF

透明性:PNG > GIF > JPG

而说到微信公众号后台图片上传,图片尺寸不大时,基本没什么影响。但是,当图片体积较大或尺寸较大时会被压缩上传。这就是问题所在,当jpg或png格式的大图上传微信后台时,宽度会被压缩到640px,而GIF格式上传到微信后台不怎么会被压缩。

所以说,图片上传也是有策略的,你永远都是在上传JPG格式的图片,当然就会发现自己公众号的图片没有别人的高清。

而关于压缩,有2个概念大家需要知道:有损压缩、无损压缩。

有损压缩:特点是保持颜色的逐渐变化,因为素点的数据信息,所以存储量会降低,还不会影响图像的还原度质会有所下降。JPG是有损压缩格式,在存储图像时会把图像分解成8*8像素的网格单单独优化,这就是平时保存JPG图片时图像会模糊的原因。

无损压缩:利用数据的统计冗余进行压缩,真实的记录图像上每个像素点的数据信息,多次存储后图片的品质不会下降。为什么无损压缩的图也会有失真的?因为他的压缩原理是通过索引图像上相同区域的颜色进行压缩和还原,也就是说只有在图像的颜色数量小于我们可以保存的颜色数量时,才能真实地记录和还原图像,否则就会丢失一些图像信息。例如PNG8和GIF格式,而PNG24为真彩色所以颜色表为空,不会失真。

所以,总结一下,为什么同一张图,在别人公众号就更加高清?

格式不对嘛!

在公众号后台对于图像的使用,我们需要考虑图片的使用场景以及色彩情况,然后再去把图片保存为不同格式使用,不是你找高清大图就意味着上传微信后也是高清的。

总体来说,具有高度浓缩并快捷传达信息、颜色数量较少的图片,比如图形图像类,文字类图片。一般可以使用PNG格式或者GIF格式,优化时可采用PNG格式为PNG8或者PNG24。

而对于通常含有百万数量级的颜色,包括平滑的颜色过渡和渐变,比较复杂的图片,一般可以用PNG和JPG,根据图片色彩的丰富程度而定。

如果使用的是高清大图,超过微信后台正常尺寸,图片会被压缩。这个时候,一般可以使用GIF格式图片,图片越大越清晰,上传后的清晰度也越高。而如果是色彩比较复杂的图片,用GIF格式失真比较厉害,也可以考虑下使用PNG24格式,因为PNG24为无损压缩,减少失真。

总结成一句话就是:能用JPG就用JPG,但涉及到图片压缩时,如果主要是大小上的压缩,可以使用GIF格式,如果主要是质量上的压缩,可以使用PNG;如果压缩后主要突出文字,可以使用GIF格式,如果压缩后主要突出色彩,可以使用PNG格式或仍然使用JPG,大家可以对比使用。