• 上傳作品
    • 上傳經驗
    • 上傳即刻

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題後@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

收集成長值
輸入邀請碼
先看看別人的即刻>

讓你擁有命名圖層就能切圖的技巧

自譯外文 分類: 規範/資料 版權: 原作者: adobe
7999 170 209 25
2019-07-20
65.7
首頁推薦

 

在今天的分享前我說個題外話,就是咱們UI中國有個編輯推薦的作品上首頁的活動,活動傳規則送門,然後歡迎大家向我提交你的編輯推薦作品!案列參考

要求1.爲你要推薦的編輯作品做一個900PX-500px的banner

要求2.將banner發送至我的郵箱:mixiaxiaoyu@gmail.com

要求3.發送banner時請附帶該作品的鏈接,回複時間周期爲一個工作日。

另外大家若有想要了解的東西,需要的資源,想了解的工具技法等等都可以留言或者私信我,也可以向我推薦優秀的作品哈!

正文開始

今天的文章可能篇幅較長,但是建議大家先看文章在看我提供的視頻!我們先來用一張動圖簡單展示一下今天要講的小技巧到底有什麽功效,至于大家是不是都知道,咋也不敢問,咋還是願意講給大家!希望對你有那麽點幫助吧!

Image title

今天要告訴大家的就是我在官方的PS技術幫助文檔中看見的關于資源生成器的使用介紹,我覺得這個對于切圖來說還是很不錯的一個小技巧。這個功能在PS CC以上的版本中都是有的。首先我將會告訴大家怎麽使用這個打開這個東西去使用,其次我會告訴大家關于這個資源生成器的一些命名語法。

1.打開方法

首先打開設置,在“增效工具”下,勾選“啓用生成器”;然後在主菜單的“文件”-“生成”,勾選“圖像資源” 在圖層面板選擇要導出的圖層,把圖層文件名改爲如“icon.png”帶圖片擴展名的圖層名,然後就完成了資源生成的全部步驟,就這麽簡單。生成的資源在文件同目錄下、以“-assets”結尾的文件夾裏。而且只要你不關閉生成器,那麽你只要修改文件,切圖的文件也將同步修改而更新!

2.正文講解開始

1.1從圖層或者組生成圖像資源

爲了更好的理解資源生成器,我給大家准備了一個簡單的PSD文件,大家可以在文末右下角點擊下載,也可以自己創建。

Image title

此文件的圖層層次結構爲兩個組和一個矩形。而這些圖層組中都包含五個圖層。

然後我們按照以下步驟從此PSD文件中生成圖像資源:

1.打開PSD文件,選擇“ 文件”>“生成”>“圖像資源”

2 將適當的文件格式擴展名(.jpg、.png 或 .gif)添加到您要從中生成圖像資源的圖層或圖層組的名稱中。例如,將圖層組 Rounded_rectangles 和 Ellipses 重命名爲 Rounded_rectangles.jpg 和 Ellipses.png;將圖層 Ellipse_4 重命名爲 Ellipse_4.gif。

注意:圖層名稱不支持特殊字符 :和*

Photoshop生成的圖像資會與源PSD 文件一起保存在子文件夾中。如果源 PSD 文件尚未保存,Photoshop 會將生成的資源保存在桌面上的新文件夾中。

Image title


注意:圖像資源生成功能針對當前文檔啓用。啓用後,無論何時再次打開該文檔,功能仍然可用。要禁用當前文檔的圖像資源生成功能,請取消選擇“文件”>“生成”>“圖像資源”。

1.2從一個圖層或者一個圖層組生成多個圖形資源

若要從一個圖層/圖層組生成多個資源,請用半角逗號分隔資源名稱。例如,以下圖層名稱生成三個資源:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

1.3將資源保存到子文件夾

您可以選擇將特定圖層/圖層組生成的圖像資源直接保存在文檔資産文件夾下的子文件夾中。在圖層/圖層組名稱中包含子文件夾名稱; 例如:

[我是子文件夾名稱] /Ellipse_4.jpg 

這句話就是說,你按照上面這樣命名,那麽該圖像資源就會在assets文件下創建新的文件夾,並且把該圖像放在裏面!

3.網頁設計案列

對于多設備的WEB設計來說,從PSD生成圖像資源是很有用的,我們來看看下面這個案列的圖層結構

Image title我們把logo和下面的網格圖像提取成圖像資源,把合適的圖像擴展名添加到對應的圖層就好了

Image title

注意:將從圖層/圖層組的內容中生成一個圖像資源。例如,上面截圖中的 AdventureCo Logo 圖層組包含一個形狀圖層和一個活動文本圖層。當從圖層組生成圖像資源時,這些圖層會進行拼合。

Photoshop 生成資源,並將它們保存在與源 PSD 文件相同的位置。(本案列會有具體視頻操作)

Image title

3.指定質量和尺寸語法

默認情況下,JPEG 資源會以 90% 品質生成。默認情況下,PGN 資源會以 32 位圖像生成。GIF 資源會以基本 Alpha 透明度生成。當然您也可以自定義品質和大小。

