【学UI网福利】身为UI设计小白也不怕，一起努力一起搞学习。从此不再迷茫~
如何使用PhotoshopCC生成图像资源新功能，看PS怎么自动导出自定义大小、格式、名称的文件。web设计图片分层导出的有效工具！我们可以让Photoshop自己随时导出我们设置大小、格式、压缩品质的图像，web设计的一大亮点。
切图其它方法：
Photoshop软件
生成图像资源功能启用和导出位置
在Photoshop中点击“编辑”&“首选项”&“增效工具”，选择启用生成器
“文件”&“生成”&“图像资源可用（如果设置首选项中没有在启用生成器上打钩，此功能将不可用）
新建一个图像资源生成案例文件
制作3个按钮，分别为默认状态，鼠标经过，鼠标点击
怎么导出呀，把图层名称加上格式后缀，再点击菜单“文件“&”生成”&”“图像资源“，就能自动同步导出。
默认导出的文件位置为本文档的存储位置，如果本文件没有存储，会自动导出到桌面，文件名为，“本文档名称“+
”-assets“！
查看导出的内容
生成的图像资源的方式
层组将合并组内的图像生成一个文件，将上面3个按钮建一个图层组导出效果如下：
如果图层组内的图层也有名称，图层组将导出一个文件，图层组内的图层也分别导出文件。
图像资源导出的大小
要导出不同的格式，只需把图层名称的后缀改成相应的格式后缀就可以了。默认jpg格式以90%品质生成，png格式以32为图像生成，gif以alpha透明度生成
要导出不同的大小：设置大小参数，大小要和名称之间加一个空格。百分比单位加上百分号。
像素单位需要设置长度和宽度，不用加单位
图像导出的压缩比例
Jpg格式在后缀后面加上1-10或者1-100%
png格式输出品质设置分别为8，24，32
这是PhotoshopCC 14.1的一个新功能
原文地址：/article/6ee9cca1ce42c.html=========================关于学ui网=========================
< 学ui网发布高质量ui设计教程和设计分享经验，希望打造一个最好的ui学习教程平台！
海量截图，让你灵感爆发！
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
海量APP截图，让你灵感爆发！国内最好的APP截图站。
同一个APP，IOS和安卓截图对比分析，并且提供5种以上尺寸的APP截图打包下载，真贴心。
专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【学UI网 原创文章 投稿邮箱：，也可以找各个群的管理】
你可能喜欢的：
【学UI网福利】身为UI设计小白也不怕，和YY讲师一起努力一起搞学习。从此不再迷茫~手机号/邮箱:?
使用第三方登录：?
还可以输入 300 字符
请输入举报理由
选择收藏分类：
默认收藏夹
添加收藏分类：
酷友观点/经验：PS（photoshop cc）快速导出@1x @2x @3x 图的技巧(原创文章)
系统分类：
文章版权：
原创，如需商业用途或转载请与
联系，谢谢配合！
南京 / 平面设计师42天前发布
PS（photoshop cc）快速导出xx @1 @2 图的技巧
在移动端UI设计切图的时候，我们经常碰到需要切@1x @2x @3x的图；
那么@1x @2x @3x是什么？苹果为了便于程序员的开发，不同分辨率的设备开发时统一为一个尺寸而标记的。例如iPad2& 是768 x 1024，iPad Retina 是1536 x 2048，开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果，使用的图片大小不一样。这时候就用同一个名称，但 Retina 的图加上 @2x 后缀。
&& @1x@2x@3x标示在iphone中的划分：
@1x 为非retina屏的iphone。iphone4以前，不包含4的手机需要使用这个标示。
@2x 为retina屏的iphone准备。iphone4/4s/5/5c/5s/6 使用该标示，最常用；
@3x 专为iphone6p准备。iphone6 plus使用该标示，比较常用&；
&&& 为了更好的适配各版本情况，下面演示分享一个利用PS CC 软件直接导出所需切图的技巧：
1.&&& 打开PS软件，新建一个文件（以iphone5分辨率640*1136为例，这个分辨率下标注是@2x后缀& ）；
2.&&& 新建一个图层，拖进一个在此分辨率下适中的图标（图标制作时，建议用几何体制作矢量图）；
3.&&& 给这个图层命名为 100% icon@2x.png
如果我们想制作兼顾iphone4以前的版本就需要制作@1x图片，@1x是@2x图的一半，命名为 50% icon@1x.png
兼顾iphone6p时需要采用@3x 图片，为当前@2x的1.5倍，命名为 150%
（注：icon是文件的命名 后缀@2x 会在iphone4/4s/5/5c/5s/6优先识别）
.png& 为导出的png格式，除了可以导出png格式，我们也可以导出jpeg格式，只需将后面.png改成.jpeg 就可以了。
4．点击菜单栏“文件”&“生成”&选择“图像资源”(这一步很重要)
5．保存文件(暂命名icon)& 在保存的文件旁会有一个 icon–assets 的文件夹，打开文件就可以看到你需要切的图。
&& 注意事项：
1.若要同时导出@1x& @2x& @3x 可在图层中复制一下图层，同时命名好三个图层名，一次性导出所需要的图片；
2.另外在制作图标时我们还会碰到，比如我要导出64*64尺寸 （注红色部分为透明）png的方形的图标，
那么我们可以在这个图标图层上新建一个组，
在这个组里面，我们再新建一个64*64px 的矩形，将矩形的填充设置为0，
然后将组的命名按照之前说的 100%
下面参照之前步骤 勾选图像资源，导出后 ，
在icon-assets 文件夹中，找到所需要的图标;
初次制作分享，欢迎各位互相切磋~
南京 / 平面设计师42天前发布
同时推荐此文章
还可以输入2000 个字符
所有，如需商业用途或转载请与
联系，谢谢配合！ps cc怎么将bmp图片制作成gif动画效果?
作者：佚名
字体：[ ] 来源：互联网 时间：12-25 09:03:03
ps cc怎么将bmp图片制作成gif动画效果？bmp想做出唯美的gif动画效果，就必须掌握色阶的使用，如果想要达到更好的效果。可以把色阶的数值再设置的小一些，这样过渡会更自然，下面我们来看看详细教程
如果想要达到更好的效果。可以把色阶的数值再设置的小一些，这样也会让动画过渡的更加自然一些。在这一节中将重点击来介绍最后动画的制作。
1、接上一篇经验的步骤。把图层复制后，用色阶调整到bmp图片中只能看到黑色的，而看不到一点的白色这样就达到了要求。接下来就需要把最上面的花的图层前面的小眼睛打开。
2、按着键盘上面的ctrl+j键复制一层花的图层。选择图层1拷贝层。这里需要把这个花的图片制作一个从小到大的效果。也就是配合着bmp图片来共同完成一个动画效果。让花的图片也有运动感。
3、点击编辑菜单下面的自由变换。把这个图片进行一个放大的处理。这时在进行放大的时候需要注意。这里需要把这个变换的中间点移动一下位置。用鼠标移动这个中间的中心点到花的中间位置。让花的图片在放大的时候以花的中间来进行放大。
4、直接把中间的锚点移动到花的中间后，然后按着键盘上的alt+shift键选择图片的一角把图片进行等比例的放大。这样进行放大后图片也不会变形。接着再把花的图层1拷贝再复制一层，得到图层1拷贝2。同样这次也需要把锚点移动到花的中间，然后进行等比例的放大。
5、把图片放大后，点击上面的对勾确定。接下来还需要再复制一个花的图层。按着键盘上的ctrl+j键复制图层1拷贝2，得到图层1拷贝3的图层。把这个图层也进行一个等比例的放大。
6、接着来点击窗口下面的时间轴，下面就要调出时间轴来做时间轴的动画。把时间轴调出之后，在时间轴上面点击创建帧动画。
7、这里不直接在时间轴上面添加动画。而使用时间轴上面菜单中的从图层建立帧来进行添加，这样可以直接把图层面板中的图层全部快速的添加到时间轴上面。在时间轴的右边可以看到这里有一个向下的小按钮，点击一下在弹出的列表中选择从图层建立帧。
8、这时就会在时间轴上面显示出来图层面板中的所有图层。这时可以看到在图层面板中还是只能看到花的图片并不能显示出来下面的背景层。这时需要通过模式把花的图层的模式更改一下。
9、选中上面花的图层。默认的模式是正常。这里把模式更改为滤色。把模式更改为滤色之后，面在可以看到下面的背景层。把时间轴上面的第一个图片调整好之后，接下来就要调整时间轴上面的第二个图片。
10、选中时间轴上面的第二个图片。接着在图层面板中把第一个花图层前面的小眼睛关闭。点击打开第二个花图层前面的小眼睛。这时可以看到在这个花的图层上面它的模式也是正常的，这里也需要把它的模式更改为滤色。
11、把第二个花的动画调整好后，选中时间轴上面第三个图片。同时选择中图层面板中的第三个图片图层1拷贝。把下面第二个图片前面的小眼睛关闭。打开第三个图层前面的小眼睛。记得也要把这个花图层的模式更改为滤色。
12、接着来要处理最后一张花的图片。在时间轴上面选中第四张图片。在图层面板中把第三个花图层前面的小眼睛关闭。打开上面的第四个花图片前面的小眼睛。并把它的图层模式更改为滤色。
13、接着就需要把时间轴上面的时间进行一个设置。默认的是0秒。这里面要根据想要的效果来更改它的时间，把后面的全部选中。点击时间上面的按钮。把时间改为1秒。这里时间并不固定。需要根据播放效果来不断的做出调整。
14、在播放后，看到最后的图片并不是放大，这里面要把后面从5开始到最后的图片全部选中。然后在图层面板中把第一张图片前面的小眼睛关闭。选择打开最上面的一个图片前面的小眼睛。最后把循环次数更改为永远。
15、调整好后，接下来就可以把这个动画进行输出。可以选择输出视频，这里只输出动画。点击文件菜单下面的存储为web所用的格式。点击存储。在弹出的界面中把它命名一个名字保存到一个位置后，点击完成。这样就把bmp动画效果制作完成。
相关推荐：
大家感兴趣的内容
12345678910
最近更新的内容}