前端UI: 切圖仔的新技能—PS動圖製作

語言: CN / TW / HK

theme: qklhk-chocolate

開啟掘金成長之旅!這是我參與「掘金日新計劃 · 2 月更文挑戰」的第 9 天 點選檢視活動詳情

前言

真讓我有點意外,我今天也只是隨手發了一張,自己喜歡的日常生活戶型的PS合成圖,引來了一波JYM的圍觀。沒想到,這個效果圖有這麼多掘友們的喜愛,當時我也只是出於打卡的心態,發一發日常牢騷哈哈哈。有掘友說為啥我到朋友圈之後,動圖變成靜態圖了(那是因為我上傳的是webp格式,後面內容我會附帶上匯出的Gif格式圖給掘友們發朋友圈)。

還有甚者,私信我,要我趕緊出圖,😭,突然腦殼大了起來;既然如此,我就萌生了一個想法,出一波小教程,持續更新下去;我想著,PS的技能在做前端獨立完成頁面設計和圖片互動、圖示設計方面,是個大大的助攻;倒也不失為一種技能分享;此前我也懷著這樣的一個心態去學習搗鼓的,因為興趣使然,畢竟做前端,更多的是對視覺性更感興趣。

image.png

image.png

沸點地址:這個戶型我是,愛了,要存錢存到什麼時候才可以 [淚奔]

在沒有UI設計師的時候,前端想要完成獨立的專案設計,要想設計好看的頁面,真的少不了切圖仔專用的PS技能;另外一方面,在日常生活中,也是處處帶有設計,有時候空有靈感,卻止步於想象,而無法將其描繪出來;但如果我們增添多PS這一項技能,是否更助於我們的生活和工作呢?我是覺得多學一項技術是不錯的,😁;

這個動圖其實也簡單;如果感興趣可以點贊+收藏+關注+評論喲,正在參加比賽,後續仍然會在該專題下更新我更多的小創作哈哈哈

不廢話了,直接上我的小筆記;

步驟

平面深化步驟:

1,匯出平面圖為PDF格式,列印尺寸儘量選擇小的尺寸,這個你們可以自由發揮,找張網路圖做底圖,或者有功底的友們可以用procreate繪出來;

2,匯入PS進行編輯,這裡要注意大小是1:1或者3:4的畫布哦。

3,填充白色底圖後,開始拉動態貼圖擺好位置,動態貼圖PSD沒法上傳,需要可以找我🤔

4,深化平面佈置,地面材質,牆體填充,傢俱投影,哈哈這個步驟是平面圖的設計,內容太多,以後再說,去網上找一個你自己喜歡的平面圖也可以。

5,關鍵步驟來了,這裡才是我主要想說的, PS開啟→視窗→時間軸。

image.png

6,在時間軸操作頁面,按每一幀顯示內容(邏輯就是一幀為一個圖片,組合起來就是動畫),設定一下順序,上圖每幀0.1秒,重複方式為永遠。

image.png

7,點選播放鍵,預覽沒問題的話就點選左上角檔案 →匯出→儲存為 WEB所有格式,:儲存頁面選擇畫質為原稿,點選儲存(此時檔案儲存為 GIF 格式)後面重新命名為WEBP格式就可以啦。

1.png

QQ20230209-210457.gif

注意事項:

1,儘量採用1:1或者3:4比例,大小不可以超過20M,時間不要超過3秒,為了保證長寬差距不大。
2,圖片格式必須是WEBP,如果是GIF可以直接右鍵通過重新命名改名稱。

贈送

在這,因PSD檔案無法上傳,就先贈送兩張GIF(在文章最後),滿足感興趣的掘友們,hah,可以發朋友圈了; 喜歡的話,歡迎關注,我的專題欄:前端UI+繪圖;

dong.gif

因為是參賽文章,所以希望您能點贊、評論、轉發或者評論+666

補充說明

我上傳的是gif圖,但是掘金自動轉換成了webp,你可以電腦對著圖片滑鼠右鍵儲存下來,然後本地修改檔案字尾名為gif就可以了。

動圖給發朋友圈.gif

動圖2.gif

開啟掘金成長之旅!這是我參與「掘金日新計劃 · 2 月更文挑戰」的第 9 天 點選檢視活動詳情