JPEG資源的語法

1.1.1將所需要的輸出質量添加到圖層名稱的後綴後面,格式爲.jpg(1-10)或者.jpg(1-100%)

舉例:

Ellipse_4.jpg5

Ellipse_4.jpg50%

都表示輸出質量爲50%的圖像資源

1.1.2添加所需的輸出圖像大小(相應支持的尺寸單位px,in,cm和mm)作爲資産名稱的前綴。Photoshop會相應地縮放圖像。

舉例:

200% Ellipse_4.jpg(表示放大該圖像200%)

300 x 200 Rounded_rectangle_3.jpg(表示輸出該圖像爲300x200像素)

10in x 200mm Rounded_rectangle_3.jpg(表示長10英寸,寬200毫米)

注意:請記得在前綴和資源名稱之間添加一個空格字符。如果要指定像素大小,則可以省略單位。例如,300 x 200。

根據說明,當指定所需輸出圖像大小時,可以混合使用不同的單位和像素。例如,4in x 100 Rounded_rectangle_3.jpg是資源生成的有效圖層名稱。但是我測試在文檔本身爲毫米的情況下混合使用單位會錯寫錯誤,這裏請大家注意一下哦!

PNG資源的語法

2.1.1添加所需的輸出品質作爲該資源的名稱後綴:8、24或者32

舉例:

Ellipse_4.png24(表示輸出png24)

2.1.2添加所需的輸出圖像大小(相應支持的尺寸單位px,in,cm和mm)作爲資産名稱的前綴。Photoshop會相應地縮放圖像。

舉例:

42% Ellipse_4.png

300mm x 20cm Rounded_rectangle_3.png

10in x 50cm Rounded_rectangle_3.png

 GIF資源的語法

3.1.1添加所需的輸出圖像大小作爲該資源的名稱前綴:

舉例:

42% Ellipse_4.gif

300mm x 20cm Rounded_rectangle_3.gif

20in x 50cm Rounded_rectangle_3.gif

品質參數對 GIF 資源不可用。


構建複雜圖層名稱

使用關鍵字default作爲圖層的名稱。現在,輸入要應用于從文檔生成的所有圖像資源的設置,生成資源命名圖層時,您可以使用參數指定一個圖層多個資源名稱。例如:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop 從該圖層生成以下資源:

Delicious.jpg(縮放 120% 的JPG 圖像)

Delicious.png(縮放 42% 的 24 位 PNG 圖像)

Delicious_2.jpg(100x100 像素絕對大小,90% 品質JPG 圖像)

Delicious.gif(縮放 250%的GIF圖像)

在爲同一個圖層命名是,請在每一個不同名字之間加上逗號

爲資源指定路徑

可以爲生成的資源指定文件路徑,比如:

5.1.1在名爲hi-res 的子文件夾中生成所有圖像資源

[asset_folder]/hi-res/Delicious.jpg。

5.1.2在名爲 hi-res 的子文件夾中生成所有圖像資源。此外,資源名稱的後綴爲@2x。

[asset_folder]/hi-res/Delicious@2x.jpg。

5.1.3將縮小 50%的圖像資源保存在文檔資源文件夾下的子文件夾 lo-res中

50% lo-res/Delicious.jpg。

5.1.4從圖層生成兩個圖像資源:

一個在hi-res 子文件夾中,圖像資源名稱的後綴爲@2x 一個在 lo-res 子文件夾中,圖像資源縮小50%

 hi-res/@2x + 50% lo-res/Delicious.jpg。

除了逗號 (,) 之外,您還可以使用加號 (+) 作爲圖像資源名稱之間的分隔符。例如:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

等同于:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Image title

其實圖片格式還可以是WEBP和SVG,但是最新的官方語法裏面沒有提及這些,在這裏我先不和小夥伴說那麽多了,上面的這些已經夠大家日常使用了!最後要告訴大家的就是如果你對技術這個東西有興趣的話,就少看那些胡裏花哨的教程吧!沒事多翻翻軟件官方提供的幫助文檔 技術文檔吧!好了,我們下期分享見!

微信公衆號:米夏小雨

  • 下載

    29.06 KB

  • 收藏

    170人已收藏

米夏小雨

分享全球最新的創意靈感教程,個人微博@米夏小雨

2544粉絲/23關注

2018年度UI中國作品集入圍 TOP50誨人不倦分享帝lv.2小有名氣首頁達人
私信
用Illustrator繪制一個掌上遊戲機把12種情緒帶入角色!你pick那一種呢?
7
176****4847

好複雜...直接 sketch不更簡單。。

精彩!

米夏小雨

米夏小雨

分享全球最新的創意靈感教程,個人微博@米夏小雨

2018年度UI中國作品集入圍 TOP50誨人不倦分享帝lv.2小有名氣首頁達人
209 收藏170

掃描二維碼
去手機端查看海報

米夏小雨

TA已經獲得16枚勳章啦

  • 成就勳章

    • 特別勳章

    • 身份勳章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群衆開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了