Photoshop

PhotoshopCC新功能 生成图像资源(切图)

字号+ 来源:网络收集 编辑整理: 飞燕前端网 2013-11-11 11:50:52

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

如何使用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的一个新功能


1.飞燕前端网遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.飞燕前端网的原创文章,请转载时务必注明文章作者和"来源:飞燕前端网",不尊重原创的行为飞燕前端网或将追究责任。

相关文章
网友点评