Render.ly是一款專業的ps導出插件，主要功能包括UI屏幕替換、一鍵提取web字體和資源、智能切圖、導出不同類型的切片。兼容衆多photoshop版本，爲ps導出帶來了更便捷的操作，需要的朋友可以下載！

軟件功能

UI效果圖片存儲

首先，我们把操作变得十分简单。Photoshop CC 2015中，只要你愿意，每个最外层图层组或画板都能被导出为一个单独的UI效果图片。

其次，我们把功能变得十分强大。在分组名前添加「 &」，即可分别导出UI效果图片。

還有，你可以創建全局組件，它能出現在每一個UI效果圖片中。

字體

所有的矢量图标都能以web字體的样式导出，下方是图标及对应代码，只需复制粘贴即可，可用于网站、iOS或Android APP使用。你再也不用为了满足各种平台需要，导出成吨的图标版本了!

Render.ly使用教程

下载完成后解压“.zxp”格式文件，复制粘贴到D:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Adobe Photoshop CS6 (64 Bit)\Plug-ins\Panels下即可。

把每個最外層組或PS畫板都視爲一個單獨的UI屏幕;

你可以使用前綴來整理你的設計稿;

你還可以使用遮罩來控制輸出元素或UI屏幕的大小尺寸。

「&」

【綠框】添加“&”作爲圖層名前綴，可創建一個供替換的UI屏幕組，導出的時候將會分別形成輸出各自的顯示效果。例如：該示例圖可生成：home.jpg、home-place.jpg及home-questions.jpg。

【藍框】未加“&”的圖層將做爲共有元素，在所有輸出圖片中顯示。

「*」

【綠框】添加“*”作爲圖層名前綴，可創建全局元素，它將出現在所有輸出圖片中。

【蓝框】同级或下层的标有“*” 的元素，将被合并到所有供替换的图片中。与此同时，在导出过程中，它会被无视，以防导出一个只包含自己元素的图片。例如：如果你想把“status-bar-blue”合并到所有屏幕，并不是把它作为另外一个单独的屏幕。

「-」

【紅框】添加“-”作爲圖層名前綴將在導出UI屏幕圖片時排除此圖層。小提示：當你繪制一些“以後可能會用”的元素或保存靈感圖片時，這個功能很有用。

ICON

你可以使用“.png”, “.svg”或”.gif”图层名后缀来创建icon，这个方式对图层或图层组都适用。矢量图形可被导出为web字體格式，如果你更喜欢平时使用的.png的话，我们也可以提供所有需要的尺寸供你选择。小提示：把icon保存为矢量格式非常好用。

按鈕

【绿框】添加“.btn” 后缀来创建按鈕。

【蓝框】在按鈕图层组的子图层中，你可以用:hover、:pressed甚至:gocrazyAdd来命名，区分不同的按鈕状态。这个功能对于需要处理9patch按鈕的android开发者来说，十分方便。

圖像

使用“.jpg”后缀可以导出栅格化圖像，默认圖像品质为90%。小提示：这个功能适用于导出占位圖像或背景等。

雲端查看

插件提供了雲共享功能，只需一鍵，你就可以導出你的畫板或UI屏幕到任意設備上查看。