- 綠色版查看
- 綠色版查看
- 綠色版查看
- 綠色版查看
- 綠色版查看
功能介紹
UI效果圖片存儲(chǔ)
首先,我們把操作變得十分簡(jiǎn)單。Photoshop CC 2015中,只要你愿意,每個(gè)最外層圖層組或畫(huà)板都能被導(dǎo)出為一個(gè)單獨(dú)的UI效果圖片。
其次,我們把功能變得十分強(qiáng)大。在分組名前添加「 &」,即可分別導(dǎo)出UI效果圖片。
還有,你可以創(chuàng)建全局組件,它能出現(xiàn)在每一個(gè)UI效果圖片中。
字體
所有的矢量圖標(biāo)都能以web字體的樣式導(dǎo)出,下方是圖標(biāo)及對(duì)應(yīng)代碼,只需復(fù)制粘貼即可,可用于網(wǎng)站、iOS或Android APP使用。你再也不用為了滿足各種平臺(tái)需要,導(dǎo)出成噸的圖標(biāo)版本了!
使用方法
下載完成后解壓“.zxp”格式文件,復(fù)制粘貼到D:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Adobe Photoshop CS6 (64 Bit)Plug-insPanels下即可。
把每個(gè)最外層組或PS畫(huà)板都視為一個(gè)單獨(dú)的UI屏幕;
你可以使用前綴來(lái)整理你的設(shè)計(jì)稿;
你還可以使用遮罩來(lái)控制輸出元素或UI屏幕的大小尺寸。
「&」
【綠框】添加“&”作為圖層名前綴,可創(chuàng)建一個(gè)供替換的UI屏幕組,導(dǎo)出的時(shí)候?qū)?huì)分別形成輸出各自的顯示效果。例如:該示例圖可生成:home.jpg、home-place.jpg及home-questions.jpg。
【藍(lán)框】未加“&”的圖層將做為共有元素,在所有輸出圖片中顯示。
「*」
【綠框】添加“*”作為圖層名前綴,可創(chuàng)建全局元素,它將出現(xiàn)在所有輸出圖片中。
【藍(lán)框】同級(jí)或下層的標(biāo)有“*” 的元素,將被合并到所有供替換的圖片中。與此同時(shí),在導(dǎo)出過(guò)程中,它會(huì)被無(wú)視,以防導(dǎo)出一個(gè)只包含自己元素的圖片。例如:如果你想把“status-bar-blue”合并到所有屏幕,并不是把它作為另外一個(gè)單獨(dú)的屏幕。
「-」
【紅框】添加“-”作為圖層名前綴將在導(dǎo)出UI屏幕圖片時(shí)排除此圖層。小提示:當(dāng)你繪制一些“以后可能會(huì)用”的元素或保存靈感圖片時(shí),這個(gè)功能很有用。
ICON
你可以使用“.png”, “.svg”或”.gif”圖層名后綴來(lái)創(chuàng)建icon,這個(gè)方式對(duì)圖層或圖層組都適用。矢量圖形可被導(dǎo)出為web字體格式,如果你更喜歡平時(shí)使用的.png的話,我們也可以提供所有需要的尺寸供你選擇。小提示:把icon保存為矢量格式非常好用。
按鈕
【綠框】添加“.btn” 后綴來(lái)創(chuàng)建按鈕。
【藍(lán)框】在按鈕圖層組的子圖層中,你可以用:hover、:pressed甚至:gocrazyAdd來(lái)命名,區(qū)分不同的按鈕狀態(tài)。這個(gè)功能對(duì)于需要處理9patch按鈕的android開(kāi)發(fā)者來(lái)說(shuō),十分方便。
圖像
使用“.jpg”后綴可以導(dǎo)出柵格化圖像,默認(rèn)圖像品質(zhì)為90%。小提示:這個(gè)功能適用于導(dǎo)出占位圖像或背景等。
云端查看
插件提供了云共享功能,只需一鍵,你就可以導(dǎo)出你的畫(huà)板或UI屏幕到任意設(shè)備上查看。
您的評(píng)論需要經(jīng)過(guò)審核才能顯示
有用
有用
有用