詳情頁切片動態圖和靜態圖如何同時匯出?

之前不知道,每次都是給動態圖單獨的裁剪出來,匯出成gif格式的,來回折騰,很費事時間,忽然有一天發現,原來這麼簡單的設定一下就可以,動靜圖一起匯出來了,這裡和大家分享一下我的經驗,有問題,歡迎共同探討。

工具/原料

photoshop cs6

方法/步驟

如圖,詳情頁已經排版好了,紅色的框框中是一個動態圖片,我們接下來的操作就是如何把這個動態圖和其他圖片一起匯出來。

詳情頁切片動態圖和靜態圖如何同時匯出

如圖,選擇切片工具

詳情頁切片動態圖和靜態圖如何同時匯出

如圖,在圖片中右擊,出現了圖中的那個視窗,我們設定一下需要弄多少個同樣大小切片,這樣做可以避免手動操作,劃分不均等。

詳情頁切片動態圖和靜態圖如何同時匯出

這個數值你可以看情況而定,選擇適合的數值。

詳情頁切片動態圖和靜態圖如何同時匯出

如圖,接下來就是如何儲存,設定的步驟

詳情頁切片動態圖和靜態圖如何同時匯出

我們先把靜態圖給統一設定好,引數如圖中的紅色框框,有時間,一個一個切片檢查一下是否引數一致。

詳情頁切片動態圖和靜態圖如何同時匯出

現在我們要找到那個包含動態圖的切片,注意,動態圖那個儘量放在一個切片裡面。如圖

詳情頁切片動態圖和靜態圖如何同時匯出

如上圖我們按照螢幕大小縮放,找到動態圖所在的切片,然後點選選中,引數如圖中的紅色框框設定

詳情頁切片動態圖和靜態圖如何同時匯出

這是最後一步操作,注意要儲存為HTML和影象的格式。

詳情頁切片動態圖和靜態圖如何同時匯出

注意事項

在第6步的時候,弄好有時間就預覽一下,看看畫素是否清晰

預覽時候發現上圖和下圖的清晰度不同,你要按螢幕大小縮放,點選切片一個一個檢查一下引數看看

相關問題答案