國際噗通標準色

Lottie 是由 Airbnb 全球知名的民宿出租平台所開發的動畫解決方案，主要是因為在原生 App(iOS/Android) 上建立動畫是一件非常的困難繁瑣的事。而使用 Lottie 的話，設計師只需要在 After Effects 上製作動畫，再輸出成 JSON 格式的檔案給工程師匯入即可！ 就在 2021 年 10 月的 Adobe MAX 發表會，旗下的 UI/UX 設計工具 Adobe XD 也正式支援 Lottie 插件，加上 Figma 也早在 2020 就已支援。幾乎是確立了 Lottie 在介面設計界中的動畫地位。雖然在 Web 上可以使用 HTML5 Canvas 也有 Adobe Animate 的編輯工具可以用，但是 Canvas 主要是使用 Javascript 來產生動畫，在跨平台上就不如 Lottie，輸出檔案時也不像 Lottie 將動畫腳本單獨輸出成 JSON 檔，而 Canvas 動畫通常是和程式碼混雜在一起的。 也就是一開始就選用 Lottie 為動畫解決方案，介面設計裡的動畫就可以通用在 App 與 Web 間，或是 Lottie 有支援的裝置平台上！另外就是 Lottie 將動畫檔案化，使用 JSON 檔就像使用 GIF 動畫檔一樣容易，方便保存也方便傳輸交換。因此在 Web 網頁設計上也應該選用 Lottie 動畫為標準。 在網頁上使用 Lottie 也非常簡單，只要加載以下 js <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> 接著使用 <lottie-player> 的 html 標籤，將 Lottie Json 檔案載入 <lottie-player src="https://assets9.lottiefiles.com/datafiles/gUENLc1262ccKIO/data.json" background="transparent" speed="1" style="width: 300px; height

Adobe 影音系列的軟體，如 Premier Pro、After Effects... 都沒有繁體中文語系，但還是有簡體中文語系可以使用的，需透過修改控制台 (Console) 設定，或是修改 application.xml 檔案來達成...

Metaballs 變形球是當兩個以上球形互相靠近時，會產生沾黏與融合的效果。這在 3D 動畫界上是一個很經典的技術，做出來的動畫魔性十足。這樣有趣的效果也可以在 Photoshop 或 Illustrator 上實現喔！ Photoshop Metaballs 變形球製作方式 首先你需要製作如下圖有羽化邊緣的圖形，你可以使用向量形狀或智慧型物件上添加『高斯模糊』或『陰影』效果，也可以直接用筆刷畫 接著在圖層最上方添加一個『亮度/對比』的調整效果 調整『亮度/對比』時，請勾選『使用舊版』再調整『對比』數值，讓圖形邊緣呈現銳利平滑為止 最後複製兩個以上的圖形物件，再試著移動靠近它們。黏踢踢的變形球就完成了！ 👉 下載範例檔 Illustrator Metaballs 變形球製作方式 因為 AI 沒有對比可以調整，這裡會改用圓角正負『位移複製』讓交疊轉折處產生圓角過渡的技巧。首先先繪製兩個圖形，並將他們打群組。接著在群組上添加正負『位移複製』如下圖設定 位移距離可以隨意設定，愈高的值感應沾黏的範圍就會愈大！然後轉角設定為『圓角』，而尖角限度不用修改設定。分別做兩層位移複製，一個正數一個負數。接著在這個兩個位移複製之間添加效果『路徑管理員 -> 相加』的效果，這樣兩個物件就會自動連結起來了！ 如果想要上色的話會以群組內的第一個物件為主，不能替每個物件都上不同的顏色。 👉 下載範例檔

這篇文章將搜集一些 VSCode 的好用小技巧，例如快捷鍵的操作或是設定選項。VSCode 通常每個月都會推出新版，功能一多一雜，如果不經常使用就是很容易忘記！另外還有一些新功能是可以取代延伸模組，像這些舊插件就可以移除嘍~

以下是我根據 Adobe InDesign 16.3 (2021) 版本的「偏好設定 (CTRL+K)」選項，整理出幾個我覺得可以有效改善軟體效能與工作效率的設定方案。不妨參考看看嘍~ 開始偏好設定之前，建議先將所有文件關閉，再開始設定！不然 InDesign 有可能會針對不同文件變換不同的偏好設定，關閉文件再進行設定確保全域性設定

以下整理推薦幾個 Visual Studio Code (VSCode) 前端網頁設計開發會使用到的擴充套件（延伸模組 Extensions）這些都是我使用過後覺得必備也常用的套件，適合 Html, Sass/SCSS, JavaScript 網頁設計語法開發！

最近想要啟用 Visual Studio Code (VSCode) 的同步功能，讓公司跟家裡電腦的設定可以同步化。我是使用 Microsoft 微軟帳號登入，VSCode 會開啟瀏覽器進行登入作業，但是它開出來的網址卻是 localhost  開頭，導致無法順利登入。詢問了 Google 大神！發現這可能是瀏覽器 HSTS 強制安全傳輸轉換的問題，不管是 Chrome 或是現在的 Edge 瀏覽器都會發生...

Adobe Illustrator 可以直接使用另存新檔的方式保存成 SVG 檔案，不過存出來的檔案會有多餘的 xml 檔頭以及 AI 版本註解，比較建議使用「視窗 > 資產轉存」面板進行存檔，這樣生出來的檔案會比較精簡也更適合在網頁上瀏覽。在轉存之前，還需要修改一些設定...

Adobe Prelude 可以為你的素材毛片進行整理分類，並且可以轉檔成統一格式以及為素材設定 Metadata 元資料，方便描述素材內容類型，最後將整理好的素材進行初步剪輯上註解（粗剪 Rough Cut）再直接傳送到 Premiere Pro 進行細部剪輯（定剪 Final Cut）接下來使用說明，是基於 Adobe Prelude 9.0.2 版本為準

以下是我根據 Adobe Illustrator 25.2 (2021) 版本的「偏好設定 (CTRL+K)」選項，整理出幾個我覺得可以有效改善軟體效能與工作效率的設定方案。不妨參考看看嘍~