如何使用PhotoshopCC生成图像资源新功能,看PS怎么自动导出自定义大小、格式、名称的文件。web设计图片分层导出的有效工具!我们可以让Photoshop自己随时导出我们设置大小、格式、压缩品质的图像,web设计的一大亮点。

切图其它方法:

photoshop切片使用小技巧(切图)

做ui必备–PS切图动作用法

工具/原料

Photoshop软件

生成图像资源功能启用和导出位置

  1. 1

    在Photoshop中点击“编辑”>“首选项”>“增效工具”,选择启用生成器

    0ff41bd5ad6eddc489de7ced3bdbb6fd526633ef
  2. 2

    “文件”>“生成”>“图像资源可用(如果设置首选项中没有在启用生成器上打钩,此功能将不可用)

    f11f3a292df5e0fe002041175e6034a85edf72e8
  3. 3

    新建一个图像资源生成案例文件

    a9d3fd1f4134970a8668d83997cad1c8a7865d89
  4. 4

    制作3个按钮,分别为默认状态,鼠标经过,鼠标点击

    8b82b9014a90f60375e954513b12b31bb051ed4f
  5. 5

    怎么导出呀,把图层名称加上格式后缀,再点击菜单“文件“>”生成”>”“图像资源“,就能自动同步导出。

     

    d8f9d72a6059252d860dd512369b033b5bb5b98a
    55e736d12f2eb9381f35b2e4d7628535e5dd6f481
  6. 6

    默认导出的文件位置为本文档的存储位置,如果本文件没有存储,会自动导出到桌面,文件名为,“本文档名称“+ ?”-assets“!

     

    6d81800a19d8bc3e1f1dcedc808ba61ea8d3458b
  7. 7

    查看导出的内容

    00e93901213fb80e048aa9c134d12f2eb9389449
    END

生成的图像资源的方式

  1. 1

    层组将合并组内的图像生成一个文件,将上面3个按钮建一个图层组导出效果如下:

    3b292df5e0fe99252618a14636a85edf8db17194
    6159252dd42a283460b1fe1d59b5c9ea15cebf95
  2. 2

    如果图层组内的图层也有名称,图层组将导出一个文件,图层组内的图层也分别导出文件。

    80cb39dbb6fd52660d3df402a918972bd4073696
    d0c8a786c9177f3eda60341b72cf3bc79f3d5654
    END

图像资源导出的大小

  1. 1

    要导出不同的格式,只需把图层名称的后缀改成相应的格式后缀就可以了。默认jpg格式以90%品质生成,png格式以32为图像生成,gif以alpha透明度生成

     

    8ad4b31c8701a18b92fbda599c2f07082838fe90
  2. 2

    要导出不同的大?。荷柚么笮〔问?,大小要和名称之间加一个空格。百分比单位加上百分号。

     

    2934349b033b5bb59e81e8e834d3d539b600bc56
    63d9f2d3572c11df80807735612762d0f703c257
  3. 3

    像素单位需要设置长度和宽度,不用加单位

     

    b21bb051f81986183b17279248ed2e738bd4e650
    738b4710b912c8fc09a33edbfe039245d6882150
    END

图像导出的压缩比例

  1. Jpg格式在后缀后面加上1-10或者1-100%

     

    4e4a20a4462309f7ad296504700e0cf3d7cad666
    aa64034f78f0f73657ad84170855b319ebc41351
  2. png格式输出品质设置分别为8,24,32

     

    c2fdfc039245d6881b507ab2a6c27d1ed21b2452
    d009b3de9c82d15865cf91a7820a19d8bc3e4253
    END

注意事项

这是PhotoshopCC 14.1的一个新功能
原文地址:http://www.ccopus.com/article/67508eb4e720ee9cca1ce42c.html=========================关于学ui网=========================

ccopus.com 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

QQ群:36013311 ? ??APP截图站:app.ccopus.com? 海量APP截图,让你灵感爆发!

qrcode_for_gh_672cf3f94568_25841131

转载请注明:学UI网—UI设计师学习教程平台 » PhotoshopCC新功能 生成图像资源(切图)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
VIP勋章拆解教程 [ps教程]VIP勋章拆解教程 [ps教程]
写实插头图标教程[PS教程]写实插头图标教程[PS教程]
《纪念碑谷2》图标教程[ps教程]《纪念碑谷2》图标教程[ps教程]
Pixel Sorter创建潮流线粒风格!Pixel Sorter创建潮流线粒风格!
用PS制作动感激爽水花文字用PS制作动感激爽水花文字
《Lit the Torch》解密游戏Icon[教程]《Lit the Torch》解密游戏Icon[教程]
立体字母LOGO设计[教程]立体字母LOGO设计[教程]
教你创建炫酷的星际文本效果【PS教程】教你创建炫酷的星际文本效果【PS教程】
PS制作颜料手绘字PS制作颜料手绘字
快速玩转灵活多变的线条艺术造型快速玩转灵活多变的线条艺术造型
?