如何使用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://jingyan.baidu.com/article/67508eb4e720ee9cca1ce42c.html=========================关于韦德1946=========================

xueui.cn 韦德1946发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

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

qrcode_for_gh_672cf3f94568_25841131

转载请注明:韦德1946 » PhotoshopCC新功能 生成图像资源(切图)

登录收藏
 
你可能喜欢的:
5分钟学会轻质感3D图标5分钟学会轻质感3D图标
UI设计背景模糊效果详解UI设计背景模糊效果详解
插画临摹教程插画临摹教程
PS合成浪漫秋天场景PS合成浪漫秋天场景
【梦幻开年】PS合成梦幻萤火虫场景【梦幻开年】PS合成梦幻萤火虫场景
在PS里面创建毛茸茸的文本效果在PS里面创建毛茸茸的文本效果
轻松实现Glitch故障效果轻松实现Glitch故障效果
揭秘Cinemagraph(微动效果)的前世今生揭秘Cinemagraph(微动效果)的前世今生
PS教程之双重曝光的魅力PS教程之双重曝光的魅力
Photoshop绘制细致的灯管效果Photoshop绘制细致的灯管效果