Photoshop提取:移動圖形製作繼續加力

08年1月

什麼是提取資產

在Photoshop中創建一個comp。

Photoshop CC 2014的全新Extract Assets功能為後續繁忙的應用程序Web設計(RWD)圖像創建工作流程帶來了加力。 讓我們來看看解壓縮資產命令如何在幾分鐘內快速將網頁壓縮減少到組裝就緒資產。

讓我們從一個明顯的問題開始:什麼是提取資產?

簡單來說,Extract Assets是Photoshop中的一項新功能,它提供了Photoshop的Generator功能,並帶有一個界面,可幫助自動從Photoshop文件創建用於網頁和屏幕設計的圖像資源。 Extract Assets命令允許您定義要為其創建資產的一個或多個圖層,它們的物理大小,文件格式和磁盤上的保存位置。 此功能不適用於文本,除非打算將文本轉換為位圖,這真的不是一個好主意。

讓我們開始吧。

08年2月

打開一個Photoshop .psd文件

我們從在Photoshop中準備的網頁壓縮開始。

我使用的示例包含來自Illustrator的智能對象,一些文本,包含文本的英雄單元,圖像和按鈕以及一系列強化網站主題的戶外圖像。 這裡的關鍵是將圖層分組。 這是必要的,因為任務是將所有這些項目從comp中提取出來,以便它們可以快速添加到適合不同屏幕分辨率和大小的web佈局。

08年3月

兩種提取資產的方法

提取資源可以在“文件”菜單中找到,或右鍵單擊一個圖層。

與Generate不同,Generate通過向圖層名稱添加圖形擴展來提取對象, Extract Assets使用可以通過右鍵單擊圖層或選擇圖層並選擇File> Extract Assets來訪問的界面。

08年04月04日

提取資產界面

提取資產對話框。

“提取資源”對話框非常直觀。 您會看到要提取的圖層或選區。 在它上面顯示的文件大小和它下面的控件,允許您放大和縮小對象。 對話框的右側是魔術發生的地方。 頂部的四個按鈕允許您選擇對象的分辨率/大小。 下一個條顯示所選圖層,然後單擊+號可讓您以另一種格式輸出所選圖層。 垃圾箱從隊列中移除圖層。 在下一個分割條中,可以選擇文件類型,並且可以調整輸出圖像的寬度和高度。

08年05月05日

提取SVG圖像

提取svg圖像。

Photoshop不處理svg圖像,瀏覽器和設備無法顯示Illustrator圖像。 這導致了svg文件被用於矢量圖形的崛起,例如這裡顯示的Illustrator徽標。 作為矢量它們的分辨率與設備無關,這意味著它們可以縮放而不會損失細節或圖像。 要將Illustrator智能對象轉換為svg,請從彈出窗口中選擇svg並單擊提取

08年06月

提取資產流程

圖像放置在與.psd圖像相同的位置的文件夾中。

點擊提取按鈕時會發生一些事情。 您將首先被警告文件名稱可能會改變。 這不是什麼大問題。 然後你會被告知正在創建一個新的文件夾來保存資產。 過程完成後,與原始.psd文件放置在相同位置的文件夾將打開並顯示新資產。

08年7月

設置按鈕是你新的最好的朋友

容納設備分辨率。

點擊設置按鈕打開一個非常有用的設置對話框 。 左側的設置是比例因子。 他們所做的是創建開發人員在媒體查詢中使用的圖像的各種副本,以針對特定設備的屏幕分辨率。 例如,3x版本將針對iPhone或iPad視網膜顯示器,而1.25係數則會指向Android設備。 後綴將添加到文件名的末尾,以便開發人員輕鬆識別要在媒體查詢中使用的圖像。 完成後,單擊確定按鈕,您的選擇將在對話框中的提取資源區域中亮起。 您也可以通過點擊界面右側上提取資產區域中的齒輪圖標來訪問該設置

08年08月

整理起來

提取具有不同格式和分辨率的多個圖像。

當您單擊解壓縮按鈕時,所有資產將被創建並添加到該文件夾中。 此時,您只需要向開發人員發送該文件夾的副本並轉到下一個項目。